/* ============================================================================
   TRUST DESIGN · 改版 — 舊版面過渡皮（compat）
   ----------------------------------------------------------------------------
   點解要有呢個檔：設計檔只畫咗 13 個畫面，但系統有 80 幾版。Kelvin 2026-08-01 講明
   「有唔齊的地方你再可根據同樣設計去改，因為我擔心我都諗漏左唔知邊 1 頁」。
   逐版重寫要好耐，而且好多版（工地支出／師傅工作記錄／集團營收…）冇設計圖，
   重寫＝自己發明。所以呢啲版面行呢條路：

     ① 換骨架 → `_td_legacy.html`（同改版一樣嘅 sidebar ＋ top bar）
     ② 內容 markup 一個字都唔改（Bootstrap 照載，功能／JS 零風險）
     ③ 呢個檔喺 Bootstrap 之後載，**用 --td-* token 重新畫 Bootstrap 嗰堆 class**
        —— 所以舊版面睇落同改版一套色、一套字、一套圓角。

   ⚠ 呢個檔**只准用 var(--td-*)**，同 ui.css 一樣規矩。
   ⚠ 呢度係「過渡」：邊版有咗正式設計就改去 `_td_base.html` 重寫，
      唔好喺呢度加版面專用嘅 hack。
   ========================================================================== */

/* ── Bootstrap 變數直接駁落我哋 token（最省事嗰層）───────────────────── */
:root {
  --bs-body-bg: var(--td-canvas);
  --bs-body-color: var(--td-text);
  --bs-body-font-family: var(--td-font);
  --bs-body-font-size: 13px;
  --bs-secondary-color: var(--td-muted);
  --bs-border-color: var(--td-hairline);
  --bs-emphasis-color: var(--td-text);
  --bs-link-color: var(--td-brand);
  --bs-link-hover-color: var(--td-brand-text);
  --bs-border-radius: var(--td-r-control);
  --bs-primary: var(--td-brand);
}

.td-legacy { font-family: var(--td-font); color: var(--td-text); font-size: 13px; }

/* ui.css 個 reset 對舊版面太狠 —— 舊 markup 有真係要 bullet 嘅清單同有 margin 嘅標題 */
.td-legacy ul:not([class]), .td-legacy ol:not([class]) { list-style: revert; padding-left: 1.4em; }
.td-legacy h1, .td-legacy h2, .td-legacy h3,
.td-legacy h4, .td-legacy h5, .td-legacy h6 { margin: 0 0 10px; color: var(--td-text); font-weight: 600; }
.td-legacy h1 { font-size: 22px; letter-spacing: var(--td-ls-tight); }
.td-legacy h2 { font-size: 19px; }
.td-legacy h3 { font-size: 16px; }
.td-legacy h4 { font-size: 15px; }
.td-legacy h5 { font-size: 14px; }
.td-legacy p { margin: 0 0 10px; }
.td-legacy hr { border: 0; border-top: 1px solid var(--td-hairline); margin: 16px 0; }
.td-legacy small, .td-legacy .small { font-size: var(--td-fs-meta); }
.td-legacy .text-muted { color: var(--td-muted) !important; }
.td-legacy .text-danger { color: var(--td-alert-soft-text) !important; }
.td-legacy .text-success { color: var(--td-ok) !important; }
.td-legacy .text-warning { color: var(--td-warn-text) !important; }
.td-legacy code, .td-legacy kbd, .td-legacy pre { font-family: var(--td-font-mono); }

/* ── 卡 ─────────────────────────────────────────────────────────────── */
.td-legacy .card, .td-legacy .tru-card, .td-legacy .tru-board > .tru-sect {
  background: var(--td-surface);
  border: 1px solid var(--td-hairline);
  border-radius: var(--td-r-card);
  box-shadow: none;
}
.td-legacy .card-header, .td-legacy .card-footer {
  background: var(--td-surface-alt);
  border-color: var(--td-hairline-2);
  font-weight: 600;
  color: var(--td-text);
}
.td-legacy .tru-card { padding: 16px 18px; margin-bottom: 16px; }

/* ── 表 ─────────────────────────────────────────────────────────────── */
.td-legacy .table, .td-legacy table {
  --bs-table-bg: var(--td-surface);
  color: var(--td-text-2);
  font-size: var(--td-fs-body);
  border-color: var(--td-hairline-3);
}
.td-legacy .table > :not(caption) > * > * { padding: 9px 10px; box-shadow: none; }
.td-legacy .table thead th, .td-legacy table thead th {
  background: var(--td-surface-alt);
  border-bottom: 1px solid var(--td-hairline);
  color: var(--td-muted);
  font: 600 var(--td-fs-label) var(--td-font-mono);
  letter-spacing: var(--td-ls-label);
  text-transform: none;
  white-space: nowrap;
}
.td-legacy .table tbody tr:hover > * { background: var(--td-surface-hover); }
.td-legacy .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; }
.td-legacy .table > tbody > tr > td { border-bottom: 1px solid var(--td-hairline-3); }

/* ── 掣 ─────────────────────────────────────────────────────────────── */
.td-legacy .btn {
  border-radius: var(--td-r-control);
  font: 500 var(--td-fs-body-sm) var(--td-font);
  padding: 0 12px;
  height: var(--td-ctl-h);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--td-border-control);
  background: var(--td-surface);
  color: var(--td-text-2);
}
.td-legacy .btn:hover { background: var(--td-surface-hover); border-color: var(--td-border-control-hover); color: var(--td-text-2); }
.td-legacy .btn-sm { height: var(--td-btn-h-sm); padding: 0 10px; border-radius: var(--td-r-sm); font-size: var(--td-fs-meta); }
.td-legacy .btn-lg { height: 36px; padding: 0 16px; font-size: var(--td-fs-body); }
.td-legacy .btn-primary, .td-legacy .btn-brand, .td-legacy .btn-success {
  background: var(--td-brand); border-color: var(--td-brand); color: var(--td-on-brand);
}
.td-legacy .btn-primary:hover, .td-legacy .btn-brand:hover, .td-legacy .btn-success:hover {
  background: var(--td-brand-hover); border-color: var(--td-brand-hover); color: var(--td-on-brand);
}
.td-legacy .btn-outline-secondary, .td-legacy .btn-secondary, .td-legacy .btn-light {
  background: var(--td-surface); border-color: var(--td-border-control); color: var(--td-text-2);
}
.td-legacy .btn-danger, .td-legacy .btn-outline-danger {
  background: var(--td-surface); border-color: var(--td-danger-border); color: var(--td-alert-soft-text);
}
.td-legacy .btn-danger:hover, .td-legacy .btn-outline-danger:hover {
  background: var(--td-danger-hover); border-color: var(--td-danger-border); color: var(--td-alert-soft-text);
}
.td-legacy .btn-link { border-color: transparent; background: none; color: var(--td-brand); }
.td-legacy .btn:disabled, .td-legacy .btn.disabled {
  background: var(--td-surface-hover); border-color: var(--td-hairline-2); color: var(--td-disabled); opacity: 1;
}

/* ── input / select ────────────────────────────────────────────────── */
.td-legacy .form-control, .td-legacy .form-select,
.td-legacy input[type=text], .td-legacy input[type=number], .td-legacy input[type=date],
.td-legacy input[type=password], .td-legacy input[type=search], .td-legacy select, .td-legacy textarea {
  border: 1px solid var(--td-hairline);
  border-radius: var(--td-r-control);
  background: var(--td-surface);
  color: var(--td-text);
  font: 400 var(--td-fs-body) var(--td-font);
  min-height: var(--td-ctl-h);
  padding: 4px 10px;
  box-shadow: none;
}
.td-legacy .form-control-sm, .td-legacy .form-select-sm { min-height: var(--td-ctl-h-sm); padding: 2px 9px; font-size: var(--td-fs-body-sm); }
.td-legacy .form-control:focus, .td-legacy .form-select:focus,
.td-legacy input:focus, .td-legacy select:focus, .td-legacy textarea:focus {
  border-color: var(--td-brand); box-shadow: none; outline: none;
}
.td-legacy .form-control::placeholder, .td-legacy input::placeholder, .td-legacy textarea::placeholder { color: var(--td-disabled-2); }
.td-legacy .form-label { font: 400 var(--td-fs-micro) var(--td-font); color: var(--td-muted); margin-bottom: 5px; }
.td-legacy .form-check-input:checked { background-color: var(--td-brand); border-color: var(--td-brand); }
.td-legacy .input-group-text { background: var(--td-surface-alt); border-color: var(--td-hairline); color: var(--td-muted); }

/* ── badge / alert ─────────────────────────────────────────────────── */
.td-legacy .badge {
  border-radius: var(--td-r-pill);
  font: 500 var(--td-fs-meta-sm) var(--td-font);
  padding: 3px 8px;
  background: var(--td-neutral-soft);
  color: var(--td-neutral-soft-text);
}
.td-legacy .badge.bg-primary, .td-legacy .badge.bg-info { background: var(--td-brand-soft) !important; color: var(--td-brand-text) !important; }
.td-legacy .badge.bg-success { background: var(--td-ok-soft) !important; color: var(--td-ok-soft-text) !important; }
.td-legacy .badge.bg-warning { background: var(--td-warn-soft) !important; color: var(--td-warn-soft-text) !important; }
.td-legacy .badge.bg-danger { background: var(--td-alert-soft) !important; color: var(--td-alert-soft-text) !important; }
.td-legacy .badge.bg-secondary, .td-legacy .badge.bg-light { background: var(--td-neutral-soft) !important; color: var(--td-neutral-soft-text) !important; }
.td-legacy .alert {
  border-radius: var(--td-r-card);
  border: 1px solid var(--td-hairline);
  background: var(--td-surface);
  color: var(--td-text-2);
  font-size: var(--td-fs-body);
  padding: 11px 14px;
}
.td-legacy .alert-success, .td-legacy .alert-info { background: var(--td-brand-soft); border-color: var(--td-brand-soft); color: var(--td-brand-text); }
.td-legacy .alert-warning { background: var(--td-warn-row); border-color: var(--td-warn-border); color: var(--td-warn-soft-text); }
.td-legacy .alert-danger { background: var(--td-alert-soft); border-color: var(--td-alert-soft); color: var(--td-alert-soft-text); }

/* ── modal / dropdown（Bootstrap JS 照行，只換皮）──────────────────── */
.td-legacy .modal-content, .dropdown-menu {
  border-radius: var(--td-r-card);
  border: 1px solid var(--td-hairline);
  background: var(--td-surface);
}
.td-legacy .modal-header, .td-legacy .modal-footer { border-color: var(--td-hairline-2); }

/* ── 舊版自家 class（static/style.css 嗰套）──────────────────────────── */
.td-legacy .tru-nav, .td-legacy .tru-bottomnav, .td-legacy .tru-back-float { display: none !important; }
.td-legacy .tru-subnav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  background: var(--td-surface); border: 1px solid var(--td-hairline);
  border-radius: var(--td-r-card); padding: 7px 10px; margin-bottom: 14px;
}
.td-legacy .tru-subnav a {
  padding: 5px 10px; border-radius: var(--td-r-sm);
  font: 400 var(--td-fs-body-sm) var(--td-font); color: var(--td-text-2);
}
.td-legacy .tru-subnav a:hover { background: var(--td-surface-hover); }
.td-legacy .tru-subnav a.active { background: var(--td-brand-soft); color: var(--td-brand-text); font-weight: 500; }
.td-legacy .tru-subnav__label { font: 600 var(--td-fs-label) var(--td-font-mono);
                                letter-spacing: var(--td-ls-label); color: var(--td-muted); padding: 0 6px; }
.td-legacy .tru-stat, .td-legacy .op-stat, .td-legacy .op-card {
  background: var(--td-surface); border: 1px solid var(--td-hairline);
  border-radius: var(--td-r-card); box-shadow: none;
}
.td-legacy .tru-stat__value, .td-legacy .op-stat__n {
  font-family: var(--td-font-mono); font-variant-numeric: tabular-nums;
  color: var(--td-text); letter-spacing: var(--td-ls-kpi);
}
.td-legacy .tru-stat__label, .td-legacy .op-stat__k { color: var(--td-muted); font-size: var(--td-fs-meta-sm); }

/* 舊版好多地方硬寫 var(--brand) 等舊 token —— 喺呢個範圍內重新指向新色階，
   咁樣舊 markup 唔使改都會着新色。⚠ 呢層係過渡用，改晒版面之後成段可以刪。 */
.td-legacy {
  --brand: var(--td-brand);
  --brand-dark: var(--td-brand);
  --brand-darker: var(--td-brand-text);
  --brand-soft: var(--td-brand-soft);
  --ink: var(--td-text);
  --muted: var(--td-muted);
  --line: var(--td-hairline);
  --bg: var(--td-canvas);
  --card: var(--td-surface);
  --card-2: var(--td-surface-alt);
  --on-brand: var(--td-on-brand);
  --ok: var(--td-ok);        --ok-bg: var(--td-ok-soft);     --ok-ink: var(--td-ok-soft-text);
  --warn: var(--td-warn);    --warn-bg: var(--td-warn-soft);  --warn-ink: var(--td-warn-soft-text);
  --bad: var(--td-alert);    --bad-bg: var(--td-alert-soft);  --bad-ink: var(--td-alert-soft-text);
  --shadow: none;
  --shadow-hover: 0 6px 18px rgba(19,36,34,.10);
  --radius: var(--td-r-card);
}

/* ══════════════════════════════════════════════════════════════════════════
   手機（≤900px）—— 舊 markup 一個字都唔改，淨係唔好爆出螢幕
   ⚠ 舊版面成日直接寫 <table class="table">（冇 .table-responsive 包），
     390px 度就會迫到一個字一行。所以喺呢個範圍內自己包一層橫向捲。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .td-legacy { padding: 14px 12px 32px !important; }
  .td-legacy .table-responsive,
  /* ⚠ 只准喺 <table> 度落 display:block —— **唔准**順手將 thead/tbody 設成
     `display:table`，咁做會令表頭同表身各自成一張表，欄寬對唔齊。
     擺喺一齊嘅 thead/tbody 會被瀏覽器包成同一個匿名 table，所以自然對得齊。 */
  .td-legacy table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .td-legacy th, .td-legacy td { white-space: nowrap; }
  .td-legacy .row { margin-left: -6px; margin-right: -6px; }
  .td-legacy .row > * { padding-left: 6px; padding-right: 6px; }
  .td-legacy .card-body { padding: 12px; }
  /* 舊版好多 inline `display:flex` 嘅工具列 —— 逼到爆就換行 */
  .td-legacy .d-flex { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   搬返嚟嘅舊 class（2026-08-25）—— Kelvin：「點解點做係創施系統都係 BUG BUG 地？」
   ⚠⚠ 根因：`_td_legacy.html` / `_td_client_legacy.html` **冇載 `static/style.css`**，
     但有 22 個版面仲用緊只存在於嗰個檔嘅 `.rc-*` / `.tru-*` class
     ⇒ 嗰啲元件由搬去新骨架嗰日起就完全冇樣（開立收據頁一版就中 15 個）。
     同 2026-08-24 收據列印頁粒返回掣、2026-08-25 已刪收據頁嘅卡樣係**同一個病**：
     **「寫咗個 class」≠「嗰版載得到嗰個 class」**。
   ⚠ 做法＝原文搬過嚟＋加 `.td-legacy ` 前綴。compat.css 上面已經把舊 token 名
     （--card／--line／--ink…）橋接返新色階，所以照搬就會着返新色，唔使逐條改。
   ⚠ **唔准反過來喺 `_td_legacy.html` 加載 `style.css`** —— 嗰個檔有成站 Bootstrap
     時代嘅 `.btn`／`.card`／`.table` 定義，載咗會蓋走新設計系統。
   ⚠ 加新版面之前：先睇嗰版載唔載得到你用嘅 class。 */
.td-legacy .tru-nav__inner { max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  flex-wrap: wrap; }
.td-legacy .tru-nav__brand { display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: 12px; }
.td-legacy .tru-nav__brand img { height: 42px; width: auto; display: block; }
.td-legacy .tru-nav__brand span { font-weight: 700;
  color: var(--brand-dark);
  font-size: 18px;
  letter-spacing: .5px;
  white-space: nowrap; }
.td-legacy .tru-nav__links { display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1; }
.td-legacy .tru-nav__links a { text-decoration: none;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background .15s, color .15s; }
.td-legacy .tru-nav__links a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.td-legacy .tru-nav__links a.active { background: var(--brand); color: var(--on-brand); }
.td-legacy .tru-nav__spacer { flex: 1; }
.td-legacy .tru-stats { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px; }
.td-legacy .tru-stat:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.td-legacy .tru-stat--warn { border-left-color: var(--warn); }
.td-legacy .tru-stat--warn .tru-stat__value { color: var(--warn-ink); }
.td-legacy .tru-stat--good { border-left-color: var(--ok); }
.td-legacy .tru-stat--good .tru-stat__value { color: var(--ok-ink); }
.td-legacy .tru-toolbar { display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px; }
.td-legacy .tru-toolbar .form-control, .td-legacy .tru-toolbar .form-select { max-width: 240px; border-radius: 9px; }
.td-legacy .tru-nav__inner { flex-wrap: nowrap; }
.td-legacy .tru-nav__links { flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0; }
.td-legacy .tru-nav__links::-webkit-scrollbar { display: none; }
.td-legacy .tru-nav__links a { white-space: nowrap; }
.td-legacy .rc-list { display:flex; flex-direction:column; gap:10px; }
.td-legacy .rc-card--void .rc-no { text-decoration:line-through; }
.td-legacy .rc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.td-legacy .rc-main { min-width:0; flex:1; }
.td-legacy .rc-line1 { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.td-legacy .rc-no { font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; }
.td-legacy .rc-no:hover { color:var(--brand-dark); }
.td-legacy .rc-line2 { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
           margin-top:5px; font-size:12px; color:var(--muted); }
.td-legacy .rc-cust { font-weight:600; color:var(--ink); font-size:13px; }
.td-legacy .rc-by::before { content:"經手 "; }
.td-legacy .rc-purpose { margin-top:5px; font-size:12.5px; color:var(--muted); }
.td-legacy .rc-amt { font-size:19px; font-weight:800; color:var(--ink); white-space:nowrap;
         font-variant-numeric:tabular-nums; }
.td-legacy .rc-acts { display:flex; gap:6px; flex-wrap:wrap; align-items:center;
          margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.td-legacy .rc-badge { display:inline-flex; align-items:center; border-radius:999px;
           padding:1px 9px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.td-legacy .rc-badge--type { background:var(--brand-soft); color:var(--brand-dark); }
.td-legacy .rc-badge--soft { background:var(--card-2); color:var(--muted); }
.td-legacy .rc-badge--void { background:var(--bad-bg); color:var(--bad-ink); }

/* ⚠ rc-card 第一輪走甩咗 —— 佢喺 HTML 度寫成 `class="rc-card{% if %}…{% endif %}"`，
   而我當時條 regex 特登唔收大括號。掃 class 一定要先剷走 Jinja 再拆。 */
.td-legacy .rc-card { background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow); transition:box-shadow .15s; }
.td-legacy .rc-card:hover { box-shadow:var(--shadow-hover); }

/* ══════════════════════════════════════════════════════════════════════════
   深色橋接：Bootstrap 5.3 dark 盤 → --td token（2026-08-29）
   ⚠ 觸發器＝data-bs-theme（_td_head pre-paint 兩個 attribute 一齊落）。
     冇呢段嘅話，52 個 legacy 版嘅 Bootstrap 自己嗰套灰會滲出嚟
     （＝2026-07-31「睇小眼都死」事故原型，嗰次係 348 個 .text-muted）。
   ⚠ 檔頭 :root 嗰 11 條靠「compat 載喺 Bootstrap 後」贏緊 —— 呢度用
     attribute selector 明文釘，唔准靠載入次序。
   ⚠ rgb 三元組＝深色 token 實值（tokens.css 深色 block），改值要兩處齊。
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: var(--td-canvas);
  --bs-body-color: var(--td-text);
  --bs-body-color-rgb: 232, 236, 233;        /* ＝深色 --td-text */
  --bs-emphasis-color: var(--td-text);
  --bs-emphasis-color-rgb: 232, 236, 233;
  --bs-secondary-color: var(--td-muted);     /* .text-muted 命根 */
  --bs-secondary-color-rgb: 157, 176, 172;   /* ＝深色 --td-muted */
  --bs-secondary-bg: var(--td-surface-alt);
  --bs-tertiary-color: var(--td-muted);
  --bs-tertiary-bg: var(--td-surface-alt);
  --bs-border-color: var(--td-hairline);
  --bs-border-color-translucent: var(--td-hairline);
  --bs-link-color: var(--td-brand);
  --bs-link-color-rgb: 33, 150, 168;         /* ＝深色 --td-brand */
  --bs-link-hover-color: var(--td-brand-text);
  --bs-heading-color: inherit;
  --bs-code-color: var(--td-brand);
  --bs-highlight-bg: var(--td-warn-soft);
}
/* 舊別名深色修正：--brand-darker 喺 expenses／income／index／office_expenses／
   sifuduty／group_revenue 六個檔做 .btn-custom:hover 鋪底（白字）。
   淺色指 --td-brand-text（深 teal）冇事；深色 --td-brand-text 變光 teal
   ⇒ 白字 1.35:1 隱形。深色改指 hover 色（白字 3.0，hover 瞬態可接受）。
   ⚠ 淺色嗰行（上面別名層）唔准郁。 */
:root[data-bs-theme="dark"] .td-legacy { --brand-darker: var(--td-brand-hover); }
/* Bootstrap 寫死色 utility（.td-legacy 範圍就夠；btn-close 由 data-bs-theme 原生反白） */
:root[data-bs-theme="dark"] .td-legacy .text-dark,
:root[data-bs-theme="dark"] .td-legacy .text-black { color: var(--td-text) !important; }
:root[data-bs-theme="dark"] .td-legacy .text-secondary { color: var(--td-muted) !important; }
:root[data-bs-theme="dark"] .td-legacy .bg-light,
:root[data-bs-theme="dark"] .td-legacy .bg-white { background-color: var(--td-surface) !important; color: var(--td-text) !important; }