/* ═══════════════════════════════════════════════════════════
   Jarvis 設計 token — 所有顏色、圓角、陰影的唯一來源。

   為什麼需要: 這個系統是分很多批疊上來的, 每一頁各自發明配色, 最後有 56 種
   十六進位色 (光是淺灰就 8 種、橘 3 種、藍 2 種)。使用者感覺到的「不像同一
   個產品」就是從這裡來的。

   規則: 頁面裡不要再寫死 #hex — 用 var(--...)。要新增顏色先問這裡有沒有。

   視覺語言 (2026-07 Apple 化): 中性灰階 + 單一藍色主色、霜玻璃導覽、
   膠囊按鈕、大圓角、柔陰影。層次靠留白與陰影, 不靠粗框線。
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 底層 — Apple 系中性灰, 不帶藍調 */
  --bg:            #f5f5f7;   /* 頁面背景 */
  --surface:       #ffffff;   /* 卡片/表格 */
  --surface-2:     #fafafa;   /* 內嵌區塊、表頭 */
  --surface-3:     #ececf0;   /* 標籤底色、次要按鈕 */

  /* 線 — 髮絲級, 存在感低 */
  --border:        #e8e8ed;
  --border-strong: #d2d2d7;

  /* 字 */
  --text:          #1d1d1f;
  --text-muted:    #515154;
  --text-subtle:   #86868b;
  --on-accent:     #ffffff;

  /* 語意色 — 每個只有一種, 加上一個淺色底 */
  --primary:       #0071e3;   /* 主操作、品牌 (唯一的藍) */
  --primary-tint:  #eaf3ff;
  --success:       #1d8a3d;   /* 完成 */
  --success-tint:  #e6f6ea;
  --danger:        #d70015;   /* 逾期、異常、危險操作 */
  --danger-tint:   #ffebec;
  --warn:          #c05000;   /* 停工、待處理 */
  --warn-tint:     #fff3e8;
  --info:          #0071e3;   /* 進行中、資訊 (與主色同一支藍 — 只有一種藍) */
  --info-tint:     #eaf3ff;
  --accent:        #d81b60;   /* 插單 (刻意稀有) */
  --accent-tint:   #fce8f0;

  /* 形狀 — 只有三段, 不要再發明 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* 陰影 — 柔而大, 取代粗框線的層次感 */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.09);

  /* 手機可點的最小高度 (現場戴手套也按得到) */
  --tap: 44px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Noto Sans TC", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.015em; }
h1 { font-weight: 700; }

/* 導覽列 — 霜玻璃: 半透明白 + 背景模糊, 捲動時黏在頂端 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 11px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar .brand { font-weight: 700; font-size: 1.05em; color: var(--text); }
.topbar a {
  color: var(--text-muted);
  text-decoration: none;
  margin-left: 4px;
  font-size: 0.95em;
  padding: 6px 13px;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.topbar a:hover { color: var(--text); }
/* 「你在這裡」— 當前頁的導覽項變成深色膠囊, 一眼定位 */
.topbar a.nav-on {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}
.topbar a.nav-on:hover { color: var(--bg); }
.topbar .user-email { font-size: 0.88em; color: var(--text-subtle); margin-left: 14px; }
.topbar .nav-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 14px;
  background: var(--border-strong);
  vertical-align: middle;
}
/* 需要注意的數字徽章 — 0 件時整顆不渲染 (base.html 控制) */
.nav-badge {
  display: inline-block;
  background: var(--danger);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 0 7px;
  margin-left: 5px;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 1px;
}
/* 管理後台分頁列 — segmented control (整條淺灰膠囊, 選中的那格浮起來) */
.admin-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-3);
  border-radius: 999px;
  padding: 3px;
  margin: 14px 0 20px;
}
.admin-tabs a {
  padding: 7px 20px;
  text-decoration: none;
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 0.95em;
  transition: color .15s;
}
.admin-tabs a.tab-on {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.main-content { max-width: 1200px; margin: 28px auto; padding: 0 16px; }

/* view-as 下拉 — 導覽列裡的小膠囊選單 */
.viewas-form { display: inline-block; margin-left: 14px; }
.viewas-form select {
  width: auto;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
}

/* 檢視模式提示條 — 琥珀色, 全程置頂於內容之上 */
.viewas-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--warn-tint);
  color: var(--warn);
  border-bottom: 1px solid var(--warn);
  padding: 8px 16px;
  font-size: 0.9em;
  font-weight: 600;
}
.viewas-bar form { margin: 0; }
.viewas-bar button {
  border: none;
  border-radius: 999px;
  background: var(--warn);
  color: var(--on-accent);
  padding: 4px 14px;
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 600;
  cursor: pointer;
}

.login-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 44px;
  max-width: 400px;
  margin: 80px auto;
  text-align: center;
  box-shadow: var(--shadow-2);
}
.login-box h1 { margin-bottom: 8px; }
.login-box .note { color: var(--text-subtle); font-size: 0.85em; margin-top: 16px; }

.task-page header {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.task-page h1 { margin: 0 0 6px; font-size: 1.4em; }
.subtitle { color: var(--text-muted); margin: 0 0 8px; font-size: 1.05em; }
.meta { color: var(--text-subtle); font-size: 0.9em; margin: 0; }

/* 按鈕 — 膠囊形。主按鈕實色藍, 次要按鈕淺灰無框 (Apple 的兩層階) */
.btn {
  display: inline-block;
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: filter .15s, transform .1s, opacity .15s;
}
.btn:hover { filter: brightness(0.96); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--on-accent); }
.btn-success { background: var(--success); color: var(--on-accent); }
.btn-danger { background: var(--danger); color: var(--on-accent); }

textarea, select, input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: inherit;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
textarea:focus, select:focus, input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.16);
}
textarea { resize: vertical; min-height: 100px; }
label { display: block; font-weight: 600; margin: 16px 0 4px; color: var(--text-muted); }

.alert { padding: 12px 16px; border-radius: var(--r-sm); margin: 12px 0; }
.alert-warn { background: var(--warn-tint); border: 1px solid var(--warn); }
.alert-success { background: var(--success-tint); border: 1px solid var(--success); }

.hint { color: var(--text-subtle); font-size: 0.85em; margin: 4px 0; }
.actions { margin-top: 16px; }

.status-msg {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
}
.status-msg.success { background: var(--success-tint); color: var(--success); }
.status-msg.error { background: var(--danger-tint); color: var(--danger); }

/* Review layout */
.review-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
}
.left-panel, .right-panel {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-1);
}
.right-panel section { margin-bottom: 24px; }
.right-panel h3 { margin-top: 0; }

.copy-text {
  background: var(--surface-2);
  padding: 12px;
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.95em;
}
.copy-display { margin: 12px 0; }

.canvas-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
#review-image {
  display: block;
  max-width: 100%;
  height: auto;
}
#annotation-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: auto;
}

.image-preview, .image-display { max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); margin-top: 8px; }

.annotation-list { list-style: none; padding: 0; margin: 0; }
.annotation-item {
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
}
.annotation-item.resolved { opacity: 0.5; }
.annotation-item.post { border-left-color: var(--success); }
.ann-header {
  display: flex;
  gap: 8px;
  font-size: 0.85em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ann-comment { margin: 4px 0; }
.ann-region { color: var(--text-subtle); font-size: 0.75em; }

.decision-form, .assign-form, .post-comment-form {
  background: var(--surface-2);
  padding: 12px;
  border-radius: var(--r-sm);
}
.decision-buttons { margin-top: 8px; display: flex; gap: 8px; }

/* Status colors */
.status-NEW { color: var(--text-subtle); }
.status-COPY_REVIEW, .status-FINAL_REVIEW { color: var(--warn); font-weight: bold; }
.status-COPY_REVISION, .status-NEEDS_REVISION { color: var(--danger); font-weight: bold; }
.status-DESIGN_PENDING, .status-DESIGN_IN_PROGRESS, .status-DESIGN_HANDOFF { color: var(--info); font-weight: bold; }
.status-COMPLETED { color: var(--success); font-weight: bold; }
.status-CANCELLED, .status-BLOCKED { color: var(--danger); }

/* Mobile */
@media (max-width: 768px) {
  .review-layout { grid-template-columns: 1fr; }
  #annotation-canvas { display: none; }  /* Mobile read-only canvas */
  .topbar .user-email { display: none; }
  .topbar { flex-wrap: wrap; }
}

/* ─── Admin UI ───────────────────────────────────────── */
.admin-page { max-width: 1100px; margin: 20px auto; padding: 0 20px; }
.admin-page h1 { margin-bottom: 8px; }
.admin-page .meta { color: var(--text-subtle); margin-bottom: 24px; font-size: 0.9em; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; }
.admin-card {
  display: block;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: box-shadow .2s, transform .2s;
}
.admin-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.admin-card h3 { margin: 0 0 8px; font-size: 1.05em; }
.admin-card .big { font-size: 2.4em; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0; color: var(--text); }
.admin-card p { margin: 0; color: var(--text-muted); font-size: 0.85em; }

.action-panel { background: var(--surface); border: 1px solid var(--border); padding: 18px; border-radius: var(--r-md); margin-top: 24px; box-shadow: var(--shadow-1); }
.action-panel h3 { margin-top: 0; }
.action-panel form { margin-top: 12px; display: flex; gap: 12px; align-items: center; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.data-table th, .data-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9em; }
.data-table th { background: var(--surface-2); font-weight: 600; color: var(--text-muted); }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table code { background: var(--surface-3); padding: 2px 6px; border-radius: var(--r-sm); font-size: 0.85em; }

.vform { display: flex; flex-direction: column; gap: 8px; max-width: 600px; margin-top: 16px; }
.vform label { font-weight: 600; margin-top: 8px; font-size: 0.9em; }
.vform input[type=text], .vform input[type=email], .vform input[type=date],
.vform select, .vform textarea { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 1em; font-family: inherit; }
.vform input[readonly] { background: var(--surface-2); color: var(--text-subtle); }
.vform button { margin-top: 16px; align-self: flex-start; }

.msg { padding: 10px 14px; border-radius: var(--r-sm); margin: 12px 0; }
.msg.success { background: var(--success-tint); color: var(--success); border: 1px solid var(--success); }
.msg.error { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); }

/* ═══════════════════════════════════════════════════════════
   共用元件 — 之前每一頁各自重寫一次 (工作台的 .tag、異常中心的 .pill、
   報表的 .chip、案件頁的徽章…), 尺寸與圓角都差一點點, 看起來就是拼湊的。
   統一放這裡, 頁面只負責語意 class。
   ═══════════════════════════════════════════════════════════ */

/* 標籤 — 小塊資訊 (到期日、數量、狀態) */
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.8em;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
}
.tag-danger  { background: var(--danger-tint);  color: var(--danger);  font-weight: 700; }
.tag-warn    { background: var(--warn-tint);    color: var(--warn);    font-weight: 700; }
.tag-success { background: var(--success-tint); color: var(--success); font-weight: 700; }
.tag-info    { background: var(--info-tint);    color: var(--info);    font-weight: 700; }
.tag-accent  { background: var(--accent-tint);  color: var(--accent);  font-weight: 700; }

/* 計數徽章 — 區塊標題旁 */
.badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-accent);
  font-size: 0.78em;
  font-weight: 700;
  text-align: center;
}
.badge-danger { background: var(--danger); }
.badge-mute   { background: var(--border-strong); color: var(--text-muted); }

/* 列 — 工作台/異常中心/佇列共用的「一件事一列」 */
.row-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin-bottom: 9px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: box-shadow .2s;
}
a.row-card:hover { box-shadow: var(--shadow-2); }
a.row-card:active { background: var(--surface-2); }
.row-card-primary { border-left-color: var(--primary); }
.row-card-danger  { border-left-color: var(--danger); }
.row-card-warn    { border-left-color: var(--warn); }
.row-card-accent  { border-left-color: var(--accent); }
.row-card-mute    { border-left-color: var(--border-strong); background: var(--surface-2); }

/* 區塊卡片 — 頁面內容分區裝進白卡, 不要讓表格/文字直接浮在灰底上。
   標題列 + 幾張 .sec-card = 每一頁的基本骨架。 */
.sec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
}
.sec-card > h3:first-child, .sec-card > h2:first-child { margin-top: 0; }
.sec-card .data-table, .sec-card .rpt-table { box-shadow: none; }

/* 觀測數字格 — 報表頂部「今天健不健康」一排數字 */
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin: 6px 0 12px;
}
.pulse {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 12px 8px;
  text-align: center;
}
.pulse-n { display: block; font-size: 1.7em; font-weight: 700; letter-spacing: -0.02em; }
.pulse-l { display: block; font-size: 0.78em; color: var(--text-muted); margin-top: 2px; }
.pulse-warn { background: var(--warn-tint); }
.pulse-warn .pulse-n { color: var(--warn); }
.pulse-login { margin: 8px 0 4px; font-size: 0.92em; }

/* 空狀態 — 沒東西時也要像設計過的 */
.empty-state {
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 20px;
  text-align: center;
  margin: 0;
}

/* 區塊標題 */
.section-title {
  font-size: 1.05em;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 篩選用膠囊連結 */
.chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 0.9em;
  margin-right: 6px;
  transition: background .15s, color .15s;
}
.chip:hover { background: var(--surface-3); }
.chip-on { background: var(--primary); color: var(--on-accent); border-color: var(--primary); }
.chip-on:hover { background: var(--primary); }

/* 手機: 可點目標放大到現場戴手套也按得到 */
@media (max-width: 640px) {
  .btn { padding: 13px 20px; min-height: var(--tap); }
  .row-card { padding: 15px; }
  .main-content { margin: 14px auto; }
}

/* 麵包屑 — 之前每頁自己寫「← 首頁」「← 後台」「← 回 Dashboard」六種說法,
   指的其實是同一件事。統一命名與樣式, 使用者才建立得起位置感。 */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  font-size: 0.9em;
  color: var(--text-subtle);
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
/* 麵包屑裡的按鈕: 上面的連結色規則會蓋掉 .btn-primary 的白字 (深底深字看不見),
   hover 更慘 — 深藍字配深藍底整顆隱形。按鈕永遠白字。 */
.crumbs a.btn-primary,
.crumbs a.btn-primary:hover { color: var(--on-accent); text-decoration: none; }
.crumbs .sep { color: var(--border-strong); }
.crumbs .here { color: var(--text); font-weight: 600; }