/* =============================================================================
   聯合採購平台 — HUIDUN 視覺規範（設計系統本體）
   -----------------------------------------------------------------------------
   Token 值依《聯合採購平台_HUIDUN架構與色彩規格.md》v2 修正版第三章
   （2026-08-24 拍板：介面互動元件主色由深藍改為黑白極簡，圓角 sm4/md6/lg10/xl16，
   所有數值皆已對照該文件核對，非憑空調整）。風格定位：Carbon 式扁平幾何＋
   極簡黑白灰——中性底、黑為互動主色、平面、細框線、小圓角、微陰影，不是
   電商常見的高飽和色塊／大圓角／漸層促銷風。

   ★三條規則★
   1. 元件規則裡不寫死色碼，一律引用 --hd-* 變數。白牌覆寫只需覆寫變數。
   2. 白牌唯一掛點是 --hd-primary（含 -hover/-active/-on）。
      ★深色面（頂列／側欄／masthead／hero）綁 --hd-inverse，與主色分家★——
      租戶把主色換成亮色（例如金色）時，深色 chrome 不會跟著變成不可讀的亮底。
   3. 深藍 --hd-navy／藍 --hd-blue 退為「原廠品牌資產／白牌租戶備用色」，
      保留變數但元件規則不引用。

   合併回正式站時這支檔案會被 huidun-ui/public/hd-ui.css 取代，
   頁面結構／class 命名不需要跟著改。
   ============================================================================= */

:root {
  /* ---- 主色（互動元件：按鈕／連結／導覽；★白牌唯一掛點★） ---- */
  --hd-primary:        #000000;
  --hd-primary-hover:  #232733;
  --hd-primary-active: #14161d;
  --hd-primary-on:     #ffffff;  /* 主色上的前景色 */

  /* ---- 深色面（頂列／側欄／masthead／hero；與主色分家，見檔頭規則 2） ---- */
  --hd-inverse:          #0a0a0a;  /* 對齊 ui-kit 的 surface-inverse */
  --hd-inverse-soft:     #232733;  /* 深色面上的 hover／填色 */
  --hd-inverse-line:     #33384a;  /* 深色面上的分隔線／框線 */
  --hd-inverse-fg:       #ffffff;
  --hd-inverse-fg-muted: #d9dce3;
  --hd-inverse-fg-dim:   #b9bfcb;

  /* ---- 品牌備用色（原廠資產，元件規則不預設引用） ---- */
  --hd-navy:  #091D52;
  --hd-blue:  #184edd;

  /* ---- 中性色 ---- */
  --hd-ink:         #14161d;  /* 主要文字 */
  --hd-sub:         #656d82;  /* 次要文字 / label */
  --hd-tertiary:    #8b93a7;  /* 三級文字 */
  --hd-line:        #d9dce3;  /* 邊框 / 分隔線 */
  --hd-line-strong: #b9bfcb;  /* 強邊框 */
  --hd-bg-cool:     #ffffff;  /* 頁面底色 */
  --hd-layer:       #f7f8fa;  /* 卡片 / 側欄面板（次層底色） */
  --hd-hover:       #eceef2;  /* 凹陷區塊底色：表格 hover 等 */
  --hd-field:       #f7f8fa;  /* 輸入底 */

  /* ---- 語意色 ---- */
  --hd-ok:   #237436;  --hd-ok-bg:   #f0f9f2;  --hd-ok-line:   #a8ddb5;
  --hd-warn: #8f620a;  --hd-warn-bg: #fdf6e9;  --hd-warn-line: #f5cd7a;
  --hd-err:  #ab2424;  --hd-err-bg:  #fdf2f2;  --hd-err-line:  #f5b6b6;
  --hd-tag-bg: #eceef2; --hd-tag-fg: #232733;  /* 標籤／資訊色，2026-08-24 起不再借用藍色 */

  /* ---- 陰影與遮罩（唯一允許出現 rgba 的地方，其餘元件一律引用這三個變數） ---- */
  --hd-scrim:     rgba(20, 22, 29, .45);
  --hd-shadow-sm: 0 1px 2px rgba(20, 22, 29, .06);
  --hd-shadow-md: 0 6px 16px rgba(20, 22, 29, .12);
  --hd-shadow-lg: 0 8px 24px rgba(20, 22, 29, .14);

  /* ---- 版面 ---- */
  --hd-maxw: 1040px;
  --hd-gutter: 24px;

  --hd-font: 'IBM Plex Sans', -apple-system, system-ui, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --hd-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --hd-r-sm: 4px;
  --hd-r: 6px;
  --hd-r-lg: 10px;
  --hd-r-xl: 16px;
  --hd-r-pill: 9999px;
}

/* =============================================================================
   1. 基底
   ============================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--hd-font);
  background: var(--hd-bg-cool);
  color: var(--hd-ink);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .01em;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--hd-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ★[hidden] 必須真的是隱藏★：本檔多處把元件設成 flex/grid/inline-flex，
   display 的特異度會贏過 hidden 屬性，於是「設了 hidden 卻還看得見」。
   環境徽章、詳情卡都靠 hidden／display 切換，這條是它們的前提。 */
[hidden] { display: none !important; }

/* 鍵盤焦點：淺色面用主色，深色面用反白（黑色外框在黑底上等於沒有） */
:focus-visible { outline: 2px solid var(--hd-primary); outline-offset: 2px; }
.hd-topbar :focus-visible,
.hd-sidebar :focus-visible,
.hd-masthead :focus-visible,
.hd-hero-stat :focus-visible { outline-color: var(--hd-inverse-fg); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 跳至主要內容：平常隱形，Tab 到才出現（不可用 display:none，那樣鍵盤也到不了） */
.hd-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--hd-inverse); color: var(--hd-inverse-fg);
  padding: 10px 16px; border-radius: var(--hd-r); font-size: 13px; font-weight: 600;
}
.hd-skip-link:focus {
  position: fixed; left: 12px; top: 12px; z-index: 100; text-decoration: none;
  box-shadow: var(--hd-shadow-lg);
}

/* =============================================================================
   2. 版面容器
   ============================================================================= */

.hd-shell { max-width: var(--hd-maxw); margin: 0 auto; padding: 32px var(--hd-gutter) 64px; }
.hd-shell:focus { outline: none; }   /* skip-link 落點，不需要畫框 */

/* 分隔線（首頁分區用；不是 .hd-subsection 的那種卡內分隔） */
.hd-divider { border: 0; border-top: 1px solid var(--hd-line); margin: 32px 0; }

/* 錨點捲動落點不要貼齊視窗頂端 */
.hd-card, .hd-subsection, summary, [id] { scroll-margin-top: 24px; }

/* =============================================================================
   3. 品牌
   ============================================================================= */

.hd-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
.hd-brand:hover { text-decoration: none; }
.hd-brand__logo { display: block; height: 24px; width: auto; flex-shrink: 0; }
.hd-brand__name { font-weight: 600; letter-spacing: .01em; font-size: 14.5px; white-space: nowrap; }
/* masthead 用的大尺寸標誌：HTML 若已寫 style="height:40px;" 可直接刪掉那段 inline style */
.hd-brand--lg { height: 40px; }
.hd-masthead .hd-brand__logo { height: 40px; }

/* 環境徽章：只有 hd-shell.js 判定非正式網域時才會填字並拿掉 hidden。
   HTML 內不寫死任何環境字樣（全站字樣檢查靠這一點維持 0 行）。 */
.hd-env-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 10px; border-radius: var(--hd-r-pill);
  background: var(--hd-warn-bg); color: var(--hd-warn); border: 1px solid var(--hd-warn-line);
  white-space: nowrap;
}
.hd-env-badge--inverse {
  background: transparent; color: var(--hd-inverse-fg-dim); border-color: var(--hd-inverse-line);
}

/* =============================================================================
   4. 頂列（首頁／apply／supplier／property 用；HQ 用第 5 節的側欄）
   ============================================================================= */

.hd-topbar {
  background: var(--hd-inverse); color: var(--hd-inverse-fg);
  padding: 12px var(--hd-gutter);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.hd-topbar__brand { font-weight: 600; letter-spacing: .01em; }   /* 舊結構相容 */
.hd-topbar__env {                                                 /* 舊結構相容 */
  font-size: 12px; color: var(--hd-inverse-fg-muted);
  border: 1px solid var(--hd-inverse-line);
  border-radius: var(--hd-r-pill); padding: 2px 10px;
}
.hd-topbar__nav,
.hd-topbar > nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hd-topbar nav a {
  color: var(--hd-inverse-fg-muted); font-size: 13px;
  padding: 6px 10px; border-radius: var(--hd-r); border-bottom: 2px solid transparent;
}
.hd-topbar nav a:hover { color: var(--hd-inverse-fg); background: var(--hd-inverse-soft); text-decoration: none; }
.hd-topbar nav a.is-active { color: var(--hd-inverse-fg); font-weight: 600; border-bottom-color: var(--hd-inverse-fg); border-radius: var(--hd-r) var(--hd-r) 0 0; }

/* 首頁招牌區：頂列下方的深色橫幅，撐出「這是一套系統」的門面 */
.hd-masthead { background: var(--hd-inverse); color: var(--hd-inverse-fg); padding: 40px var(--hd-gutter) 44px; }
.hd-masthead__inner { max-width: var(--hd-maxw); margin: 0 auto; }
.hd-masthead__title { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 16px 0 0; }
.hd-masthead__lede { font-size: 14.5px; line-height: 1.85; color: var(--hd-inverse-fg-muted); margin: 10px 0 0; max-width: 62ch; }
@media (max-width: 560px) {
  .hd-masthead { padding: 28px 20px 32px; }
  .hd-masthead__title { font-size: 24px; }
}

/* =============================================================================
   5. HQ 側欄式主控台外殼
   （參考 HUIDUN Foundation 後台排版；只用在 /hq/ 底下，其餘頁面維持橫向頂列。
     .hd-shell 用 .hd-app-shell 後代選擇器覆寫，不改共用規則。）
   ============================================================================= */

.hd-app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.hd-app-shell > .hd-shell { flex: 1; min-width: 0; max-width: var(--hd-maxw); margin: 0; padding: 32px 32px 64px; }

.hd-sidebar {
  width: 216px; flex-shrink: 0; background: var(--hd-inverse); color: var(--hd-inverse-fg);
  display: flex; flex-direction: column; padding: 20px 0 24px; overflow-y: auto;
}
.hd-sidebar__brand { font-weight: 600; letter-spacing: .01em; padding: 0 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-sidebar__brand:hover { text-decoration: none; }
.hd-sidebar__brand-name { font-size: 13.5px; font-weight: 600; color: var(--hd-inverse-fg); }
.hd-sidebar__brand-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--hd-inverse-fg-dim); border: 1px solid var(--hd-inverse-line);
  border-radius: var(--hd-r-sm); padding: 1px 5px; line-height: 1.6;
}
.hd-sidebar__scope { padding-top: 10px; }
.hd-sidebar__env { font-size: 11px; color: var(--hd-inverse-fg-dim); margin: 0; padding: 6px 20px 12px; }
.hd-sidebar .hd-env-badge { margin: 10px 20px 4px; }
.hd-sidebar__nav { display: flex; flex-direction: column; }
.hd-sidebar__section {
  font-size: 11px; font-weight: 600; color: var(--hd-inverse-fg-dim);
  margin: 0; padding: 14px 20px 4px; letter-spacing: .05em; text-transform: uppercase;
}
.hd-sidebar a {
  display: block; color: var(--hd-inverse-fg-muted); font-size: 13.5px;
  padding: 7px 20px; border-left: 3px solid transparent;
}
.hd-sidebar a:hover { color: var(--hd-inverse-fg); background: var(--hd-inverse-soft); text-decoration: none; }
.hd-sidebar a.is-active { color: var(--hd-inverse-fg); font-weight: 600; background: var(--hd-inverse-soft); border-left-color: var(--hd-inverse-fg); }
.hd-sidebar__foot { margin-top: auto; padding: 16px 20px 0; font-size: 11px; color: var(--hd-inverse-fg-dim); }

/* 窄螢幕（平板以下）：側欄改成頂部水平捲動列。HQ 主要是桌機使用，
   這裡只求「不會擠壞版面」，不求跟桌機一樣的分組視覺。 */
@media (max-width: 768px) {
  .hd-app-shell { flex-direction: column; min-height: 0; }
  .hd-sidebar {
    width: 100%; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: visible;
    padding: 10px 8px; white-space: nowrap;
  }
  .hd-sidebar__brand { padding: 0 12px 0 4px; flex-shrink: 0; }
  .hd-sidebar__nav { flex-direction: row; }
  .hd-sidebar__env, .hd-sidebar__section, .hd-sidebar__foot, .hd-sidebar .hd-env-badge { display: none; }
  .hd-sidebar a { border-left: none; border-bottom: 3px solid transparent; padding: 6px 12px; flex-shrink: 0; }
  .hd-sidebar a.is-active { border-left-color: transparent; border-bottom-color: var(--hd-inverse-fg); background: none; }
  .hd-app-shell > .hd-shell { max-width: none; padding: 24px 20px 48px; }
}

/* =============================================================================
   6. 頁首（S5）
   ============================================================================= */

.hd-h1 { font-size: 22px; font-weight: 600; color: var(--hd-ink); margin: 0 0 6px; letter-spacing: -.005em; }
.hd-sub-text { color: var(--hd-sub); margin: 0 0 24px; font-size: 13px; }

.hd-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--hd-line);
}
.hd-page-header > :first-child,
.hd-page-header__main { flex: 1 1 380px; min-width: 0; }
.hd-page-header .hd-h1 { margin-bottom: 4px; }
.hd-page-header .hd-sub-text { margin-bottom: 0; max-width: 76ch; }
.hd-page-header__actions {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 2px;
}

/* 次要後設資訊（彙總時間、筆數、版本），刻意比 hd-sub-text 更輕 */
.hd-meta { font-size: 12px; color: var(--hd-tertiary); font-variant-numeric: tabular-nums; }

/* =============================================================================
   7. 卡片
   ============================================================================= */

.hd-card {
  background: var(--hd-layer); border: 1px solid var(--hd-line); border-radius: var(--hd-r-lg);
  padding: 20px; margin-bottom: 20px;
}
.hd-card__title { font-size: 15px; font-weight: 600; color: var(--hd-ink); margin: 0 0 4px; }
.hd-card__desc { font-size: 12.5px; color: var(--hd-sub); margin: 0 0 16px; line-height: 1.7; }
.hd-card--warning { background: var(--hd-warn-bg); border-color: var(--hd-warn); }
/* 白底卡：資訊型／敘述型內容用，跟灰底的資料卡分層 */
.hd-card--plain { background: var(--hd-bg-cool); }

/* 卡頭：標題組（左）＋ 動作或徽章（右）。取代原本靠全形空白對齊的寫法。 */
.hd-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.hd-card__head > :first-child { flex: 1 1 260px; min-width: 0; }
.hd-card__head .hd-card__title,
.hd-card__head .hd-card__desc,
.hd-card__head .hd-subsection__title { margin-bottom: 0; }
.hd-card__head .hd-card__desc { margin-top: 3px; }

/* 詳情卡：跟列表卡視覺分層——左緣主色條，白底，代表「這是你剛點開的那一筆」。
   ★不要給它 display 值★：多支 JS 用 style.display 切換顯示。 */
.hd-card--detail {
  background: var(--hd-bg-cool);
  border-left: 3px solid var(--hd-primary);
}

/* 貼邊卡：表格／清單直接貼卡片邊緣，不再被 20px padding 夾成窄窄一條。
   卡內的文字類子元素自己補回左右內距。 */
.hd-card--flush { padding: 0; overflow: hidden; }
.hd-card--flush > .hd-card__head,
.hd-card--flush > .hd-card__title,
.hd-card--flush > .hd-card__desc,
.hd-card--flush > .hd-toolbar,
.hd-card--flush > .hd-section-label,
.hd-card--flush > .hd-hint,
.hd-card--flush > p,
.hd-card--flush > .hd-tabs { padding-left: 20px; padding-right: 20px; }
.hd-card--flush > .hd-empty { margin: 4px 20px 20px; }
.hd-card--flush > :first-child { margin-top: 0; padding-top: 16px; }
.hd-card--flush > .hd-card__head { margin-bottom: 12px; }
.hd-card--flush > .hd-card__desc:last-of-type { margin-bottom: 12px; }
.hd-card--flush > .hd-table-wrap { border-left: 0; border-right: 0; border-radius: 0; padding-top: 0; }
.hd-card--flush > .hd-table-wrap:last-child { border-bottom: 0; }
.hd-card--flush > .hd-hint:last-child { padding-bottom: 14px; margin-top: 10px; }
.hd-card--flush > .hd-tabs { padding-top: 0; margin-bottom: 0; }
/* 分頁籤留在卡內時，別跟表格框線疊成兩條線 */
.hd-card--flush > .hd-tabs + .hd-table-wrap { border-top: 0; }

/* details/summary 型卡片：低頻但佔首屏的表單（例如「開新募集輪」）收折起來 */
details.hd-card > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
}
details.hd-card > summary::-webkit-details-marker { display: none; }
details.hd-card > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--hd-sub); border-bottom: 2px solid var(--hd-sub);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
details.hd-card[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.hd-card[open] > summary {
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hd-line);
}

/* =============================================================================
   8. 表單
   ============================================================================= */

.hd-field { margin-bottom: 14px; }
.hd-field label { display: block; font-size: 12.5px; color: var(--hd-sub); margin-bottom: 4px; }
.hd-field .req { color: var(--hd-err); }
.hd-field input, .hd-field select, .hd-field textarea {
  width: 100%; font-family: var(--hd-font); font-size: 14px; color: var(--hd-ink);
  background: var(--hd-field); border: 1px solid var(--hd-line); border-radius: var(--hd-r);
  padding: 8px 10px;
}
.hd-field textarea { line-height: 1.6; resize: vertical; }
.hd-field input:focus, .hd-field select:focus, .hd-field textarea:focus {
  outline: 2px solid var(--hd-primary); outline-offset: 0;
  border-color: var(--hd-primary); background: var(--hd-bg-cool);
}
.hd-field input::placeholder, .hd-field textarea::placeholder { color: var(--hd-tertiary); }
/* 欄位說明：語意解釋寫這裡，不要塞進 placeholder（一開始打字就看不到了） */
.hd-field__hint { font-size: 11.5px; color: var(--hd-tertiary); margin: 4px 0 0; line-height: 1.6; }

.hd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .hd-grid-2 { grid-template-columns: 1fr; } }

/* 表單分區小標題 */
.hd-field-group__label {
  font-size: 11px; font-weight: 600; color: var(--hd-sub); letter-spacing: .05em;
  text-transform: uppercase;
  margin: 22px 0 10px; border-bottom: 1px solid var(--hd-line); padding-bottom: 5px;
}
.hd-field-group__label:first-child { margin-top: 0; }
.hd-grid-2 > .hd-field-group__label { grid-column: 1 / -1; }

/* 送出列：按鈕不要裸接在最後一個欄位下面 */
.hd-form-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hd-line);
}
.hd-form-actions--bare { border-top: none; padding-top: 0; }
.hd-grid-2 > .hd-form-actions { grid-column: 1 / -1; }

/* 低信心欄位標示（取代 inline background hack） */
.hd-field--flag input, .hd-field--flag select { background: var(--hd-warn-bg); border-color: var(--hd-warn); }

/* 身分列：supplier／property 頁頂端的「我是誰」下拉。
   取代原本 inline flex ＋ style="margin-bottom:0" 的拼法。 */
.hd-identity-bar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: var(--hd-layer); border: 1px solid var(--hd-line); border-radius: var(--hd-r-lg);
  padding: 12px 16px; margin-bottom: 24px;
}
.hd-identity-bar .hd-field { margin-bottom: 0; flex: 0 1 280px; min-width: 0; }
.hd-identity-bar .hd-field label { margin-bottom: 0; }
.hd-identity-bar .hd-section-label,
.hd-identity-bar .hd-hint,
.hd-identity-bar .hd-meta { margin: 0; }
.hd-identity-bar .hd-hint { flex: 1 1 220px; }
.hd-identity-bar__spacer { flex: 1 1 auto; }
/* 扁平寫法（label / select / hint 三個平輩，沒有包 .hd-field）也要能用 */
.hd-identity-bar__label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hd-sub); flex-shrink: 0;
}
.hd-identity-bar__select {
  flex: 0 1 280px; min-width: 0;
  font-family: var(--hd-font); font-size: 14px; color: var(--hd-ink);
  background: var(--hd-bg-cool); border: 1px solid var(--hd-line-strong); border-radius: var(--hd-r);
  padding: 7px 10px;
}
.hd-identity-bar__select:focus { outline: 2px solid var(--hd-primary); border-color: var(--hd-primary); }
.hd-identity-bar__hint { font-size: 12px; color: var(--hd-tertiary); flex: 1 1 220px; line-height: 1.6; }

/* =============================================================================
   9. 按鈕
   ============================================================================= */

.hd-btn {
  font-family: var(--hd-font); font-size: 13.5px; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--hd-r); padding: 8px 16px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
a.hd-btn:hover { text-decoration: none; }
.hd-btn--primary { background: var(--hd-primary); color: var(--hd-primary-on); }
.hd-btn--primary:hover { background: var(--hd-primary-hover); color: var(--hd-primary-on); }
.hd-btn--primary:active { background: var(--hd-primary-active); }
.hd-btn--secondary { background: var(--hd-bg-cool); color: var(--hd-ink); border-color: var(--hd-line-strong); }
.hd-btn--secondary:hover { background: var(--hd-hover); color: var(--hd-ink); }
.hd-btn--ghost { background: transparent; color: var(--hd-sub); }
.hd-btn--ghost:hover { background: var(--hd-hover); color: var(--hd-ink); }
.hd-btn--danger { background: var(--hd-bg-cool); color: var(--hd-err); border-color: var(--hd-err); }
.hd-btn--danger:hover { background: var(--hd-err-bg); color: var(--hd-err); }
.hd-btn--sm { padding: 4px 10px; font-size: 12px; }
.hd-btn:disabled, .hd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.hd-detail-actions {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hd-line);
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* =============================================================================
   10. 分頁籤
   ============================================================================= */

.hd-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--hd-line);
  margin-bottom: 16px; overflow-x: auto; scrollbar-width: none;
}
.hd-tabs::-webkit-scrollbar { display: none; }
.hd-tab {
  font-size: 13px; color: var(--hd-sub); padding: 8px 14px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--hd-font); border-radius: var(--hd-r-sm) var(--hd-r-sm) 0 0;
}
.hd-tab:hover { color: var(--hd-ink); background: var(--hd-hover); }
.hd-tab.is-active { color: var(--hd-ink); border-bottom-color: var(--hd-primary); font-weight: 600; }
/* 分頁籤放在卡片外、緊接著卡片時，不要留兩段間距 */
.hd-tabs + .hd-card { margin-top: 0; }

/* 表格上方的工具列（區塊名稱、篩選、動作） */
.hd-toolbar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 14px 0 10px;
}
.hd-toolbar__spacer { flex: 1 1 auto; }
.hd-toolbar .hd-section-label,
.hd-toolbar .hd-card__title { margin: 0; }

/* =============================================================================
   11. 表格
   ============================================================================= */

/* S6 包框：橫向捲動由這一層負責，表格本身不必為了塞得下而縮字級。
   ★≤640px 的卡片化（.hd-table--cards）要等各頁 JS 的列模板補上 td[data-label]
   才會生效，本輪全站靠這個容器橫向捲動★ */
.hd-table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  background: var(--hd-bg-cool);
  border: 1px solid var(--hd-line); border-radius: var(--hd-r);
}
.hd-table-wrap > .hd-table { min-width: 560px; }
.hd-table-wrap > .hd-table tbody tr:last-child td { border-bottom: none; }

.hd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hd-table th {
  text-align: left; font-weight: 600; color: var(--hd-sub); font-size: 12px;
  padding: 9px 10px; background: var(--hd-layer);
  border-bottom: 1px solid var(--hd-line); text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}
.hd-table td { padding: 10px; border-bottom: 1px solid var(--hd-line); vertical-align: top; }
.hd-table-wrap > .hd-table th:first-child,
.hd-table-wrap > .hd-table td:first-child { padding-left: 16px; }
.hd-table-wrap > .hd-table th:last-child,
.hd-table-wrap > .hd-table td:last-child { padding-right: 16px; }
/* 只有真的有 click handler 的表格才給「可點擊」視覺提示，避免整站表格看起來都能點、實際上大半沒反應 */
.hd-table--clickable tbody tr { cursor: pointer; }
.hd-table--clickable tbody tr:hover { background: var(--hd-hover); }
.hd-table tbody tr.is-selected { background: var(--hd-tag-bg); }
.hd-table tbody tr.is-awarded  { background: var(--hd-ok-bg); }

/* 數字欄：右對齊＋等寬數字，讓位數對得齊（金額、數量、費率） */
.hd-num, .hd-table th.hd-num, .hd-table td.hd-num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.hd-nowrap { white-space: nowrap; }

/* ≤640px 卡片化：★需要各列 td 帶 data-label，未改 JS 前不要加這個修飾類別★ */
@media (max-width: 640px) {
  .hd-table-wrap > .hd-table--cards { min-width: 0; }
  .hd-table--cards thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .hd-table--cards tbody tr {
    display: block; border: 1px solid var(--hd-line); border-radius: var(--hd-r);
    margin: 10px; padding: 4px 0; background: var(--hd-bg-cool);
  }
  .hd-table--cards td {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 12px; border-bottom: none; text-align: left;
  }
  .hd-table--cards td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-size: 12px; font-weight: 600; color: var(--hd-sub);
  }
}

/* =============================================================================
   12. 徽章與狀態
   ============================================================================= */

.hd-badge {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  padding: 2px 9px; border-radius: var(--hd-r-pill); white-space: nowrap;
}
/* ★保底★：各頁 JS 的狀態對照表查不到值時會輸出 hd-badge--<原始狀態字串>
   （例如 catalog 的 delisted、orders 的未知 order_status）。沒有對應規則時
   徽章會變成裸文字，看起來像漏了樣式。這條放在語意色之前、特異度相同，
   由後面的語意規則覆蓋。 */
[class*="hd-badge--"] { background: var(--hd-hover); color: var(--hd-sub); }
.hd-badge--pending   { background: var(--hd-warn-bg); color: var(--hd-warn); }
.hd-badge--active    { background: var(--hd-ok-bg);   color: var(--hd-ok); }
.hd-badge--rejected  { background: var(--hd-err-bg);  color: var(--hd-err); }
.hd-badge--suspended { background: var(--hd-err-bg);  color: var(--hd-err); }
.hd-badge--tag       { background: var(--hd-tag-bg);  color: var(--hd-tag-fg); }
.hd-badge--neutral   { background: var(--hd-hover);   color: var(--hd-sub); }

/* 空狀態：要看起來像「設計過的狀態」而不是漏刻的空白 */
.hd-empty {
  color: var(--hd-sub); font-size: 13px; text-align: center; padding: 32px 20px;
  border: 1px dashed var(--hd-line); border-radius: var(--hd-r-lg); background: var(--hd-layer);
}
.hd-empty__hint { display: block; margin-top: 4px; font-size: 12px; }
/* ★多支 JS 把 .hd-empty 直接掛在 <td colspan="N"> 上★——虛線框畫在表格儲存格裡
   看起來像壞掉的排版。表格內的空狀態改成純文字置中。 */
.hd-table td.hd-empty {
  border: none; border-bottom: 1px solid var(--hd-line); border-radius: 0;
  background: transparent; padding: 28px 16px;
}
.hd-table tbody tr:last-child td.hd-empty { border-bottom: none; }

/* 常駐提示（不是空狀態，不要用 .hd-empty 的虛線框冒充） */
.hd-hint { font-size: 12px; color: var(--hd-tertiary); margin: 10px 0 0; line-height: 1.7; }

/* =============================================================================
   13. 詳情、清單、敘述
   ============================================================================= */

.hd-detail dl { margin: 0; }
.hd-detail dt { font-size: 11.5px; color: var(--hd-sub); margin-top: 10px; }
.hd-detail dd { margin: 2px 0 0; font-size: 13.5px; color: var(--hd-ink); }
.hd-detail__mono { font-family: var(--hd-mono); font-size: 12px; color: var(--hd-sub); }

/* 稽核軌跡清單（只給「誰在何時做了什麼」用，不要拿來排一般名單） */
.hd-audit { font-size: 13px; color: var(--hd-ink); list-style: none; margin: 0; padding: 0; }
.hd-audit li { padding: 8px 0; border-bottom: 1px solid var(--hd-line); }
.hd-audit li:last-child { border-bottom: none; }

/* 一般清單（參與物業、準備事項…）：跟 .hd-audit 分家，class 與用途不再脫鉤 */
.hd-list { font-size: 13px; color: var(--hd-ink); margin: 0; padding-left: 18px; }
.hd-list li { padding: 3px 0; line-height: 1.7; }
.hd-list--bare { list-style: none; padding-left: 0; }

/* 敘述段落（首頁「平台的角色與權責」這類說明文字） */
.hd-prose { font-size: 13.5px; color: var(--hd-sub); line-height: 1.9; max-width: 74ch; }
.hd-prose p { margin: 0 0 10px; }
.hd-prose p:last-child { margin-bottom: 0; }
.hd-prose strong { color: var(--hd-ink); font-weight: 600; }
.hd-prose a { text-decoration: underline; }

/* 標籤列（收案類別這種並排小標籤） */
.hd-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }

/* 編號步驟 */
.hd-steps { counter-reset: s; padding: 0; margin: 0; list-style: none; }
.hd-steps li {
  counter-increment: s; position: relative; padding: 8px 0 8px 34px;
  font-size: 13.5px; line-height: 1.7; color: var(--hd-ink); border-bottom: 1px solid var(--hd-line);
}
.hd-steps li:last-child { border-bottom: none; }
.hd-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--hd-primary); color: var(--hd-primary-on); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.hd-steps--plain li { border-bottom: none; padding-top: 5px; padding-bottom: 5px; }

/* =============================================================================
   14. 區塊標題與卡內小節
   ============================================================================= */

.hd-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hd-sub); margin: 28px 0 8px;
}
.hd-section-label:first-child { margin-top: 0; }

.hd-subsection { border-top: 1px solid var(--hd-line); padding-top: 16px; margin-top: 16px; }
.hd-subsection:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.hd-subsection__title { font-size: 14px; font-weight: 600; color: var(--hd-ink); margin: 0 0 4px; }
.hd-subsection--warning { background: var(--hd-warn-bg); border-radius: var(--hd-r); padding: 12px; border-top: none; }
/* 強調小節（取代 inline 的 background/padding 三件組） */
.hd-subsection--accent {
  background: var(--hd-tag-bg); border-radius: var(--hd-r-lg); padding: 12px 14px;
  border-top: none; margin-top: 12px;
}

/* 品項／子表單區塊（驗收品項、新增撥款…），讓寫入型表單不再只是一條分隔線 */
.hd-item-block { background: var(--hd-field); border: 1px solid var(--hd-line); border-radius: var(--hd-r); padding: 14px 16px; margin-bottom: 12px; }

/* =============================================================================
   15. 統計
   ============================================================================= */

/* 預設 auto-fit：3 格＝3 欄；沒有修飾類別而實際塞 4 格（savings.js 逐輪卡）
   也會排成一列，不會出現 3+1 的孤兒格。格數固定的頁面請用下面的修飾類別，
   語意比較清楚也比較好預測。 */
.hd-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.hd-stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hd-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hd-stat-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .hd-stat-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hd-stat-grid, .hd-stat-grid--3, .hd-stat-grid--4, .hd-stat-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hd-stat {
  min-width: 0; background: var(--hd-field); border: 1px solid var(--hd-line);
  border-radius: var(--hd-r); padding: 12px 14px;
}
.hd-stat__value { font-size: 22px; font-weight: 600; color: var(--hd-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.hd-stat__label { font-size: 12px; color: var(--hd-sub); margin-top: 2px; line-height: 1.5; }
/* 語意化統計格：待處理／已完成／已駁回 三種常見語意 */
.hd-stat--warn { background: var(--hd-warn-bg); border-color: var(--hd-warn-line); }
.hd-stat--warn .hd-stat__value { color: var(--hd-warn); }
.hd-stat--ok   { background: var(--hd-ok-bg);   border-color: var(--hd-ok-line); }
.hd-stat--ok   .hd-stat__value { color: var(--hd-ok); }
.hd-stat--err  { background: var(--hd-err-bg);  border-color: var(--hd-err-line); }
.hd-stat--err  .hd-stat__value { color: var(--hd-err); }

/* 主數字強調卡：整個聯盟比價模式能不能證明有價值的核心數字，
   刻意跟其他純資訊性數字有視覺落差。綁深色面而非主色（見檔頭規則 2）。 */
.hd-hero-stat {
  background: var(--hd-inverse); color: var(--hd-inverse-fg); border-radius: var(--hd-r-lg);
  padding: 20px 24px; margin-bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
}
.hd-hero-stat__value { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hd-hero-stat__label { font-size: 13px; color: var(--hd-inverse-fg-muted); margin-top: 4px; }
.hd-hero-stat__side { font-size: 12.5px; color: var(--hd-inverse-fg-muted); text-align: right; }
.hd-hero-stat__side strong {
  font-size: 20px; font-weight: 800; color: var(--hd-inverse-fg); font-variant-numeric: tabular-nums;
}
.hd-hero-stat__side a { color: var(--hd-inverse-fg); text-decoration: underline; }

/* 待辦清單：有數量的用左側色條凸顯，其餘收成一行提示 */
.hd-todo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-left: 3px solid var(--hd-warn); background: var(--hd-warn-bg); border-radius: var(--hd-r);
  padding: 12px 14px; margin-bottom: 8px;
}
.hd-todo-item__title { font-weight: 600; font-size: 13.5px; }
.hd-todo-item__desc { font-size: 12px; color: var(--hd-sub); margin-top: 2px; }
.hd-todo-item__count { font-size: 20px; font-weight: 700; color: var(--hd-warn); font-variant-numeric: tabular-nums; }
.hd-todo-empty { font-size: 12.5px; color: var(--hd-sub); padding: 6px 2px 0; }

/* =============================================================================
   16. 入口與並排版面
   ============================================================================= */

/* 首頁身分分流入口：三個等重的落點。認證上線時只換 href 成 /login?next=…，版面不動。 */
.hd-entry-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 4px;
}
@media (max-width: 860px) { .hd-entry-grid { grid-template-columns: 1fr; } }
.hd-entry {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--hd-bg-cool); border: 1px solid var(--hd-line); border-radius: var(--hd-r-lg);
  padding: 20px; color: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.hd-entry:hover {
  text-decoration: none; border-color: var(--hd-line-strong);
  background: var(--hd-layer); box-shadow: var(--hd-shadow-sm);
}
.hd-entry__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--hd-sub); }
.hd-entry__title { font-size: 16px; font-weight: 600; color: var(--hd-ink); }
.hd-entry__who { font-size: 12.5px; color: var(--hd-sub); line-height: 1.75; flex: 1 1 auto; }
.hd-entry__cta { font-size: 13px; font-weight: 600; color: var(--hd-primary); margin-top: 8px; }
.hd-entry:hover .hd-entry__cta { text-decoration: underline; }

/* 主內容＋側欄（首頁申請區：左邊被說服、右邊備齊清單） */
.hd-grid-side { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .hd-grid-side { grid-template-columns: 1fr; } }

/* 卡片並排（不是表單欄位並排，所以 gap 用 20px 不是 hd-grid-2 的 0 16px） */
.hd-grid-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 860px) { .hd-grid-cards { grid-template-columns: 1fr; } }
.hd-grid-cards > .hd-card,
.hd-grid-side > * > .hd-card:last-child,
.hd-grid-side > .hd-card { margin-bottom: 0; }

/* 舊版「快速入口」兩欄清單（HQ 首頁已移除，其他頁若仍引用則保留可用） */
.hd-quicklink-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .hd-quicklink-grid { grid-template-columns: 1fr; } }
.hd-quicklink { display: block; padding: 11px 2px; border-bottom: 1px solid var(--hd-line); }
.hd-quicklink:hover { text-decoration: none; background: var(--hd-hover); }
.hd-quicklink__title { font-weight: 600; font-size: 13.5px; color: var(--hd-ink); }
.hd-quicklink__desc { font-size: 12px; color: var(--hd-sub); margin-top: 2px; }

/* =============================================================================
   17. 覆蓋層、提示、AI
   ============================================================================= */

.hd-overlay {
  position: fixed; inset: 0; background: var(--hd-scrim);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.hd-modal {
  background: var(--hd-bg-cool); border-radius: var(--hd-r-lg); padding: 24px; width: 420px; max-width: 100%;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--hd-shadow-lg);
}
.hd-modal h3 { margin: 0 0 8px; font-size: 16px; color: var(--hd-ink); }
.hd-modal p { font-size: 13px; color: var(--hd-sub); margin: 0 0 16px; line-height: 1.7; }
.hd-modal__actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px;
  position: sticky; bottom: 0; background: var(--hd-bg-cool); padding-top: 8px;
}

.hd-toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--hd-inverse); color: var(--hd-inverse-fg);
  padding: 12px 18px; border-radius: var(--hd-r); font-size: 13px; box-shadow: var(--hd-shadow-md);
  z-index: 60; max-width: calc(100vw - 48px);
}
.hd-toast--err { background: var(--hd-err); }
.hd-toast--ok { background: var(--hd-ok); }

/* 內嵌提示列：AI 標記／狀態提醒用這個，不要再拿 .hd-card 疊 .hd-card */
.hd-flag { border-left: 3px solid var(--hd-warn); background: var(--hd-layer); border-radius: var(--hd-r); padding: 10px 14px; margin-bottom: 8px; font-size: 13px; }
.hd-flag--ai { border-left-color: var(--hd-tag-fg); }

/* AI 輔助功能專用視覺語彙，讓「這是智慧功能」跟一般表單有識別度 */
.hd-ai-box { background: var(--hd-tag-bg); border: 1px dashed var(--hd-line-strong); border-radius: var(--hd-r); padding: 12px; margin-bottom: 14px; }
.hd-ai-box input[type="file"] { display: none; }
.hd-ai-status--ok { color: var(--hd-ok); }
.hd-ai-status--err { color: var(--hd-err); }
.hd-ai-status--pending { color: var(--hd-sub); }

/* 成功狀態橫幅（例如供應商申請送出後） */
.hd-banner--ok { background: var(--hd-ok-bg); color: var(--hd-ok); border: 1px solid var(--hd-ok-line); border-radius: var(--hd-r); padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }

/* =============================================================================
   18. 頁尾
   ============================================================================= */

.hd-footer {
  padding: 24px var(--hd-gutter); color: var(--hd-sub); font-size: 12px; text-align: center;
  border-top: 1px solid var(--hd-line); margin-top: 12px; background: var(--hd-layer);
}
.hd-footer__inner {
  max-width: var(--hd-maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.hd-footer__legal { flex-basis: 100%; color: var(--hd-tertiary); font-size: 11.5px; line-height: 1.8; }
.hd-footer__legal a { color: var(--hd-sub); text-decoration: underline; }

/* =============================================================================
   19. 工具類（只做間距與可及性，★不做顏色★——顏色一律走語意 class）
   ============================================================================= */

.hd-mt-0 { margin-top: 0 !important; }
.hd-mb-0 { margin-bottom: 0 !important; }

/* 只給螢幕報讀器：補空白表頭的欄名，畫面上不佔位 */
.hd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}