/*
 * 包裹電子貨架標籤系統 — 前端樣式
 *
 * 色票取自全家便利商店的品牌識別(綠 #54a857 / 藍 #37a8dc)。
 *
 * --alert 刻意維持與電子紙第三頁警報畫面相同的紅:店員在螢幕上看到的警示色
 * 若與貨架上標籤的紅底不一致,兩邊對照時會產生「這是同一件事嗎」的遲疑。
 *
 * 行動裝置是主要使用情境(郵差站在店門口單手拿手機、店員在櫃檯前),
 * 所以版面以手機優先,再往上加寬螢幕的調整。
 */

:root {
  --brand: #54a857;
  --brand-dark: #3f8442;
  --accent: #37a8dc;
  --ink: #1f2421;
  --muted: #6b7570;
  --line: #dde3df;
  --paper: #f4f6f4;
  --alert: #d02020;

  /* 觸控目標的最小高度。手機上按不到的按鈕等於沒有這個功能。 */
  --tap: 48px;
  --radius: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 16px;
  font-family: system-ui, -apple-system, "Noto Sans TC", "PingFang TC", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
  /* 避免 iOS 橡皮筋捲動時露出白邊 */
  overscroll-behavior-y: contain;
}

/* ---------- 背景 ---------- */

/*
 * 背景用 body::before 的固定圖層,不用 background-attachment: fixed ——
 * 後者在 iOS Safari 上捲動時背景會跟著跳。
 *
 * 白幕是一顆以「頂端中央」為圓心的橢圓,往外快速淡出。
 *
 * 圓心放在那裡不是構圖偏好:品牌列與標題列是整個系統唯一直接壓在背景上、
 * 沒有卡片當底的內容,而它們永遠在頂端中央。卡片自己有白底,不需要白幕,
 * 所以白幕只要護住這一圈,其餘全部讓給插圖。
 *
 * 橫向半徑 620px 是被標題列的寬度逼出來的:內容欄 560px,左端是 logo、
 * 右端是登出鈕,兩者都要落在夠白的地方。縱向半徑 420px 則可以收得很快 ——
 * 再往下就是卡片的地盤了。
 *
 * 這一顆同時服務手機與桌機:390px 的畫面上橢圓橫向蓋滿整個寬度,
 * 1536px 的畫面上它剛好是中間那一圈,兩側露出插圖原本的顏色。
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(
      620px 420px at 50% 0%,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .93) 50%,
      rgba(255, 255, 255, .5) 76%,
      rgba(255, 255, 255, 0) 100%
    ),
    url('../img/bg-store.jpg');
  /* 漸層那層給 auto(填滿整個區域),只有圖片需要 cover */
  background-size: auto, cover;
  background-position: center;
}

/* ---------- 品牌列 ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.brand img {
  height: 30px;
  width: auto;
  display: block;
  flex: none;
}

.brand .sys {
  font-size: 13px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 12px;
  /* 窄螢幕時讓系統名換行而不是把 logo 擠扁 */
  min-width: 0;
}

/* ---------- 頂列(受保護頁面的標題 + 登出) ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.topbar h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
}

.topbar .side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar .who {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

h1 { font-size: 21px; margin: 0 0 16px; }

/* ---------- 卡片 ---------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  /* 卡片現在浮在插圖上而不是平底色上,陰影要夠明確才分得出層次;
     兩層陰影(近的緊、遠的散)比單層更像紙片而不是黑框。 */
  box-shadow: 0 1px 2px rgba(31, 36, 33, .06), 0 4px 14px rgba(31, 36, 33, .07);
}

.card h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ---------- 郵差頁的步驟卡片 ---------- */

.card h2 .step-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -5px;
}

/* 掃完的步驟整張卡片換色。郵差單手拿手機、視線在包裹上,
   需要用餘光就能判斷進度,而不是低頭讀狀態文字。 */
.step.done {
  border-color: var(--brand);
  background: #f7fcf7;
}

.step.done h2 { color: var(--brand-dark); }

/* 完成時把數字換成勾勾。用 color: transparent 藏數字而不是 font-size: 0 ——
   後者會把行高算成 0,勾勾就掉到標題的下一行去。 */
.step.done h2 .step-mark {
  background: var(--brand);
  color: transparent;
}

.step.done h2 .step-mark::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
}

/* ---------- 表單元件 ---------- */

label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}

input[type="text"],
input[type="tel"],
input[type="password"] {
  font: inherit;
  /* 16px 以下 iOS Safari 會在聚焦時自動放大整個頁面,版面就跑掉了 */
  font-size: 16px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-weight: 600;
  min-height: var(--tap);
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  /* 手機上連點兩下會被當成放大手勢 */
  touch-action: manipulation;
}

button:hover:not(:disabled) { background: var(--brand-dark); }
button:disabled { background: #c3ccc6; cursor: not-allowed; }

button.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
button.secondary:hover:not(:disabled) { background: var(--paper); }

/* 登出鈕是唯一壓在背景上的按鈕,transparent 會讓它的文字直接疊在插圖上。
   給一層半透明白底:仍然低調,但永遠有底可讀。 */
button.logout {
  background: rgba(255, 255, 255, .7);
  color: var(--muted);
  border: 1px solid var(--line);
  min-height: 38px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
}

button.danger { background: var(--alert); }

/* 按鈕列:窄螢幕改成上下堆疊並各自佔滿,免得兩顆擠成細長條 */
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.actions button { flex: 1 1 160px; }

/* ---------- 狀態訊息 ---------- */

.status {
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 15px;
  /* 錯誤訊息可能很長(例如帶著原始 QR 內容),要能換行而不是撐爆容器 */
  overflow-wrap: anywhere;
}

.status.ok { background: #e9f5ea; color: #24632a; }
.status.error { background: #fbe6e6; color: #8f1717; }
.status.info { background: #e8f2f9; color: #1d5c7d; }

/* 圖示讓狀態不必只靠顏色分辨 —— 色覺障礙者與強光下的手機螢幕都受益 */
.status::before {
  font-weight: 700;
  margin-right: 6px;
}
.status.ok::before { content: '✓'; }
.status.error::before { content: '!'; }
.status.info::before { content: 'ⓘ'; }

/* ---------- 掃描框 ---------- */

.scanner {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.scanner video,
.scanner canvas,
.scanner img { max-width: 100%; height: auto; }

/* ---------- 店員頁的數字鍵盤 ---------- */

.digits {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 16px;
}

/* 三個獨立的格子而非一串底線:一眼看得出要輸入幾碼、已經填了幾碼。
   這不是裝飾,是把「預期輸入長度」這個資訊畫出來。 */
.digits .slot {
  display: grid;
  place-items: center;
  width: clamp(52px, 17vw, 64px);
  aspect-ratio: 4 / 5;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: clamp(28px, 9vw, 34px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.digits .slot.filled {
  border-color: var(--brand);
  background: #fff;
}

/* 下一個要填的格子:給一個游標般的提示,但不用動畫 —— 櫃檯前不需要閃爍 */
.digits .slot.active {
  border-color: var(--accent);
  background: #fff;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* 上限比照一般手機的鍵盤寬度並置中。不設上限的話,寬螢幕下 aspect-ratio
     會把每顆鍵撐成 230x150px 的巨大方塊,既難看也不好按。 */
  max-width: 330px;
  margin: 0 auto;
}

.keypad button {
  /* 用 aspect-ratio 而非固定高度,窄螢幕上按鍵才不會變成又扁又難按的細條 */
  aspect-ratio: 3 / 2;
  min-height: var(--tap);
  font-size: clamp(20px, 6vw, 26px);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  /* 「清除」在 320px 下會被折成兩行、把那一格撐得比其他高,整排就歪了 */
  white-space: nowrap;
}

/* 「清除」是兩個字,跟單一數字擠不進同樣的字級 */
.keypad button.clear { font-size: clamp(15px, 4.2vw, 18px); }
.keypad button:hover:not(:disabled) { background: var(--paper); }

/* ---------- 撞號命中清單 ---------- */

.match {
  border: 1px solid var(--line);
  border-left: 4px solid var(--alert);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
}

.match .name { font-size: 19px; font-weight: 700; }

.match .meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

/* 取消警報鈕:失敗時訊息會塞進按鈕文字,窄螢幕不能讓它撐爆版面 */
.match button {
  width: 100%;
  min-height: var(--tap);
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 14px;
}

/* ---------- 登入頁 ---------- */

.login-wrap {
  max-width: 380px;
  margin: 0 auto;
}

.login-wrap .brand {
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: center;
}

.login-wrap .brand img { height: 38px; }

/* 呼應全家識別的綠上藍下雙色帶 */
.login-wrap .card { position: relative; overflow: hidden; }

.login-wrap .card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(to right, var(--brand) 50%, var(--accent) 50%);
}

.login-wrap .card { padding-top: 22px; }
.login-wrap .status { margin: 0 0 14px; }

.login-wrap .brand .sys {
  border-left: 0;
  padding-left: 0;
  font-size: 14px;
}

.login-wrap button[type="submit"] { width: 100%; }

/* ---------- 寬螢幕 ---------- */

@media (min-width: 640px) {
  body { padding: 24px; }

  /* 兩個工作頁的內容天生就窄(數字鍵盤上限 330px、掃描框 360px),
     欄寬給到 720px 只會在卡片裡留下大片空白;收到 560px 讓卡片貼合內容,
     多出來的空間留給背景插圖。 */
  .page { max-width: 560px; margin: 0 auto; }

  .topbar h1, h1 { font-size: 24px; }

  .brand img { height: 34px; }

  .keypad { gap: 12px; }

  .match button { width: auto; min-width: 140px; }
}

/* 使用者要求減少動態效果時,不要用 hover 的顏色轉場干擾 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}