/*
  MLAELD 全站樣式 — 設計 token 集中於本檔（開發規範 §8）。

  【修改原因】開發規範 §8 要求色票／字級／圓角一律以 CSS 變數定義於【單一檔案】，不散落硬編碼；
              需求說明書 §貳-一(四) 要求友善列印與放大閱讀。
  【解決方案】本階段先建立 token 骨架與無障礙基礎（可見焦點、降低動態效果），
              視覺設計（沿用前作風格）於前端設計階段填入實際值。
  【影響範圍】全站頁面外觀。
  【資料流向】_Layout.cshtml 載入本檔 → 各頁面元件引用 CSS 變數。

  ★ 單一 CSS 檔 ≤ 1,000 行，超過即拆分（開發規範 §8，前作 4,135 行單檔是反例）。
*/

/* ★★★ 【box-sizing: border-box】——沒有這一條，`width: 100%` 的輸入框會
   把 padding 與 border 加在 100% 【之外】，實際比容器寬 18px。
   ★ B7 實測發現：明細頁改成兩欄後，右欄的輸入框跨出格線貼到視窗邊緣。
     抽屜時代是單欄且有充裕留白，這 18px 一直被吃掉而沒人察覺。
   ★ 放在最前面且用萬用選擇器，是為了讓後續所有元件都不必再各自扣掉 padding。 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
  ★★★ 【設計 token — B8：沿用前作（參考專案）風格】

  【修改原因】B8 之前這裡是「待定案」的暫時值（灰藍 #1b5e9e），
              全站因而呈現未設計過的瀏覽器預設樣貌。
  【解決方案】採用參考專案（同一業主，`mli.land.jw-app.com.tw`）的設計系統：
              **森林綠主色 + 深藍灰側欄**。
  【影響範圍】全站外觀；★ 舊變數名一律保留為別名，既有規則不需修改。
  【資料流向】本檔 → _Layout 載入 → 各元件以 var() 取用。

  ★★ 【只取設計值，程式碼自己寫】（開發規範 §8）——
     參考專案是 4,135 行單檔（規範明列為反例），不直接複製其 CSS 程式碼，
     ★ 只採用它的**色票、字體、圓角、陰影**等設計決策。

  ★ 【不使用外部字體 CDN】——參考專案刻意只用本機字體逐級回退。
    機關內網環境不應依賴 Google Fonts 等外部資源。
*/
:root {
    /* ── 主色：森林綠 ───────────────────────────────── */
    --green: #2f7d54;
    --green-hover: #245f40;
    --green-deep: #1f4d3a;
    --green-tint: #dcefe3;
    --green-border: #bfe0cc;

    /*
       ── 側欄：深森林綠 ─────────────────────────────
       【修改原因】業主 2026-08-25：主色是森林綠，側欄卻是深藍灰（沿用參考專案），
                   ★ 兩者沒有任何關係，視覺上很突兀。
       【解決方案】改為主色的深色階，整體收斂為單一綠色系。
    */
    /*
       ★★ 【側欄用【低彩度】的深綠，不是主色的深色階】（業主 2026-08-25 回饋）——
          第一版用 #245c42／#173d2e，彩度太高，★ 承辦人員整天面對它會不舒服。
       ★ 側欄佔滿整個視窗高度、常駐於視野邊緣，它的工作是【當背景】，
         ★ 彩度必須明顯低於主色，否則會一直搶注意力。
       ★ 主色 #2f7d54 的飽和度約 45%；這裡降到約 25%，並壓低明度。
    */
    --side-a: #2b463c;
    --side-b: #1d322b;
    --side-tx: #e2ece7;
    --side-tx-2: #c4d3cb;
    --side-tx-3: #9aaea3;

    /*
       ★★★ 【側欄「目前所在項」的標示色，不可用 --green】——
           側欄背景轉綠之後，綠色的標示色條會與底色【失去對比】，
           ★ 而它不會有任何錯誤訊息，只是使用者愈來愈難看出自己在哪一頁。
       ★ 改用淺金：與整片綠底有明確的【色相差】，而不只是明度差，
         ★ 色覺障礙者也分辨得出來（WCAG 1.4.1；另有色條與粗體雙重標示）。
    */
    --side-accent: #ffe08a;

    /* ★ 舊的 --navy-* 保留為別名（同 --color-* 的處理），既有規則不必逐條改 */
    --navy-a: var(--side-a);
    --navy-b: var(--side-b);
    --navy-tx: var(--side-tx);
    --navy-tx-2: var(--side-tx-2);
    --navy-tx-3: var(--side-tx-3);

    /* ── 版面與表面 ─────────────────────────────────── */
    --ground: #eef4f0;
    --surface: #ffffff;
    --surface-2: #fbfdfc;
    --surface-3: #f7faf8;
    --surface-5: #f5f8f6;
    --row-hover: #f5faf7;

    /* ── 線條 ───────────────────────────────────────── */
    --line: #e6ede8;
    --line-2: #e3ebe6;
    --line-3: #e1e8e3;
    --line-input: #dbe4de;

    /* ── 文字 ───────────────────────────────────────── */
    --ink: #243029;
    --ink-head: #1f3a2e;
    --ink-2: #4c5b52;
    --ink-3: #66756c;
    --muted: #7c8a81;

    /* ── 語意色（各附背景色）────────────────────────── */
    --amber: #c9743a;   --amber-bg: #fde7d6;
    --red: #c0392b;     --red-bg: #fbe0dc;
    --blue: #356fb0;    --blue-bg: #e0e9f2;
    --teal: #2b8ca0;    --teal-bg: #d9edf1;

    /*
       ── 警示框與停用表面的線條 ─────────────────────
       【修改原因】2026-09-21：首頁的「前置未完成」警示框與不可點卡片，
                   原本把邊線色寫死在 home.css（#f0c9a8／#dcd2c4／#d0c3b2）。
                   ★ 那三個值源自設計草圖，未收進本檔，違反開發規範 §8
                     「色票一律以 CSS 變數定義於單一檔案，不散落硬編碼」。
       【解決方案】收進本檔，命名比照既有的 --green-border。
       【影響範圍】home.css 的 .card__why 與 .card.is-blocked。
       【資料流向】本檔 → home.css。

       ★★ 為什麼要收：日後調主色或為了無障礙提高對比時，
          散在各 CSS 檔的字面值【必然會漏改】，而漏改不會報錯，
          ★★★ 只會讓某幾個元件的顏色慢慢與其餘部分對不起來。
    */
    --amber-border: #f0c9a8;        /* 警示框（--amber-bg 底）的邊線 */
    --muted-border: #dcd2c4;        /* 停用／不可點表面的虛線邊 */
    --muted-border-hover: #d0c3b2;  /* 同上，滑過時 */

    /* ── 字體 ───────────────────────────────────────── */
    --font-display: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
    --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    --font-num: "Roboto", "Noto Sans TC", "Helvetica Neue", sans-serif;

    /* 字級 —— 支援放大閱讀，一律使用相對單位 */
    --text-base: 1rem;
    --text-lead: 1.125rem;
    --text-title: 1.5rem;

    /* 間距 */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;

    /* 圓角與陰影 */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 11px;

    /* ★ 頂列高度——明細頁的 sticky 動作列要靠它算 top，寫死數字會在改高度時失準 */
    --topbar-h: 64px;
    --shadow-card: 0 8px 20px -12px rgba(31, 58, 46, .35);
    --shadow-btn: 0 8px 18px -9px rgba(42, 116, 78, .5);

    /*
       ★★ 【舊變數名保留為別名，不刪】——
          B1～B7 既有的 87 條規則全部引用這些名稱。
          直接改名等於一次改動全站每一條規則，
          ★ 而 CSS 改錯【不會有任何錯誤訊息】，只會讓某些元件默默失去樣式。
       ★ 新寫的規則請直接用上面的語意名稱，別名只為相容既有規則而存在。
    */
    --color-surface: var(--surface);
    --color-text: var(--ink);
    --color-muted: var(--ink-3);
    --color-border: var(--line-2);
    --color-accent: var(--green);
    --radius: var(--r-sm);

    /* ★ 主色上的文字色——不是調色盤的一員，語意是「與主色形成對比的文字」 */
    --on-accent: #ffffff;

    color-scheme: light;
}

html {
    /* 放大閱讀：不鎖定字級，讓瀏覽器縮放與使用者設定生效 */
    font-size: 100%;
}

/*
   ══════════════════════════════════════════════════════════════════════
   ★★★ 字級切換（B8 T7；契約「放大閱讀」§貳-一(四)、M1 §3-3）

   【修改原因】契約明文要求「放大閱讀」，B8 §3 第 7 項訂為「小／中／大，
     以 html 的 font-size ＋ rem 實作，偏好記憶」，但**元件一直沒有做**
     （2026-09-21 查證：全案 grep 不到 fontScale 或字級切換）。

   【為什麼只需要動這三行】
   ★ 全案字級**已經全部是 rem**（實測：8 支 CSS 共 64 處 font-size，px 0 處），
     間距 token 也是 rem——★★ 所以改 html 的 font-size 就會整頁等比例縮放，
     不會出現「字變大但框沒變大」而被截斷的情形。
   ★★★ 這是 B8 T1／T2 當初把單位統一成 rem 換來的：
      **當時多花的力氣，讓今天這件事只要三行。**

   【為什麼不是 200%】
   ★ WCAG 的「文字可縮放至 200%」靠的是**瀏覽器原生縮放**（Ctrl +／−），
     那是 T6 的驗收項，不是本元件的職責（M1 §3-3 也是這樣分的）。
   ★★ 本元件是給「不知道有 Ctrl +」的承辦用的日常便利設定，
      ★★★ 跨度開太大會讓側欄與表格在 1024×768（契約最低解析度）擠爆，
         而那是每天都會遇到的情形，200% 只在檢測時遇到。

   ⚠️ 【偏好存在 localStorage，不是資料庫】
   ★ 與側欄收合狀態（`mlaeld.nav.collapsed`）同一套作法。
   ★★ 符合 B8「切換後重新登入仍保留」——**同一台電腦同一個瀏覽器**。
      ★★★ 換一台電腦不會跟著走：那需要在使用者主檔加欄位（DDL 變更），
         屬須經業主核准的項目，**未裁示前不做**。已記入《程式開發進度總覽》。
   ══════════════════════════════════════════════════════════════════════
*/
html[data-font-scale="small"] {
    font-size: 87.5%;   /* 14px */
}

html[data-font-scale="normal"] {
    font-size: 100%;    /* 16px（預設） */
}

html[data-font-scale="large"] {
    font-size: 125%;    /* 20px */
}

body {
    margin: 0;
    /* ★ 版面底色是淡綠灰，不是純白——白色留給「卡片／表面」，兩者的層次差是版面的骨架 */
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ★ 連結：主色、無底線。★ 底線留給「純文字段落中的連結」，介面元件不用 */
a {
    color: var(--green);
    text-decoration: none;
}

a:hover {
    color: var(--green-hover);
    text-decoration: underline;
}

/* ★ 數字欄位（金額、面積、編號）：等寬數字，讓表格右對齊時位數對齊 */
.num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

/*
   無障礙：可見的鍵盤焦點（WCAG 2.1 AA 2.4.7 Focus Visible，業主 2026-08-25 裁示）。

   ★ 以主色光環呈現，比預設 outline 柔和且與設計一致。
*/
:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(47, 125, 84, .45);
    border-radius: var(--r-sm);
}

/*
   ★★★ 【高對比模式必須另外處理】——
       Windows 高對比 / forced-colors 模式會【把 box-shadow 整個移除】，
       ★ 只靠光環的話，那些使用者會【完全看不到焦點在哪裡】，
         而畫面上不會有任何異狀可供察覺。
       ★ 參考專案用的是 `outline:none` + box-shadow，在此模式下焦點會消失；
         本案改為保留 outline 並在高對比模式下還原為實線。
   ★ WCAG 2.1 AA 2.4.7 的要求是「焦點看得見」，不限定用什麼畫。
*/
@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }
}

/* 尊重使用者的「減少動態效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}