/* ══════════════════════════════════════════════════════════════════════════
   設計系統（Swiss Modernism 2.0 × ui-ux-pro-max 指引）

   色彩原則：
   · 語意色（--primary / --danger / --success / --warning）只用在「需要被注意
     的訊息」或「互斥分類標籤」，其餘裝飾一律灰階。
   · ink 色票（--ink-*）屬側邊欄 / 登入頁，內容區永遠用淺色。

   字級階梯（大→小）：
   · .page-title 1.75rem 800 → .section-title 1.1rem 700 →
     .card h2 1rem 700 → body 15px 400 → .form-hint .74rem

   按鈕語意：
   · .btn-primary（主要動作）/ .btn-outline（次要）/ .btn-warning（需注意）/ .btn-danger（破壞性）
   · .link / .link-danger / .link-quiet（行內藥丸操作）
   · .link-plain（純內容參照連結，不套藥丸）

   互動時序（ui-ux-pro-max §7 Animation）：
   · 微互動：150ms ease-out；展開 / 頁面切換：200–280ms cubic-bezier
   · Focus ring：outline 2px solid --primary offset 2px（WCAG AA 保證可見）

   不使用裝飾性 emoji／icon——層次靠字級、字重、色彩、留白、邊框表達。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 全站 hidden helper — 大量模板透過 classList.toggle('hidden') 做互動，不可移除 */
.hidden, [hidden] { display: none !important; }

:root {
  /* ── Backgrounds ── */
  --bg:       #EBF0FA;
  --surface:  #FFFFFF;
  --surface2: #F5F8FE;

  /* ── Borders ── */
  --border:       #DDE5F4;
  --border-s:     #C4D0E8;
  --border-light: #EEF3FB;

  /* ── Brand blue：Swiss flat（按鈕不用漸層，直接鋪色） ── */
  --primary:    #2563EB;
  --primary-h:  #1D4ED8;
  --primary-d:  #1E40AF;
  --primary-xs: rgba(37,99,235,.06);
  --primary-sm: rgba(37,99,235,.13);

  /* ── Ink palette（側邊欄 / 登入頁 hero 專用深色） ── */
  --ink-900:    #0D1027;
  --ink-800:    #14182E;
  --ink-700:    #1F2344;
  --ink-border: rgba(255,255,255,.15);
  --ink-text:   #B8BCDA;
  --ink-text-h: #FFFFFF;
  --ink-label:  #626585;

  /* ── Semantic colours ── */
  --danger:        #DC2626;
  --danger-h:      #B91C1C;
  --success:       #16A34A;
  --warning:       #D97706;
  --success-text:  #15803D; /* 綠／橘當「文字色」時用深一階，淺底上才讀得清楚 */
  --warning-strong: #B45309;
  --accent-purple: #7C3AED;
  --accent-pink:   #DB2777;

  /* ── 提示框語意色（.notice／.alert-warning／.error-bar 共用） ── */
  --info-bg:        #EFF6FF;
  --info-border:    #BFDBFE;
  --info-text:      #1E40AF;
  --warning-bg:     #FFFBEB;
  --warning-border: #FDE68A;
  --warning-text:   #92400E;
  --danger-bg:      #FEF2F2;
  --danger-border:  #FECACA;
  --danger-text:    #991B1B;

  /* ── Typography ── */
  --text:     #0F172A;
  --text-med: #1E293B;
  --sub:      #475569;
  --hint:     #5B6A80;  /* 次要說明文字：白底 5.5:1、頁面底色 4.8:1（WCAG AA） */
  --hint-line: #94A3B8; /* 非文字的淡色（捲軸、去強調圖形、placeholder） */

  /* ── Shape ── */
  --radius:    10px;
  --radius-sm:  7px;
  --radius-lg: 16px;

  /* ── Elevation（Swiss：有深度，不誇張） ── */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.07);
  --shadow:    0 2px 8px rgba(15,23,42,.07), 0 16px 40px rgba(15,23,42,.10);
  --shadow-lg: 0 8px 20px rgba(15,23,42,.09), 0 40px 80px rgba(15,23,42,.14);

  /* ── Layout dimensions ── */
  --nav-h:     56px;
  --subnav-h:  44px;
  --sidebar-w: 240px;
}

body {
  font-family: "Inter", "Noto Sans TC", "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";      /* Inter stylistic sets：更銳利的數字/字符 */
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* ── Scrollbar（細、低調，不搶焦點） ─────────────────────────────────────────── */
html { scrollbar-width: thin; scrollbar-color: var(--border-s) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-s); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--hint-line); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Focus ring（全站一致，WCAG AA 2px offset） ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── HTMX indicator ───────────────────────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease; }
.htmx-request .htmx-indicator { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAV（supervisor / worker 使用的頂部導覽列）
   ═══════════════════════════════════════════════════════════════════════════ */
.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-xs);
}

.nav-brand {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.025em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 28px;
}

/* ── Subnav（模組內第二層分頁籤） ───────────────────────────────────────────── */
.subnav {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: var(--subnav-h);
  position: sticky;
  top: var(--nav-h);
  z-index: 49;
}
.subnav-link {
  padding: 0 14px;
  height: 32px;
  margin: 0 2px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--sub);
  font-size: .82rem;
  font-weight: 500;
  transition: color .15s, background-color .15s;
  white-space: nowrap;
}
.subnav-link:hover  { color: var(--text); background: var(--surface); }
.subnav-link.active { color: var(--primary); font-weight: 700; background: var(--primary-xs); }

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR（admin 專屬左側導覽，深色 ink 語言，與登入頁 hero 一致）
   ═══════════════════════════════════════════════════════════════════════════ */
body.has-sidebar { display: flex; min-height: 100vh; align-items: stretch; }
.shell-main { flex: 1; min-width: 0; overflow-x: hidden; }

/* 深色側邊欄：負責結構感與品牌感，色彩豐富度留給內容區。
   內部收斂飽和度，只有 active 狀態允許用主色搶眼。 */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(170deg, var(--ink-900) 0%, var(--ink-800) 55%, var(--ink-700) 100%);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  box-shadow: 2px 0 24px rgba(0,0,0,.20), inset -1px 0 0 var(--ink-border);
}

.sidebar-brand {
  display: block;
  padding: 22px 20px 16px;
  font-size: .97rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink-text-h);
  border-bottom: 1px solid var(--ink-border);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-border) transparent;
}
.sidebar-group { margin-bottom: 10px; }
.sidebar-group + .sidebar-group {
  border-top: 1px solid var(--ink-border);
  padding-top: 10px;
}
.sidebar-group-label {
  padding: 0 10px 5px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-text-h);
}
/* 頁尾一列：姓名（點開個人選單）＋設定齒輪；彈出選單以整個頁尾為基準定位，不會超出側邊欄 */
.sidebar-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-user-btn {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  background: none; border: none; cursor: pointer; padding: 5px 8px; margin-left: -8px;
  border-radius: var(--radius-sm); color: var(--ink-text-h); font: inherit; font-size: .84rem;
  transition: background-color .14s;
}
.sidebar-user-btn strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-btn:hover { background: var(--ink-border); }
.sidebar-user-btn.active strong { color: var(--primary); }
.sidebar-user-caret { font-size: .7rem; color: var(--ink-text); }
.settings-gear-btn {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--ink-text); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .14s, color .14s;
}
.settings-gear-btn:hover { background: var(--ink-border); color: var(--ink-text-h); }
.settings-gear-btn.active { color: var(--primary); }
.settings-popover {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 10px; right: 10px;
  background: var(--ink-800, #1e293b); border: 1px solid var(--ink-border);
  border-radius: var(--radius); padding: 4px; min-width: 152px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35); z-index: 200;
}
.settings-popover.open { display: block; }
.settings-popover-link {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 500; color: var(--ink-text);
  transition: background-color .14s, color .14s;
}
.settings-popover-link:hover { background: var(--ink-border); color: var(--ink-text-h); }
.settings-popover-link.active { color: var(--primary); font-weight: 600; }
.settings-popover-sep { border: none; border-top: 1px solid var(--ink-border); margin: 4px 2px; }
.settings-popover-section-label { display: block; padding: 5px 10px 2px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); opacity: .7; }
.settings-popover-trash { opacity: .65; }
.settings-popover-trash:hover { opacity: 1; }
.sidebar-link {
  display: block;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  font-size: .855rem;
  font-weight: 500;
  color: var(--ink-text);
  transition: background-color .14s, color .14s;
  cursor: pointer;
}
.sidebar-link:hover  { background: var(--ink-border); color: var(--ink-text-h); }
.sidebar-link.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.5), 0 2px 12px rgba(37,99,235,.4);
}
.sidebar-link-sub {
  display: block;
  padding: 5px 10px 5px 22px;
  margin: 0;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 400;
  color: #8E92B0;
  transition: background-color .14s, color .14s;
}
.sidebar-link-sub:hover { background: var(--ink-border); color: var(--ink-text); }
.sidebar-link-sub.active { color: var(--primary); font-weight: 600; }
.sidebar-link-sub + .sidebar-link { margin-top: 5px; }

.sidebar-footer {
  position: relative;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--ink-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Mobile：側邊欄 off-canvas 抽屜（漢堡按鈕展開，點背景關閉） */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }
.admin-topbar { display: none; }       /* 桌面版隱藏，行動版才出現 */

@media (max-width: 860px) {
  /* Admin 行動版頂部欄：取代懸浮漢堡按鈕，消除內容上方的大空白 */
  .admin-topbar {
    display: flex; align-items: center;
    position: fixed; top: 0; left: 0; right: 0;
    height: 48px; z-index: 202;
    background: var(--ink-900);
    padding: 0 14px 0 2px;
    gap: 8px;
    box-shadow: 0 1px 12px rgba(0,0,0,.35);
  }
  .admin-topbar-brand {
    flex: 1; color: var(--ink-text-h); font-size: .88rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 漢堡按鈕（已移入頂部欄，不再懸浮） */
  .sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: none; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--ink-text); flex-shrink: 0;
    transition: background .14s;
  }
  .sidebar-toggle:hover { background: var(--ink-700); }

  /* 半透明遮罩 */
  .sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.48); z-index: 200;
  }
  body.sidebar-open .sidebar-backdrop { display: block; }

  /* body 切回 block（sidebar 改走 fixed overlay） */
  body.has-sidebar { display: block; }

  /* off-canvas 抽屜本體 */
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 220px; height: 100vh;
    z-index: 201;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    flex-direction: column; align-items: stretch;
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  /* 還原為直向佈局（覆蓋橫向覆寫） */
  .sidebar-brand { padding: 22px 20px 16px; border-bottom: 1px solid var(--ink-border); flex-shrink: 0; }
  .sidebar-nav { display: flex; flex-direction: column; flex: 1; padding: 10px 10px 14px; overflow-x: unset; }
  .sidebar-group { display: block; margin-bottom: 10px; flex-shrink: unset; }
  .sidebar-group + .sidebar-group { border-top: 1px solid var(--ink-border); padding-top: 10px; }
  .sidebar-group-label { display: block; }
  .sidebar-link { white-space: normal; }
  .sidebar-link-sub { white-space: normal; padding-left: 22px; }
  .sidebar-link-sub + .sidebar-link { margin-top: 5px; }

  .sidebar-footer { padding: 12px 18px 14px; border-top: 1px solid var(--ink-border); flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.page      { max-width: 900px;  margin: 0 auto; padding: 28px 20px 80px; }
.page-wide { max-width: 1200px; }
/* 大螢幕（1600 以上）：資料頁多利用一點寬度，表格不用擠、兩側不留大片空白 */
@media (min-width: 1600px) { .page-wide { max-width: 1440px; } }
@media (min-width: 2200px) { .page-wide { max-width: 1680px; } }

/* ── Hero（首頁 / 搜尋入口） ──────────────────────────────────────────────── */
.hero {
  padding: 0 0 32px;
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 14px;
}
.hero p {
  font-size: .95rem;
  color: var(--sub);
  max-width: 430px;
  margin: 0 auto 32px;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH FORM
   ═══════════════════════════════════════════════════════════════════════════ */
.search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  text-align: left;
}
.search-form  { margin-bottom: 14px; }
.search-row   { display: flex; gap: 8px; flex-wrap: wrap; }

.search-input {
  flex: 1 1 280px;
  padding: 11px 16px;
  font-size: .97rem;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.search-input::placeholder { color: var(--hint-line); }
.search-input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-sm);
}

.search-select {
  padding: 11px 14px;
  font-size: .9rem;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.search-select:focus { border-color: var(--primary); background: var(--surface); }

.search-btn {
  padding: 11px 26px;
  background: var(--primary);
  color: #fff;
  font-size: .94rem;
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .15s;
  box-shadow: 0 1px 3px rgba(37,99,235,.3), 0 4px 16px rgba(37,99,235,.2);
}
.search-btn:hover {
  background: var(--primary-h);
  box-shadow: 0 4px 16px rgba(37,99,235,.45);
  transform: translateY(-1px);
}
.search-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(37,99,235,.3); }

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sug-label { font-size: .74rem; color: var(--hint); white-space: nowrap; }
.sug-btn {
  background: none;
  border: 1.5px solid var(--border);
  color: var(--sub);
  padding: 4px 13px;
  border-radius: 999px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sug-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-xs);
}

.hint { color: var(--hint); font-size: .82rem; margin-top: 14px; text-align: center; }

/* ── Tab bar（分頁切換，通用） ──────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  /* 分頁多、畫面窄時可以左右滑，不會把最後一個分頁擠出畫面 */
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar > * { flex-shrink: 0; }
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 16px;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--sub);
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-btn:hover:not(.active) { color: var(--text-med); }

/* ── Price stat card（搜尋結果統計欄） ─────────────────────────────────────── */
.price-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 16px;
  min-width: 160px;
  flex: 1 1 160px;
}
.price-stat-line { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.price-stat-mid  { font-size: 1.15rem; font-weight: 700; color: var(--primary); }
.price-stat-range { font-size: .72rem; color: var(--hint); margin-top: 3px; }
.price-stat-count { font-size: .72rem; color: var(--sub); margin-top: 2px; }

/* ── Confidence colours（估價信心等級） ─────────────────────────────────────── */
.conf-high   { color: var(--success-text); }
.conf-medium { color: var(--warning-strong); }
.conf-low    { color: var(--danger); }
.conf-none   { color: var(--hint); }

/* ── Site header（結果頁標題） ──────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow); }
.card h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }

.card-compact { padding: 16px 18px; }

/* ── Estimate result card ──────────────────────────────────────────────────── */
.suggestion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.suggestion-header h2 { margin-bottom: 0; font-size: 1.1rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .03em;
}
.badge-high   { background: #16a34a; }
.badge-medium { background: #d97706; }
.badge-low    { background: #dc2626; }

.suggestion-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 16px;
}
@media (max-width: 640px) { .suggestion-stats { grid-template-columns: repeat(2, 1fr); } }

.stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.stat:hover { border-color: var(--primary); box-shadow: var(--shadow-xs); }
.stat-label {
  font-size: .73rem;
  color: var(--sub);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.stat-value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: .77rem; color: var(--hint); margin-top: 3px; }

.range-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.range-pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--sub);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .8rem;
  white-space: nowrap;
}

.low-confidence-note {
  margin-top: 16px;
  padding: 11px 16px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  color: #92400e;
  font-size: .87rem;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.empty-card { color: var(--sub); }

/* ═══════════════════════════════════════════════════════════════════════════
   TAGS / STATUS BADGES / PILLS
   ═══════════════════════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.tag-fixed   { background: #ecfdf5; color: #065f46; }
.tag-source  { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.tag-lump    { background: #eff6ff; color: #1e40af; }
.tag-labor   { background: #fffbeb; color: #92400e; }
.tag-weight  { background: #f5f3ff; color: #5b21b6; }
.tag-unit    { background: #eff6ff; color: #1e40af; }
.tag-ref     { background: #f9fafb; color: #6b7280; }
.tag-pending { background: #fef2f2; color: #991b1b; }
.tag-unknown { background: #f9fafb; color: #9ca3af; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: .76rem;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.status-done       { background: #ecfdf5; color: #065f46; }
.status-incomplete { background: #fef2f2; color: #991b1b; }
.status-inferred   { background: #f1f5f9; color: #475569; }
.status-unknown    { background: #f8fafc; color: var(--hint); }

/* 軟色狀態 pill */
.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .73rem; font-weight: 600; white-space: nowrap; }
.pill-green  { background: #dcfce7; color: #166534; }
.pill-blue   { background: #dbeafe; color: #1e40af; }
.pill-yellow { background: #fef9c3; color: #854d0e; }
.pill-gray   { background: #f1f5f9; color: #475569; }
.pill-red    { background: #fee2e2; color: #991b1b; }
.pill-purple { background: #ede9fe; color: #6d28d9; }

.pill-abbr     { font-weight: 800; }
.pill-fullname { font-weight: 400; opacity: .65; margin-left: 1px; }
.pill-fixed    { display: flex; width: 100%; justify-content: center; }

/* 全站共用的忙碌旋轉圖示（原本只有智慧估價模組的 .qa-spinner 有，其他長時間
   同步動作——例如重建索引——按下去只換按鈕文字，沒有真的在跑的視覺回饋，
   使用者容易以為卡住了）。用 currentColor 承接按鈕文字色，套用時不用額外
   指定顏色。 */
.spinner {
  display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
  border: 2px solid transparent;
  border-top-color: currentColor; border-right-color: currentColor;
  border-radius: 50%;
  animation: spin .65s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Project-group cards (估價歷史資料庫) — mirrors .date-top-group pattern */
.proj-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s;
}
.proj-group:hover { box-shadow: var(--shadow-sm); }
.proj-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 11px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.proj-group-head:hover { background: var(--surface2); }
.pgh-toggle  { font-size: .82rem; transition: transform .2s var(--ease); flex-shrink: 0; color: var(--sub); }
.pgh-toggle.open { transform: rotate(90deg); }
.pgh-name    { font-weight: 700; font-size: .93rem; color: var(--text); min-width: 0; }
.pgh-summary { font-size: .76rem; color: var(--sub); margin-left: auto; white-space: nowrap; }
.proj-group-body          { display: none; background: var(--bg); }
.proj-group-body.open     { display: block; }

/* Hover preview card (估價歷史資料庫) */
.quote-hover-card {
  position: fixed;
  z-index: 1800;
  width: 480px;
  height: 400px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  overflow: hidden;
  display: none;
  flex-direction: column;
  pointer-events: auto;
}
.quote-hover-card.visible { display: flex; }
.qhc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.qhc-title {
  font-weight: 600;
  font-size: .85rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qhc-expand { font-size: .76rem; flex-shrink: 0; }
.qhc-close  {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sub);
  font-size: .85rem;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
}
.qhc-frame  { flex: 1; border: none; background: var(--bg); }

/* Preview modal — tall & wide，無 max-width 上限讓大螢幕也能充分利用空間 */
.preview-modal {
  width: 92vw;
  max-width: none;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* override base .modal's overflow-y:auto so iframe height:100% resolves */
}
.preview-modal .modal-body {
  flex: 1;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
.preview-modal .modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* 欄位多的表格在平板／小筆電（側邊欄佔掉寬度）放不下時可以左右捲動，而不是被裁掉 */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-sm);
}
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap thead th {
  background: var(--surface2);
  padding: 11px 14px;
  text-align: left;
  font-size: .71rem;
  font-weight: 700;
  color: var(--sub);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.table-wrap tbody td {
  padding: 13px 14px;
  font-size: .86rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  transition: background-color .1s;
}
.table-wrap tbody tr:last-child > td { border-bottom: none; }
.table-wrap tfoot td {
  padding: 13px 14px;
  font-size: .86rem;
  border-top: 2px solid var(--border);
  background: var(--surface2);
}
.table-wrap > table > tbody > tr.row-clickable:not(.detail-row):hover { background: var(--primary-xs); }
.table-wrap > table > tbody > tr.row-clickable:not(.detail-row):hover > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.table-wrap tbody tr.row-clickable { cursor: pointer; }
.row-clickable td[data-no-nav] .link-danger { opacity: 0; transition: opacity .14s; }
.row-clickable:hover td[data-no-nav] .link-danger { opacity: 1; }
.table-wrap tbody tr.detail-row td  { background: var(--surface2); padding: 0; }
.table-wrap tbody tr.detail-row.collapsed { display: none; }

/* 固定高度＋滾動的表格（例如清單很長、不希望撐爆整個頁面時）：表頭跟著
   sticky 在滾動容器頂部，往下捲時欄位標題不會跟著跑掉。 */
.table-wrap-scroll { max-height: 420px; overflow-y: auto; }
/* 手機卡片排版：不再限高（卡片很長，限高加上裁切會看不到後面的資料） */
@media (max-width: 640px) { .table-wrap.table-wrap-scroll { max-height: none; overflow: visible; } }
.table-wrap-scroll thead th { position: sticky; top: 0; z-index: 2; }
.table-wrap-scroll tfoot td { position: sticky; bottom: 0; z-index: 1; }

.expand-btn {
  background: none;
  border: 1.5px solid var(--border);
  color: var(--sub);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  line-height: 1;
}
.expand-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-xs); }
.expand-btn.open  { transform: rotate(90deg); }

.daily-headcount { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.day-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
}
.day-chip-shared { background: #fef3c7; color: #92400e; }

.chip-tip {
  position: fixed;
  z-index: 500;
  width: max-content;
  max-width: 280px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
  font-size: .74rem;
  line-height: 1.45;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.chip-tip.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.chip-tip::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  left: var(--arrow-x, 50%);
  margin-left: -4px;
  background: inherit;
  transform: rotate(45deg);
}
.chip-tip[data-place="top"]::after { bottom: -4px; }
.chip-tip[data-place="bottom"]::after { top: -4px; }

.chip-tip-date { font-weight: 700; font-size: .78rem; }
.chip-tip-shared {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.chip-tip-shared-item + .chip-tip-shared-item {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.chip-tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.chip-tip-item { font-weight: 600; }
.chip-tip-count {
  flex-shrink: 0;
  color: #fde68a;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
.chip-tip-members { margin-top: 2px; color: rgba(255,255,255,.6); font-size: .7rem; }

.score-pct { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.score-bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 92px; }
.score-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.score-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 3px; }

/* ── Source-record detail ──────────────────────────────────────────────────── */
.source-records { padding: 12px 16px 16px 48px; }
.source-records .src-title {
  font-size: .71rem;
  font-weight: 700;
  color: var(--sub);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.src-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.src-table th {
  background: var(--surface2);
  padding: 7px 10px;
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  color: var(--sub);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.src-table td {
  padding: 7px 10px;
  font-size: .8rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
.src-table tr:last-child td { border-bottom: none; }
.src-table .src-note { color: var(--hint); font-size: .74rem; }
.src-table tbody tr:hover td { background: var(--primary-xs); }

.task-breakdown-list { display: flex; flex-direction: column; gap: 10px; }
.task-breakdown-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.task-breakdown-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.task-breakdown-name { font-weight: 700; font-size: .85rem; color: var(--text); min-width: 0; flex: 1 1 auto; }
.task-breakdown-meta { font-size: .74rem; color: var(--hint); white-space: nowrap; flex-shrink: 0; }
.task-breakdown-subtasks {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.task-breakdown-subtask-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .79rem;
  color: var(--text-med);
  padding-left: 10px;
}

.legend { margin-top: 12px; font-size: .79rem; color: var(--hint); }

/* ── Nested work-item table ────────────────────────────────────────────────── */
.mtable-nested {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.mtable-nested thead th {
  background: var(--surface2);
  padding: 8px 12px;
  text-align: left;
  font-size: .69rem;
  color: var(--hint);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mtable-nested tbody td {
  padding: 9px 12px;
  font-size: .85rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.mtable-nested .td-desc    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtable-nested .td-members,
.mtable-nested .td-outsource {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .78rem;
  color: var(--sub);
}
.mtable-nested tbody tr:last-child > td { border-bottom: none; }
/* 勾選框、狀態標籤不裁切（只有文字欄位才省略） */
.mtable-nested tbody td:first-child, .mtable-nested tbody td:has(> .status) { overflow: visible; }
.mtable-nested tbody tr:hover { background: var(--primary-xs); }

/* ── Notes section ─────────────────────────────────────────────────────────── */
.dg-notes {
  padding: 12px 16px 14px;
  border-top: 1px solid #fde68a;
  background: #fefce8;
}
.dg-notes-label {
  font-size: .71rem;
  font-weight: 700;
  color: #854d0e;
  margin-bottom: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.note-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.note-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #854d0e;
  border: 1px solid #fde68a;
  transition: background .12s;
}
.note-tag:hover { background: #fde68a; }
.note-tag .nt-text { cursor: pointer; }
.note-tag .nt-text:hover { text-decoration: underline; }
.note-tag .nt-del {
  cursor: pointer;
  opacity: .5;
  font-size: .72rem;
  padding: 0 2px;
  line-height: 1;
  transition: opacity .12s, color .12s;
}
.note-tag .nt-del:hover { opacity: 1; color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS（Swiss Modernism flat—不用漸層，直接鋪色）
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: .855rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .12s;
  white-space: nowrap;
  user-select: none;
  letter-spacing: .01em;
}

/* 主要動作：實心藍，hover 加深 */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 1px 4px rgba(37,99,235,.22), 0 4px 16px rgba(37,99,235,.14);
}
.btn-primary:hover {
  background: var(--primary-h);
  border-color: var(--primary-h);
  box-shadow: 0 4px 16px rgba(37,99,235,.38), 0 2px 6px rgba(37,99,235,.24);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(37,99,235,.3); }

/* 次要動作：外框 */
.btn-outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-med);
}
.btn-outline:hover {
  border-color: var(--border-s);
  background: var(--surface2);
  color: var(--text);
  transform: translateY(-1px);
}
.btn-outline:active { transform: translateY(0); }

/* 破壞性動作 */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  box-shadow: 0 1px 4px rgba(220,38,38,.22);
}
.btn-danger:hover {
  background: var(--danger-h);
  border-color: var(--danger-h);
  box-shadow: 0 4px 14px rgba(220,38,38,.36);
  transform: translateY(-1px);
}
.btn-danger:active { transform: translateY(0); }

/* 需要注意但非破壞性的動作（例如重建索引）：琥珀色外框 */
.btn-warning {
  border: 1.5px solid var(--warning);
  color: var(--warning-strong);
  background: var(--surface);
}
.btn-warning:hover { background: var(--surface2); border-color: #b45309; color: #b45309; }
.btn-warning:active { transform: translateY(0); }

.btn-sm { padding: 4px 12px; font-size: .78rem; }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none !important; }

/* ── Manage page ─────────────────────────────────────────────────────────── */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: 11px 16px;
  margin-bottom: 18px;
  font-size: .87rem;
  color: var(--warning-text);
}
.banner > span { min-width: 0; flex: 1 1 240px; }
.banner-btn {
  padding: 5px 14px;
  background: var(--warning-strong);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: .83rem;
  font-family: inherit;
  font-weight: 600;
  transition: background .15s;
  flex-shrink: 0;
}
.banner-btn:hover { background: #92400E; }

/* 頁面標題：大、重、有左側定錨——使用者往下捲後黏住，不會忘記自己在哪 */
.page-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--text);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  padding-top: 28px;
  margin-top: -28px;
  padding-bottom: 14px;
}
/* 左側定錨：藍色小方塊，讓大標題有視覺錨點（Swiss Modernism geometric accent） */
.page-title::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 28px;
  border-radius: 3px;
  background: var(--primary);
  opacity: .85;
}
.page-title span { font-size: .82rem; font-weight: 400; color: var(--sub); margin-left: 4px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* inline：頁首混合了狀態膠囊、提示文字與按鈕時（例如出工單詳情），手機版也維持自然換行，
   不套用下方 640px 的兩欄按鈕格線（否則狀態膠囊會被拉成半行寬） */
.head-actions.inline { align-items: center; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-xs);
}
.filter-bar input, .filter-bar select {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: inherit;
  background: var(--surface2);
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-bar input { flex: 1; min-width: 160px; }
.filter-bar input:focus, .filter-bar select:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-sm);
}
.filter-bar select { min-width: 110px; }
/* .filter-bar 內如果包了 .form-group（帶 label／hint 的完整欄位，而不是
   filter-bar 原本設計的裸 input），.form-group 自己的 width:100% 會贏過
   filter-bar 的 input 樣式，但 flex/min-width 這兩個屬性 form-group 沒設，
   會照樣從 filter-bar 漏下來，把 input 撐超過 .form-group 自己的
   max-width，跟旁邊的欄位重疊（出工單工時設定「全員工時」／「全員出勤
   天數」曾實際發生）。 */
.filter-bar .form-group input,
.filter-bar .form-group select {
  flex: none;
  min-width: 0;
}

/* Compact select inside table cells */
.td-select {
  padding: 4px 8px;
  font-size: .82rem;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  max-width: 140px;
  width: 100%;
}
.td-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-sm);
}

.filter-date-sep { font-size: .78rem; color: var(--hint); flex-shrink: 0; }
.filter-date-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.filter-date-group label { font-size: .74rem; color: var(--sub); font-weight: 600; white-space: nowrap; }
.filter-date-group input[type=date] {
  border: none;
  background: transparent;
  font-size: .82rem;
  padding: 0;
  box-shadow: none;
  min-width: 110px;
}
.filter-date-group input[type=date]:focus { border: none; box-shadow: none; }

/* ── Standalone management table（管理頁列表，如員工/帳號/廠區等） ─────────── */
.mtable {
  width: 100%;
  border-collapse: collapse;
}
.mtable thead th {
  background: var(--surface2);
  padding: 10px 14px;
  text-align: left;
  font-size: .71rem;
  font-weight: 700;
  color: var(--sub);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mtable tbody td {
  padding: 11px 14px;
  font-size: .86rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  transition: background-color .1s;
}
.mtable tbody tr:last-child > td { border-bottom: none; }
.mtable tbody tr:hover { background: var(--primary-xs); }
.mtable tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.td-desc { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-actions { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   DATE-GROUPED DISPATCH RECORDS
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-groups {
  padding: 56px 32px;
  text-align: center;
  color: var(--sub);
  font-size: .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.date-top-group {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s;
}
.date-top-group:hover { box-shadow: var(--shadow-sm); }

.date-top-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 13px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.date-top-head:hover { background: var(--surface2); }

.dth-toggle { font-size: .85rem; transition: transform .2s var(--ease); flex-shrink: 0; color: var(--sub); }
.dth-toggle.open { transform: rotate(90deg); }
.dth-date { font-weight: 700; font-size: .98rem; color: var(--primary); letter-spacing: -.01em; font-variant-numeric: tabular-nums; min-width: 0; }
.dth-summary { font-size: .79rem; color: var(--sub); margin-left: auto; }

.date-top-body { display: none; padding: 12px 14px; background: var(--bg); }
.date-top-body.open { display: block; }

.site-sub-group {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.site-sub-group:last-child { margin-bottom: 0; }

.site-sub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.ssh-name  { font-weight: 700; font-size: .9rem; color: var(--text); min-width: 0; }
.ssh-count {
  font-size: .72rem;
  color: var(--sub);
  background: var(--border);
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.ssh-actions { margin-left: auto; display: flex; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */
.pagination-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  margin-top: 14px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: .83rem;
  color: var(--sub);
}
.pagination-pages { display: flex; gap: 4px; }
.pg-btn {
  min-width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: .82rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .14s;
  font-variant-numeric: tabular-nums;
}
.pg-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-xs);
}
.pg-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(37,99,235,.3);
}
.pg-btn:disabled { opacity: .38; cursor: not-allowed; }

/* ── Floating batch bar ─────────────────────────────────────────────────────── */
.batch-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #0f172a;
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,.18), 0 16px 48px rgba(0,0,0,.32);
  font-size: .88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.batch-bar.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.batch-bar .cnt { font-weight: 700; }
.batch-bar .btn-ghost {
  background: none;
  border: 1.5px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .83rem;
  font-family: inherit;
  transition: .15s;
}
.batch-bar .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.batch-bar .btn-del {
  background: var(--danger);
  border: none;
  color: #fff;
  padding: 5px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .83rem;
  font-family: inherit;
  font-weight: 600;
  transition: background .15s;
}
.batch-bar .btn-del:hover { background: var(--danger-h); }
.batch-bar > span { white-space: nowrap; }
.batch-bar .bb-sep { width: 1px; align-self: stretch; margin: 2px 0; background: rgba(255,255,255,.16); }
.batch-bar .bb-group { display: inline-flex; align-items: center; gap: 8px; }
.batch-bar .bb-select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff;
  padding: 5px 32px 5px 14px; font-family: inherit; font-size: .83rem; cursor: pointer; transition: border-color .15s;
}
.batch-bar .bb-select:hover, .batch-bar .bb-select:focus { border-color: rgba(255,255,255,.5); outline: none; }
.batch-bar .bb-select option { color: #0f172a; background: #fff; }
.batch-bar .bb-primary {
  background: #fff; color: #0f172a; border: none; border-radius: 999px; padding: 6px 16px;
  font-family: inherit; font-size: .83rem; font-weight: 600; cursor: pointer; transition: background .15s;
}
.batch-bar .bb-primary:hover { background: #e2e8f0; }
.batch-bar .bb-close {
  background: none; border: none; color: rgba(255,255,255,.55); font-size: .95rem; line-height: 1;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; margin-left: -6px; transition: .15s;
}
.batch-bar .bb-close:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 640px) {
  .batch-bar { left: 16px; right: 16px; bottom: 16px; transform: translateY(12px); border-radius: 16px;
    flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 12px 16px; }
  .batch-bar.visible { transform: translateY(0); }
  .batch-bar .bb-sep { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL（彈出動畫：scale + translateY + spring cubic-bezier）
   ═══════════════════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,18,40,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 560px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(.95);
  transition: transform .3s cubic-bezier(.34, 1.2, .64, 1), opacity .22s ease;
  opacity: 0;
  border: 1px solid var(--border);
}
.overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal-head {
  padding: 20px 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 1rem; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--sub);
  line-height: 1;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--surface2); color: var(--text); }
.modal-body { padding: 18px 24px 20px; }
.modal-foot { padding: 0 24px 22px; display: flex; justify-content: flex-end; gap: 8px; }

/* 照片預覽（點縮圖彈出放大版，取代直接開新分頁） */
.photo-preview-modal {
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 92vw;
  width: auto;
  position: relative;
  padding: 0;
}
.photo-preview-modal img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.photo-preview-modal .modal-close {
  position: absolute;
  top: -38px;
  right: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
}
.photo-preview-modal .modal-close:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 15px; }
.form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--sub);
  margin-bottom: 5px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: inherit;
  background: var(--surface2);
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-sm);
}
.form-group textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.form-group input:read-only { background: var(--surface2); color: var(--sub); cursor: default; }

/* 完工比例滑桿：拖到哪、左側就填色到哪，一眼看出目前進度。--val 由樣板
   算好初始值（inline style="--val:N%"），拖動時 oninput 即時更新同一個
   CSS 變數，兩處共用同一套視覺（新增細項 Modal／已新增細項的內嵌編輯表單）。
   -webkit-appearance:none／appearance:none 拿掉瀏覽器原生滑軌樣式後，
   input 自己的 background 才會被拿來當滑軌畫，是跨瀏覽器常見做法。 */
.form-group input.completion-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--primary) 0%, var(--primary) var(--val, 0%),
    var(--border-s) var(--val, 0%), var(--border-s) 100%);
  outline: none;
  cursor: pointer;
  margin: 8px 0;
  padding: 0;
  border: none;
}
.form-group input.completion-slider:focus {
  border: none;
  background: linear-gradient(to right,
    var(--primary) 0%, var(--primary) var(--val, 0%),
    var(--border-s) var(--val, 0%), var(--border-s) 100%);
  box-shadow: 0 0 0 3px var(--primary-sm);
}
.completion-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2.5px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.completion-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
  border: none;
}
.completion-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2.5px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.list-search-input {
  width: 100%;
  max-width: 420px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .88rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  margin-bottom: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.list-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-sm); }

/* Users table */
.user-identity { display: flex; flex-direction: column; gap: 2px; }
.user-identity-name { font-weight: 600; font-size: .88rem; }
.user-identity-handle { font-size: .74rem; color: var(--sub); font-family: monospace; letter-spacing: .01em; }
.user-worker-name { font-size: .84rem; font-weight: 500; display: block; }
.user-worker-short { font-size: .74rem; color: var(--sub); font-family: monospace; }
.user-row-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.user-perm-unrestricted { font-size: .78rem; color: var(--hint); }

.form-hint { font-size: .74rem; color: var(--hint); margin-top: 4px; }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
/* 欄位可以縮到欄寬以下（日期框、長選單不會把整欄撐出畫面） */
.form-row > *, .form-row3 > * { min-width: 0; }

/* 可逐項增減的一列輸入（說明＋金額＋刪除），員工固定津貼項目共用 */
.allowance-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.allowance-row input[type="text"] { flex: 2; }
.allowance-row input[type="number"] { flex: 1; max-width: 140px; }
.allowance-row .link { flex-shrink: 0; }

/* 開關樣式的布林設定（取代純 checkbox），用在「啟用／停用」這類單一
   狀態切換——.switch 包住原生 checkbox（用來吃表單送出與鍵盤操作，
   不是裝飾），視覺完全交給 .switch-track 畫。 */
/* 用元素+class 選擇器（跟 .form-group label 同一個 specificity，靠後
   寫贏），否則 .form-group label 的 display:block+小寫大寫字級樣式會
   蓋掉這裡，開關會跟文字用 baseline 對齊而不是置中，看起來沒對齊。 */
label.switch-field {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 0;
  font-size: .85rem; font-weight: 400; color: var(--text);
  text-transform: none; letter-spacing: normal;
}
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background .16s;
}
.switch-track::before {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15,23,42,.25);
  transition: transform .16s;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Status line（表單送出後的即時回饋） ────────────────────────────────────── */
.status-line {
  font-size: .83rem;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  display: none;
  border-left: 3px solid transparent;
}
.status-line.ok   { background: #f0fdf4; color: #15803d; border-left-color: var(--success); display: block; }
.status-line.err  { background: #fef2f2; color: #991b1b; border-left-color: var(--danger); display: block; }
.status-line.info { background: #eff6ff; color: #1d4ed8; border-left-color: var(--primary); display: block; }

/* ── File drop zone ─────────────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border-s);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--sub);
  font-size: .88rem;
  background: var(--surface2);
}
.drop-zone:hover, .drop-zone.over {
  border-color: var(--primary);
  background: var(--primary-xs);
  color: var(--primary);
}
.drop-zone .dz-upload-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-s);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--sub);
  margin: 0 auto 10px;
  transition: .15s;
}
.drop-zone:hover .dz-upload-icon,
.drop-zone.over  .dz-upload-icon {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-xs);
}
.drop-zone input { display: none; }
.drop-zone .file-name { margin-top: 8px; font-size: .8rem; color: var(--primary); font-weight: 600; }

/* ── Member chip picker ─────────────────────────────────────────────────────── */
.member-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 44px;
  background: var(--surface2);
  transition: border-color .15s;
}
.member-picker:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-sm); }
.member-picker.empty-hint::before {
  content: '尚未新增員工，請先到「員工管理」新增';
  color: var(--hint);
  font-size: .8rem;
  align-self: center;
}
.m-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .82rem;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: .15s;
  user-select: none;
}
.m-chip:hover { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.m-chip.selected { background: var(--primary); border-color: var(--primary-h); color: #fff; }

/* ── Employee management ────────────────────────────────────────────────────── */
.emp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  max-height: 340px;
  overflow-y: auto;
}
.emp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: background .12s;
}
.emp-row:hover { background: var(--border); }
.emp-row.inactive { opacity: .42; }
.emp-name { flex: 1; font-size: .88rem; }
.emp-edit-input { flex: 1; max-width: 120px; font-size: .9rem; padding: 2px 6px; border: 1.5px solid var(--primary); border-radius: 4px; }
.emp-add-row { display: flex; gap: 8px; margin-top: 4px; }
.emp-add-row input { flex: 1; }

/* ── Vendor chip picker ──────────────────────────────────────────────────────── */
.vendor-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 44px;
  background: var(--surface2);
  transition: border-color .15s;
}
.vendor-picker:focus-within { border-color: #6ee7b7; }
.vendor-picker.empty-hint::before {
  content: '尚未新增廠商，請先到「協力廠商管理」新增';
  color: var(--hint);
  font-size: .8rem;
  align-self: center;
}
.v-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .82rem;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: .15s;
  user-select: none;
}
.v-chip:hover { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.v-chip-sel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  border: 1.5px solid #6ee7b7;
  background: #ecfdf5;
  color: #065f46;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.v-chip-sel .v-name { font-weight: 500; }
.v-count {
  width: 30px;
  border: none;
  background: rgba(6,95,70,.12);
  border-radius: 4px;
  text-align: center;
  font-size: .79rem;
  padding: 1px 3px;
  font-family: inherit;
  color: #065f46;
  outline: none;
}
.v-count::-webkit-inner-spin-button,
.v-count::-webkit-outer-spin-button { opacity: 0; }
.v-count:focus { background: rgba(6,95,70,.2); }
.v-unit { font-size: .74rem; color: #16a34a; }
.v-rem {
  cursor: pointer;
  color: #059669;
  font-size: .72rem;
  padding: 0 2px;
  opacity: .5;
  line-height: 1;
  transition: opacity .12s, color .12s;
}
.v-rem:hover { opacity: 1; color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   MISC UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.empty {
  text-align: center;
  padding: 48px;
  color: var(--hint);
  font-size: .9rem;
}

/* Empty state（更有設計感的空白區） */
.empty-state {
  text-align: center;
  padding: 64px 32px;
  color: var(--sub);
}
.empty-state .icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 16px;
}
.empty-state p    { font-size: .95rem; margin-bottom: 4px; color: var(--text-med); font-weight: 600; }
.empty-state .sub,
.empty-state .empty-state-sub { font-size: .85rem; font-weight: 400; color: var(--hint); }
.empty-state .empty-state-title { font-size: 1rem; }
.empty-state-icon { display: block; margin: 0 auto 12px; color: var(--hint-line); }
.empty-state-actions { margin-top: 18px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { .empty-state { padding: 36px 18px; } }

/* Alert bars */
.error-bar {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-left: 3px solid var(--danger);
  color: var(--danger-text);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: .88rem;
  margin-bottom: 20px;
}

/* Nav right / user info */
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ── Password show/hide wrapper ────────────────────────────────────────────── */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1; padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 10px;
  background: none; border: none; padding: 4px;
  cursor: pointer; color: var(--hint); line-height: 1;
  transition: color .14s; flex-shrink: 0;
}
.pw-toggle:hover { color: var(--text-med); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE（左：品牌區，藍圖格線底紋；右：登入卡片）
   ═══════════════════════════════════════════════════════════════════════════ */
.login-body {
  background: var(--bg);
  /* 藍圖格線底紋：細格線＋每 5 格一條較明顯的主線，右下角淡淡的主色光暈。
     桌機用在左側品牌區，窄螢幕（手機、直立平板）用在整頁背景 */
  --login-grid:
    radial-gradient(ellipse 70% 60% at 85% 100%, rgba(37,99,235,.28), transparent 70%),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
}
.login-shell { min-height: 100vh; min-height: 100dvh; display: flex; }

.login-hero {
  flex: 1.15;
  position: relative;
  overflow: hidden;
  color: var(--ink-text);
  background-color: var(--ink-900);
  background-image: var(--login-grid);
  background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.login-hero::after {  /* 左緣由深到透明，讓格線不會搶文字 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,16,39,.92) 0%, rgba(13,16,39,.55) 55%, rgba(13,16,39,.15) 100%);
}
.login-hero-inner {
  position: relative; z-index: 1;
  height: 100%; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 44px 64px;
}
.login-brand { display: flex; align-items: center; gap: 12px; color: var(--ink-text-h); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; }
.login-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--primary); color: #fff;
  font-weight: 800; font-size: 1.02rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 18px rgba(37,99,235,.35);
}
.login-hero-content { margin: auto 0; max-width: 460px; padding: 48px 0; }
.login-hero-title {
  font-size: 2.1rem; font-weight: 800; line-height: 1.35; letter-spacing: -.035em;
  color: var(--ink-text-h);
}
.login-hero-tagline { margin-top: 18px; font-size: .92rem; line-height: 1.85; color: rgba(255,255,255,.6); }
.login-features { margin: 40px 0 0; border-top: 1px solid var(--ink-border); }
.login-feature { padding: 16px 0 16px 18px; border-bottom: 1px solid var(--ink-border); position: relative; }
.login-feature::before {  /* 左側短色條：跟系統內卡片的左邊框語彙一致 */
  content: ""; position: absolute; left: 0; top: 19px; width: 3px; height: 14px; border-radius: 2px; background: var(--primary);
}
.login-feature dt { font-size: .9rem; font-weight: 700; color: var(--ink-text-h); }
.login-feature dd { margin: 4px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-text); }
.login-hero-foot { font-size: .74rem; color: var(--ink-label); letter-spacing: .02em; }

.login-panel {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm), 0 18px 48px rgba(15,23,42,.07);
  padding: 36px 32px 28px;
}
.login-card h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 6px; color: var(--text); letter-spacing: -.025em; }
.login-card .login-sub { font-size: .84rem; color: var(--sub); margin-bottom: 24px; }
.login-card .notice { margin-bottom: 16px; }
.login-card .form-group { margin-bottom: 16px; }
.login-card .form-group input { padding: 11px 13px; font-size: .95rem; }
.login-card .pw-wrap input { padding-right: 44px; }
.pw-toggle .pw-eye-off, .pw-toggle.is-showing .pw-eye { display: none; }
.pw-toggle.is-showing .pw-eye-off { display: inline; }
.login-caps { margin-top: 6px; font-size: .76rem; font-weight: 600; color: var(--warning-strong); }
.login-submit.btn { padding: 12px 16px; font-size: .95rem; margin-top: 6px; }
.login-help { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); font-size: .76rem; color: var(--hint); text-align: center; }
.login-code { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.login-mobile-brand, .login-mobile-foot { display: none; }

@media (max-width: 1180px) {
  .login-hero-inner { padding: 36px 40px; }
  .login-hero-title { font-size: 1.7rem; }
}
/* 手機與直立平板：左右分割放不下（卡片會被擠到邊緣），改成整頁深色底紋，
   品牌／登入卡片／頁尾三段置中；用 margin:auto 置中，螢幕太矮時從上方開始排、不會被裁掉 */
@media (max-width: 959px) {
  .login-hero { display: none; }
  .login-panel {
    flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 28px 16px 20px;
    background-color: var(--ink-900);
    background-image: var(--login-grid);
    background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  }
  .login-mobile-brand {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: auto; padding: 8px 4px 24px;
    font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink-text-h);
  }
  .login-card { max-width: 400px; padding: 28px 22px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35); border-color: transparent; }
  .login-mobile-foot {
    display: block; margin: 20px 0 auto; padding-top: 4px;
    font-size: .74rem; color: var(--ink-text); opacity: .7; letter-spacing: .02em; text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN / DISPATCH 共用元件
   ═══════════════════════════════════════════════════════════════════════════ */

/* 標題 */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text);
}

/* 頁面標題列（含操作按鈕） */
.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  padding-top: 28px;
  margin-top: -28px;
  padding-bottom: 14px;
}
.page-title-row .page-title {
  position: static;
  background: none;
  border-bottom: none;
  padding: 0;
  margin: 0;
}
.page-sub  { font-size: .85rem; color: var(--sub); margin-top: 4px; }
/* 返回上一層：麵包屑式的小字連結，貼在標題上方——原本是浮在標題上方的
   白底膠囊按鈕，跟頁面標題搶視線；改成一行小字，層級清楚又不突兀。 */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--sub);
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
  transition: color .14s;
}
.back-link:hover { color: var(--primary); text-decoration: none; }
/* .page-title-row／.page-title 的 sticky「貼齊頂部」效果是靠
   margin-top:-28px 抵銷 .page 自己的 padding-top:28px 做到的——這個算法
   假設它是 .page 底下第一個元素。當 .back-link 排在它前面時，這個負
   margin 會直接把 .page-title-row 拉到跟 .back-link 重疊（實測會蓋掉
   .back-link 下半部，看起來像返回按鈕被截斷/擋住），不是視覺對比問題。
   比照 project_detail.html 等頁面已經在用的做法，緊接在 .back-link 後面
   時蓋掉負 margin，讓它退回正常留白，不影響其餘頁面的 sticky 效果
   （sticky 開始生效的捲動距離只會多出 .back-link 的高度，肉眼無感）。 */
.back-link + .page-title-row,
.back-link + .page-title {
  margin-top: 0;
}

/* 行內藥丸操作鈕 */
.link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-weight: 600;
  font-size: .8rem;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--primary-xs);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.link:hover { background: var(--primary-sm); color: var(--primary-h); }
.link:disabled { opacity: .42; cursor: not-allowed; }
.link-danger { color: #C81E1E; background: rgba(220,38,38,.07); }
.link-danger:hover { background: rgba(220,38,38,.15); color: var(--danger-h); }
.link-quiet { color: var(--sub); background: var(--surface2); }
.link-quiet:hover { background: var(--border); color: var(--text-med); }

/* 純內容參照連結（例如列表裡的廠區名稱）：不套藥丸 */
.link-plain { color: var(--primary); font-weight: 600; text-decoration: none; }
.link-plain:hover { text-decoration: underline; color: var(--primary-h); }

/* ── 出工單填寫進度條 ──────────────────────────────────────────────────────── */
.dispatch-checklist {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 16px;
  flex-wrap: wrap;
}
.dcl-item {
  font-size: .8rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--hint);
  background: var(--surface2);
}
.dcl-item.dcl-done {
  color: #166534;
  background: rgba(22,163,74,.07);
  border-color: rgba(22,163,74,.22);
}
.dcl-sep {
  width: 18px;
  height: 1px;
  background: var(--border-s);
  flex-shrink: 0;
}
.dcl-status {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
}
.dcl-status.dcl-ok   { color: var(--success-text); }
.dcl-status.dcl-warn { color: #A1480A; }

/* ── Section card（出工單 / 後台 模組化區塊） ────────────────────────────────── */
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.section-card:hover { box-shadow: var(--shadow); }
.section-done    { border-left: 3px solid var(--success); }
.section-pending { border-left: 3px solid var(--warning); }

.section-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 13px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background .14s;
}
/* 空間不足時整個標題／右側資訊各自換行，避免中文標題被擠壓到單字寬度而逐字直排 */
.section-card-head > :first-child { min-width: 0; }
.section-card-head > :last-child:not(:only-child) { margin-left: auto; }
.section-card-head:hover { background: #EFF4FF; }
.section-card-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* 流程步驟編號（1 / 2 / 3 ← 流程定位，不是裝飾） */
.section-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--primary-xs);
  color: var(--primary);
  font-size: .73rem;
  font-weight: 800;
  border: 1.5px solid rgba(37,99,235,.18);
}
.section-step-done {
  background: #dcfce7;
  color: #16a34a;
  border-color: rgba(22,163,74,.2);
}
.section-step-pending {
  background: #fef9c3;
  color: #92400e;
  border-color: rgba(217,119,6,.25);
}

/* 空白 section（尚未填寫） */
.section-empty { border-style: dashed; }
.section-empty > summary.section-card-head,
.section-empty > .section-card-head { background: transparent; }

/* 編輯中 state：已填寫的 section 展開時顯示品牌色左邊框 + 淡藍底 */
details.section-card.section-done[open]:not(.section-dirty) { border-left-color: var(--primary); }
details.section-card.section-done[open]:not(.section-dirty) > summary.section-card-head { background: var(--primary-xs); }
details.section-card.section-pending[open] { border-left-color: var(--warning); }
details.section-card.section-pending[open] > summary.section-card-head { background: rgba(217,119,6,.04); }
/* 存完上一區後自動帶到這裡（dispatch-detail.js）：閃一下外框提示「下一步在這」 */
.section-card.sc-attention { animation: sc-attention 1.6s ease-out; }
@keyframes sc-attention {
  0%, 30% { box-shadow: 0 0 0 3px rgba(217,119,6,.45); }
  100%    { box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) { .section-card.sc-attention { animation: none; } }

/* 未儲存提醒（dirty state） */
.section-card.section-dirty { border-left: 3px solid var(--warning) !important; }
details.section-card.section-dirty > summary,
.section-card.section-dirty > .section-card-head { background: rgba(234,179,8,.05) !important; }

.dirty-badge {
  display: none;
  font-size: .63rem;
  font-weight: 700;
  color: #fff;
  background: var(--warning);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .02em;
}
.dirty-notice {
  display: none;
  font-size: .78rem;
  font-weight: 500;
  color: #854d0e;
  background: rgba(234,179,8,.07);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  margin-bottom: 12px;
}
/* 「放棄修改」緊跟在標題的「未儲存」標籤後面，只在區塊有未儲存修改時出現；
   收合狀態也看得到，不用先展開找按鈕 */
/* 多一層 .section-card：手機觸控尺寸規則（檔尾 @media）會把 .link 設回 inline-flex */
.section-card .dirty-discard { display: none; }
.section-card.section-dirty .dirty-discard {
  display: inline-flex;
  font-size: .72rem;
  padding: 2px 9px;
  margin-left: 6px;
  vertical-align: middle;
  /* 未儲存的標題列是淡黃底，灰底 link-quiet 會糊在一起：改白底＋琥珀框，跟「未儲存」標籤同色系 */
  background: var(--surface);
  color: var(--warning-text);
  box-shadow: inset 0 0 0 1px var(--warning);
}
.section-card.section-dirty .dirty-discard:hover {
  background: var(--warning);
  color: #fff;
}

.section-card-sub  { font-size: .76rem; color: var(--hint); margin-top: 3px; }
.section-card-body { padding: 16px 18px; }

/* ── Clickable field trigger (supervisor / driver / crew — opens a modal) ── */
.field-trigger {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer; background: var(--surface);
  font-size: .88rem; color: var(--text); min-height: 40px;
  transition: border-color .14s, background .14s; user-select: none;
}
.field-trigger:hover { border-color: var(--primary); background: var(--primary-xs); }
.field-trigger:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.field-trigger > :first-child { min-width: 0; }
.field-trigger-hint { font-size: .74rem; color: var(--hint); flex-shrink: 0; }

/* Stat tile：數字夠大、陰影夠深——視覺錨點，內容區最應該「搶眼」的地方 */
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: box-shadow .18s, transform .18s;
  position: relative;
  overflow: hidden;
  min-width: 0;
  /* 讓 .v 可用 cqw 依「卡片自身寬度」縮放字級，而非用 vw 依整個瀏覽器視窗寬度縮放——
     後者在同一視窗下，欄位數較多（如薪資管理 6 張卡）跟欄位數較少的頁面會算出一樣大的字級，
     卡片較窄時就容易把長數字撐出邊界。 */
  container-type: inline-size;
}
/* 常駐的品牌色頂邊——.v 的大數字改回中性墨色後，卡片整體會偏單調，
   這條 3px 色條用同一個主色統一標示「這是一組數據」，補一點顏色但
   不會像逐卡上色那樣花俏（一個色，不是五個）。 */
.stat-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
}
.stat-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.stat-tile .v {
  /* 預設用中性深色墨——這幾張卡各自是獨立的頭條數字，不是同一張圖表裡
     需要互相區分身分的類別，套 5 種高彩度顏色只是「好看」的裝飾，反而
     讓整頁看起來花俏、搶走真正需要顏色的地方（如下方組成圖）的注意力。
     需要強調的地方改用 .c-* class 個別加，不是每個 tile 預設都上色。 */
  color: var(--text);
  /* clamp 用 cqw（卡片自身寬度百分比）而非 vw：字級跟著「這張卡有多寬」縮放，
     不管同一列有 3 張卡還是 6 張卡（如薪資管理），窄卡都能正確縮小字級，
     避免長數字（千位數金額）撐出卡片邊界 */
  font-size: clamp(1.1rem, 19cqw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 用 line-height 撐開高度做垂直置中，不用 display:flex：
     .v 原本是 flex 容器，但 text-overflow:ellipsis 只對 block container 生效，
     flex 容器裡文字溢位時瀏覽器只會硬裁掉（不顯示刪節號），
     長數字（6~7 位數）因此被卡片邊界直接切斷，如同截圖所見。 */
  line-height: 3.2rem;
  min-height: 3.2rem;
  width: 100%;
  max-width: 100%;
}
.stat-tile .l { font-size: .76rem; color: var(--sub); margin-top: 6px; letter-spacing: .02em; }

/* 雇主總成本組成——單一堆疊長條圖（part-to-whole 用堆疊長條，不用圓餅圖）。
   色組換過兩次：第一版直接借站內高飽和品牌強調色，5 色擠一條長條像
   彩虹糖；第二版自己調低飽和度想收斂，結果變成陶土/暗青/灰紫那種
   偏濁的秋色調，看起來陰沉沒精神。這版改用資料視覺化領域驗證過的
   標準類別色（藍/橘/青綠/黃/洋紅——彩度夠、明度一致，是設計給「同一
   張圖裡並排也和諧」用的專業色組，不是自己土法煉鋼調的），跑
   scripts/validate_palette.js 全數 PASS：相鄰色 ΔE 最差 9.1（清楚超過
   8 的目標值），三個較淺的色（青綠/黃/洋紅）對白底對比落在 3:1 以下，
   靠下方永遠顯示的圖例文字補足身分判斷，不只靠顏色本身。 */
.cost-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 28px;
  /* --series-1..5 改由報表設計系統的 :root 統一定義（同一組色值） */
}
.cost-chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.cost-chart-title { font-size: .85rem; font-weight: 700; color: var(--text); }
.cost-chart-total { font-size: .82rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.cost-chart-total b { color: var(--text); font-weight: 700; }
.cost-bar {
  display: flex;
  gap: 2px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  margin-bottom: 14px;
}
.cost-bar-seg {
  height: 100%;
  min-width: 3px;
  transition: opacity .15s;
}
.cost-bar-seg:hover { opacity: .82; }
.cost-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.cost-legend-item { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
.cost-legend-item .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cost-legend-item .cli-label { color: var(--sub); }
.cost-legend-item .cli-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cost-legend-item .cli-pct { color: var(--hint); font-size: .76rem; }
.cost-chart-note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: .82rem; color: var(--danger); }

/* ── 估價搜尋填價：議價空間卡片 ─────────────────────────────────────────── */
.fill-price-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.fill-pc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.fill-pc.main { border-left: 4px solid var(--primary); }
.fill-pc-label { font-size: .74rem; color: var(--sub); letter-spacing: .02em; margin-bottom: 5px; }
.fill-pc-val {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.2;
}
.fill-pc.main .fill-pc-val { color: var(--primary); }
.fill-pc-sub { font-size: .71rem; color: var(--hint); margin-top: 4px; }

/* ── 估價搜尋填價：參考資料區塊 ─────────────────────────────────────────── */
.fill-ref-group {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.fill-ref-group:last-child { border-bottom: none; }
.fill-ref-group-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}
.fill-ref-row { font-size: .78rem; color: var(--sub); padding: 2px 0; }
.fill-ref-none { font-size: .78rem; color: var(--hint); font-style: italic; }

/* ── Campaigns snapshot page ────────────────────────────────────────────── */
.snapshot-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.snapshot-hero-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}
.snapshot-hero-meta {
  font-size: .82rem;
  color: var(--sub);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.snapshot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .snapshot-badge { background: #14532d; color: #86efac; border-color: #166534; }
}
:root[data-theme="dark"] .snapshot-badge { background: #14532d; color: #86efac; border-color: #166534; }
:root[data-theme="light"] .snapshot-badge { background: #dcfce7; color: #15803d; border-color: #86efac; }

/* ── 工項明細時間軸（flat-list 版） ──────────────────────────────────────── */
.snapshot-timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
/* 日期分隔列 */
.snapshot-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
/* 上一組的最後一個 item 之後，新的日期列前加明確分隔 */
.snapshot-item + .snapshot-date-row {
  border-top: 1px solid var(--border);
}
.snapshot-date-label {
  font-weight: 700;
  font-size: .84rem;
  color: var(--text);
  letter-spacing: .01em;
}
.snapshot-date-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-med);
  white-space: nowrap;
}
.snapshot-date-count {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: .72rem;
  color: var(--sub);
}
/* 工項列 */
.snapshot-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 16px;
}
.snapshot-item + .snapshot-item {
  border-top: 1px solid var(--border-light);
}
.snapshot-item-desc { font-size: .87rem; color: var(--text); font-weight: 500; line-height: 1.45; }
.snapshot-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.snapshot-headcount { font-size: .78rem; color: var(--text-med); font-weight: 600; white-space: nowrap; }

.m-chip-ro {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: .72rem;
  color: var(--sub);
  white-space: nowrap;
}

/* ── Snapshot 進度圖 ─────────────────────────────────────────────────────── */
.snapshot-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 14px;
  margin-bottom: 28px;
}
.snapshot-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.snapshot-chart-title  { font-weight: 700; font-size: .92rem; color: var(--text); }
.snapshot-chart-sub    { font-size: .74rem; color: var(--hint); margin-top: 2px; }
.snapshot-chart-legend { display: flex; gap: 14px; align-items: center; font-size: .74rem; color: var(--sub); }
.snapshot-chart-legend span { display: flex; align-items: center; gap: 5px; }
.legend-bar  { display: inline-block; width: 12px; height: 8px; background: rgba(37,99,235,.2); border-radius: 2px; }
.legend-line { display: inline-block; width: 16px; height: 2px; background: var(--primary); border-radius: 1px; }

/* ── Progress bar ────────────────────────────────────────────────────────────── */
.progress-track {
  background: var(--border);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.progress-track.sm { height: 5px; }
.progress-fill {
  background: var(--primary);
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.progress-fill.done { background: var(--success); }
.progress-fill-ref { background: var(--hint-line); }

/* ── Worker toggle chips ────────────────────────────────────────────────────── */
.worker-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  transition: border-color .14s, background .14s;
  font-size: .85rem;
  position: relative;
}
.worker-toggle input { accent-color: var(--primary); }
.worker-toggle:hover { border-color: var(--border-s); background: var(--surface2); }
.worker-toggle:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-xs);
  color: var(--primary-h);
}
/* radio / 無 checkbox 的場合 */
.worker-toggle.no-checkbox input { position: absolute; opacity: 0; pointer-events: none; }

.worker-abbr     { font-size: .95rem; font-weight: 700; color: var(--text); flex: none; }
/* 長英文姓名（外籍人員）會撐到兩行，讓同一 grid row 裡其他卡片被拉伸、
   高度對不齊（跑版）。改用單行省略號＋title 顯示完整名稱，維持卡片
   高度一致；min-width:0 讓 flex 子項目能夠真正縮小觸發省略號，而不是
   撐開容器。 */
.worker-fullname {
  font-size: .7rem;
  font-weight: 400;
  color: var(--hint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 出工單：出差勾選 ───────────────────────────────────────────────────── */
.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  align-items: start;
}
.trip-item { display: flex; flex-direction: column; gap: 6px; }
.trip-item .worker-toggle { width: 100%; }
.trip-return { display: none; gap: 4px; padding-left: 2px; }
.trip-return.show { display: flex; }
.trip-return .worker-toggle { flex: 1; justify-content: center; padding: 6px 4px; font-size: .78rem; }

/* ── 出工單：人員清單（工時設定／加班費共用同一套排版，同一種「每人一列
   ＋一個控制項」的東西不該在同一頁長兩種樣子）──────────────────────────── */
.worker-row-list { display: flex; flex-direction: column; }
.worker-row {
  display: grid;
  grid-template-columns: 170px minmax(120px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}
.worker-row .worker-toggle {
  padding: 6px 8px;
  gap: 5px;
}
.worker-row .worker-toggle input { flex: none; }
.worker-row .worker-toggle .worker-abbr {
  font-size: .85rem;
}
/* 手機上這排 checkbox/label 是逐人勾選加班費對象最常點錯的地方——原本
   padding 6px 8px 實際可點高度只有 28-32px，低於一般建議的 44px 觸控
   目標，在密集的人員清單裡很容易點到隔壁那一列。只在窄螢幕加大，桌面
   維持原本緊湊排版。 */
@media (max-width: 480px) {
  .worker-row .worker-toggle {
    padding: 10px 8px;
    min-height: 40px;
  }
}
.worker-row-head { font-size: .72rem; color: var(--sub); font-weight: 600; padding: 0 0 6px; border-bottom: 1px solid var(--border); }
.worker-row-head span { text-align: center; }
/* 控制項刻意包一層 .worker-row-control 再限定 .worker-row-control input（而
   不是 .worker-row input 這種後代選擇器）——加班費那一列的人員欄位裡有
   checkbox，後代選擇器會連它一起選到，width:100% 套在 checkbox 上會把它
   撐成幾乎跟整列一樣寬，把人員名字擠到只剩不到一個字的寬度、被迫逐字
   換行（曾實際發生過的迴歸，見 git log）。 */
.worker-row-control input[type="number"],
.worker-row-control select {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: .85rem;
  background: var(--surface);
  color: var(--text);
}
.ot-warn { font-size: .72rem; color: #b45309; margin-top: 2px; min-height: 0; }
/* 加班費級距換算規則：預設收著，滑鼠移過去或點一下（觸控裝置沒有 hover，
   用 onclick 切 .open 補）才展開。規則本身同一天所有人都一樣，整個區塊
   只會出現一顆（今天天別旁邊／唯讀檢視標題旁邊），不是逐人各印一份。
   彈出框巢狀包在按鈕裡面，純 CSS :hover 就能顯示，不用另外寫定位程式；
   .open 是 JS 補的第二個顯示條件，服務觸控／鍵盤使用者。 */
.ot-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface2);
  color: var(--sub);
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
}
.ot-info:hover, .ot-info:focus-visible, .ot-info.open {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-sm);
  outline: none;
}
.ot-info-pop {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-med);
  text-align: left;
  line-height: 1.7;
  white-space: nowrap;
}
.ot-info:hover .ot-info-pop,
.ot-info:focus-visible .ot-info-pop,
.ot-info.open .ot-info-pop {
  display: block;
}

/* ── Photo upload ────────────────────────────────────────────────────────────── */
.photo-upload-zone {
  border: 1.5px dashed var(--border-s);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  overflow: hidden;
  position: relative;
}
.photo-upload-zone:hover { border-color: var(--primary); background: var(--primary-xs); }
.photo-upload-zone.dragover {
  border-color: var(--primary);
  background: var(--primary-sm);
  border-style: solid;
}
.photo-upload-placeholder { padding: 22px 16px; text-align: center; }
.photo-upload-text { font-size: .82rem; color: var(--sub); font-weight: 500; }
.photo-upload-hint { font-size: .74rem; color: var(--hint); margin-top: 3px; }
.photo-upload-zone.dragover .photo-upload-text { color: var(--primary); font-weight: 700; }
/* 觸控裝置沒有拖放這回事，「拖到這裡」是看不懂的死文字——用 pointer:coarse
   （比螢幕寬度判斷更準，平板橫放也抓得到）在觸控裝置上隱藏這段文字。 */
@media (pointer: coarse) {
  .drag-hint-text { display: none; }
}

.photo-upload-thumb-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.photo-thumb-chip {
  position: relative;
  width: 62px; height: 62px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.photo-thumb-chip img {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: opacity .15s;
}
.photo-thumb-chip img:hover { opacity: .85; }
.photo-thumb-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  color: #fff;
  border: none;
  font-size: .72rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .12s;
}
.photo-thumb-remove:hover { background: var(--danger); }
.photo-thumb-add {
  width: 62px; height: 62px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--hint);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.photo-thumb-add:hover { border-color: var(--primary); color: var(--primary); }

/* ── 照片階段：完工前／完工後／其他（templates/_photo_stage.html、dispatch_logs.js）──
   三個階段各一組顏色變數，標籤、縮圖下方選單、確認視窗的分段按鈕共用：
   完工前＝藍（剛開始）、完工後＝綠（跟完工比例 100% 的綠一致）、其他＝灰。 */
.ph-group.is-before, .ph-stage-pick.is-before, .ph-stage-opt.is-before, .rq-ph-stage.is-before {
  --ph-c: var(--info-text); --ph-bg: var(--info-bg); --ph-bd: var(--info-border);
}
.ph-group.is-after, .ph-stage-pick.is-after, .ph-stage-opt.is-after, .rq-ph-stage.is-after {
  --ph-c: var(--success-text); --ph-bg: #F0FDF4; --ph-bd: #BBF7D0;
}
.ph-group.is-other, .ph-stage-pick.is-other, .ph-stage-opt.is-other {
  --ph-c: var(--sub); --ph-bg: var(--surface2); --ph-bd: var(--border-s);
}

/* 唯讀：依階段分組，每組左邊一條色線＋標籤；寬螢幕上完工前、完工後並排方便對照 */
.ph-groups { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 10px; }
.ph-group { display: flex; flex-direction: column; gap: 6px; min-width: 0;
            padding-left: 10px; border-left: 3px solid var(--ph-bd); }
.ph-group-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-stage-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ph-bg); color: var(--ph-c);
  font-size: .72rem; font-weight: 700; line-height: 1.6;
}
.ph-stage-n { font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* 編輯／待上傳：縮圖下方一顆藥丸形的階段選單，點了用手機原生的選擇器 */
.photo-thumb-chip.has-stage { width: 76px; height: auto; overflow: visible; display: flex; flex-direction: column; gap: 4px; }
.photo-thumb-chip.has-stage img { height: 76px; }
.photo-upload-thumb-list:has(.has-stage) .photo-thumb-add { width: 76px; height: 76px; }
.ph-existing { padding: 0 0 10px; }
.ph-existing:empty { display: none; }
.ph-stage-pick { position: relative; display: block; }
.ph-stage-pick select {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px;
  padding: 0 16px 0 6px;
  border: 1px solid var(--ph-bd);
  border-radius: 999px;
  background: var(--ph-bg); color: var(--ph-c);
  font: inherit; font-size: .72rem; font-weight: 700;
  text-align: center; text-align-last: center;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.ph-stage-pick select:focus { background: var(--ph-bg); border-color: var(--ph-c); box-shadow: 0 0 0 2px var(--primary-sm); }
.ph-stage-pick::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--ph-c); border-bottom: 1.5px solid var(--ph-c);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* 確認視窗：這批照片是哪個階段（三選一的分段按鈕，手機上好按：高 44px） */
.ph-stage-seg { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-stage-seg-title { margin: 0; font-size: .85rem; font-weight: 700; color: var(--text-med); }
.ph-stage-seg-opts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  width: 100%; padding: 4px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
}
.ph-stage-opt { position: relative; cursor: pointer; }
.ph-stage-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ph-stage-opt span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 700; color: var(--sub);
  transition: background .14s, border-color .14s, color .14s;
}
.ph-stage-opt span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ph-c); opacity: .45; }
.ph-stage-opt:hover span { color: var(--ph-c); }
.ph-stage-opt input:checked + span { background: var(--ph-bg); border-color: var(--ph-c); color: var(--ph-c); box-shadow: var(--shadow-xs); }
.ph-stage-opt input:checked + span::before { opacity: 1; }
.ph-stage-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.ph-stage-seg-hint { margin: 0; font-size: .74rem; color: var(--hint); text-align: center; }

/* ── Quotes suggest panel ────────────────────────────────────────────────────── */
.qs-suggest-panel {
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qs-suggest-panel-label {
  font-size: .7rem;
  color: var(--hint);
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.qs-suggest-list { display: flex; flex-direction: column; gap: 5px; }
.qs-suggest-item {
  position: relative;
  font-size: .8rem;
  padding: 8px 12px 8px 16px;
  color: var(--text-med);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s, padding-left .14s;
}
.qs-suggest-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transition: transform .14s;
}
.qs-suggest-item:hover {
  border-color: var(--primary);
  background: var(--primary-xs);
  color: var(--primary);
  padding-left: 20px;
}
.qs-suggest-item:hover::before { transform: scaleY(1); }

/* ── Photo confirm modal ──────────────────────────────────────────────────────── */
.photo-confirm-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  max-width: 92vw; max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.photo-confirm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-content: flex-start;
  max-width: 88vw; max-height: 56vh;
  overflow-y: auto;
}
.photo-confirm-grid img {
  max-width: 70vw; max-height: 48vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}
.photo-confirm-actions { display: flex; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PLANNING CALENDAR
   ═══════════════════════════════════════════════════════════════════════════ */
/* 月曆：整張月曆是一塊有外框的格線（格子之間 1px 線），不是一顆顆獨立的卡片——
   視覺上安靜很多。非工作日只用灰底、國定假日只把日期變紅；跟常態不同的天別
   （補班、平日放假）才在格子右上角標小字，週末不再每格一條色條。 */
.plan-cal { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--border); }
.plan-cal-head, .plan-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.plan-cal-head > div {
  background: var(--surface2);
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--hint);
  padding: 7px 0;
}
.plan-cal-head > div:first-child, .plan-cal-head > div:last-child { color: var(--sub); }
.plan-cal-grid { margin-top: 1px; }
.plan-cal-day {
  min-height: 88px;
  min-width: 0;
  background: var(--surface);
  padding: 6px 8px 8px;
  cursor: pointer;
  transition: background .12s;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.plan-cal-day:hover { background: var(--primary-xs); }
.plan-cal-day.is-empty { background: #FAFBFD; cursor: default; }
.day-type-rest_day, .day-type-mandatory_rest, .day-type-national_holiday { background: #F1F4F9; }
.plan-cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 24px; }
.plan-cal-day-num {
  font-size: .82rem; font-weight: 600; color: var(--text-med); font-variant-numeric: tabular-nums;
  min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.day-type-rest_day .plan-cal-day-num, .day-type-mandatory_rest .plan-cal-day-num { color: var(--hint); }
.day-type-national_holiday .plan-cal-day-num { color: var(--danger); }
.plan-cal-day-tag { font-size: .66rem; font-weight: 600; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-type-national_holiday .plan-cal-day-tag { color: var(--danger); }
.day-type-regular .plan-cal-day-tag { color: var(--primary); }
.plan-cal-day.is-today .plan-cal-day-num { background: var(--primary); color: #fff; }
/* 選取：內框線＋淡藍底，跟今天的實心圓點分得開 */
.plan-cal-day.is-selected { background: var(--info-bg); box-shadow: inset 0 0 0 2px var(--primary); }
.plan-cal-dots { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 2px; }
.plan-cal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* 某個廠區的預排天別跟當天整體建議不同（例如國定假日仍安排出工），
   dot 加一圈外框標示出這個例外 */
.plan-cal-dot-override { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--text); }
/* 格子裡的小標籤：請假（紅）、待審（黃）、請款（琥珀）、提醒（紫），同一套尺寸 */
.plan-cal-leaves { display: flex; flex-wrap: wrap; gap: 3px; }
.plan-cal-leave, .plan-cal-event, .plan-cal-more {
  font-size: .68rem; font-weight: 600; line-height: 1.5; padding: 0 5px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.plan-cal-leave { color: var(--danger-text); background: var(--danger-bg); }
.plan-cal-leave.is-pending { color: var(--warning-text); background: var(--warning-bg); }

/* 圖例：分組一行一組，組名在前 */
.plan-cal-legend { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: .78rem; color: var(--sub); }
.plan-cal-legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.plan-cal-legend-label { font-size: .72rem; font-weight: 700; color: var(--hint); min-width: 2.5em; }
.plan-cal-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.plan-cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.plan-cal-legend-swatch {
  width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #F1F4F9; font-size: .66rem; font-weight: 700; color: var(--danger);
}

/* 月曆＋當天詳情：寬螢幕左右並排（點日期不必往下捲），窄螢幕上下疊 */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 28px; align-items: start; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-month { margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cal-side { border-left: 1px solid var(--border); padding-left: 24px; min-width: 0; position: sticky; top: 16px; }
.cal-side-head { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.cal-side-date { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cal-side-day { font-size: 1.2rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-side-week { font-size: .8rem; color: var(--sub); }
.cal-dt { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin-top: 8px; font-size: .82rem; }
.cal-dt-label { color: var(--hint); font-weight: 600; }
.cal-dt-toggle { margin-left: auto; }
.cal-dt-edit { flex-basis: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px; margin-top: 4px; background: var(--surface2); border-radius: var(--radius-sm); }
.cal-dt-edit select { width: auto; min-width: 110px; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: .85rem; background: var(--surface); }
.cal-dt-edit select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-sm); outline: none; }
@media (max-width: 1199px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-side { position: static; border-left: none; padding-left: 0; border-top: 1px solid var(--border); margin-top: 20px; padding-top: 16px; }
}
@media (max-width: 640px) {
  .plan-cal-day { min-height: 64px; padding: 4px 3px 5px; gap: 3px; }
  .plan-cal-day-head { justify-content: center; min-height: 22px; }
  .plan-cal-day-num { min-width: 22px; height: 22px; font-size: .76rem; }
  .plan-cal-day-tag { display: none; }
  .plan-cal-dots { justify-content: center; gap: 2px; padding-left: 0; }
  .plan-cal-dot { width: 5px; height: 5px; }
  .plan-cal-leaves, .plan-cal-events { justify-content: center; }
  .plan-cal-leave, .plan-cal-event, .plan-cal-more { font-size: .6rem; padding: 0 3px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISC DISPATCH
   ═══════════════════════════════════════════════════════════════════════════ */
/* Slider — 以 linear-gradient + CSS 變數 --_fill 呈現進度色；JS 在 input 事件同步更新 */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 8px 0;
  border-radius: 999px;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--primary) 0%,
    var(--primary) var(--_fill, 0%),
    var(--border)  var(--_fill, 0%),
    var(--border)  100%
  );
}
input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  height: 6px;
  border-radius: 999px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  margin-top: -5px;
  cursor: grab;
}
input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; }
input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
}
input[type=range]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
}
input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: grab;
  box-sizing: border-box;
}
input[type=range]::-moz-range-thumb:active { cursor: grabbing; }

/* Thumbnails */
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); transition: opacity .15s; }
.thumb:hover { opacity: .82; }
.thumb-sm { width: 56px; height: 56px; }

/* cursor helpers */
[role=button], button, [data-onclick], .row-clickable { cursor: pointer; }

/* ── Expand-clamp（長文截字展開） ──────────────────────────────────────────── */
.clamp-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; }
.clamp-text.expanded { -webkit-line-clamp: unset; display: block; }
.clamp-toggle { font-size: .78rem; color: var(--primary); cursor: pointer; background: none; border: none; padding: 2px 0; margin-top: 2px; font-weight: 500; }
.clamp-toggle:hover { text-decoration: underline; }

/* ── Today's site quick-access cards (dispatch/list) ─────────────────────── */
.site-card, .site-card-empty {
  display: block;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
  text-decoration: none;
  color: inherit;
}
.site-card         { border-left: 4px solid var(--primary); }
.site-card-empty   { border-left: 4px solid var(--border); }
.site-card-warn    { border-left-color: var(--warning); }
.site-card-planned { border-left-color: var(--primary); border-left-style: dashed; }
.site-card:hover, .site-card-empty:hover { box-shadow: var(--shadow); }
/* 「今日尚無，點擊建立」改成表單按鈕（POST 建單）：清掉按鈕預設樣式，看起來跟原本的卡片連結一樣 */
button.site-card-empty { width: 100%; font: inherit; text-align: left; cursor: pointer; }
button.site-card-empty .site-card-name { display: block; }
.site-card-name  { font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.site-card-crew  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.site-card-crew-name { font-size: .7rem; font-weight: 600; color: var(--primary); background: var(--primary-sm); border-radius: 3px; padding: 1px 5px; }

/* ── 推估資料庫表格：操作欄與響應式欄位 ──────────────────────────────────── */
/* 操作欄不裁切，避免連結藥丸被 overflow:hidden 截斷 */
.td-act-cell { overflow: visible !important; }

/* 依螢幕寬度漸進隱藏次要欄位（col+th+td 一起收）；寬螢幕有側邊欄佔 240px，所以門檻比較早 */
@media (max-width: 1200px) {
  col.em-col-outsource, .em-col-outsource { display: none; }
}
@media (max-width: 1024px) {
  col.em-col-members, .em-col-members { display: none; }
}
@media (max-width: 640px) {
  col.em-col-shift, .em-col-shift { display: none; }
}
@media (max-width: 480px) {
  col.em-col-head, .em-col-head { display: none; }
  /* 手機：每筆改兩行——勾選＋完整工項內容（可換行）／狀態＋操作，工項內容不再被操作按鈕擠掉 */
  .mtable-nested thead, .mtable-nested colgroup { display: none; }
  .mtable-nested, .mtable-nested tbody { display: block; width: 100%; }
  .mtable-nested tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .mtable-nested tbody td { border: none !important; padding: 0 !important; }
  .mtable-nested tbody td:first-child { width: 22px; flex-shrink: 0; }
  .mtable-nested tbody td.td-desc { flex: 1 1 calc(100% - 30px); white-space: normal; overflow: visible; font-weight: 600; }
  .mtable-nested tbody td:nth-last-child(2) { margin-left: 30px; }
  .mtable-nested tbody td.td-act-cell { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RWD — 全站響應式修正
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 通用兩欄格線：桌面並排，480px 以下疊排 ──────────────────────────────── */
.rwd-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) {
  .rwd-2col { grid-template-columns: 1fr; gap: 10px; }
}

/* ── ≤860px：Admin 行動端——頂部欄（48px）淨空 ────────────────────────────── */
@media (max-width: 860px) {
  body.has-sidebar .shell-main { padding-top: 48px; }
  /* shell-main 已淨空，page 不需大 padding-top；topbar 提供頁面脈絡，sticky 標題列不需 */
  body.has-sidebar .page { padding-top: 10px; }
  body.has-sidebar .page-title-row {
    position: relative; top: auto;
    margin-top: 0; padding-top: 0;
    background: transparent; z-index: auto;
  }
  /* 不使用 page-title-row / page-head 的頁面，獨立 page-title 仍 sticky 於頂部欄下方 */
  body.has-sidebar .page > .page-title { top: 48px; }
}

/* ── ≤640px：手機直式 ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* 頁面標題縮小，避免大字在窄螢幕擠壓 */
  .page-title { font-size: 1.3rem; letter-spacing: -.02em; }
  .page-title::before { height: 20px; }

  /* 表格改為卡片式行排列，取代橫向捲動
     .mtable:not(.mtable-nested) 是估價歷史資料庫的版本列表，.src-table 是人天推估參考
     紀錄展開後的原始資料明細表，皆套用同一套卡片化規則
     （.mtable-nested 走另一套「依寬度漸進隱藏欄位」策略，不套用這裡） */
  .table-wrap,
  .src-table,
  .mtable:not(.mtable-nested) { overflow: hidden; min-width: 0; }          /* 保留圓角裁切，取消橫向捲動下限 */
  .table-wrap thead,
  .src-table thead,
  .mtable:not(.mtable-nested) thead { display: none; }       /* 隱藏欄標題列 */
  .table-wrap tbody tr,
  .src-table tbody tr,
  .mtable:not(.mtable-nested) tbody tr {
    display: flex; flex-wrap: wrap;
    gap: 4px 8px; padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
  }
  /* 表格本身、表身、表尾也改成區塊並佔滿寬度——只把列改成 flex 時，表格寬度會依內容縮小，
     欄位一多（或內容可斷行）整張卡片就被擠窄。表尾（合計列）比照卡片排列。 */
  .table-wrap table, .table-wrap tbody, .table-wrap tfoot,
  .src-table, .src-table tbody,
  .mtable:not(.mtable-nested), .mtable:not(.mtable-nested) tbody { display: block; width: 100%; min-width: 0; }
  .table-wrap tfoot tr {
    display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px;
    border-top: 1px solid var(--border); background: var(--surface2);
  }
  .table-wrap tfoot td { border: none !important; padding: 0 !important; font-size: .84rem; }
  .table-wrap tfoot td:first-child { flex-basis: 100%; font-weight: 700; }
  .table-wrap tfoot td[data-label] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    flex: 1 1 calc(50% - 6px); min-width: 0; text-align: left !important; }
  .table-wrap tfoot td[data-label]::before { content: attr(data-label); font-size: .7rem; font-weight: 600; color: var(--hint); }
  .table-wrap tfoot td:empty { display: none; }
  .table-wrap tbody tr:last-child,
  .src-table tbody tr:last-child,
  .mtable:not(.mtable-nested) tbody tr:last-child { border-bottom: none; }
  .table-wrap tbody td,
  .src-table tbody td,
  .mtable:not(.mtable-nested) tbody td {
    border: none; padding: 0;
    font-size: .84rem;
    display: inline-flex; align-items: center;
    text-align: left !important;
  }
  .table-wrap tbody td:empty,
  .src-table tbody td:empty,
  .mtable:not(.mtable-nested) tbody td:empty { display: none; }
  /* 第一格（日期或名稱）：獨佔一行，作為卡片標題 */
  .table-wrap tbody td:first-child,
  .src-table tbody td:first-child,
  .mtable:not(.mtable-nested) tbody td:first-child {
    width: 100%; font-size: .92rem; font-weight: 700;
    padding-bottom: 6px; margin-bottom: 2px;
  }
  /* 第一格若只是批次選取核取方塊、圖示型展開按鈕（.expand-btn ▶）
     或純序號（.td-idx，如「#」欄），本身不具標題意義，不應被當成標題獨佔一行；
     改成與下一格（真正的標題，如品名／廠區）並排在同一行 */
  .table-wrap tbody td:first-child:is(.td-idx, :has(input[type="checkbox"], .expand-btn)),
  .mtable:not(.mtable-nested) tbody td:first-child:has(input[type="checkbox"], .expand-btn) {
    width: auto; flex-shrink: 0;
    font-size: inherit; font-weight: 400;
    padding-bottom: 0; margin-bottom: 0;
  }
  .table-wrap tbody td:first-child:is(.td-idx, :has(input[type="checkbox"], .expand-btn)) + td,
  .mtable:not(.mtable-nested) tbody td:first-child:has(input[type="checkbox"], .expand-btn) + td {
    width: calc(100% - 30px); min-width: 0;
    font-size: .92rem; font-weight: 700;
    padding-bottom: 6px; margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* data-label 欄：前綴顯示標籤小 chip */
  .table-wrap td[data-label]::before,
  .src-table td[data-label]::before,
  .mtable:not(.mtable-nested) td[data-label]::before {
    content: attr(data-label);
    /* 純文字小標：不做外框，避免看起來像可以點的標籤 */
    font-size: .7rem; font-weight: 600; color: var(--hint);
    letter-spacing: .02em; line-height: 1.5;
    margin-right: 4px; flex-shrink: 0;
  }
  /* 操作欄（data-no-nav）：推到底部右側 */
  .table-wrap td[data-no-nav],
  .mtable:not(.mtable-nested) td[data-no-nav] {
    width: 100%; justify-content: flex-end;
    padding-top: 6px; margin-top: 2px;
    border-top: 1px dashed var(--border);
  }
  .table-wrap td[data-no-nav]:not(:has(*)),
  .mtable:not(.mtable-nested) td[data-no-nav]:not(:has(*)) { display: none; }
  /* 純裝飾用箭頭 td（row 本身已可點選，不需要 ›） */
  .table-wrap .td-arrow { display: none; }
  /* hover 左邊框在 flex 行內無法正常呈現，改由 row 背景提示 */
  .table-wrap tbody tr:hover td:first-child,
  .src-table tbody tr:hover td:first-child,
  .mtable:not(.mtable-nested) tbody tr:hover td:first-child { box-shadow: none; }

  /* 搜尋列：input / select / button 改直式各自佔滿一行，
     取代 flex-wrap 在窄螢幕下比例失衡的局部換行（報價搜尋／估價搜尋／人天推估查詢共用）
     .search-input 原本的 `flex: 1 1 280px` 是設計給橫向排列用的（280px 為寬度基準），
     換成直式（flex-direction: column）後 flex-basis 會變成「高度」基準，
     若不覆寫會讓輸入框被撐高到 280px——這裡強制 flex:none 讓它只依內容高度顯示 */
  .search-row { flex-direction: column; align-items: stretch; }
  .search-row .search-input,
  .search-row .search-select,
  .search-row .search-btn { width: 100%; flex: none; }

  .head-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .head-actions > a,
  .head-actions > button { width: 100%; justify-content: center; }
  .head-actions > :nth-child(odd):last-child { grid-column: 1 / -1; }

  /* 表格卡片中的欄位值（data-label）：固定佔一半寬度並排成兩欄，
     取代原本依內容文字長度自然換行造成的參差不齊（薪資管理清單等多欄表格尤其明顯） */
  .table-wrap tbody td[data-label],
  .src-table tbody td[data-label],
  .mtable:not(.mtable-nested) tbody td[data-label] {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    /* 標籤在上、數值在下：標籤不會跟數值搶同一行，數值不會被擠成一個字一行 */
    flex-direction: column; align-items: flex-start; gap: 2px;
    overflow-wrap: anywhere;
  }
  .table-wrap tbody td[data-label]::before,
  .src-table tbody td[data-label]::before,
  .mtable:not(.mtable-nested) tbody td[data-label]::before { margin-right: 0; }
  /* 操作欄維持橫排靠右 */
  .table-wrap tbody td[data-label][data-no-nav],
  .mtable:not(.mtable-nested) tbody td[data-label][data-no-nav] { flex-direction: row; align-items: center; }
  /* 操作欄／備註等本來就該獨佔整行的欄位，不受兩欄化影響 */
  .table-wrap td[data-label][data-no-nav],
  .src-table td[data-label][data-no-nav],
  .mtable:not(.mtable-nested) td[data-label][data-no-nav] { flex-basis: 100%; }

  /* 底部留白縮短 */
  .page { padding-bottom: 48px; }
}

/* ── ≤560px：小手機 ─────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* 表單兩欄 / 三欄改單欄 */
  .form-row, .form-row3 { grid-template-columns: minmax(0, 1fr); }
  /* 兩欄表單只有一個欄位時右邊的空格（讓欄位維持半寬）：單欄時不佔高度 */
  .form-row > .form-group:empty { display: none; }
  /* 津貼項目列窄螢幕改直式，避免說明/金額/刪除擠成一行 */
  .allowance-row { flex-wrap: wrap; }
  .allowance-row input[type="text"] { flex-basis: 100%; }
  .allowance-row input[type="number"] { flex: 1; max-width: none; }

  /* 子導覽列橫向捲動，避免項目溢出（中文連結較長時） */
  .subnav { overflow-x: auto; padding: 0 16px; gap: 0; }
  .subnav-link { flex-shrink: 0; }
}

/* ── ≤480px：最窄手機 ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 員工上方分頁（出工單管理、行事曆、打卡、我的出勤、請假）在 360px 以上的手機一排放得下，不用橫滑才看到最後一項 */
  .subnav { padding: 0 10px; }
  .subnav-link { padding: 0 9px; margin: 0 1px; }
  /* 頂部導覽列縮排，隱藏使用者名稱（登出按鈕仍然可見） */
  .nav { padding: 0 14px; }
  .nav-brand { margin-right: 8px; font-size: .88rem; }

  /* 頁面側邊留白縮短 */
  .page { padding-left: 14px; padding-right: 14px; }

  /* 分頁元件：計數文字獨佔一行，頁碼居中 */
  .pagination { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .pagination > span:first-child { width: 100%; text-align: center; }

  /* Modal 在極小螢幕縮減內間距 */
  .modal-head { padding: 14px 16px 12px; }
  .modal-body { padding: 14px 16px 16px; }
  .modal-foot { padding: 0 16px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   報表設計系統（統計報表／員工報表／薪資管理共用）

   · 顏色只給資料：KPI 數字一律墨水色，不再依卡片位置輪流上色；彩色只出現在
     圖表的資料標記上（color-as-signal，不是 decoration）。
   · 類別色 --series-1..8：dataviz 標準色組，白底跑過 validate_palette.js
     全數 PASS（相鄰 CVD ΔE 最差 9.1）。青綠/黃/洋紅對白底 < 3:1，所以每張
     圖都有圖例＋表格檢視。單一系列固定用 --series-1。
   · 圖表元件見 app/static/js/charts.js（rc-*）；報表版面元件為 rp-*。
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --series-1: #2A78D6;  /* 藍 */
  --series-2: #EB6834;  /* 橘 */
  --series-3: #1BAF7A;  /* 青綠 */
  --series-4: #EDA100;  /* 黃 */
  --series-5: #E87BA4;  /* 洋紅 */
  --series-6: #008300;  /* 綠 */
  --series-7: #4A3AA7;  /* 紫 */
  --series-8: #E34948;  /* 紅 */
  --chart-grid:   #EDF1F7;  /* 格線：比卡片底色深一階的細線 */
  --chart-axis:   #CBD5E1;  /* 基線 */
  --chart-muted:  #64748B;  /* 座標軸文字 */
  --chart-deemph: #CBD5E1;  /* 去強調（「其他」、非重點項目） */
}

/* ── 分組分頁導覽 ─────────────────────────────────────────────────────────── */
.rp-nav {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.rp-nav-group { display: flex; align-items: flex-end; gap: 2px; }
.rp-nav-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--hint);
  padding: 0 10px 11px 0; white-space: nowrap;
}
.rp-nav-btn {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: .86rem; color: var(--sub); padding: 8px 12px 10px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease-out, border-color .15s ease-out;
  white-space: nowrap;
}
.rp-nav-btn:hover { color: var(--text); }
.rp-nav-btn.active { color: var(--text); font-weight: 700; border-bottom-color: var(--primary); }
.rp-nav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }

/* ── 分頁頁首：標題＋一句說明＋主要動作 ─────────────────────────────────── */
.rp-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.rp-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.rp-desc { font-size: .82rem; color: var(--sub); margin-top: 6px; line-height: 1.6; max-width: 720px; }
.rp-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── 篩選列：一排、置頂、作用於下方全部內容 ──────────────────────────────── */
.rp-filters {
  display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow-xs);
}
.rp-filters .form-group { margin-bottom: 0; }
.rp-filters label { font-size: .72rem; color: var(--sub); }
.rp-presets { display: flex; gap: 4px; flex-wrap: wrap; align-self: center; margin-right: 6px; }
.rp-chip {
  font: inherit; font-size: .78rem; color: var(--sub); cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; transition: all .15s ease-out;
}
.rp-chip:hover { color: var(--text); border-color: var(--border-s); }
.rp-chip.active { color: var(--primary); background: var(--primary-xs); border-color: var(--primary-sm); font-weight: 600; }
.rp-scope { font-size: .78rem; color: var(--hint); margin: -8px 0 14px; }
.rp-scope b { color: var(--sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-scope.pm-kpi-note { margin: -4px 0 14px; }

/* ── KPI 列：label → 數字 → 較上期／迷你趨勢 ──────────────────────────────── */
.rp-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
/* 4 張卡片在中等寬度會排成 3＋1（最後一張落單）：改成 2×2 */
@media (max-width: 1100px) {
  .rp-kpis:has(> .rp-kpi:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rp-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 15px 18px 13px; box-shadow: var(--shadow-xs); min-width: 0;
  container-type: inline-size;
}
/* 領頭的那個數字（每個報表只有一個）：左側細邊標示「這是重點」，不是裝飾 */
.rp-kpi.lead { border-left: 3px solid var(--primary); }
.rp-kpi-label { font-size: .76rem; color: var(--sub); letter-spacing: .02em; }
.rp-kpi-value {
  font-size: clamp(1.25rem, 13cqw, 1.75rem); font-weight: 750; color: var(--text);
  letter-spacing: -.02em; line-height: 1.25; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-kpi.lead .rp-kpi-value { font-size: clamp(1.35rem, 14cqw, 2rem); }
.rp-kpi-unit { font-size: .8rem; font-weight: 500; color: var(--hint); margin-left: 3px; letter-spacing: 0; }
.rp-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px 8px; margin-top: 6px; min-height: 28px;
  flex-wrap: wrap; }
.rp-kpi-foot > * { min-width: 0; }
/* 漲跌沒有天生好壞（成本變高可能是業務量變大），只用中性色＋箭頭表方向 */
.rp-delta { font-size: .74rem; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-delta b { color: var(--sub); font-weight: 600; }
.rp-kpi-note { font-size: .72rem; color: var(--hint); }

/* ── 圖表網格 ─────────────────────────────────────────────────────────────── */
/* 同一個報表內每一列都用同樣的欄寬比例（寬:窄），卡片的左右邊線上下對齊；
   同一列卡片等高，底邊對齊。內容較長的放寬欄、較短的放窄欄。 */
.rp-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }

.rp-grid.single { grid-template-columns: minmax(0, 1fr); }
.rp-section-title {
  font-size: .82rem; font-weight: 700; color: var(--text); margin: 22px 0 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.rp-section-title small { font-size: .74rem; font-weight: 400; color: var(--hint); }
.rp-note { font-size: .76rem; color: var(--hint); margin-top: 8px; line-height: 1.6; }
.rp-warn { font-size: .82rem; color: #C81E1E; margin-bottom: 12px; }
/* 重新查詢：保留上一次畫面、淡化等待，不閃骨架也不跳版面 */
.rp-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease-out; }

/* ── 圖表卡片 ─────────────────────────────────────────────────────────────── */
.rc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px 14px; box-shadow: var(--shadow-xs); min-width: 0;
}
.rc-card { display: flex; flex-direction: column; }
/* 摘要數字卡（statCardHTML）：2×2 數字格，跟短圖表配成同一列 */
.rc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-top: 4px; }
.rc-stat { padding-left: 12px; border-left: 2px solid var(--border-light); min-width: 0; }
.rc-stat-value { font-size: 1.25rem; font-weight: 750; color: var(--text); letter-spacing: -.01em; line-height: 1.3; }
.rc-stat-label { font-size: .74rem; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rc-title { font-size: .9rem; font-weight: 700; color: var(--text); }
.rc-sub { font-size: .75rem; color: var(--hint); margin-top: 1px; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.rc-legend:empty { display: none; }
.rc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; }
.rc-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rc-swatch.line { height: 2px; width: 14px; border-radius: 2px; }
.rc-legend-label { color: var(--sub); }
.rc-legend-value { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-legend-pct { color: var(--hint); font-size: .72rem; font-variant-numeric: tabular-nums; }
/* 直列圖例：組成圖下方的清單，四欄對齊（色塊／項目／金額／佔比） */
.rc-legend.list {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 48px; gap: 0 10px;
  margin: 14px 0 0; align-items: center;
}
.rc-legend.list .rc-legend-item { display: contents; }
.rc-legend.list .rc-legend-item > * { padding: 7px 0; border-top: 1px solid var(--border-light); }
.rc-legend.list .rc-legend-item:first-child > * { border-top: none; }
.rc-legend.list .rc-swatch { padding: 0; height: 10px; border-top: none; }
.rc-legend.list .rc-legend-label { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-legend.list .rc-legend-value { font-size: .84rem; text-align: right; }
.rc-legend.list .rc-legend-pct { text-align: right; }
.rc-plot { position: relative; width: 100%; }
.rc-table { display: none; }
.rc-card.rc-show-table .rc-table { display: block; }
.rc-card.rc-show-table .rc-plot,
.rc-card.rc-show-table .rc-legend { display: none; }
.rc-empty { font-size: .82rem; color: var(--hint); text-align: center; padding: 36px 0; }

/* SVG 標記 */
.rc-svg { display: block; overflow: visible; font-family: inherit; }
.rc-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.rc-baseline { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.rc-axis { font-size: 11px; fill: var(--chart-muted); font-variant-numeric: tabular-nums; }
.rc-label { font-size: 12px; fill: var(--sub); }
.rc-value { font-size: 11.5px; font-weight: 600; fill: var(--text-med); font-variant-numeric: tabular-nums; }
.rc-hit { fill: transparent; cursor: default; }
.rc-col path, .rc-row path { transition: opacity .15s ease-out; }
.rc-hovering .rc-col:not(.active) path { opacity: .38; }
.rc-row.active path { opacity: .8; }
.rc-row.other .rc-label { fill: var(--hint-line); }
.rc-row.link .rc-hit { cursor: pointer; }
.rc-row.link.active .rc-label { fill: var(--primary); }
.rc-col:focus, .rc-row:focus { outline: none; }
.rc-col:focus-visible path, .rc-row:focus-visible path { opacity: .8; }
.rc-ref { stroke: var(--warning); stroke-width: 1; shape-rendering: crispEdges; }
.rc-ref.danger { stroke: var(--danger); }
.rc-ref-label { font-size: 10.5px; fill: var(--sub); font-weight: 600; }
.rc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rc-dot { stroke: var(--surface); stroke-width: 2; }  /* 2px 底色外圈 */
.rc-hover-dot, .rc-crosshair { display: none; }
.rc-crosshair { stroke: var(--chart-axis); stroke-width: 1; }
.rc-crosshair-on .rc-hover-dot, .rc-crosshair-on .rc-crosshair { display: block; }

/* 組成長條 */
.rc-stack { display: flex; gap: 2px; border-radius: 6px; overflow: hidden; background: var(--surface2); }
.rc-stack-seg { min-width: 3px; transition: opacity .15s ease-out; outline: none; }
.rc-stack-seg:hover, .rc-stack-seg:focus-visible { opacity: .8; }

/* 迷你趨勢線（去強調色，最新一點用強調色） */
.rc-spark { display: block; }
.rc-spark-line { fill: none; stroke: #94A3B8; stroke-width: 1.5; stroke-linejoin: round; }
.rc-spark-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 1.5; }

/* 上限量表：軌道是填色的淺一階（同色系），超過改危險色 */
.rc-meter { height: 8px; border-radius: 999px; background: rgba(42,120,214,.14); overflow: hidden; }
.rc-meter-fill { height: 100%; border-radius: 999px; background: var(--series-1); transition: width .3s ease-out; }
.rc-meter.near { background: rgba(217,119,6,.15); }
.rc-meter.near .rc-meter-fill { background: var(--warning); }
.rc-meter.over { background: rgba(220,38,38,.13); }
.rc-meter.over .rc-meter-fill { background: var(--danger); }

/* Tooltip：值在前（粗、亮），名稱在後（次要） */
.rc-tooltip {
  position: fixed; z-index: 1000; pointer-events: none;
  background: var(--ink-900); color: var(--ink-text-h);
  border-radius: 8px; padding: 8px 11px; font-size: .78rem; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(13,16,39,.28);
  opacity: 0; transform: translateY(4px); transition: opacity .12s ease-out, transform .12s ease-out;
  max-width: 280px;
}
.rc-tooltip.show { opacity: 1; transform: none; }
.rc-tip-title { font-size: .72rem; color: var(--ink-text); margin-bottom: 3px; }
.rc-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.rc-tip-key { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.rc-tip-key.line { width: 12px; height: 2px; }
.rc-tip-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-tip-name { color: var(--ink-text); }

/* 表格檢視／報表明細表：數字欄等寬數字靠右 */
.rc-data-table th.num, .rc-data-table td.num,
.rp-table th.num, .rp-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-data-table .rc-total td, .rp-table tr.rp-total td { font-weight: 700; background: var(--surface2); }
.table-wrap .rp-table thead th, .table-wrap .rc-data-table thead th { padding: 8px 12px; }
.table-wrap .rp-table tbody td, .table-wrap .rc-data-table tbody td { padding: 8px 12px; vertical-align: middle; }
/* 卡片裡的表格不再自帶邊框陰影（避免卡片裡又一張卡片），只留上下細線 */
.rc-card .table-wrap { border: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--border); }
.rp-table td.strong { font-weight: 700; color: var(--text); }
/* 佔比欄：細比例條（單一系列色）＋百分比 */
.rp-share { display: flex; align-items: center; gap: 10px; }
.rp-share-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; min-width: 40px; }
.rp-share-fill { height: 100%; border-radius: 999px; background: var(--series-1); }
.rp-total .rp-share-fill { background: var(--chart-axis); }
.rp-share-pct { width: 48px; text-align: right; font-size: .82rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.rp-table td.muted { color: var(--sub); }

/* 員工報表：請假年度額度（每項一條上限量表） */
.wr-limits { display: flex; flex-direction: column; gap: 14px; }
.wr-limit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wr-limit-label { font-size: .84rem; color: var(--text-med); }
.wr-limit-value { font-size: .95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wr-limit-value span { font-size: .74rem; font-weight: 400; color: var(--hint); }
.wr-limit-value.over { color: var(--danger); }
.wr-limit-basis { font-size: .7rem; color: var(--hint); margin-top: 4px; }

@media (max-width: 900px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rp-kpi { padding: 12px 13px 10px; }
  .rp-nav { gap: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
  .rp-nav-label { display: none; }
  .rp-filters { padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   全站一致性元件（系統視覺改版）：提示框、表格列操作、表單分區
   ══════════════════════════════════════════════════════════════════════════ */

/* 提示框：頁面內需要注意的訊息（不是 SweetAlert 彈窗）。語意色來自 :root 的
   --info-*／--warning-*／--danger-*，模板不再寫死色碼。 */
.notice {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 14px; margin-bottom: 16px;
  border-radius: var(--radius-sm); border: 1px solid; border-left-width: 3px;
  font-size: .84rem; line-height: 1.55;
}
.notice-title { font-weight: 700; font-size: .86rem; }
.notice p { margin: 0; }
.notice.info    { background: var(--info-bg);    border-color: var(--info-border);    border-left-color: var(--primary); color: var(--info-text); }
.notice.warning { background: var(--warning-bg); border-color: var(--warning-border); border-left-color: var(--warning); color: var(--warning-text); }
.notice.danger  { background: var(--danger-bg);  border-color: var(--danger-border);  border-left-color: var(--danger);  color: var(--danger-text); }
.notice.compact { padding: 8px 12px; margin-bottom: 12px; font-size: .8rem; }

.notice-chip {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; text-decoration: none;
  background: rgba(255,255,255,.7); border: 1px solid currentColor; color: inherit;
  transition: background .14s;
}
.notice-chip:hover { background: #fff; text-decoration: none; }

@media (hover: hover) {
  .table-wrap tbody tr .link-danger { opacity: 0; transition: opacity .14s ease-out; }
  .table-wrap tbody tr:hover .link-danger,
  .table-wrap tbody tr:focus-within .link-danger { opacity: 1; }
}

/* 表單分區：左欄區塊標題＋一句說明、右欄欄位（寬螢幕），手機單欄。
   長表單（員工、專案、薪資設定）用它分段，重點欄位不被說明文字淹沒。 */
.form-section {
  display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 12px 32px;
  padding: 22px 0; border-top: 1px solid var(--border);
}
.form-section:first-child,
input[type=hidden]:first-child + .form-section { border-top: none; padding-top: 4px; }
.form-section-head h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.form-section-head p { font-size: .8rem; color: var(--sub); line-height: 1.6; }
.form-section-body { min-width: 0; }
/* 頁首右側的單一指標（例如代墊款項「待核銷合計」）：標籤小字＋墨水色數字 */
.head-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.head-stat-label { font-size: .74rem; color: var(--sub); }
.head-stat-value { font-size: 1.45rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* 表單內的分組標題（例如薪資設定彈窗的「勞保／健保／加班費倍率」），
   後面可接一段灰色補充說明 <span> */
.form-group-title { font-weight: 700; font-size: .86rem; color: var(--text); margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.form-group-title span { font-weight: 400; color: var(--hint); font-size: .76rem; margin-left: 4px; }
.form-subgroup-title { font-weight: 600; font-size: .8rem; color: var(--sub); margin: 10px 0 6px; }
/* 欄位標籤後的小字限制說明（例如「最低 1.34」） */
.label-hint { font-size: .76rem; color: var(--hint); font-weight: 400; margin-left: 2px; }
/* 表單底部動作列：取消（次要）＋儲存（主要）靠右，跟上方分區用細線隔開 */
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
/* 冗長的法規／計算說明收進可展開的「說明」 */
.form-more { margin-top: 4px; }
.form-more summary { cursor: pointer; font-size: .76rem; color: var(--sub); list-style: none; display: inline-flex; gap: 4px; }
.form-more summary::-webkit-details-marker { display: none; }
.form-more summary::before { content: "＋"; }
.form-more[open] summary::before { content: "－"; }
.form-more p { font-size: .76rem; color: var(--hint); line-height: 1.65; margin-top: 4px; }
/* 中文說明文字換行：瀏覽器預設任兩個字之間都能斷（會切出「零修｜單」「可打｜卡範圍」）。
   keep-all 讓中文字之間不斷行，只在標點（，、。：）與空白處換行，一個子句保持完整；
   子句本身比一行還長時才由 overflow-wrap: anywhere 在行尾斷開。pretty 避免最後一行只剩一兩個字。 */
p, li, .form-hint, .tx-sub, .tx-hint, .page-sub, .rp-desc, .rq-rs-meta, .label-hint, .notice, .empty,
.swal2-html-container { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
/* 說明條列：一段說明有好幾個獨立重點時用，取代一長串句子。
   字級與顏色沿用所在的樣式（form-hint、page-sub、rp-desc、tx-sub、說明摺疊區），所以通常跟那個 class 一起用 */
.note-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; line-height: 1.65; max-width: 76ch; }
.note-list li { position: relative; padding-left: 13px; }
.note-list li::before { content: ""; position: absolute; left: 3px; top: .74em; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .55; }
.note-list b { font-weight: 600; color: var(--text); }
.form-more .note-list { font-size: .76rem; color: var(--hint); }
.form-more .note-list + p, .form-more p + .note-list { margin-top: 6px; }
@media (max-width: 760px) {
  .form-section { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* 派工總覽：今日各廠區出工狀態清單（每列可點進當日出工單） */
.dash-sites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-sites li + li { border-top: 1px solid var(--border-light); }
.dash-site {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 10px 6px; border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  transition: background .14s;
}
.dash-site:hover { background: var(--primary-xs); text-decoration: none; }
button.dash-site { width: 100%; font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
button.dash-site:hover { background: var(--primary-xs); }
.dash-site-name { font-weight: 600; font-size: .88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-site-meta { font-size: .78rem; color: var(--hint); font-variant-numeric: tabular-nums; }

/* 卡片／區塊的標題列：標題在左、動作（編輯等）在右 */
.card-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-bar h2 { margin: 0; }
/* 區塊標題下的說明：比內文小一級、顏色淡，跟標題隔一點距離，下方再留距離才接內容（標題與說明分得出層次） */
.card-bar + p.tx-sub, .card-bar + ul.tx-sub, .card-bar + p.section-desc {
  margin: 6px 0 16px; font-size: .84rem; line-height: 1.6; max-width: 76ch; }
.section-title + p.form-hint, .section-title + p.tx-sub { margin: -8px 0 16px; font-size: .8rem; line-height: 1.6; }   /* 標題本身有 14px 下邊距 */
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-bar .section-title { margin-bottom: 0; }
/* 膠囊清單、鍵值清單、行內中繼資訊 */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kv-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: .85rem; }
.kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kv-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--text-med); }
.meta-inline strong { color: var(--sub); font-weight: 600; margin-right: 6px; }
.empty-inline { color: var(--hint); font-size: .85rem; }
.stack-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
/* 備註區塊（整日備註等）：左側細線、淡底 */
.note-block {
  margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--border-s);
  background: var(--surface2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .85rem; color: var(--text-med);
}
.note-block-label { display: block; font-size: .72rem; font-weight: 700; color: var(--sub); margin-bottom: 3px; letter-spacing: .04em; }
/* 出工細項卡：說明文字、右側完工百分比（墨水色大數字，不上色） */
.log-note { font-size: .85rem; color: var(--text-med); margin-top: 4px; }
.log-pct { flex-shrink: 0; font-size: 1.45rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1; }
.log-pct span { font-size: .8rem; font-weight: 600; color: var(--hint); margin-left: 1px; }
/* 可延續細項面板（出工單編輯模式） */
.carryover-panel { background: var(--warning-bg); border-color: var(--warning-border); margin-bottom: 14px; }
.carryover-panel .section-card-head { background: transparent; border-bottom-color: var(--warning-border); }
.carryover-title { font-size: .78rem; font-weight: 700; color: var(--warning-text); }

/* 通用：區塊內的破壞性動作（刪除／移除）只在滑鼠移到該區塊時出現——同
   .row-actions 的規則，適用於不是表格列的卡片／清單列。觸控裝置常駐。 */
@media (hover: hover) {
  .hover-reveal .link-danger { opacity: 0; transition: opacity .14s ease-out; }
  .hover-reveal:hover .link-danger, .hover-reveal:focus-within .link-danger { opacity: 1; }
  .hover-reveal .hover-reveal:not(:hover) .link-danger { opacity: 0; }
}
/* 一排並列的精簡欄位（卡片內的新增／編輯表單） */
.inline-fields { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-fields .form-group { margin-bottom: 0; }
.form-compact label { font-size: .78rem; }

/* 專案詳情頁首：右側完工比例（墨水色數字＋量表）與狀態 */
.proj-desc { font-size: .84rem; color: var(--text-med); margin-top: 4px; }
.proj-head-side { display: flex; align-items: flex-start; gap: 22px; flex-shrink: 0; }
.proj-completion { min-width: 150px; }
.proj-completion-label { font-size: .74rem; color: var(--sub); }
.proj-completion-value { font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -.03em; line-height: 1.15; margin: 2px 0 6px; }
.proj-completion-value span { font-size: 1rem; font-weight: 600; color: var(--hint); margin-left: 2px; }
.proj-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proj-expense-total { font-size: .85rem; font-weight: 700; color: var(--text-med); font-variant-numeric: tabular-nums; }
.proj-expense-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.proj-expense-row + .proj-expense-row, .proj-expense-row + div + .proj-expense-row { border-top: 1px solid var(--border-light); }

/* 廠區詳情：設定一覽（4 欄，手機 2 欄） */
.rc-stats.site-settings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .rc-stats.site-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) {
  .head-actions.inline { display: flex; width: auto; }
  .head-actions.inline > a, .head-actions.inline > button { width: auto; }
}

/* 表格／文字的單一用途工具類別：取代模板裡重複的 style="text-align:right" 等寫法。
   用 !important 才蓋得過 .table-wrap thead th 這類較高權重的預設；手機版卡片化表格的
   text-align:left !important 權重更高，行為跟原本 inline style 相同。 */
.ta-r { text-align: right !important; }
.ta-c { text-align: center !important; }
.tx-sub { color: var(--sub) !important; }
.tx-lines { white-space: pre-line; }
.nw { white-space: nowrap; }   /* 短的「按鈕名稱」等不要被拆到兩行 */   /* JS 用 textContent 填的多句說明：\n 換行 */
.tx-hint { color: var(--hint) !important; }
.tx-strong { font-weight: 600 !important; }

/* ── 共用：人員單選格、窄版 modal、modal 底部動作列 ───────────────────────── */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.modal.modal-narrow { max-width: 480px; }
.modal-actionbar { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.modal-actionbar > .btn-primary { min-width: 100px; }
.modal-actionbar > .btn-outline:last-child { margin-left: auto; }

/* 鉛筆編輯鈕：原本沒有樣式，只是一個裸 SVG 連結 */
.edit-pencil-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--hint); flex-shrink: 0; transition: background-color .12s, color .12s; }
.edit-pencil-btn:hover { background: var(--primary-xs); color: var(--primary); }

/* ── 專案詳情 ─────────────────────────────────────────────────────────────── */
.pd-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pd-head-actions { margin-top: 8px; }
.pd-block { margin-bottom: 14px; }
.pd-trend { width: 100%; height: 72px; display: block; }
.pd-trend-axis { display: flex; justify-content: space-between; margin-top: 5px; font-size: .75rem; color: var(--hint); }
.pd-bar-side { display: flex; align-items: center; gap: 10px; }
.pd-expense-list { border-top: 1px solid var(--border); margin-top: 10px; }
.pd-expense-main { flex: 1; min-width: 0; }
.pd-expense-title { font-size: .85rem; font-weight: 600; }
.pd-expense-title span { font-weight: 400; color: var(--hint); margin-left: .8em; }
.pd-expense-meta { font-size: .76rem; color: var(--hint); }
.pd-expense-sub { margin-top: 14px; font-size: .78rem; font-weight: 600; color: var(--text-med); }
.pd-expense-amount { font-size: .85rem; font-weight: 700; color: var(--text-med); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.proj-expense-row > .link, .proj-expense-row > form { flex-shrink: 0; }
.pd-expense-edit { padding: 0 0 12px; }
.pd-grow { flex: 1; min-width: 140px; }
.pd-field-narrow { margin-top: 10px; max-width: 280px; }
.pd-submit { margin-top: 10px; }
.pd-empty { margin-top: 8px; }
.pd-add-expense { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.pd-section-bar { margin-bottom: 4px; }
.pd-section-bar .chip-row { margin-top: 0; flex-shrink: 0; }
.pd-section-sub { margin-bottom: 14px; }

.pd-wi-list { display: flex; flex-direction: column; gap: 14px; }
.work-item-card { margin-bottom: 0; }
.pd-wi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pd-wi-main { flex: 1; min-width: 0; }
.pd-title-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-wi-name { font-size: 1rem; font-weight: 700; margin: 0; }
.pd-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: .74rem; color: var(--hint); }
.pd-meta .pd-warn { color: var(--warning-strong); font-weight: 600; }
.pd-meta .pd-late { color: var(--danger); font-weight: 600; }
.pd-wi-side { flex-shrink: 0; width: 130px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pd-wi-side .progress-track { width: 100%; }
.pd-wi-pct { display: flex; align-items: center; gap: 8px; }
.pd-spark { width: 60px; height: 20px; flex-shrink: 0; }
.pd-delta { font-size: .7rem; font-weight: 600; }
.pd-delta.up { color: var(--success-text); }
.pd-delta.down { color: var(--danger); }

/* 細項：名稱＋狀態一行，下面是出工紀錄（日期｜說明｜完工後％），右側是細項完工％ */
.work-item-tasks { margin-top: 14px; border-top: 1px solid var(--border-light); }
.work-item-task-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; }
.work-item-task-row + .work-item-task-row { border-top: 1px dashed var(--border-light); }
.pd-task-main { flex: 1; min-width: 0; }
.pd-task-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pd-task-name { font-size: .86rem; font-weight: 600; color: var(--text); }
.pd-task-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pd-task-pct { font-size: .88rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pd-logs { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border-light); }
.pd-log { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: .8rem; }
.pd-log-date { color: var(--hint); font-size: .74rem; font-variant-numeric: tabular-nums; text-decoration: none; }
.pd-log-date:hover { color: var(--primary); text-decoration: underline; }
.pd-log-note { color: var(--text-med); overflow-wrap: anywhere; }
.pd-log-pct { font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-log-photos { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 96px; }
.pd-wi-empty { margin-top: 12px; }
.pd-wi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); }

.pd-closed { margin-bottom: 0; padding: 0; overflow: hidden; }
.pd-closed > summary { padding: 14px 18px; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--sub); display: flex; align-items: center; gap: 8px; list-style: none; user-select: none; }
.pd-closed > summary::-webkit-details-marker { display: none; }
.pd-closed > summary:hover { background: var(--surface2); }
.details-chevron { transform: rotate(-90deg); transition: transform .15s ease-out; }
details[open] > summary .details-chevron { transform: none; }
.pd-closed-body { border-top: 1px solid var(--border); padding: 4px 18px 8px; }
.pd-closed-item { padding: 12px 0; }
.pd-closed-item + .pd-closed-item { border-top: 1px solid var(--border-light); }
.pd-closed-name { font-weight: 600; font-size: .86rem; }
.pd-closed-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pd-closed-side .progress-track { width: 80px; margin-top: 3px; }
.pd-closed-pct { font-size: 1.05rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-closed-tasks { margin-top: 8px; }
.pd-closed-task { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; }
.pd-closed-task + .pd-closed-task { border-top: 1px dashed var(--border-light); }

.pd-add-wi { margin-top: 18px; }
.pd-add-wi > .card { margin-top: 10px; }
.pd-add-wi h2 { margin-bottom: 10px; }
.pd-add-wi .form-hint { margin-top: 8px; }
.pd-weight { display: flex; align-items: center; gap: 8px; }
.pd-weight input[type="range"] { width: 110px; }
.pd-weight output { font-size: .85rem; font-weight: 700; color: var(--primary); width: 26px; }

@media (max-width: 640px) {
  .pd-wi-side { width: 96px; }
  .pd-head-main { flex-basis: 100%; }
  .proj-head-side { width: 100%; justify-content: space-between; }
  /* 日期＋完工後％同一行，說明（可能是空的）換到下一行 */
  .pd-log { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date pct" "note note"; gap: 2px 10px; }
  .pd-log-date { grid-area: date; }
  .pd-log-pct { grid-area: pct; }
  .pd-log-note { grid-area: note; }
  .pd-log-note:empty { display: none; }
  .pd-log-photos { margin-left: 0; }
}

/* ── 共用：完工比例（滑桿＋數字框）、小尺寸人員切換、切換鈕列 ─────────────── */
.pct-field { display: flex; align-items: center; gap: 10px; }
/* .pct-field 前綴：要蓋過 .form-group input 的 width:100%／padding／border */
.pct-field .completion-slider { flex: 1; min-width: 0; }
.pct-field .pct-input { flex: 0 0 56px; width: 56px; text-align: center; padding: 6px 4px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .85rem; font-weight: 700; color: var(--primary); }
.pct-unit { font-size: .82rem; color: var(--hint); }
.toggle-row { display: flex; flex-wrap: wrap; gap: 8px; }
.worker-toggle.sm { font-size: .78rem; padding: 6px 10px; }

/* ── 出工單：今日出工細項 ─────────────────────────────────────────────────── */
.wl-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.wl-count { font-size: .78rem; color: var(--hint); }
.wl-spinner { font-size: .74rem; color: var(--hint); }
.wl-open-tasks { padding: 0 18px; }
.wl-list { display: flex; flex-direction: column; gap: 12px; }
.wl-card { margin-bottom: 0; background: var(--surface2); }
.wl-card.has-error { border: 1.5px solid var(--danger); }
.wl-top { display: flex; align-items: flex-start; gap: 12px; }
.wl-main { flex: 1; min-width: 0; }
.wl-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wl-tags + .wl-title, .wl-main > .pill + .wl-title { margin-top: 5px; }
/* 專案／工項名稱可能很長（例如合約帶入的工項）：.pill 預設不換行，會撐出欄位壓到右側完工比例 */
.wl-tags .pill, .dd-log-main > .pill, .co-wi { max-width: 100%; white-space: normal; text-align: left; border-radius: 10px; }
.wl-title { font-weight: 600; font-size: .88rem; color: var(--text); }
.wl-note { font-size: .78rem; color: var(--sub); margin-top: 5px; }
.wl-new { font-size: .68rem; margin-top: 6px; }
.wl-side { text-align: right; flex-shrink: 0; }
.wl-side .progress-track { width: 80px; margin-top: 4px; }
.wl-pct { font-size: 1.3rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.wl-pct.done { color: var(--success-text); }
.wl-crew { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wl-errors { margin: 8px 0 0; }
.wl-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.wl-actions .link-danger { margin-left: auto; }
.log-edit-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.wl-form-actions { display: flex; gap: 8px; }

.pill.pill-xs { font-size: .68rem; padding: 1px 8px; }

/* ── 員工薪資明細（admin/_payroll_worker_detail.html，薪資管理「詳情/調整」彈窗）──
   抬頭（姓名＋應發−應扣＝實領）→ 應發／應扣兩欄（點一行就地展開修改）→ 加一筆 → 逐日出勤／請假分頁 */
.pwd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.pwd-name { font-size: 1.2rem; font-weight: 700; margin: 0; color: var(--text); }
.pwd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; color: var(--sub); margin: 3px 0 0; }
.pwd-sum { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
.pwd-sum dt { font-size: .72rem; color: var(--sub); margin: 0 0 2px; }
.pwd-sum dd { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--text-med); font-variant-numeric: tabular-nums; }
.pwd-sum .is-net dd { font-size: 1.45rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.pwd-sum-op { color: var(--hint); padding-bottom: 2px; }
.pwd-banner { font-size: .8rem; color: var(--text-med); background: var(--warning-bg); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 14px; }
.pwd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .pwd-cols { grid-template-columns: 1fr; gap: 12px; } }
.pwd-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.pwd-list-title { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 9px 14px; font-size: .78rem; font-weight: 700; color: var(--sub); background: var(--surface2); border-bottom: 1px solid var(--border); }
.pwd-list-title span { color: var(--text); font-variant-numeric: tabular-nums; }
.pwd-list-empty { font-size: .8rem; color: var(--hint); padding: 12px 14px; margin: 0; }
.pwd-row + .pwd-row { border-top: 1px solid var(--border); }
.pwd-row-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: .86rem; color: var(--text); list-style: none; }
.pwd-row-head::-webkit-details-marker { display: none; }
details.pwd-row > .pwd-row-head { cursor: pointer; transition: background .12s; }
details.pwd-row > .pwd-row-head:hover, details.pwd-row[open] > .pwd-row-head { background: var(--primary-xs); }
/* 可以點開的行在金額後面有一個小箭頭（展開時轉向下） */
details.pwd-row > .pwd-row-head::after { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin: 0 2px 0 -2px; border-right: 1.5px solid var(--hint); border-bottom: 1.5px solid var(--hint); transform: rotate(-45deg); transition: transform .15s; }
details.pwd-row[open] > .pwd-row-head::after { transform: rotate(45deg); border-color: var(--primary); }
.pwd-row-label { min-width: 0; }
.pwd-row-label small { display: block; font-size: .72rem; color: var(--sub); margin-top: 1px; }
.pwd-amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pwd-orig { color: var(--hint); font-weight: 400; font-size: .76rem; margin-right: 6px; }
.pwd-row.is-corrected .pwd-amt { color: var(--warning-text); }
.pwd-row.is-saved > .pwd-row-head { animation: pwd-saved 1.8s ease-out; }
@keyframes pwd-saved { from { background: var(--primary-sm); } to { background: transparent; } }
.pwd-row-head > .link { margin-left: auto; }
.pwd-edit { padding: 12px 14px 14px; background: var(--surface2); border-top: 1px dashed var(--border); }
.pwd-edit-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.pwd-field { display: flex; flex-direction: column; gap: 4px; flex: 0 1 140px; min-width: 0; font-size: .74rem; font-weight: 600; color: var(--sub); }
.pwd-field-grow { flex: 1 1 200px; }
.pwd-field-kind { flex-basis: 200px; }
.pwd-field input, .pwd-field select { width: 100%; padding: 7px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: .88rem; font-weight: 400; background: var(--surface); color: var(--text); outline: none; }
.pwd-field input:focus, .pwd-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-sm); }
.pwd-field input[type=number] { font-variant-numeric: tabular-nums; }
.pwd-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pwd-edit-ref { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--sub); }
.pwd-edit-del { margin-left: auto; }
.pwd-edit-more { font-size: .76rem; color: var(--sub); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.pwd-edit-text { font-size: .78rem; color: var(--text-med); margin: 0; }
.pwd-text-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.pwd-tip { font-size: .76rem; color: var(--hint); margin: 8px 0 0; }
.pwd-add { margin-top: 14px; }
.pwd-add > summary { list-style: none; display: inline-flex; }
.pwd-add > summary::-webkit-details-marker { display: none; }
.pwd-add[open] > summary { display: none; }
.pwd-add-form { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface2); }
.pwd-foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.pwd-tabs { margin-top: 22px; align-items: center; }
.pwd-tab-note { margin-left: auto; padding-left: 12px; font-size: .72rem; color: var(--hint); }
.pwd-pane { padding-top: 10px; }
.pwd-day-table { max-height: 320px; overflow-y: auto; }
.pwd-day-table td:first-child { white-space: nowrap; }
.pwd-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.pwd-link { font-size: .76rem; }
.pwd-day-filter { display: flex; align-items: baseline; gap: 10px; font-size: .8rem; color: var(--sub); margin: 0 0 6px; }
.pwd-title-note { font-weight: 400; color: var(--sub); font-size: .78rem; }
/* 津貼設定（admin/payroll_allowance.html）：表格內勾選＋金額輸入 */
.aw-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.aw-amount { width: 120px; text-align: right; padding: 6px 10px; border: 1px solid var(--border-s); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.aw-amount:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-sm); }
tr.aw-off td { color: var(--hint); }

/* ── 共用：垂直排列的表單（欄位之間用 gap，不靠 .form-group 的 margin） ── */
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-stack > .form-group { margin-bottom: 0; }
.form-stack .form-hint { margin-top: 4px; }
.label-hint.is-required { color: var(--danger); }

/* ── 出工單：新增細項 modal ─────────────────────────────────────────────── */
.log-form-error { margin-bottom: 14px; }
.log-suggest { margin-top: 6px; }
.log-prev { padding: 8px 12px; background: var(--surface2); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .8rem; color: var(--text-med); }
.log-prev .progress-track { margin-top: 5px; }
.log-prev .progress-fill-ref { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.4, 0, .2, 1); }
.log-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 4px; }

/* ── 專案搜尋（search.html） ───────────────────────────────────────────────── */
.sr-form { margin-bottom: 24px; }
.sr-count { font-size: .82rem; color: var(--hint); margin-bottom: 18px; }
.sr-card { border-left: 4px solid var(--border); padding-left: 18px; margin-bottom: 14px; }
.sr-card.is-direct { border-left-color: var(--primary); }
.sr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.sr-head-main { flex: 1; min-width: 0; }
.sr-title { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.4; text-decoration: none; }
a.sr-title:hover { color: var(--primary); text-decoration: underline; }
.sr-tags { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.sr-progress { flex-shrink: 0; width: 76px; text-align: right; }
.sr-progress-value { font-size: 1.3rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.sr-progress-value span { font-size: .78rem; font-weight: 600; color: var(--hint); margin-left: 1px; }
.sr-list { border-top: 1px solid var(--border); padding-top: 4px; display: flex; flex-direction: column; }
.sr-list.no-rule { border-top: none; padding-top: 0; }
.sr-note { padding-top: 8px; font-size: .8rem; color: var(--hint); }
.sr-group-label { font-size: .78rem; font-weight: 600; color: var(--hint); margin-bottom: 8px; }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.sr-row + .sr-row { border-top: 1px dashed var(--border); }
.sr-row > .pill, .sr-row > .sr-side, .sr-row > .sr-go { flex-shrink: 0; }
.sr-row.is-link:hover { background: var(--surface2); text-decoration: none; }
.sr-main { flex: 1; min-width: 0; }
.sr-text { font-size: .83rem; color: var(--text-med); }
.sr-title.sr-text { font-size: 1rem; color: var(--text); }
.sr-meta { display: block; font-size: .72rem; color: var(--hint); margin-top: 2px; }
.sr-side { font-size: .78rem; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
.sr-side.sr-hint { font-weight: 400; font-size: .72rem; color: var(--hint); }
.sr-go { font-size: .72rem; }
.sr-text mark { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }

/* ── 共用：modal 尺寸（預設 560px）、有副標的 modal 標頭、提示框內的清單 ──── */
.modal.modal-sm   { width: 400px; }
.modal.modal-wide { width: 620px; }
.modal-head.has-sub { align-items: flex-start; }
.modal-head.has-sub h2 { margin: 0; }
.modal-sub { margin: 4px 0 0; font-size: .78rem; color: var(--hint); }
.notice-list { padding-left: 18px; margin: 0; }
.thumb.is-clickable { cursor: zoom-in; }

/* ── 出工單詳情（dispatch/detail.html 預覽模式） ──────────────────────────── */
.dd-lock-hint { font-size: .78rem; }
.dd-block { margin-bottom: 14px; }
.dd-card { margin-bottom: 0; }
.dd-meta-bar { flex-wrap: wrap; gap: 16px; }
.dd-log-bar { align-items: flex-start; }
.dd-log-main { flex: 1; min-width: 0; }
.dd-log-title { font-weight: 600; }
.pill + .dd-log-title { margin-top: 5px; }
.dd-log-crew { margin-top: 8px; }
.dd-photos { gap: 8px; }
.dd-start { text-align: left; padding: 28px 24px; background: var(--surface); border: 1px dashed var(--border-s); border-radius: var(--radius-lg); }
.dd-start-list { margin: 6px 0 14px; padding-left: 18px; font-size: .84rem; color: var(--sub); line-height: 1.9; }
.dd-dup-date { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 1rem; margin-bottom: 16px; }
.dd-dup-actions { display: flex; gap: 8px; }
.dd-dup-actions > .btn { flex: 1; justify-content: center; }
/* 出工單修改紀錄（工時／加班／費用，預設收合） */
.dd-history { margin-top: 14px; padding: 0; }
.dd-history-sub { font-size: .76rem; font-weight: 400; color: var(--hint); }
.dd-history-list { list-style: none; margin: 0; padding: 0 18px 12px; font-size: .82rem; }
.dd-history-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.dd-history-time { color: var(--sub); font-variant-numeric: tabular-nums; }
.dd-history-who { font-weight: 600; }
/* 已提交出工單的雜支表：代墊人＋核銷狀態併成一格，金額靠右對齊放最後 */
.dd-exp-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; font-size: .8rem; color: var(--sub); }
.dd-exp-table td:first-child { font-weight: 600; }
.dd-exp-qty { margin-left: 8px; font-size: .76rem; font-weight: 400; color: var(--hint); }
.dd-exp-payer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dd-exp-when { font-size: .74rem; color: var(--hint); font-variant-numeric: tabular-nums; }
.dd-exp-none { color: var(--hint); font-size: .8rem; }
.dd-exp-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 641px) { .dd-exp-table thead th:last-child, .dd-exp-amount { width: 1%; } }
.dd-exp-table tfoot td:first-child { color: var(--sub); }
@media (max-width: 640px) {
  .section-bar:has(.dd-exp-summary) { flex-wrap: wrap; }
  .dd-exp-summary { justify-content: flex-start; }
  /* 手機卡片：標題列「分類……金額」，下面一行代墊／核銷、一行備註，不另外掛欄位小標 */
  .table-wrap.dd-exp-table tbody td { flex: 0 0 100%; display: block; }
  .table-wrap.dd-exp-table tbody td:first-child { flex: 1 1 0; width: auto; min-width: 0; order: 0; }
  .table-wrap.dd-exp-table tbody td.dd-exp-amount { flex: 0 0 auto; order: 1; font-size: .92rem; padding-bottom: 6px; }
  .table-wrap.dd-exp-table tbody td:not(:first-child):not(.dd-exp-amount) { order: 2; }
  .table-wrap.dd-exp-table tbody td[data-label]::before { display: none; }
  .table-wrap.dd-exp-table tfoot td:first-child { flex: 1 1 0; font-weight: 700; }
  .table-wrap.dd-exp-table tfoot td[data-label] { flex: 0 0 auto; align-items: flex-end; font-size: .92rem; }
  .table-wrap.dd-exp-table tfoot td[data-label]::before { display: none; }
}

.pick-grid.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

/* ── 派工預排（admin/plans.html） ────────────────────────────────────────── */
.pl-month-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-sub { margin-bottom: 14px; }
.pl-hint { font-size: .76rem; color: var(--hint); }
.pl-form { margin-top: 12px; }
.pl-import-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.form-group .pl-year { width: 110px; }
.pl-csv { margin-top: 12px; padding: 12px 14px; background: var(--surface2); border-radius: var(--radius-sm); }
.pl-years { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.pl-year-pill { gap: 8px; }
.pl-year-pill form { display: inline; }
.pl-year-remove { background: none; border: none; cursor: pointer; color: var(--danger); opacity: .7; font-size: .85em; padding: 0; line-height: 1; }
.pl-year-remove:hover { opacity: 1; }

/* ── 出工單編輯區塊共用（dispatch/_section_*.html） ───────────────────────── */
.no-shrink { flex-shrink: 0; }
.section-card-head h2.is-muted { color: var(--hint); }
.section-card.is-locked { opacity: .65; }
.section-empty[role="button"] { cursor: pointer; }
.sc-summary { font-size: .78rem; color: var(--hint); }
.sc-locked-hint { font-size: .82rem; color: var(--sub); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sc-count { font-size: .72rem; color: var(--hint); }
.sc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-list { display: flex; flex-wrap: wrap; gap: 12px; }
.sc-item { font-size: .85rem; color: var(--text-med); }
.sc-body-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sc-body-row.is-top { align-items: flex-start; }
.sc-actions { flex-shrink: 0; display: flex; gap: 8px; align-items: center; }
.sc-empty-hint { padding: 10px 18px 14px; font-size: .83rem; color: var(--hint); }
.sc-save-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sc-save-row .dirty-notice { margin: 0; }
.sc-spinner { font-size: .83rem; color: var(--hint); }
.filter-bar.sc-batch { margin-bottom: 14px; align-items: flex-start; }
.sc-warn { color: var(--warning-strong); margin-left: 6px; font-weight: 600; }
.form-hint.is-info { color: var(--primary); }
.form-hint.is-danger { color: var(--danger); }
.form-group.sc-divided { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.form-group.sc-divided.is-last { margin-bottom: 0; }
.sc-driver { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .88rem; }
.sc-driver strong { font-size: .78rem; color: var(--sub); }
.sc-plan-note { margin: 14px 0 0; }
.sc-submit { margin-top: 12px; }
.sc-note-wrap { padding: 0 18px 14px; }
.sc-note-wrap .note-block { margin-top: 0; }
.btn.btn-lg { padding: 10px 22px; font-size: .95rem; }
.sc-expense-list { border-bottom: 1px solid var(--border); }
.sc-expense-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--border); }
.section-card.sc-ready { border-left: 3px solid var(--success); }
.section-card.sc-ready .section-card-head h2 { color: var(--success-text); }
.section-card.sc-blocked { border-left: 3px solid var(--warning); opacity: .75; }
.section-card.sc-blocked .section-card-head h2 { color: var(--warning-strong); }
.sc-last-call { margin: 10px 0 0; gap: 4px; }
.sc-submit-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1.5px solid var(--border); }
.sc-todo { margin: 6px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.worker-row-control input.is-overridden { border-color: var(--primary); }
.form-group.sc-grow { margin-bottom: 0; flex: 1; min-width: 140px; }
.sc-hours-row { display: flex; gap: 6px; align-items: center; }
/* 要蓋過 .filter-bar .form-group input 的 flex:none */
.filter-bar .form-group input.sc-hours-input { flex: 1; text-align: center; font-weight: 700; }
.filter-bar input.sc-ot-batch { flex: none; width: 90px; }
.sc-daytype { font-size: .83rem; color: var(--text-med); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.sc-daytype.is-quiet { font-size: .78rem; color: var(--hint); margin: 0 0 10px; }
.sc-batch-label { font-size: .8rem; color: var(--sub); white-space: nowrap; padding-top: 8px; }
.form-hint.sc-hint-gap { margin-top: 8px; }


/* ── 出工單管理（dispatch/list.html） ───────────────────────────────────── */
.dl-today { margin-bottom: 24px; }
.dl-today-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.dl-today-head .section-title { margin-bottom: 0; }
.dl-today-date { font-size: .8rem; color: var(--hint); }
.dl-site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.dl-card-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.dl-card-note { font-size: .72rem; color: var(--sub); }
.dl-card-note.is-warn { color: var(--warning-strong); font-weight: 600; }
.dl-card-note.is-plan { font-size: .74rem; color: var(--primary); font-weight: 600; }
.dl-card-note.is-empty { font-size: .78rem; color: var(--hint); }
.dl-history-bar { margin-bottom: 10px; flex-wrap: wrap; }
.dl-history-bar .list-search-input { margin-bottom: 0; }
.dl-projects { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
.dl-projects .pill { max-width: 100%; white-space: normal; text-align: left; }
a.dl-project-link { text-decoration: none; }
a.dl-project-link:hover { background: var(--primary-xs); color: var(--primary); }
.pg-btn.pg-ellipsis { cursor: default; border: none; color: var(--hint); }

.btn.btn-block { width: 100%; justify-content: center; }
.form-group.is-last { margin-bottom: 0; }

/* ── 請假管理（admin/leave_manage.html、static/js/leave-manage.js） ────────── */
.lv-hint { margin-left: 4px; }
.lv-note { color: var(--text-med); }
.lv-row-actions { display: inline-flex; gap: 6px; align-items: center; }
.form-group input.lv-hours { flex: 1; }
.lv-submit { margin-top: 16px; }
.lv-att { margin-bottom: 14px; border-left: 4px solid var(--warning); font-size: .82rem; }
.lv-att-title { font-weight: 700; margin-bottom: 6px; }
.lv-att-day { padding: 6px 0; border-top: 1px solid var(--border); }
.lv-att-conflict { color: var(--danger); }
.lv-att-entry { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; color: var(--text-med); }
.lv-att-warn { color: var(--warning-strong); }

/* ── 薪資管理（admin/payroll_manage.html） ─────────────────────────────── */
.modal.modal-xl { width: 900px; }
.pm-neg { color: var(--danger) !important; }
.pm-table td.ta-r { white-space: nowrap; }  /* 「－2,000」這種負數不要斷成兩行 */
.pm-table tbody td:first-child { white-space: nowrap; }  /* 欄位多時姓名不要被擠成一字一行 */
.pm-net { font-weight: 700; color: var(--primary) !important; }
.pm-total-row { font-weight: 700; background: var(--surface2); }
/* 薪資明細表欄位多：平板／小筆電左右捲動時，姓名、實領、操作欄固定在兩側，不用捲到底才對得上人
   （≤640px 改成卡片排版，不需要） */
@media (min-width: 641px) {
  .pm-table td:first-child, .pm-table th:first-child,
  .pm-table .pm-sticky-net, .pm-table .pm-act { position: sticky; z-index: 1; }
  /* 表頭／小計列沿用 .table-wrap 的底色，內容列要補上不透明底色，捲動時才不會透出底下的欄位 */
  .pm-table tbody td:first-child, .pm-table tbody .pm-sticky-net, .pm-table tbody .pm-act { background: var(--surface); }
  .pm-table td:first-child, .pm-table th:first-child { left: 0; box-shadow: inset -1px 0 0 var(--border); }
  .pm-table .pm-act { right: 0; width: 104px; min-width: 104px; white-space: nowrap; }
  .pm-table .pm-sticky-net { right: 104px; box-shadow: inset 1px 0 0 var(--border); }
}
.pm-section { margin-bottom: 16px; }
.pm-section-title { margin-bottom: 12px; }

/* ── 估價單預覽 modal（quote_item_search/_preview_modal.html） ─────────────── */
.pv-head-link { margin-right: 8px; }
.pv-head-link + .pv-head-link { margin-right: 4px; }
.pv-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 12px; background: var(--surface); }
.pv-body { position: relative; }
.pv-loading { position: absolute; inset: 0; align-items: center; justify-content: center; background: var(--bg); font-size: .84rem; color: var(--hint); pointer-events: none; z-index: 1; }
.drop-zone .dz-title { font-weight: 600; margin-bottom: 4px; }
.drop-zone .dz-sub { font-size: .76rem; }

/* ── 空白填價（quote_item_search/fill.html） ──────────────────────────────── */
.qf-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.qf-controls .search-select { flex: 1; min-width: 180px; }
.qf-status { margin-top: 12px; }
.qf-result { margin-top: 14px; }
.hint.qf-summary { margin: 0 0 12px; }
.quote-fill-card { margin-bottom: 24px; }
.qf-head { margin-bottom: 12px; }
.qf-head-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.qfc-project { font-size: 1.05rem; }
.qfc-meta { font-size: .78rem; color: var(--sub); margin-left: 8px; }
.qfc-counts { font-size: .82rem; }
.qfc-warn { font-size: .8rem; color: var(--warning-strong); margin-top: 6px; }
.qf-col-idx { width: 36px; }
.qf-col-amount { width: 130px; }
.qf-col-conf { width: 64px; }
.qfc-foot-total { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary) !important; }
.qf-export { margin: 12px 0; }
.qf-refs-title { font-weight: 600; font-size: .9rem; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ── 解析複核佇列（quote_item_search/review.html） ─────────────────────── */
.qr-col-status { width: 80px; }
.qr-col-format { width: 60px; }
.qr-col-date { width: 100px; }
.qr-col-amount { width: 120px; }
.qr-name { font-weight: 600; font-size: .88rem; }
.qr-date { font-size: .82rem; color: var(--sub); white-space: nowrap; }
.qr-amount { font-variant-numeric: tabular-nums; font-size: .85rem; white-space: nowrap; }
.qr-issue { position: relative; padding-left: 11px; font-size: .8rem; line-height: 1.5; }
.qr-issue::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.qr-issue.is-failed { color: var(--danger); }
.qr-issue.is-partial { color: var(--warning-strong); }

/* ── 估價搜尋／估價資料庫（quote_item_search/index.html、manage.html） ───── */
.qs-tabs { margin-top: 20px; }
.page-sub.qs-tab-hint { margin-top: 8px; }
.qs-pane { margin-top: 12px; }
.qm-stats { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.qm-stats.is-tight { margin-bottom: 10px; }
.page-sub.qm-sub { margin-bottom: 12px; }
.qm-controls { margin-top: 10px; gap: 8px; }
.qm-queue-info { font-size: .8rem; color: var(--sub); margin-top: 8px; }
.qm-report { font-size: .78rem; margin-top: 6px; }
.qm-search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.qm-search-row .search-input { flex: 1 1 auto; min-width: 0; }
.qm-search-row .search-btn { flex-shrink: 0; padding-left: 18px; padding-right: 18px; }
.qm-edit-name { font-size: .85rem; color: var(--sub); margin-bottom: 12px; }

/* ── 完工快照（admin/project_snapshot.html） ───────────────────────────── */
.snap-code { font-family: ui-monospace, monospace; font-size: .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--text-med); }
.snap-period { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); font-size: .76rem; color: var(--hint); }
.rp-kpis.snap-kpis { margin-bottom: 24px; }
.snap-dot { color: var(--border); font-size: .8rem; line-height: 1; }
.snap-empty { text-align: center; padding: 52px 24px; color: var(--sub); }
.snap-empty-title { font-weight: 600; margin-bottom: 6px; }
.snap-empty-sub { font-size: .82rem; max-width: 340px; margin: 0 auto; line-height: 1.6; }
.snap-empty-btn { margin-top: 16px; }

/* ── 可延續細項面板（dispatch/_open_tasks_panel.html） ────────────────────── */
.co-empty { padding: 14px 0; }
.co-list { display: flex; flex-direction: column; gap: 8px; }
.co-item { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.co-item > input { margin-top: 4px; }
.co-main { flex: 1; min-width: 0; }
.co-wi { margin-bottom: 3px; text-decoration: none; }
.co-desc { font-size: .85rem; color: var(--text-med); }
.co-meta { font-size: .74rem; color: var(--hint); }
.co-actions { padding-top: 8px; display: flex; gap: 8px; }

/* ── 薪資設定分頁（admin/_payroll_settings_tab.html） ───────────────────── */
.modal.modal-lg { width: 760px; }
.card-bar.ps-bar { align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.card-bar.ps-bar.is-center { align-items: center; }
.card.card-bar.ps-split { align-items: center; gap: 12px; flex-wrap: wrap; border-left: 4px solid var(--primary); }
.ps-split .page-sub { margin: 0; }
.ps-head { margin-bottom: 14px; }
.card-bar .ps-title, .ps-title { margin: 0 0 6px; }
.form-group.ps-narrow { max-width: 200px; }
.form-group.ps-narrow.is-wider { max-width: 240px; }

.hint.qsr-count { text-align: left; margin-top: 16px; }
.hint.qsr-count strong { color: var(--text); }

.qsr-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.qsr-empty { margin-top: 18px; }

/* ── 員工報表（admin/worker_report.html） ─────────────────────────────── */
.rc-stats.wr-quarters { margin-top: 14px; }
.rc-stats.wr-quarters.cols-1 { grid-template-columns: minmax(0, 1fr); }
.rc-stats.wr-quarters.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-stats.wr-quarters.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-stats.wr-quarters.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-stat-value.is-over { color: var(--danger); }
.rp-section-title.wr-year { margin: 6px 0 8px; }
.rp-warn.wr-warn { margin: 8px 0 0; }
.rc-stats.wr-leave-types { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 14px; }
.wr-detail-toggle { cursor: pointer; font-size: .84rem; color: var(--sub); }
.wr-detail-table { margin-top: 10px; }
.rc-empty.wr-empty { padding: 18px 0; }

/* ── 管理頁表單共用 ─────────────────────────────────────────────────────── */
.label-sm, .form-group label.label-sm { font-size: .78rem; }
.switch-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.switch-stack.is-tight { margin-bottom: 10px; }
.form-group.sub-field { margin: 0 0 0 26px; max-width: 200px; }
.form-group.sub-field.has-gap { margin-bottom: 18px; }
.form-foot { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.td-sm { font-size: .8rem; }
.sd-block { margin-bottom: 18px; }

/* ── 帳號／專案／員工／表單頁的小調整 ───────────────────────────────────── */
.us-table { margin-bottom: 22px; }
.us-self { display: block; text-align: right; }
.pj-progress { display: flex; align-items: center; gap: 8px; justify-content: center; }
.pj-progress .progress-track { width: 80px; }
/* 固定寬＋靠右：8% 與 100% 寬度不同時，置中的整組才不會讓進度條左右飄移 */
.pj-pct { flex: 0 0 3.2em; text-align: right; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-inactive { margin-top: 28px; }
.wk-inactive-toggle { font-size: .82rem; margin-bottom: 10px; }
.wk-inactive-table { opacity: .65; }
.we-row { display: flex; gap: 14px; align-items: center; }
.form-group .we-row select { flex: 1; }
.form-group.we-allowances { margin-top: 14px; }
.form-hint.we-allowance-hint { margin: 0 0 6px; }
.we-add { margin-top: 4px; }
.wie-weight { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.form-group .wie-weight input[type="range"] { width: 200px; }
.wie-weight-val { font-size: 1.15rem; font-weight: 800; color: var(--primary); min-width: 28px; }
.form-group .pf-dates input { flex: 1; }
.form-foot.is-ruled { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.lv-row-actions.is-end { display: flex; justify-content: flex-end; gap: 8px; }

/* ── 出工單選人／費用 modal（dispatch/_modal_*_form.html） ─────────────── */
.req { color: var(--danger); }
.pick-grid.is-130 { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pick-grid.is-140 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.md-group { margin-bottom: 24px; }
.md-label { font-size: .8rem; font-weight: 700; color: var(--sub); letter-spacing: .03em; margin-bottom: 10px; }
.md-empty { padding: 16px 0; }
.md-crew-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.md-crew-count { font-size: .82rem; font-weight: 600; color: var(--primary); }
.form-group input.md-amount { text-align: center; font-weight: 600; }
.log-form-actions.md-actions { margin-top: 8px; padding-top: 0; }
.pl-leave-tag { font-size: .66rem; font-weight: 700; opacity: .85; }
.pl-year-pill .pl-year-remove, .pl-year-pill form { display: inline; }

/* ── 人天推估結果（estimation/result.html） ──────────────────────────── */
.er-search { margin-bottom: 24px; }
.er-link { color: var(--primary); text-decoration: underline; }
.er-table { margin-top: 14px; }
.er-col-toggle { width: 28px; }
.er-nowrap { white-space: nowrap; }
.legend.er-legend { margin-top: 12px; }
.er-empty { margin-top: 10px; }

/* ── 最後一批零星樣式 ─────────────────────────────────────────────────── */
.overlay.overlay-top { z-index: 1200; }
.dash-col-progress { width: 220px; }
.snap-chart { display: block; width: 100%; }
.lp-missing { margin-top: 8px; }
.em-clear { margin-left: auto; }
.legend.em-legend { margin: -2px 0 14px; }
.empty-groups.em-empty { padding: 0; }

.form-group.sc-divided-top { margin-top: 14px; }
.qsm-col-ops { width: 90px; }

/* ── JS 產生的 HTML 用的工具類別（原本寫在 JS 字串裡的 inline style） ─────── */
.tx-danger { color: var(--danger) !important; }
.tx-warning { color: var(--warning-strong) !important; }
.tx-xs { font-size: .72rem !important; }
.tx-sm { font-size: .79rem !important; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll-x { overflow-x: auto; }
.scroll-box { max-height: 400px; overflow-y: auto; }
.scroll-box.is-360 { max-height: 360px; }
.scroll-box.is-520 { max-height: 520px; }
.js-amount { text-align: right; white-space: nowrap; font-weight: 700; color: var(--primary); min-width: 80px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.js-empty { text-align: center; padding: 32px; color: var(--hint); }
.js-empty.is-sm { padding: 14px; font-size: .83rem; }
.js-row-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.js-note { font-size: .82rem; color: var(--hint); margin-bottom: 8px; }
.js-note.is-top { font-size: .85rem; margin: 12px 0 0; }
.col-36 { width: 36px; } .col-52 { width: 52px; } .col-76 { width: 76px; }
.col-90 { width: 90px; } .col-100 { width: 100px; } .col-110 { width: 110px; } .col-120 { width: 120px; }
.col-130 { width: 130px; } .col-140 { width: 140px; } .col-160 { width: 160px; } .col-170 { width: 170px; } .col-175 { width: 175px; }
.col-p28 { width: 28%; } .col-p32 { width: 32%; } .col-p38 { width: 38%; }

.qf-inline-link { font-size: .74rem; margin-left: 6px; }
.js-tag { margin-right: 6px; }
.js-mt4 { margin-top: 4px; }
.card.js-hit { margin-bottom: 8px; }
.js-hit-title { margin-bottom: 3px; }
.js-stack { display: flex; flex-direction: column; gap: 8px; }
.js-stack.is-spaced { margin-top: 10px; }
.hint.qsr-count.is-tight { margin-top: 2px; }
.js-detail-box { margin-bottom: 14px; }
.notice.em-filter-bar { flex-direction: row; align-items: center; gap: 8px; margin: -4px 0 12px; }
.em-rank-heading { width: 100%; font-size: .69rem; font-weight: 700; color: var(--sub); margin: 4px 0 2px; letter-spacing: .05em; }
.emp-add-row input[type="text"] { flex: 1; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); font-size: .85rem; color: var(--text); }
.emp-add-row input[type="text"]:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-xs); }
.we-history { margin-top: 16px; }
.we-history-title { font-weight: 700; font-size: .85rem; margin: 0 0 8px; }
.we-pay { margin-top: 16px; }
.we-foreign-hint { margin: 0 0 16px; }
/* 薪資管理→員工薪資分頁 */
.pwt-table td { vertical-align: middle; }
.pwt-inactive { margin-top: 18px; }
.pwt-inactive > summary { cursor: pointer; font-size: .82rem; color: var(--sub); margin-bottom: 8px; }
.pwt-inactive .table-wrap { opacity: .75; }
@media (max-width: 640px) { .pwt-table td.pwt-blank { display: none; } }  /* 卡片模式不列空欄位 */
.we-pay .kv-list { max-width: 440px; }

/* 薪資管理：發薪前確認事項（草稿、跨單超時）；出工單工時區塊的跨單提醒 */
/* 薪資管理的提醒（payroll_manage.html check_block／check_items）：
   待處理的集中在一張「發薪前確認」卡片（每列一則，左邊警示色）；已確認的收進底部一行小字，點開才看得到 */
.pm-checks { margin-bottom: 14px; border: 1px solid var(--warning-border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.pm-checks.is-quiet { border: 0; background: none; overflow: visible; }
.pm-checks-head { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 8px 14px; font-size: .8rem; font-weight: 700;
  color: var(--warning-text); background: var(--warning-bg); border-bottom: 1px solid var(--warning-border); }
.pm-checks-head span { font-weight: 600; }
.pm-checks { scroll-margin-top: 90px; }
.pm-check { display: flex; align-items: flex-start; gap: 6px 14px; padding: 9px 14px; font-size: .8rem; color: var(--text-med);
  border-left: 3px solid var(--warning); scroll-margin-top: 90px; }
.pm-checks .pm-check + .pm-check { border-top: 1px solid var(--border); }
.pm-check > details { flex: 1; min-width: 0; }
.pm-check > details > summary { cursor: pointer; }
.pm-check b { color: var(--text); }
.pm-check-detail { margin-top: 6px; }
.pm-check-detail .chip-row { margin-top: 2px; }
.pm-check-detail p { margin: 6px 0 0; }
.pm-check-hint { color: var(--sub); }
.pm-check-ack { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 0; }
.pm-acked-by { font-size: .72rem; color: var(--hint); white-space: nowrap; }
/* 已確認：底部一行小字「另有 N 則已確認」，點開是灰色的精簡列 */
.pm-acked-group > summary { cursor: pointer; padding: 7px 14px; font-size: .76rem; color: var(--hint); list-style: none; }
.pm-acked-group > summary::-webkit-details-marker { display: none; }
.pm-acked-group > summary::after { content: "　查看"; color: var(--primary); }
.pm-acked-group[open] > summary::after { content: "　收起"; }
.pm-acked-group > summary:hover { color: var(--sub); }
.pm-checks:not(.is-quiet) .pm-acked-group { border-top: 1px solid var(--border); background: var(--surface2); }
.pm-checks.is-quiet .pm-acked-group > summary { padding: 0; margin: -4px 0 4px; }
.pm-check.is-acked { border-left-color: var(--border-s); color: var(--sub); background: var(--surface2); }
.pm-check.is-acked b { color: var(--sub); font-weight: 600; }
.pm-acked-group .pm-check + .pm-check { border-top: 1px solid var(--border); }
.pm-checks.is-quiet .pm-acked-group[open] { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 4px; }
.pm-checks.is-quiet .pm-acked-group[open] > summary { padding: 7px 14px; margin: 0; }
.pm-acked-group.is-inline > summary { padding: 0; }
.pm-acked-group.is-inline[open] > summary { margin-bottom: 8px; }
.pm-acked-group.is-inline .pm-check { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); }
@media (max-width: 600px) { .pm-check { flex-direction: column; } .pm-check-ack { align-self: flex-end; } }
.pm-check-list { margin: 6px 0 0; padding-left: 18px; }
.pm-check-list li { margin-bottom: 2px; }
.sc-cross { margin: 0 0 12px; }
.sc-cross a, .pm-check-list a { color: inherit; text-decoration: underline; }
.section-card-body.sc-cross-wrap { padding-bottom: 0; }

/* 薪資期間＋結算狀態：大標寫出是哪一期，左邊框顏色＝結算狀態（綠已結算／橘未結算／灰進行中） */
.card.pm-period { padding: 14px 18px; margin-bottom: 12px; border-left: 4px solid var(--border-s); }
.card.pm-period.is-closed { border-left-color: var(--success); }
.card.pm-period.is-open { border-left-color: var(--warning); }
/* 調整歷程（admin/_change_entries.html：員工頁時間軸、薪資設定→調整紀錄） */
.chg-list { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.chg-item { position: relative; padding: 0 0 18px 16px; }
.chg-item::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--primary); box-shadow: 0 0 0 3px var(--surface); }
.chg-item.is-future::before { background: var(--warning); }
.chg-item.is-base::before { background: var(--border-s); }
.chg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.chg-when { font-weight: 700; }
.chg-title { color: var(--text-med); font-weight: 600; }
.chg-undo { margin-left: auto; }
.chg-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; }
.chg-items s { color: var(--hint); }
.chg-field { display: inline-block; min-width: 8.5em; color: var(--sub); }
.chg-heading { margin: 22px 0 10px; font-size: 15px; }
.chg-meta { margin: 4px 0 0; font-size: .78rem; color: var(--sub); }
.chg-empty { color: var(--hint); padding: 8px 0; }
.chg-filters { margin-bottom: 16px; }
.wpa-step { padding-bottom: 6px; }
.wpa-allow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.wpa-allow .aw-check { flex: 1; min-width: 180px; }
.wpa-reasons { margin-top: 8px; }
/* 發薪步驟（admin/payroll_manage.html）：只是導引，狀態 done／todo／info／wait */
.pm-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pm-step a { display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-left: 4px solid var(--border-s); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.pm-step a:hover { border-color: var(--primary); }
.pm-step-no { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; background: var(--surface2); color: var(--sub); }
.pm-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-step-body b { font-size: .88rem; }
.pm-step-body small { font-size: .76rem; color: var(--sub); line-height: 1.4; }
.pm-step.is-done a { border-left-color: var(--success); }
.pm-step.is-done .pm-step-no { background: var(--success); color: #fff; }
.pm-step.is-todo a { border-left-color: var(--warning); }
.pm-step.is-todo .pm-step-no { background: var(--warning); color: #fff; }
.pm-step.is-info a { border-left-color: var(--primary); }
@media (max-width: 900px) { .pm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pm-steps { grid-template-columns: 1fr; } }
.tab-btn .tab-count { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--primary-sm); color: var(--primary);
  font-size: .72rem; font-weight: 700; }
.pm-custom-range { margin-bottom: 12px; }
.pm-custom-range > summary { margin-bottom: 8px; }
tr.pm-row-changed td { background: var(--warning-bg); }
.pm-basis-changes { margin-top: 12px; }
.pm-period-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-period-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; text-align: center; }
.pm-period-name h2 { margin: 0; font-size: 1.25rem; }
.pm-period-range { font-size: .9rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.pm-period-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.pm-period-chip {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font-size: .82rem; font-weight: 600; color: var(--text-med); line-height: 1.3; text-decoration: none;
}
.pm-period-chip small { font-size: .7rem; font-weight: 500; color: var(--hint); }
.pm-period-chip.is-closed small { color: var(--success-text); }
.pm-period-chip.is-open { border-color: var(--warning-border); background: var(--warning-bg); }
.pm-period-chip.is-open small { color: var(--warning-strong); }
.pm-period-chip:hover { border-color: var(--primary); text-decoration: none; }
.pm-period-chip.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pm-period-history { margin-left: auto; }
.pm-period-body { margin-top: 10px; }
.pm-period-body .card-bar { flex-wrap: wrap; }
.pm-diff-changes { display: block; font-size: .78rem; color: var(--warning-text); }
.pm-closing-diff { margin: 12px 0 0; }
.pm-closing-diff > .pm-check { border: 1px solid var(--warning-border); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--warning-bg); }
.pm-closing-actions { margin-top: 10px; }

/* 結算歷程 */
.pc-row-open td:first-child { border-left: 3px solid var(--warning); }
.pc-period { font-weight: 600; }
.pc-period small { display: block; font-weight: 400; font-size: .78rem; color: var(--hint); }
.pc-timeline { list-style: none; margin: 0; padding: 0; }
.pc-timeline li { position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--border); margin-left: 5px; }
.pc-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.pc-timeline li::before {
  content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-s);
}
.pc-timeline li.is-close::before { border-color: var(--success); }
.pc-timeline li.is-carry::before { border-color: var(--primary); }
.pc-timeline li.is-reopen::before { border-color: var(--danger); }
.pc-timeline-head { font-weight: 600; }
.pc-timeline-head .sc-summary { font-weight: 400; margin-left: 6px; }
.pc-timeline-detail { font-size: .82rem; color: var(--sub); margin-top: 2px; }

/* 薪資明細：下載薪資單 */

/* 請假：病假已用天數提示 */
.lv-pay-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.lv-pay-hint.is-warn { color: var(--warning-text); }

/* 雜支收據 */
.receipt-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; vertical-align: middle; flex-shrink: 0;
  border: 1px solid var(--border); }
/* 代墊：批次核銷 */
.adv-batch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.adv-batch-bar .btn { margin-left: auto; }
.adv-check-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.adv-check-col { width: 36px; text-align: center; }

/* 總覽：待處理（跟「今日出工」同一套 rc-card；一項一行，個別項目點開才看） */
.dash-todo-count { margin-left: 6px; vertical-align: 1px; }
.dash-todo-list { list-style: none; margin: 0; padding: 0; }
.dash-todo-group + .dash-todo-group { margin-top: 14px; }
.dash-todo-group-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 4px 6px 4px 10px; margin-bottom: 2px;
  border-left: 3px solid var(--dtg-c, var(--border)); }
.dash-todo-group.is-urgent { --dtg-c: var(--danger); }
.dash-todo-group.is-scheduled { --dtg-c: #d97706; }
.dash-todo-group.is-yearly { --dtg-c: #cbd5e1; }
.dash-todo-group-label { font-size: .8rem; font-weight: 700; color: var(--text); }
.dash-todo-group-sub { font-size: .74rem; color: var(--hint); }
.dash-todo-group.is-yearly .dash-todo-name { font-weight: 500; color: var(--sub); }
.dash-todo-item + .dash-todo-item { border-top: 1px solid var(--border-light); }
.dash-todo-row > summary, div.dash-todo-row {
  display: flex; align-items: center; gap: 8px 12px; padding: 9px 6px; border-radius: var(--radius-sm);
}
.dash-todo-row > summary { cursor: pointer; list-style: none; transition: background .14s; }
.dash-todo-row > summary::-webkit-details-marker { display: none; }
.dash-todo-row > summary:hover { background: var(--primary-xs); }
div.dash-todo-row { padding-left: 30px; }            /* 沒有可展開的項目：跟有箭頭的列文字對齊（6 + 箭頭 12 + 間距 12） */
.dash-todo-row .details-chevron { color: var(--hint); flex-shrink: 0; }
.dash-todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-todo-name { font-weight: 600; font-size: .88rem; color: var(--text); }
.dash-todo-detail { font-size: .76rem; color: var(--hint); }
.dash-todo-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dash-todo-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 2px 6px 10px 30px; font-size: .8rem; }
.dash-todo-more { color: var(--hint); }
/* 出工單管理：歷史篩選 */
.dl-filter-q { flex: 1 1 260px; }
.dl-filter-q input { width: 100%; }

/* 出工單：已提交時的「未勾進細項」小字 */
.dd-nowork-note { margin: 0 0 12px; font-size: .8rem; color: var(--sub); }

/* 派工預排：多天套用、選人提醒 */
.pl-range-skip { margin: 0 0 10px; font-size: .82rem; color: var(--sub); }
.worker-flag { flex-basis: 100%; font-size: .7rem; font-weight: 600; color: var(--warning-text); line-height: 1.3; }
.worker-flag.is-leave { color: var(--danger); }
.worker-toggle:has(.worker-flag:not(.hidden)) { flex-wrap: wrap; row-gap: 2px; }
.pl-form .form-row3 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pl-form .form-row3 { grid-template-columns: 1fr 1fr; } }

/* 出工單：預排但沒出工的原因 */
.crew-absences:empty { display: none; }
.crew-absences { padding: 10px 18px 14px; border-top: 1px dashed var(--border); }
.crew-absences-title { margin: 0 0 8px; font-size: .8rem; font-weight: 700; color: var(--sub); }
.crew-absences-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crew-absences-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crew-absences-name { font-weight: 600; font-size: .86rem; min-width: 7em; }
.crew-absences-list select { padding: 5px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: .82rem; background: var(--surface2); }
.crew-absences-reason { font-size: .82rem; color: var(--sub); }
/* 請假管理：現場回報 */
.lv-reported-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.lv-reported-list li { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: .84rem; }

/* 專案成本：分攤說明 */
.rp-alloc-note { margin: -6px 0 14px; max-width: none; }
.rp-shared { font-size: .72rem; color: var(--hint); margin-left: 4px; }

/* 智慧估價：建立專案時勾選工項 */
.qa-project-items { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); }
.qa-project-item { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; font-weight: 500; line-height: 1.4; }
.qa-project-item input { margin-top: 3px; }

/* 專案：完工日預測 */
.pd-forecast { margin: 6px 0 0; font-size: .78rem; color: var(--sub); }
.pd-forecast.is-late { color: var(--danger); font-weight: 600; }
.pj-late { margin-left: 4px; }
.pj-forecast { display: block; font-size: .72rem; color: var(--hint); }

/* 報表：加班上限 */
.otl-meter { display: inline-block; width: 120px; vertical-align: middle; margin-right: 8px; }
.otl-meter.is-over .rc-meter-fill { background: var(--danger); }
.otl-ratio { font-size: .78rem; color: var(--sub); font-variant-numeric: tabular-nums; }

/* 報表：自動摘要 */
.rp-summary { margin: -4px 0 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: var(--radius); font-size: .86rem; line-height: 1.6; color: var(--text-med); }
.rp-summary b { margin-right: 8px; color: var(--text); }

/* 人天推估：建議值的推導說明、無資料時的引導 */
.est-basis { margin: 10px 0 0; font-size: .8rem; color: var(--sub); }
.est-empty-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 推估資料庫：唯讀員工名單的職級標題 */
.emp-rank-label { font-size: .71rem; font-weight: 700; color: var(--sub); padding: 6px 4px 2px; letter-spacing: .05em; }

/* 操作紀錄 */
.au-time { white-space: nowrap; }
.au-resource { font-size: .82rem; margin-left: 4px; }
.au-lines { margin: 0; padding-left: 16px; font-size: .8rem; color: var(--text-med); }
.au-lines li { margin: 1px 0; }

/* 操作紀錄頁：資料備份狀態 */
.card.au-backup { padding: 12px 16px; margin-bottom: 14px; border-left: 4px solid var(--success); }
.card.au-backup.is-bad { border-left-color: var(--warning); }
.au-backup .card-bar > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }


/* 專案頁：損益 */
.pd-pnl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 6px; }
.pd-pnl-grid > div { display: flex; flex-direction: column; gap: 2px; }
.pd-pnl-label { font-size: .75rem; color: var(--sub); }
.pd-pnl-value { font-size: 1.3rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-pnl-value.is-neg { color: var(--danger); }
.pd-pnl-note { font-size: .74rem; color: var(--hint); }
.pd-pnl-est { margin: 12px 0 0; font-size: .8rem; color: var(--sub); }
.pd-pnl-est.is-warn { color: var(--warning-text); }
@media (max-width: 800px) { .pd-pnl-grid { grid-template-columns: 1fr 1fr; } }

/* 請假管理：特休一覽 */
/* 請假管理→休假統計：對照法定額度，80% 起標黃、超過標紅 */
.lst-table td { vertical-align: middle; }
.lst-limit { font-size: .74rem; color: var(--hint); margin-left: 1px; font-weight: 400; }
.lst-th-sub { display: block; font-size: .68rem; font-weight: 400; color: var(--hint); }
.lst-near { color: var(--warning-strong); font-weight: 700; }
.lst-over { color: var(--danger); font-weight: 700; }
td.lst-near { background: var(--warning-bg); }
td.lst-over { background: var(--danger-bg); }
.lst-annual-end { display: block; font-size: .74rem; color: var(--hint); }
.lst-foot { margin-top: 10px; }
@media (max-width: 640px) { .lst-table td.lst-blank { display: none; } }  /* 卡片模式不列空欄位 */

/* 打卡統計 */
.cst-table td { vertical-align: middle; }
.cst-sub { font-size: .74rem; color: var(--hint); font-weight: 400; margin-left: 2px; }
.cst-foot { margin-top: 10px; }

/* 統計報表：營運月報 */
.rp-monthly { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rp-monthly input { padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: .84rem; background: var(--surface2); }

/* 專案報價明細（唯讀卡片 ql-／編輯器 qle-） */
.ql-empty { margin: 8px 0 10px; color: var(--sub); font-size: .88rem; }
.ql-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ql-table-wrap { margin-top: 10px; overflow-x: auto; box-shadow: none; }
.ql-table { font-variant-numeric: tabular-nums; }
@media (min-width: 641px) { .ql-table { min-width: 640px; } }
.table-wrap .ql-table tbody td { padding: 8px 12px; font-size: .86rem; }
.ql-table .ql-no { width: 52px; color: var(--hint); white-space: nowrap; }
.ql-table .ql-group td { font-weight: 600; color: var(--text); }
.ql-table .ql-child td:nth-child(2) { padding-left: 28px; }
.ql-table .ql-child td { color: var(--sub); }
.ql-table .ql-before { color: var(--hint); }
.ql-table .ql-after { color: var(--text); }
.ql-unpriced { font-size: .76rem; font-weight: 500; color: var(--hint); }
.ql-remark { font-size: .74rem; font-weight: 400; color: var(--hint); margin-top: 2px; }
.ql-table tfoot td { padding: 7px 12px; font-size: .84rem; color: var(--sub); border-top: 1px solid var(--border); }
.ql-table tfoot .ql-total td { font-weight: 800; color: var(--text); border-top: 2px solid var(--border); }
.ql-note { margin: 8px 0 0; font-size: .8rem; color: var(--sub); }
/* Word 估價單產出紀錄：預設收起，只露出最近一次 */
.ql-exports { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .82rem; }
.ql-exports > summary { cursor: pointer; color: var(--sub); }
.ql-exports > summary:hover { color: var(--text); }
.ql-exports .table-wrap { margin-top: 8px; }
.ql-exports-table { width: 100%; font-size: .82rem; }

.qle-card { padding: 0; overflow: hidden; }
.qle-wrap { overflow-x: auto; }
.qle-table { width: 100%; min-width: 1140px; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.qle-table thead th { background: var(--surface2); padding: 9px 6px; text-align: left; font-size: .7rem; font-weight: 700;
  color: var(--sub); border-bottom: 2px solid var(--border); white-space: nowrap; }
.qle-table td { padding: 4px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.qle-table input, .qle-table select { width: 100%; padding: 6px 7px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; font: inherit; color: var(--text); }
.qle-table input:hover, .qle-table select:hover { border-color: var(--border); }
.qle-table input:focus, .qle-table select:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.qle-table .qle-num input { text-align: right; }
.qle-table .qle-no { width: 46px; padding-left: 12px; color: var(--hint); white-space: nowrap; }
.qle-table .qle-name { min-width: 180px; }
.qle-table .qle-num { width: 92px; text-align: right; }
.qle-table .qle-unit { width: 56px; }
.qle-table thead .qle-num:nth-child(3) { width: 64px; }
.qle-table .qle-kind { width: 92px; }
.qle-table .qle-wi { width: 110px; }
.qle-table .qle-remark { width: 110px; }
.qle-table .qle-ops { width: 140px; white-space: nowrap; text-align: right; padding-right: 8px; }
.qle-op { background: none; border: none; padding: 4px 5px; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--sub); }
.qle-op:hover { background: var(--surface2); color: var(--text); }
.qle-op.is-danger:hover { color: var(--danger); }
.qle-table .qle-group { background: var(--surface2); }
.qle-table .qle-group .qle-name input { font-weight: 700; }
.qle-table .qle-child .qle-name { padding-left: 24px; }
.qle-table .qle-sum { padding-right: 11px; font-weight: 700; color: var(--sub); }
.qle-table tfoot td { padding: 8px 11px; color: var(--sub); }
.qle-table tfoot .qle-name { padding-left: 11px; }
.qle-table tfoot .qle-total td { font-weight: 800; color: var(--text); border-top: 2px solid var(--border); }
.qle-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.qle-actions .form-hint { margin: 0; }
.qle-table .qle-total-ops { text-align: left; padding-left: 8px; }
.qle-table .qle-total-ops .qle-op { color: var(--primary); font-weight: 600; }
.qle-table .qle-start { padding: 22px 16px; text-align: center; color: var(--sub); }
.qle-table .qle-start p { margin: 0 0 10px; }
.qle-start-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.qle-contract { margin: 0; padding: 0 14px 14px; }
.qle-paste textarea { min-height: 220px; font-size: .82rem; }
.qle-paste-hint { margin: 0; font-size: .86rem; color: var(--sub); text-align: left; }

/* 發票與收款（inv-）／應收帳款（ar-） */
.inv-dates { display: flex; gap: 6px; }
/* 財務→廠區收支：摘要的收入／成本兩張卡並排，手機改上下 */
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.sf-grid .card { margin-bottom: 0; }
.sf-actions { justify-content: flex-end; margin-bottom: 12px; }
@media (max-width: 768px) { .sf-grid { grid-template-columns: minmax(0, 1fr); } }
.rp-filters select.inv-project-filter { max-width: 280px; }  /* 專案名稱很長，不讓它撐滿整列把按鈕擠到下一行 */
.table-wrap tr.inv-void td { color: var(--hint); text-decoration: line-through; }
.table-wrap tr.inv-void td:last-child { text-decoration: none; }
.inv-head { margin-bottom: 14px; }
.inv-head-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.qle-table.inv-table { min-width: 1080px; }
.qle-table .inv-proj { width: 190px; }
.qle-table .inv-ql { width: 170px; }
.inv-imp { text-align: left; font-size: .86rem; }
.inv-imp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.inv-imp-row label { font-weight: 600; color: var(--sub); }
.inv-imp-row select { flex: 1; min-width: 220px; padding: 7px 9px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.inv-imp-row input { width: 70px; padding: 7px 9px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; text-align: right; }
.inv-imp-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.inv-imp-list p { margin: 14px; }
.inv-imp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv-imp-table th { position: sticky; top: 0; background: var(--surface2); font-size: .72rem; color: var(--sub); padding: 7px 8px; text-align: left; }
.inv-imp-table td { padding: 6px 8px; border-top: 1px solid var(--border); }
.inv-pay-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.inv-pay-form .form-group { margin: 0; min-width: 130px; }
.inv-pay-form .inv-pay-note { flex: 1; min-width: 200px; }
.inv-shortfall { margin-top: 12px; font-size: .86rem; }
.inv-shortfall summary { cursor: pointer; color: var(--sub); font-weight: 600; }
.inv-shortfall .inv-pay-form { border-top: none; padding-top: 0; margin-top: 10px; }
.inv-allowances { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; }
.inv-danger-zone { display: flex; gap: 14px; justify-content: flex-end; margin-top: 8px; }
.ql-table .ql-billed { color: var(--sub); }
.ar-invoices { margin-top: 3px; font-size: .76rem; font-weight: 400; line-height: 1.6; }
.table-wrap tfoot tr.rp-total td { font-weight: 800; background: var(--surface2); border-top: 2px solid var(--border); padding: 10px 14px; }
@media (max-width: 800px) { .inv-head-grid { grid-template-columns: 1fr; } }
.inv-head input.is-invalid, .qle-table input.is-invalid { border-color: var(--danger) !important; background: var(--danger-bg); }

/* 照片上傳欄位（_photo_picker.html）：虛線框＋縮圖＋檔名＋選檔按鈕，可拖曳 */
.photo-pick { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px;
  border: 1.5px dashed var(--border-s); border-radius: var(--radius-sm); background: var(--surface2);
  transition: border-color .15s, background .15s; }
.photo-pick:hover, .photo-pick.is-over { border-color: var(--primary); background: var(--primary-xs); }
.photo-pick.has-photo { border-style: solid; border-color: var(--border); background: var(--surface); }
.photo-pick.is-new { border-color: var(--primary); }
.photo-pick-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--border); }
.photo-pick.is-removing .photo-pick-thumb { opacity: .35; filter: grayscale(1); }
.photo-pick-body { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.photo-pick-name { font-size: .86rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-pick:not(.has-photo) .photo-pick-name { color: var(--sub); font-weight: 500; }
.photo-pick.is-removing .photo-pick-name { color: var(--danger); }
.photo-pick-hint { font-size: .72rem; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-group .photo-pick-btn { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; margin: 0;
  font-size: .8rem; letter-spacing: normal; text-transform: none; color: var(--text); }
.photo-pick-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.photo-pick-clear { flex-shrink: 0; background: none; border: none; padding: 4px 6px; border-radius: var(--radius-sm);
  font: inherit; font-size: .8rem; color: var(--sub); cursor: pointer; }
.photo-pick-clear:hover { color: var(--danger); background: var(--surface2); }

/* 報價明細：匯入估價單、產出 Word */
.card-bar-actions { display: flex; align-items: center; gap: 6px; }
.qle-import-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.qle-import-label { font-size: .78rem; font-weight: 700; color: var(--sub); }
.qle-import-bar .form-hint { margin: 0; }
.qle-imp-modes, .qle-imp-opts { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; font-size: .86rem; }
.qle-imp-modes label, .qle-imp-opts label, .docx-exp label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.qle-imp-modes { padding: 10px 12px; background: var(--surface2); border-radius: var(--radius-sm); }
.qle-imp-modes label { font-weight: 600; }
.qle-imp-modes .is-disabled, .docx-exp .is-disabled { color: var(--hint); cursor: not-allowed; }
.qle-imp-warn { margin: 8px; font-size: .8rem; color: var(--warning-text); }
.qle-hist-q { width: 100%; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.qle-hist-row { cursor: pointer; }
.qle-hist-row:hover td { background: var(--primary-xs); }
.qle-hist-row .tx-hint { font-size: .72rem; }
.docx-exp { text-align: left; font-size: .88rem; display: flex; flex-direction: column; gap: 10px; }
.docx-exp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.docx-exp-label { width: 44px; font-weight: 700; color: var(--sub); }
.docx-exp-row input[type=text], .docx-exp-row input[type=date] { flex: 1; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.docx-exp-hint { margin: 0; font-size: .78rem; color: var(--hint); }
.qle-imp-q { font-weight: 700; color: var(--sub); font-size: .8rem; }
.qle-imp-note { margin: 4px 0 0; font-size: .8rem; color: var(--sub); }

/* 線上請假（lvr-）：員工「我的請假」與管理員審核 */
.sidebar-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
.lvr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lvr-layout > * { margin: 0; }
@media (min-width: 900px) {
  .lvr-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "form annual" "form list";
    grid-template-rows: auto 1fr; align-items: start; gap: 18px 22px; }
  .lvr-annual-card { grid-area: annual; }
  .lvr-apply { grid-area: form; }
  .lvr-list { grid-area: list; }
}
.lvr-annual-card { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 12px 16px; font-size: .9rem; }
.lvr-annual-title { font-weight: 700; color: var(--sub); }
.lvr-apply { min-width: 0; }
.lvr-apply .section-title { margin: 0 0 4px; }
.lvr-skip { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: .84rem; color: var(--sub); }
.lvr-hours { display: flex; align-items: center; gap: 8px; }
.lvr-hours input { width: 90px; }
.lvr-list-title { margin: 6px 0 10px; }
.lvr-list .lvr-req:last-child { margin-bottom: 0; }
.lvr-req { padding: 12px 16px; margin-bottom: 10px; }
.lvr-req-head, .lvr-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lvr-req-line, .lvr-review-line { margin: 6px 0 0; font-size: .86rem; }
.lvr-req form { margin-top: 6px; }
.lvr-review { margin-bottom: 12px; }
.lvr-review-title { font-size: 1.02rem; font-weight: 800; margin-bottom: 2px; }
.lvr-review-actions { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.lvr-approve { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.lvr-approve .form-group { margin: 0; }
.lvr-approve-note { min-width: 220px; }
.lvr-reject[open] { flex-basis: 100%; }
.lvr-reject summary { cursor: pointer; padding: 7px 4px; line-height: 1.3; color: var(--sub); font-weight: 600; font-size: .86rem; }
.lvr-reject[open] summary { color: var(--danger); }

/* 打卡（clk-）：員工打卡頁、管理員打卡紀錄 */
.clk-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "punch" "recent" "fix"; gap: 14px; }
.clk-layout > * { margin: 0; }
@media (min-width: 900px) {
  .clk-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "punch fix" "recent fix";
    grid-template-rows: auto 1fr; align-items: start; gap: 18px 22px; }
}
.clk-punch { grid-area: punch; text-align: center; padding: 22px 18px; }
.clk-fix { grid-area: fix; }
.clk-fix .section-title { margin: 0 0 4px; }
.clk-recent { grid-area: recent; min-width: 0; }
.clk-date { font-size: .95rem; font-weight: 700; color: var(--sub); }
.clk-times { display: flex; justify-content: center; gap: 36px; margin: 14px 0 18px; }
.clk-time { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.clk-time-label { font-size: .78rem; font-weight: 700; color: var(--sub); }
.clk-time-value { font-size: 2rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.clk-time-value.is-empty { color: var(--hint); }
.clk-btn { display: flex; justify-content: center; margin: 0 auto; width: 100%; max-width: 320px; padding: 16px 20px; font-size: 1.15rem; border-radius: 14px; }
.clk-done { margin: 4px 0 8px; font-weight: 700; color: var(--success-text); }
.clk-corr-list { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); font-size: .86rem; }
.clk-corr-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.clk-corr-note { flex-basis: 100%; font-size: .8rem; }
.clk-corr-withdraw { margin-left: auto; }
.clk-table .pill, .clk-admin-table .pill { margin-right: 4px; }
.clk-ot-wrap { max-height: 50vh; overflow: auto; }
.ot-clock-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  color: var(--sub); background: var(--surface); border: 1px solid var(--border); cursor: help; white-space: nowrap; }
.clk-ot-table { width: 100%; font-size: .86rem; border-collapse: collapse; }
.clk-ot-table th { font-size: .78rem; color: var(--sub); text-align: left; padding: 4px 6px; }
.clk-ot-table td { padding: 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.clk-ot-table select { max-width: 220px; }
.clk-ot-hours { width: 80px; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.dd-lunch { max-width: 260px; }
.dd-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .82rem; color: var(--sub); }
.dd-clock-title { font-weight: 700; }
.dd-clock-item.is-gap { color: var(--warning-text); font-weight: 600; }
.us-bulk { margin-bottom: 14px; }
.us-bulk-names { margin: 8px 0; font-size: .82rem; }
.us-bulk-table code { font-size: .95rem; letter-spacing: .04em; }
@media print { .sidebar, .admin-topbar, .back-link, .head-actions { display: none !important; } }

/* 報價明細／發票編輯器：1440 以下（扣掉側邊欄後內容寬放不下整張表）改成一品項一張卡片
   （欄位標題用 data-label），不用左右捲動；表格模式只在內容寬放得下 1140px 的大螢幕使用 */
@media (max-width: 1439px) {
  .qle-wrap { overflow: visible; }
  .qle-table, .qle-table.inv-table { display: block; min-width: 0; width: 100%; }
  .qle-table thead { display: none; }
  .qle-table tbody, .qle-table tfoot { display: block; }
  .qle-table tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .qle-table tbody tr.qle-child { margin-left: 14px; border-left: 3px solid var(--border); }
  .qle-table tbody td { display: flex; flex-direction: column; gap: 3px; width: auto !important; min-width: 0;
    padding: 0 !important; border: none; text-align: left; }
  .qle-table tbody td[data-label]::before { content: attr(data-label); font-size: .68rem; font-weight: 700; color: var(--hint); }
  .qle-table tbody td.qle-blank, .qle-table tbody td:empty { display: none; }
  .qle-table tbody td.qle-no { grid-column: 1 / -1; font-weight: 700; color: var(--sub); }
  .qle-table tbody td.qle-name, .qle-table tbody td.qle-remark, .qle-table tbody td.qle-ops,
  .qle-table tbody td.qle-start { grid-column: 1 / -1; }
  .qle-table tbody td.qle-ops { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; text-align: right; }
  .qle-table tbody td.qle-sum { padding: 0 !important; text-align: left; }
  .qle-table input, .qle-table select { border-color: var(--border); background: var(--surface); }
  .qle-table .qle-num input { text-align: left; }
  .qle-table tbody td.qle-num, .qle-table tbody td.qle-sum { text-align: left; }
  .qle-table tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: end;
    padding: 8px 14px; border-top: 1px solid var(--border); }
  .qle-table tfoot tr[hidden] { display: none; }
  .qle-table tfoot td { padding: 0 !important; border: none !important; }
  .qle-table tfoot td:empty { display: none; }
  .qle-table tfoot td.qle-name { white-space: normal; min-width: 0; }
  .qle-table tfoot td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700; color: var(--hint); }
  .qle-table tfoot td.qle-total-ops { grid-column: 1 / -1; text-align: right; }
  .qle-table tfoot td:has(> input) { grid-column: 1 / -1; }
  .qle-table.inv-table tfoot tr { grid-template-columns: 1fr auto; }
}

/* ── 觸控尺寸（手機／觸控螢幕） ─────────────────────────────────────────────
   手指點擊的建議最小尺寸約 40–44px；桌面滑鼠版維持原本較精緻的尺寸。 */
@media (max-width: 768px), (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  .link, .link-quiet, .link-danger { min-height: 34px; display: inline-flex; align-items: center; }
  a.link-plain { min-height: 0; display: inline; }  /* 只有純文字連結不放大；按鈕形式的 link-plain 照樣加大 */
  .modal-close, .settings-gear-btn { min-width: 40px; min-height: 40px; }
  .sidebar-user-btn { min-height: 40px; }
  .sidebar-link-sub { padding-top: 10px; padding-bottom: 10px; }
  .back-link { display: inline-flex; align-items: center; min-height: 32px; }
  input[type=checkbox], input[type=radio] { min-width: 18px; min-height: 18px; }
}

/* 使用者在系統設定裡關閉動畫時，一併停用轉場效果 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 只給螢幕閱讀器的文字（畫面上不顯示，例如全版工具頁的頁面標題） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 橫向捲動導覽列的邊緣淡出（class 由 scroll-hint.js 依捲動位置切換） */
.subnav.has-more-right, .tab-bar.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.subnav.has-more-left, .tab-bar.has-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.subnav.has-more-left.has-more-right, .tab-bar.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
@media (max-width: 768px) { .subnav { scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } }

/* ── 按鈕尺寸依「位置」統一 ───────────────────────────────────────────────
   篩選列：按鈕和旁邊的輸入框同高，底部對齊。
   表單送出列：最後的「儲存／新增」是整張表單的主要動作，用標準尺寸，不用小按鈕。 */
.rp-filters > .btn, .filter-bar > .btn { min-height: 40px; padding-left: 16px; padding-right: 16px; font-size: .84rem; }
.form-foot .btn-sm, .form-actions .btn-sm, .sc-save-row .btn-sm { padding: 8px 20px; font-size: .855rem; min-height: 38px; }

/* 破壞性動作區（頁面最底部）：和常用動作分開，說明清楚後果 */
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin-top: 28px; padding: 14px 18px; border: 1px dashed var(--danger-border); border-radius: var(--radius); background: var(--surface); }
.danger-zone p { margin: 0; }
.danger-zone-title { font-weight: 600; font-size: .9rem; color: var(--text-med); }
.danger-zone-sub { font-size: .8rem; color: var(--hint); }

/* 員工端頁首的個人選單（details/summary，鍵盤可操作） */
.nav-menu { position: relative; }
.nav-menu-btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 36px;
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--text); background: var(--surface); }
.nav-menu-btn::-webkit-details-marker { display: none; }
.nav-menu-btn:hover, .nav-menu[open] .nav-menu-btn { background: var(--surface2); border-color: var(--border-s); }
.nav-menu-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu-caret { font-size: .7rem; color: var(--hint); }
.nav-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px; padding: 6px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.nav-menu-link { display: block; padding: 10px 12px; border-radius: var(--radius-sm); font-size: .88rem; color: var(--text-med); }
.nav-menu-link:hover { background: var(--surface2); color: var(--text); }
.nav-menu-link.active { color: var(--primary); font-weight: 600; }

/* 頁首的可展開「說明」：頁面說明只留一句，規則細節收在這裡 */
.form-more.page-help { margin-top: 2px; }
.form-more.page-help summary { font-size: .78rem; padding: 2px 0; }
.form-more.page-help p { font-size: .8rem; color: var(--sub); max-width: 68ch; }
.form-more.page-help .note-list { font-size: .8rem; color: var(--sub); max-width: 68ch; }

/* 觸控尺寸（補充）：勾選框、篩選列輸入、表格內的小控制項 */
@media (max-width: 768px), (pointer: coarse) {
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-width: 22px; min-height: 22px; }
  .filter-bar input, .filter-bar select, .rp-filters input, .rp-filters select, .td-select { min-height: 40px; }
  .filter-date-group input[type=date] { min-height: 36px; }
  .table-wrap td input:not([type=checkbox]):not([type=radio]), .table-wrap td select { min-height: 38px; }
  .qle-op { min-width: 36px; min-height: 36px; }
  .sug-btn, .rp-chip, .notice-chip, .banner-btn, a.pill { min-height: 34px; display: inline-flex; align-items: center; }
  /* 小標籤外觀要跟旁邊不能點的標籤一樣大，點擊範圍改用透明延伸區塊補足 */
  a.pill.pill-xs { min-height: 0; position: relative; }
  a.pill.pill-xs::after { content: ""; position: absolute; inset: -10px -6px; }
  label.switch-field { min-height: 36px; }
  .note-tag .nt-del { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; }
  .form-more summary { min-height: 32px; align-items: center; }
  .worker-row-control input { min-height: 38px; }
}

/* ── 總覽（dash-）第一列：待處理＋今日出工 ───────────────────────────────── */
.dash-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.dash-top.has-todo { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .dash-top.has-todo { grid-template-columns: minmax(0, 1fr); } }
.dash-today .rc-head { margin-bottom: 4px; }
.dash-kpi-warn { color: var(--danger-text); font-weight: 600; }
.dash-overdue { color: #C81E1E; font-weight: 600; }
.dash-meter { flex: 1; }
/* 手機：進行中專案卡片精簡成三行（名稱／廠區＋進度／細項與最後出工） */
@media (max-width: 640px) {
  .table-wrap .dash-proj tbody td.is-blank { display: none; }
  .table-wrap .dash-proj tbody td[data-label="完工進度"] { flex-basis: 100%; order: 3; }
  .table-wrap .dash-proj tbody td[data-label="完工進度"]::before { display: none; }
  .dash-proj .rp-share { width: 100%; }
}

/* ── 錯誤說明頁（error.html） ───────────────────────────────────────────── */
.errpage-body { background: var(--bg); }
.errpage { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.errpage-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warning);
  border-radius: 14px; box-shadow: var(--shadow-sm); padding: 28px 26px 24px; }
.errpage-card h1 { font-size: 1.3rem; font-weight: 800; margin: 0 0 10px; color: var(--text); }
.errpage-msg { margin: 0 0 6px; font-size: .95rem; color: var(--text-med); }
.errpage-hint { margin: 0; font-size: .85rem; color: var(--sub); }
.errpage-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ── 多人同時編輯的衝突說明視窗（alerts.js dispatchConflict） ─────────────── */
.swal-conflict-list { text-align: left; margin: 8px 0 12px; padding-left: 20px; line-height: 1.7; font-size: .92rem; }

/* ── 零修單（admin/repairs.html、repair_detail.html、portal/*.html、_repair_rows.html） ──────── */
.rpo-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rpo-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2.4fr) minmax(130px, 1fr) auto; gap: 8px; align-items: center; }
.rpo-add { align-self: flex-start; }
.rpo-log { border-left: 3px solid var(--border-s); padding: 10px 14px; margin-bottom: 10px; background: var(--surface); border-radius: var(--radius-sm); }
.rpo-log-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rpo-log-note { margin: 6px 0 0; white-space: pre-wrap; }
.rpo-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rpo-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 600px) {
  .rpo-row { grid-template-columns: 1fr auto; }
  .rpo-row input[name="name"] { grid-column: 1 / -1; grid-row: 2; }
  .rpo-row input[name="planned_date"] { grid-column: 1 / -1; grid-row: 3; }
}
.rpo-action { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rpo-action:last-child { margin-bottom: 0; }
.rpo-action select { max-width: 100%; min-width: 0; }
.portal-head { margin-bottom: 16px; }
.portal-company { font-size: .8rem; color: var(--hint); margin: 0 0 4px; letter-spacing: .04em; }
.portal-leave { margin-top: 24px; text-align: center; }
.sd-portal { border-left: 4px solid var(--border-s); }
.sd-portal.is-on { border-left-color: var(--success); }
.sd-portal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sd-portal-title { font-size: 1.02rem; margin: 0; }
.sd-portal-sub { font-size: .84rem; color: var(--sub); margin: 4px 0 0; }
.sd-portal-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface2); border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.sd-portal-empty p { margin: 0; font-size: .88rem; }
.sd-portal-link { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 8px 8px 14px; }
.sd-portal-url { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .84rem;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.sd-portal-link-ops { display: flex; gap: 6px; flex-shrink: 0; }
.sd-portal-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .84rem; color: var(--sub); margin-top: 12px; }
.sd-portal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 10px; }
.sd-portal-foot-ops { display: flex; gap: 6px; }
.sd-portal-pin { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.sd-portal-pin-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .86rem; }
.sd-portal-pin-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sd-portal-pin-ops input { width: 200px; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2); font: inherit; font-size: .86rem; }
@media (max-width: 600px) {
  .sd-portal-link { flex-direction: column; align-items: stretch; padding: 10px; }
  .sd-portal-link-ops { justify-content: flex-end; }
  .sd-portal-pin-ops, .sd-portal-pin-ops input { width: 100%; }
}

/* ── 行事曆事項（admin/plans.html、_plans_table.html、_calendar_event_form.html、頁首提醒） ──────── */
.cal-kind { margin-bottom: 14px; }
.cal-new > summary { cursor: pointer; list-style: none; }
.cal-new > summary::-webkit-details-marker { display: none; }
.cal-new > summary h2 { display: inline; }
.cal-new > summary::after { content: "＋"; float: right; color: var(--hint); }
.cal-new[open] > summary::after { content: "－"; }
.cal-new-form { margin-top: 14px; }
/* 當天詳情（_plans_table.html）：三段同一套結構——段標題＋右側動作，內容一律左對齊 */
.cal-sec { padding: 14px 0; }
.cal-sec + .cal-sec { border-top: 1px solid var(--border-light); }
.cal-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-sec-title { margin: 0; font-size: .8rem; font-weight: 700; color: var(--sub); letter-spacing: .02em; }
.cal-sec-empty { margin: 0; font-size: .84rem; color: var(--hint); }
.cal-events { display: flex; flex-direction: column; gap: 10px; }
.cal-event { --ev-c: var(--border-s); border: 1px solid var(--border); border-left: 3px solid var(--ev-c); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.cal-event.is-billing { --ev-c: #d97706; }
.cal-event.is-notice { --ev-c: #6d28d9; }
.cal-event.is-done { opacity: .72; }
.cal-event-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-event-kind { font-size: .72rem; font-weight: 700; color: var(--ev-c); }
.cal-event-title { margin: 4px 0 0; font-size: .98rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.cal-event-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; font-size: .84rem; }
.cal-event-meta:empty { display: none; }
.cal-event-meta > div { display: contents; }
.cal-event-meta dt { color: var(--hint); }
.cal-event-meta dd { margin: 0; color: var(--text-med); overflow-wrap: anywhere; }
.cal-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.cal-event-body { margin: 8px 0 0; padding: 8px 10px; background: var(--surface2); border-radius: 4px; white-space: pre-wrap; font-size: .84rem; color: var(--text-med); }
.cal-event-ops { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.cal-event-ops form { display: inline; }
.cal-event-ops-end { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.cal-sites { display: flex; flex-direction: column; gap: 12px; }
.cal-site-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cal-site-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--site-c, var(--border-s)); flex-shrink: 0; }
.cal-site-name { font-weight: 700; font-size: .88rem; color: var(--text); }
.cal-site-count { margin-left: auto; font-size: .76rem; color: var(--hint); font-variant-numeric: tabular-nums; }
.cal-site .sc-pills { padding-left: 16px; }
.cal-leaves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .84rem; }
.cal-leaves li { display: flex; align-items: center; gap: 10px; }
.cal-leave-name { font-weight: 600; color: var(--text); min-width: 5em; }
.cal-leave-type { color: var(--sub); }
.plan-cal-events { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.plan-cal-event { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.plan-cal-event.is-billing { background: #fef3c7; color: #92400e; }
.plan-cal-event.is-notice { background: #ede9fe; color: #5b21b6; }
.plan-cal-event.is-done { text-decoration: line-through; opacity: .6; }
.plan-cal-more { color: var(--sub); background: var(--surface2); }
/* ── 全站待辦抽屜（_header_notices.html、static/js/notices.js） ─────────────────
   開關：電腦版是貼在畫面右緣的鈴鐺標籤（.ntc-tab，抽屜打開時跟著滑到抽屜左緣，像把抽屜拉出來）；
   手機版改用頂部欄／頁首的鈴鐺（.ntc-btn），右緣是手勢區、貼邊標籤也會蓋到內容。
   抽屜從右側滑出，左邊框顏色＝急迫程度。 */
.ntc-count { min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center; font-size: .7rem; font-weight: 700;
  line-height: 18px; background: var(--danger); color: #fff; }
.ntc-count[hidden] { display: none; }
.ntc-tab { position: fixed; z-index: 301; right: 0; top: 96px; width: 40px; padding: 10px 0 9px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  background: var(--ink-900); color: var(--ink-text-h); border: none; border-radius: 10px 0 0 10px;
  box-shadow: -2px 2px 12px rgba(15,23,42,.22); transition: right .22s cubic-bezier(.4,0,.2,1), background .14s, width .14s; }
.ntc-tab:hover { background: var(--ink-700); width: 44px; }
.ntc-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ntc-tab[aria-expanded="true"] { right: min(420px, 100vw); }
.ntc-tab:has(.ntc-count[hidden]) .ntc-bell { opacity: .65; }
body.has-ntc main.page { padding-right: 44px; }       /* 標籤不蓋到內容最右邊（頁首、子選單照常滿版） */
.ntc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px;
  cursor: pointer; background: transparent; color: var(--ink-text); border: none; border-radius: var(--radius-sm);
  transition: background .14s, color .14s; }
.ntc-btn:hover, .ntc-btn[aria-expanded="true"] { background: var(--ink-700); color: var(--ink-text-h); }
.ntc-btn.is-light { color: var(--sub); }
.ntc-btn.is-light:hover, .ntc-btn.is-light[aria-expanded="true"] { background: var(--bg); color: var(--text); }
.ntc-btn .ntc-count { position: absolute; top: 1px; right: 0; min-width: 16px; line-height: 16px; font-size: .64rem; padding: 0 4px; }
.ntc-btn.is-light { display: none; }                  /* 員工頁首：只在手機版出現 */
@media (max-width: 860px) {
  .ntc-tab { display: none; }
  body.has-ntc main.page { padding-right: 20px; }
  .ntc-btn.is-light { display: inline-flex; }
}

.ntc-backdrop { position: fixed; inset: 0; z-index: 299; background: rgba(15,23,42,.28); animation: ntc-fade-in .22s ease; }
.ntc-backdrop[hidden] { display: none; }
.ntc-drawer { position: fixed; z-index: 300; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  display: flex; flex-direction: column; background: var(--bg); box-shadow: var(--shadow-lg);
  animation: ntc-in .22s cubic-bezier(.4,0,.2,1); }
.ntc-drawer[hidden] { display: none; }
@keyframes ntc-in { from { transform: translateX(100%); } to { transform: none; } }
/* 收回：抽屜滑出、遮罩淡出，動畫結束才真的隱藏（notices.js）；鈴鐺標籤靠 right 的 transition 跟著滑回右緣 */
.ntc-drawer.is-closing { animation: ntc-out .2s cubic-bezier(.4,0,1,1) forwards; }
.ntc-backdrop.is-closing { animation: ntc-fade-out .2s ease forwards; }
@keyframes ntc-out { to { transform: translateX(100%); } }
@keyframes ntc-fade-in { from { opacity: 0; } }
@keyframes ntc-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ntc-drawer, .ntc-backdrop, .ntc-tab { animation: none !important; transition: none; } }
.ntc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px;
  background: var(--surface); border-bottom: 1px solid var(--border); }
.ntc-title { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.ntc-sub { margin: 2px 0 0; font-size: .8rem; color: var(--hint); }
.ntc-close { border: none; background: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--sub);
  padding: 2px 8px; border-radius: var(--radius-sm); }
.ntc-close:hover { background: var(--bg); color: var(--text); }
.ntc-body { flex: 1; overflow-y: auto; padding: 6px 16px 16px; }
.ntc-group { margin-top: 14px; }
.ntc-group-title { margin: 0 0 6px 2px; font-size: .74rem; font-weight: 700; color: var(--hint); letter-spacing: .04em; }
.ntc-item { --ntc-c: var(--border); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ntc-c);
  border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.ntc-item + .ntc-item { margin-top: 6px; }
.ntc-item.is-red { --ntc-c: var(--danger); }
.ntc-item.is-amber { --ntc-c: #d97706; }
.ntc-item.is-purple { --ntc-c: #7c3aed; }
.ntc-item.is-gray { --ntc-c: #cbd5e1; }
.ntc-group.is-quiet .ntc-item { background: transparent; }
.ntc-item-main { flex: 1 1 200px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ntc-item-title { font-weight: 700; font-size: .9rem; color: var(--text); }
.ntc-item-body { flex-basis: 100%; margin: 0; white-space: pre-wrap; font-size: .8rem; color: var(--hint); }
.ntc-meta { font-size: .76rem; color: var(--hint); }
.ntc-item-ops { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.ntc-due { font-size: .72rem; font-weight: 700; color: var(--sub); background: var(--border-light); border-radius: 4px; padding: 1px 6px; }
.ntc-due.is-today { color: #b45309; background: #fef3c7; }
.ntc-due.is-late { color: #b91c1c; background: #fee2e2; }
.ntc-empty { margin: 18px 0 4px; padding: 22px 14px; text-align: center; color: var(--hint); font-size: .88rem;
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.ntc-foot { padding: 10px 16px 14px; border-top: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; gap: 10px; }
.ntc-foot:not(:has(.ntc-foot-link)):not(:has(.push-prompt)) { display: none; }
.ntc-foot .push-prompt { margin: 0; border-left-width: 3px; padding: 8px 12px; }
.ntc-foot-link { align-self: flex-end; font-size: .84rem; font-weight: 600; color: var(--primary); }
.ntc-foot-link::after { content: " →"; }

/* ── 打卡設定（admin/clock_settings.html）、打卡頁定位與備註（me_clock.html） ──────── */
.cks-loc { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.6fr) 110px auto auto; gap: 10px; align-items: end;
.cks-remind { align-items: end; }
.cks-remind .form-actions { grid-column: 1 / -1; margin-top: 0; }
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.cks-loc.is-off { opacity: .6; }
.cks-loc .form-group { margin-bottom: 0; }
.cks-ops { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.cks-loc.is-target { background: #eff6ff; box-shadow: inset 3px 0 0 var(--primary); padding-left: 10px; padding-right: 10px; border-radius: var(--radius-sm); }
.cks-new { margin-top: 6px; border-bottom: none; }
.cks-map-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 8px; }
.cks-search { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.cks-search input { flex: 1; min-width: 0; }
.cks-map { height: 380px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); z-index: 0; }
.cks-editing { font-size: .84rem; color: var(--sub); margin: 8px 0 4px; }
@media (max-width: 600px) { .cks-map { height: 300px; } }
@media (max-width: 760px) {
  .cks-loc { grid-template-columns: 1fr 1fr; }
  .cks-loc .form-group:first-child, .cks-ops { grid-column: 1 / -1; }
}
.clk-gps { font-size: .82rem; color: var(--sub); margin: 8px 0 0; }
.clk-gps.is-error { color: var(--danger); }
.clk-auto { margin-bottom: 14px; }
.clk-note-text { font-size: .82rem; color: var(--sub); white-space: pre-wrap; }
.clk-note-cell { display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-width: 260px; }
.clk-note-cell .clk-note-text { flex: 1; min-width: 0; -webkit-line-clamp: 2; word-break: break-word; }
.clk-note-cell .clk-note-edit { flex-shrink: 0; }
.clk-note-count { margin-left: 4px; font-variant-numeric: tabular-nums; }
#clk-note-input { width: 100%; resize: vertical; }
.clk-place { display: block; font-size: .74rem; color: var(--hint); }
@media (max-width: 640px) {
  .plan-cal-event-title { display: none; }
  .plan-cal-events { flex-direction: row; flex-wrap: wrap; }
}
.co-group-title { font-size: .78rem; font-weight: 700; color: var(--sub); margin: 4px 0 2px; }

/* ── 新增出工細項：零修單／專案（dispatch/_modal_log_form.html） ─────────────────── */
.lgf-type { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lgf-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; cursor: pointer;
  background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--sub); text-align: left; }
.lgf-tab-name { font-weight: 700; font-size: .95rem; }
.lgf-tab-sub { font-size: .76rem; }
.lgf-tab[data-kind="repair"].is-active { border-color: #d97706; background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #d97706; }
.lgf-tab[data-kind="project"].is-active { border-color: var(--primary); background: #eff6ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px var(--primary); }
.lgf-type-hint { margin: 6px 0 4px; }
.lgf-choices { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.lgf-choice { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.lgf-choice[hidden] { display: none; }
.lgf-choice input { flex-shrink: 0; }
.lgf-choice.is-picked { border-color: var(--primary); background: #eff6ff; }
.lgf-choice.is-new .lgf-choice-name { color: var(--primary); font-weight: 600; }
.lgf-choice-main { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lgf-choice-no { font-weight: 700; font-size: .84rem; }
.lgf-choice-name { font-size: .9rem; }
.lgf-choice-meta { font-size: .76rem; color: var(--hint); white-space: nowrap; }
.lgf-new[hidden], .lgf-pane[hidden], .lgf-wi-group[hidden] { display: none; }
.wl-kind { font-weight: 700; }
@media (max-width: 600px) {
  .lgf-choice { flex-wrap: wrap; }
  .lgf-choice-meta { flex-basis: 100%; padding-left: 26px; white-space: normal; }
}
/* 選項卡片在 .form-group 裡：蓋掉表單 label 的區塊排版與 input 滿寬，圓鈕放在左邊 */
.form-group label.lgf-choice { display: flex; flex-direction: row; align-items: center; margin: 0; font-weight: 400; font-size: inherit; color: var(--text); }
.lgf-choice input[type=radio] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; margin: 0; padding: 0; }

/* ── 手機通知（me_notifications.html、push.js 的頁首提示） ───────────────────── */
.push-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 4px solid var(--primary); background: var(--surface);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.push-prompt-text { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.push-prompt-text span { color: var(--sub); font-size: .84rem; }
.push-prompt-ops { display: flex; gap: 8px; align-items: center; }
.ntf-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ntf-status-label { margin: 0; font-size: .8rem; color: var(--hint); }
.ntf-status-value { margin: 2px 0 0; font-size: 1.1rem; font-weight: 700; color: var(--sub); }
.ntf-status-value.is-on { color: var(--success-text); }
.ntf-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ntf-help { margin: 14px 0 0; }
.ntf-help ol { margin: 6px 0 0; padding-left: 20px; }
.ntf-list { margin: 0; padding-left: 20px; line-height: 1.9; font-size: .9rem; }
.ntf-devices { list-style: none; margin: 0; padding: 0; }
.ntf-devices li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ntf-devices li:last-child { border-bottom: none; }
.ntf-devices .link-danger { margin-left: auto; }

/* ── 零修報價與報告（admin/repair_quotes.html、repair_quote_detail.html、_repair_tabs.html） ──── */
.rpo-tabs { margin-bottom: 16px; }
.portal-docs { margin-top: 4px; }
label.rpo-docs-switch { margin: 12px 0 16px; }  /* 要壓過 label.switch-field 的 margin-bottom: 0 */
.rq-waiting { border-left: 4px solid #d97706; }
.rq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
/* 版面：左邊報價明細（主要工作），右邊交件流程（進度＋每一步的動作，取代原本的步驟條＋三張卡） */
.rq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rq-layout > .rq-lines { order: 1; margin-bottom: 0; }
/* 不用 sticky：.shell-main 的 overflow-x: hidden 讓 sticky 失效，改那裡會讓全站標題列都變成黏在上面 */
.rq-rail { order: 2; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: 14px 16px 6px; }
.rq-rail-title { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--hint); }
.rq-rs-list { list-style: none; margin: 0; padding: 0; }
.rq-rs { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 0 0 14px; }
.rq-rs:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; background: var(--border); }
.rq-rs.is-done:not(:last-child)::before { background: var(--success); }
.rq-step-no { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: var(--hint); background: var(--surface2); border: 1.5px solid var(--border); position: relative; }
.rq-rs.is-done .rq-step-no { background: var(--success); border-color: var(--success); color: #fff; }
.rq-rs.is-current .rq-step-no { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-sm); }
.rq-rs-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 3px; }
.rq-rs-title { margin: 0; font-size: .9rem; font-weight: 600; color: var(--sub); }
.rq-rs.is-current .rq-rs-title { color: var(--text); font-weight: 700; }
.rq-rs-meta { margin: -2px 0 0; font-size: .78rem; color: var(--hint); line-height: 1.5; overflow-wrap: anywhere; }
.rq-rs-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.rq-rs-form input[type=date] { padding: 5px 8px; font-size: .82rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2); color: var(--text); font-family: inherit; min-width: 0; }
.rq-rs-links { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; margin: 0; font-size: .82rem; }
.rq-file-btn { position: relative; overflow: hidden; cursor: pointer; }
.rq-file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.rq-file-btn.is-busy { opacity: .6; pointer-events: none; }

/* 報價明細 */
.rq-lines { border-left: 4px solid var(--border); padding: 20px 22px; }
.rq-lines.is-current { border-left-color: var(--primary); }
.rq-lines.is-dirty { border-left-color: var(--warning); }
.rq-lines.is-dirty .dirty-badge { display: inline-block; }
.rq-lines .dirty-discard { display: none; }
.rq-lines.is-dirty .dirty-discard { display: inline-flex; font-size: .72rem; padding: 2px 9px; margin-left: 6px; vertical-align: middle; }
.rq-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0; background: var(--surface); }
.rq-group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rq-group-name { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.rq-group-name > a { font-weight: 700; font-size: .98rem; color: var(--text); }
.rq-group-name > a:hover { color: var(--primary); }
.rq-group-status { font-size: .76rem; color: var(--hint); }
.rq-group-ops { display: flex; align-items: center; gap: 6px; }
/* 輸入框都是 size="1"（不讓預設寬度撐開欄位）：品名至少三成，數字欄照表頭寬度，窄的時候一起等比縮 */
.rq-table { width: 100%; }
.rq-table thead th:first-child { width: 32%; }
.rq-table input { width: 100%; min-width: 0; padding: 6px 8px; }
.rq-table input[inputmode=decimal] { text-align: right; font-variant-numeric: tabular-nums; }
.rq-table input::placeholder { color: var(--hint); }
.rq-table .rq-q { width: 60px; }
.rq-table .rq-u { width: 64px; }
.rq-table input[name=unit] { text-align: center; }
.rq-info-hint { margin: -8px 0 15px; }
.rq-table .rq-n { width: 100px; }
.rq-table .rq-x { width: 1%; white-space: nowrap; text-align: right; }
/* 卡片本身太窄（例如 1280 寬的螢幕、右邊還有交件流程）時，一列七欄放不下：跟手機一樣改成堆疊的格子。
   依卡片寬度（container query）切換，不是看螢幕寬度 */
.rq-group { container-type: inline-size; }
@container (max-width: 680px) {
  .rq-table thead { display: none; }
  .rq-table, .rq-table tbody { display: block; width: 100%; }
  .rq-table tbody tr { display: grid; grid-template-columns: .8fr .7fr 1fr 1.25fr; gap: 6px 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--border); }
  .rq-table tbody tr:last-child { border-bottom: none; }
  .rq-table tbody td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: none; min-width: 0; }
  .rq-table td[data-label]::before { content: attr(data-label); font-size: .68rem; font-weight: 600; color: var(--hint); }
  .rq-table tbody td[data-label="品名"], .rq-table tbody td[data-label="最終金額"] { grid-column: 1 / -1; }
  .rq-table tbody td.rq-x { grid-column: 1 / -1; justify-self: end; width: auto; }
}
.rq-group-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 8px; }
.rq-ladder { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; }
.rq-ladder label { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--sub); margin: 0; }
.rq-ladder input { width: 104px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.rq-ladder-total { font-size: .84rem; color: var(--sub); }
.rq-ladder-total b { font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; margin-left: 2px; }
.rq-ladder input.is-over { border-color: var(--danger, #dc2626); background: #fef2f2; }
/* 合計＋儲存：平常在卡片底部；有未儲存的修改時固定在畫面底部，長清單也不用捲回去找按鈕 */
.rq-savebar { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px;
  flex-wrap: wrap; margin: 8px -22px -20px; padding: 12px 22px; background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.rq-savebar-ops { display: flex; align-items: center; gap: 10px; }
.rq-dirty-note { display: none; font-size: .82rem; font-weight: 600; color: var(--warning-text); }
.rq-lines.is-dirty { margin-bottom: 76px; }
.rq-lines.is-dirty .rq-dirty-note { display: inline; }
.rq-lines.is-dirty [data-grand-after] { display: none; }      /* 存檔前的再議／最終合計是舊的，先不顯示 */
.rq-lines.is-dirty .rq-savebar { position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; z-index: 30; margin: 0; padding: 12px 28px;
  border-radius: 0; background: #fffbeb; border-top: 2px solid var(--warning); box-shadow: 0 -6px 18px rgba(15,23,42,.08); }
@media (max-width: 860px) { .rq-lines.is-dirty .rq-savebar { left: 0; padding: 10px 14px; } }
.rq-grand { font-size: .9rem; color: var(--sub); }
.rq-grand b { font-size: 1.12rem; color: var(--text); font-variant-numeric: tabular-nums; }
.rq-more { margin-top: 14px; }
@media (max-width: 1100px) {
  .rq-layout { grid-template-columns: 1fr; }
  .rq-rail { order: 0; position: static; }
  .rq-rs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
  .rq-rs::before { display: none; }
}
@media (max-width: 640px) {
  .rq-rs-list { grid-template-columns: 1fr; }
  .rq-rail { padding: 12px 14px 2px; }
  .rq-rs { padding-bottom: 10px; }
  .rq-rs:not(.is-current) .rq-rs-meta { display: none; }      /* 手機只留目前這步的說明，流程不要把明細推太下面 */
  /* 明細一列改成緊湊的格子：品名一整行，數量／單位／單價／金額一行，刪除靠右一行 */
  .table-wrap .rq-table tbody tr { display: grid; grid-template-columns: .8fr .7fr 1fr 1.25fr; gap: 6px 8px; padding: 10px 0; }
  .table-wrap .rq-table tbody td { padding: 0; min-width: 0; }
  .table-wrap .rq-table tbody td[data-label="品名"], .table-wrap .rq-table tbody td[data-label="最終金額"] { grid-column: 1 / -1; }
  .table-wrap .rq-table tbody td.rq-x { grid-column: 1 / -1; justify-self: end; }
  .table-wrap .rq-table td[data-label]::before { font-size: .68rem; margin-bottom: 2px; }
  .rq-table input { padding: 6px 7px; font-size: .88rem; }
  .rq-lines { padding: 14px; }
  .rq-group { padding: 10px; }
  .rq-savebar { margin: 8px -14px -14px; padding: 10px 14px; }
  .rq-savebar-ops { flex: 1; justify-content: flex-end; }
  .rq-ladder { justify-content: flex-start; }
}
.rq-history { margin-top: 16px; }
.rq-history-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rq-history-form p, .rq-history-form .note-list { flex-basis: 100%; max-width: none; margin: 0; }
.rq-history-form input[type=file] { max-width: 100%; }
.rq-sg-list { display: flex; flex-direction: column; gap: 12px; }
.rq-sg { border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: 10px 14px; }
.rq-sg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.rq-sg-head strong { font-size: .95rem; }
.rq-sg-head .btn { margin-left: auto; }
.rq-sg table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.rq-sg td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.rq-sg td.ta-r { text-align: right; white-space: nowrap; }
.rq-sg tr.rq-sg-mgmt td { color: var(--sub); }
.rq-sg-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .86rem; }
.rq-sg-sum b { font-variant-numeric: tabular-nums; }
.rq-addrepair { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rq-addrepair select { min-width: 0; max-width: 100%; }
.rq-final-table tr.is-missing td { background: #fffbeb; }
.rq-final-table input { width: 120px; }
.rq-final-table td.is-changed input { border-color: var(--primary, #2563eb); font-weight: 600; }
.rq-final-h { font-size: 0.95rem; font-weight: 600; margin: 18px 0 4px; }
.rq-final-h + .form-hint { margin: 0 0 8px; }
@media (max-width: 640px) {
  /* 手機卡片：零修單一整行，下面「原本／回覆」兩兩並排 */
  .table-wrap #rq-final-nego td { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .table-wrap #rq-final-nego td[data-label="零修單"] { flex-basis: 100%; }
  .rq-final-table input { width: 100%; }
}
.rq-photo-modal { max-width: 1100px; width: 96vw; }
.rq-photo-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; max-height: 76vh; }
.rq-photo-src { overflow-y: auto; padding-right: 4px; }
.rq-pg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; position: sticky; top: 0; background: var(--surface);
  padding: 4px 0; z-index: 1; border-left: 3px solid var(--primary); padding-left: 8px; margin: 10px 0 6px; }
.rq-pg-head h3 { font-size: .95rem; margin: 0; }
.rq-pg-no { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--sub); margin: 0; }
.rq-pg-no input { width: 140px; padding: 5px 9px; font-size: .84rem; font-family: inherit; color: var(--text); background: var(--surface2);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; }
.rq-pg-no input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-sm); }
.rq-day { margin-bottom: 10px; }
.rq-day-head { margin: 0 0 4px; font-size: .84rem; color: var(--sub); }
.rq-ph-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-ph { position: relative; padding: 0; border: 3px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer;
  transition: border-color .12s; }
.rq-ph:hover { border-color: var(--primary-sm, #bfdbfe); }
.rq-ph img { width: 104px; height: 104px; object-fit: cover; display: block; border-radius: 4px;
  background: var(--surface2); outline: 1px solid var(--border); outline-offset: -1px; }
.rq-ph.is-picked, .rq-ph.is-picked:hover { border-color: var(--primary); }
.rq-ph-no { position: absolute; top: 5px; left: 5px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--primary);
  color: #fff; font-size: .76rem; font-weight: 700; display: none; align-items: center; justify-content: center; padding: 0 5px;
  box-shadow: 0 0 0 2px #fff; }
.rq-ph.is-picked .rq-ph-no { display: inline-flex; }
.rq-ph-stage { position: absolute; left: 5px; bottom: 5px; box-shadow: var(--shadow-xs); }
/* 右欄：上面可捲動（驗收日期＋已選照片），說明與「產生報告」固定在底部 */
.rq-photo-picked { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); padding-left: 16px; }
.rq-pp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.rq-pp-title { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-weight: 600; font-size: .9rem; }
.rq-pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rq-pk { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; align-items: center;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rq-pk-thumb { position: relative; grid-row: span 2; }
.rq-pk-thumb img { width: 64px; height: 64px; object-fit: cover; display: block; border-radius: 4px;
  background: var(--surface2); outline: 1px solid var(--border); outline-offset: -1px; }
.rq-pk-no { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--primary);
  color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  box-shadow: 0 0 0 2px var(--surface); }
.rq-pk input { width: 100%; padding: 6px 9px; font-size: .84rem; font-family: inherit; color: var(--text); background: var(--surface2);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; min-width: 0; }
.rq-pk input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-sm); }
.rq-pk-ops { display: flex; gap: 4px; }
.rq-pk-ops .link-danger { margin-left: auto; }
.rq-pk-empty { padding: 22px 12px; text-align: center; font-size: .84rem; line-height: 1.7; color: var(--hint);
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm); }
.rq-pp-foot { flex-shrink: 0; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.rq-pp-foot .note-list { margin: 0 0 10px; font-size: .78rem; }
@media (max-width: 900px) {
  .rq-photo-body { grid-template-columns: 1fr; max-height: none; }
  .rq-photo-picked { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
  .rq-pp-scroll { overflow: visible; }
}

/* ── 財務→雜支與代墊（admin/expenses.html） ──────────────────────────────────────── */
.exl-owner { max-width: 420px; }
.exl-owner select { width: 100%; }
.exl-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin: 4px 0 10px; font-size: .82rem; color: var(--sub); }
.exl-summary-links { display: inline-flex; align-items: center; gap: 12px; }
.exl-payer { margin-right: 4px; }
.exl-view { color: var(--text); font-weight: 700; }
a.exl-pending { text-decoration: none; padding: 4px 12px; border-left: 3px solid var(--warning); }
a.exl-pending:hover .head-stat-value { color: var(--primary); }
.exl-actions { white-space: nowrap; text-align: right; }
.exl-actions form { display: inline; }
.exl-readonly { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; background: var(--surface2); }
.exl-readonly p + p { margin-top: 2px; }
@media (max-width: 640px) {
  .exl-actions { text-align: left; }
}

/* ── 進貨廠商、進貨紀錄、比價查詢（admin/suppliers*.html、purchases.html、price_compare.html） ── */
.sup-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sup-tag { text-decoration: none; }
.sup-phones { display: flex; flex-direction: column; gap: 2px; }
.page-sub .sup-tag { margin-right: 4px; }
.sup-filter-q { flex: 1 1 260px; }
.sup-filter-q input { width: 100%; }
.sup-tag-filter { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sup-tag-filter-label { font-size: .72rem; color: var(--sub); margin-right: 4px; }
.sup-tag-filter .rp-chip { text-decoration: none; }
.sup-tag-suggest { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sup-tag-suggest .rp-chip { padding: 2px 10px; }

.rc-stats.sup-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-stats.sup-contact .rc-stat-value { font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; }
.sup-contact-wide { grid-column: span 2; }
.sup-note { white-space: pre-line; font-weight: 400 !important; font-size: .9rem !important; }
.sup-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 22px 0 12px; }
.sup-section-head h2, .sup-h2 { font-size: 1.05rem; font-weight: 700; }
.sup-h2 { margin: 22px 0 10px; }
.sup-h2 .tx-sub { font-size: .82rem; font-weight: 400; margin-left: 4px; }
.sup-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sup-kpi-date { font-size: 1.15rem !important; }
.sup-items-more { margin-bottom: 14px; }
.sup-items-more .table-wrap { margin-top: 10px; }
.sup-danger-zone { justify-content: flex-start; gap: 14px; border-top: 1px solid var(--border); padding-top: 14px; }

.sup-unit-card { margin-bottom: 12px; border-left: 3px solid var(--primary); }
.sup-unit-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sup-unit-head h2 { font-size: 1rem; margin: 0; }
.rc-stats.sup-unit-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rc-stats.sup-unit-stats .rc-stat-label { white-space: normal; }

.sup-bar-col { width: 40%; }
.sup-bar { display: block; height: 8px; width: var(--w); min-width: 2px; border-radius: 4px; background: var(--primary-sm); }

/* 進貨登記：一列一個品項，欄寬固定讓多列對齊 */
.modal.sup-purchase-modal { width: 1080px; }
.sup-lines { margin: 4px 0 6px; }
.sup-line { display: grid; grid-template-columns: 2fr 1.4fr .8fr .8fr .9fr 1fr 1.3fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.sup-cell { display: block; min-width: 0; margin: 0; }
.sup-cell input { width: 100%; min-width: 0; padding: 6px 8px; font-size: .86rem; }
.sup-cell-label { display: none; font-size: .72rem; color: var(--sub); margin-bottom: 2px; }
.sup-line-head { font-size: .72rem; color: var(--sub); margin-bottom: 4px; }
.sup-lines-total { text-align: right; font-size: .9rem; color: var(--sub); margin: 8px 0 12px; }
.sup-lines-total strong { color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .rc-stats.sup-unit-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rc-stats.sup-contact, .rc-stats.sup-unit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sup-bar-col { width: 30%; }
  /* 手機：每列變成小卡，品名整行、其他兩兩一排 */
  .sup-line-head { display: none; }
  .sup-line {
    grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
    grid-template-areas: "item item" "spec spec" "qty unit" "price amount" "note del";
  }
  .sup-cell-label { display: block; }
  .sup-c-item { grid-area: item; } .sup-c-spec { grid-area: spec; } .sup-c-unit { grid-area: unit; }
  .sup-c-qty { grid-area: qty; } .sup-c-price { grid-area: price; } .sup-c-amount { grid-area: amount; }
  .sup-c-note { grid-area: note; } .sup-c-del { grid-area: del; justify-self: end; align-self: end; }
}

/* ── 即時同步（static/js/live.js）──────────────────────────────────────────────
   別人更新了這頁的資料：畫面上方提示＋「重新整理」；局部更新的區塊短暫亮一下；
   正在填寫時先不換，區塊上方說明會在填完後套用。 */
.sync-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1200;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--text); border: 1px solid var(--info-border);
  border-left: 4px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px 8px 8px 14px; font-size: .9rem; animation: sync-in .2s ease-out;
}
.sync-banner-text { min-width: 0; }
.sync-banner .btn { flex: none; }
.sync-banner-close {
  flex: none; border: 0; background: none; color: var(--sub); cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: .95rem;
}
.sync-banner-close:hover { background: var(--surface2); color: var(--text); }
.sync-waiting {
  margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--primary);
  background: var(--info-bg); color: var(--info-text); font-size: .8rem; border-radius: var(--radius-sm);
}
.sync-flash { animation: sync-flash 1.6s ease-out; }
@keyframes sync-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sync-flash { 0% { box-shadow: 0 0 0 3px var(--primary-sm); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (max-width: 767px) {
  .sync-banner { top: auto; bottom: 14px; width: calc(100vw - 32px); justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .sync-banner, .sync-flash { animation: none; } }

/* 兩步驟驗證（account_2fa.html，版面用 form-section；修改密碼頁的狀態列 acct-2fa） */
.tfa-text { margin: 0; font-size: .88rem; color: var(--text); line-height: 1.7; }
.tfa-pair { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.tfa-qr { display: block; flex-shrink: 0; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tfa-manual { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tfa-manual .form-hint { margin: 0; }
.tfa-key { margin: 0; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface2);
  font-family: ui-monospace, Consolas, monospace; font-size: .92rem; letter-spacing: .06em; line-height: 1.7; align-self: flex-start; }
.tfa-code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.acct-2fa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acct-2fa .acct-2fa-go { margin-left: auto; }
/* 編輯頁唯讀的「目前狀態」（工項、細項） */
.form-section-body.kv-list { max-width: 360px; margin-top: 0; }

/* 出工細項「參與人員」標題列：右邊放全選鈕 */
.wl-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wl-pick-head > label { margin-bottom: 0; }