/* 工作平台共用主題「柔和層次」（DESIGN.md §3-6）
   來源檔：100_Todo/projects/工作平台視覺改版/theme/theme.css —— 改這裡，再跑 sync-theme.sh 複製到三套系統，不要直接改各系統的副本。
   載入順序：各系統自己的樣式表之後（才能覆蓋舊色票）。 */

:root {
  /* B 柔和層次色票 */
  --b-primary: #28635D; --b-primary-hover: #1F504B; --b-primary-soft: #E3EEEC; --b-primary-ink: #1F4F4A;
  --b-secondary: #647B82;
  --b-canvas: #F2F3F0; --b-surface: #FFFEFB; --b-rail: #EBEDE8; --b-head: #F0F2EE;
  --b-ink: #202A2C; --b-muted: #526164; --b-faint: #66726F;
  --b-line: #E1E3DE; --b-line-2: #CED3CC;
  --b-warn: #795400; --b-warn-soft: #F7EEDB;
  --b-alert: #A13D32; --b-alert-soft: #F8ECE8;
  --b-ok: #285F68; --b-ok-soft: #E6EFF1;
  --b-shadow: 0 8px 24px rgba(43, 65, 62, .09);
  --b-shadow-sm: 0 2px 8px rgba(43, 65, 62, .07);
  --b-radius: 12px; --b-radius-sm: 8px;
  --b-font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", system-ui, sans-serif;
  --rail-w: 212px; --top-h: 56px;

  /* 對應工作管理平台、證照系統的舊變數 */
  --bg: var(--b-canvas); --paper: var(--b-surface); --ink: var(--b-ink); --ink-2: var(--b-muted); --ink-3: var(--b-faint);
  --line: var(--b-line); --line-2: var(--b-line-2); --head: var(--b-head); --group: #E6EBE7;
  --primary: var(--b-primary); --primary-soft: var(--b-primary-soft); --alert: var(--b-alert); --alert-soft: var(--b-alert-soft);
  --radius: var(--b-radius-sm);
  /* 對應案件系統的舊變數 */
  --surface: var(--b-surface); --surface-2: #EBEEEA; --zebra: #F8F9F6;
  --text: var(--b-ink); --text-2: var(--b-muted); --text-muted: var(--b-faint);
  --border: var(--b-line); --border-strong: var(--b-line-2);
  --accent: var(--b-primary); --accent-bg: var(--b-primary-soft); --accent-text: var(--b-primary-ink);
  --danger: var(--b-alert); --danger-bg: var(--b-alert-soft);
  --warn-bg: var(--b-warn-soft); --warn-text: var(--b-warn);
  --ok-bg: var(--b-ok-soft); --ok-text: var(--b-ok);
  color-scheme: light;
}
html, body { font-family: var(--b-font); }
body { background: var(--b-canvas); color: var(--b-ink); }
input, select, textarea, button { font-family: inherit; }
.num, .tabnum, .digits { font-variant-numeric: tabular-nums; }

/* ---------- 版面骨架：上方頂欄＋左側導覽＋內容 ---------- */
body.shell { margin: 0; min-height: 100vh; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: var(--top-h) 1fr; }
.sh-top {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 40; height: var(--top-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 20px 0 10px;
  background: var(--b-surface); border-bottom: 1px solid var(--b-line);
}
.sh-toggle {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--b-muted);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.sh-toggle:hover { background: var(--b-rail); color: var(--b-primary); }
.sh-toggle svg { width: 20px; height: 20px; }
.sh-brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--b-ink); white-space: nowrap; text-decoration: none; }
.sh-brand img { width: 28px; height: 28px; flex: none; }
.sh-brand .ver { font-size: 11px; font-weight: 600; color: var(--b-faint); }
.sh-who { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--b-muted); white-space: nowrap; }
.sh-who a, .sh-who button { color: var(--b-muted); }

.sh-rail {
  position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); box-sizing: border-box; overflow-y: auto;
  padding: 18px 12px; background: var(--b-rail); border-right: 1px solid var(--b-line);
  display: flex; flex-direction: column; gap: 10px;
}
.sh-sys { font-size: 12px; font-weight: 700; color: var(--b-faint); letter-spacing: .04em; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-nav { display: flex; flex-direction: column; gap: 3px; margin: 0; overflow: visible; }
.sh-nav .tab {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left;
  padding: 7px 10px; min-height: 42px; border: 0; border-radius: 10px; background: transparent;
  color: var(--b-muted); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; position: relative;
  border-bottom: 0 !important;
}
.sh-nav .tab::before {
  content: attr(data-short); flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: #E1E6E1; color: var(--b-primary);
}
.sh-nav .tab:hover { background: rgba(255, 254, 251, .6); color: var(--b-ink); }
.sh-nav .tab.active, .sh-nav .tab[aria-selected="true"] { background: var(--b-surface); color: var(--b-primary); font-weight: 700; box-shadow: var(--b-shadow-sm); }
.sh-nav .tab.active::before, .sh-nav .tab[aria-selected="true"]::before { background: var(--b-primary); color: #fff; }
.sh-nav .tab .badge { margin-left: auto; }
.sh-main { min-width: 0; }

/* 收合：只留圖示列 */
body.rail-collapsed { --rail-w: 64px; }
body.rail-collapsed .sh-rail { padding: 18px 8px; }
body.rail-collapsed .sh-sys { visibility: hidden; height: 0; padding: 0; }
body.rail-collapsed .sh-nav .tab { font-size: 0; gap: 0; justify-content: center; padding: 7px 0; }
body.rail-collapsed .sh-nav .tab .badge { position: absolute; top: 2px; right: 4px; font-size: 10px; min-width: 14px; line-height: 14px; padding: 0 3px; }

/* 手機：導覽改成頂欄下方可橫滑的一列 */
@media (max-width: 760px) {
  body.shell { display: block; }
  .sh-top { padding: 0 12px; }
  .sh-toggle { display: none; }
  .sh-brand { font-size: 15px; }
  .sh-brand { gap: 6px; min-width: 0; overflow: hidden; }
  .sh-brand img { width: 24px; height: 24px; }
  .sh-who { gap: 4px; font-size: 12px; flex: none; }
  .sh-who .uname, .sh-who .role-tag, .sh-who .role-pill, .sh-who > span:not(.btn) { display: none; }
  .sh-who .btn, .sh-who a, .sh-who button { padding: 3px 7px !important; min-height: 28px; font-size: 12px !important; white-space: nowrap; }
  .sh-rail { position: static; height: auto; overflow-x: auto; overflow-y: hidden; padding: 6px 10px; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--b-line); }
  .sh-sys { display: none; }
  .sh-nav { flex-direction: row; gap: 4px; }
  .sh-nav .tab { width: auto; min-height: 36px; padding: 6px 12px; font-size: 14px !important; }
  .sh-nav .tab::before { display: none; }
  body.rail-collapsed { --rail-w: 0px; }
  body.rail-collapsed .sh-nav .tab { justify-content: flex-start; padding: 6px 12px; }
}
@media print {
  body.shell { display: block; background: #fff; }
  .sh-top, .sh-rail { display: none !important; }
}

/* ---------- 共用元件 ---------- */
.btn { border-radius: 9px; }
.btn.primary, .btn-primary { background: var(--b-primary); border-color: var(--b-primary); color: #fff; }
.btn.primary:hover, .btn-primary:hover { background: var(--b-primary-hover); border-color: var(--b-primary-hover); color: #fff; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .sh-nav .tab:focus-visible, .sh-toggle:focus-visible { outline: 2px solid var(--b-primary); outline-offset: 1px; box-shadow: none; }
input, select, textarea { border-radius: 9px; }
/* 卡片：細框改柔和陰影 */
.b-card, .card, .box, .panel, .case-card, .auth-card { background: var(--b-surface); border: 1px solid transparent; border-radius: var(--b-radius); box-shadow: var(--b-shadow); }
.b-eyebrow { font-size: 12px; color: var(--b-faint); letter-spacing: .05em; margin: 0 0 2px; }