/* 2026-09-13 業主拍板：現階段尚不需要落地「純離線白牌」限制，復原 Google Fonts。
     字型組合：中文 Noto Sans TC、等寬/英數 JetBrains Mono。 */
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

  /* ============================================================
     設計 token（照 18 號視覺稿「克制精密主控台」換的色彩／圓角／字級系統）
     色彩對比：所有「小字＋非純文字前景」的組合都算過 WCAG，目標 ≥4.5:1。
     ============================================================ */
  :root{
    /* 內容區寬度上限，三個內容容器（.context-inner／.layout／.view-body）共用。
       2026-09-12 走過一輪：原本 1180px 使用者嫌左右留白大、表格會斷行；改 1720px 吃滿之後試了一下午，
       表格欄距被拉得很開、視線發散。最後定 1400px：這是資料型主控台常見的上限（表格一列的視線跨度
       還收得住），比 1180 多出的 220px 剛好讓帳號、客戶這類多欄表格不用斷行——斷行問題另一半靠
       .cell-nowrap 解，不靠拉寬。內容比這窄的頁（設定、單筆表單）本來就各自有 max-width，不受影響。 */
    --page-max:1400px;
    /* 2026-09-15 主控台全盤重設計（docs/reports/26-主控台全盤重設計/）第一批：token 與殼層。
       淺色底從中性灰 #EEF1F1 換成帶一點點冷調的 #F3F5F6，內容區跟藏青側欄才像同一套；三階表面
       （bg → surface → surface-2 → surface-3）維持單調排序，層次靠 1px 髮絲線，不靠陰影。 */
    --bg:#F3F5F6;
    --surface:#FFFFFF;
    --surface-2:#F7F9FA;
    /* 第三層表面色：比 --surface-2 更沉，給「陷在陷進去的東西裡面」的元素用（目前只有
       design token 先補齊，元件那邊還沒有非用不可的地方，先備著，數值跟 --bg/--surface-2
       同一個方向再往外推一格，維持三層由深到淺的單調排序） */
    --surface-3:#EDF1F2;
    --ink:#3E3A39;               /* 達耀科技企業四色 Pantone 447 C／炭黑深灰標準字色（2026-09-14 品牌規格） */
    --ink-soft:#5B6266;
    --ink-faint:#68737A;        /* 4.7:1 on #FFFFFF（重設計把說明字再淡一階，仍守 ≥4.5） */
    --line:#E3E8EA;
    --line-strong:#CBD3D7;

    /* 達耀科技企業四色 Pantone 7470 C／企業主色（2026-09-14 品牌識別全站更換規格） */
    --accent:#004B64;
    --accent-strong:#003648;    /* 當文字用 */
    --accent-ink:#FFFFFF;
    --accent-soft-bg:rgba(26,161,169,.12);
    /* 7710 C 亮青獨立一顆 token：重設計裡它是「活著／選中／焦點」的訊號色（側欄選中邊條、狀態燈、
       迷你圖），跟 7470 C 主動作色分開，深色模式再提亮（見下面）。 */
    --accent-2:#1AA1A9;
    /* 2026-09-15 重設計收尾：144 C 暖橘獨立一顆 token，只給「需要注意」與發布用（設計稿 Tokens 色票）。
       第三批引進 var(--warm) 用法時漏了宣告，70-table／view-releases／connections 四處一直是無效值
       （未定義的自訂屬性會讓整條宣告 IACVT：背景退成透明、文字色退回繼承），這次補齊。
       柔底沿用本檔既有的 -bg 後綴命名（設計稿那邊叫 --warm-soft，同一顆）。 */
    --warm:#F08307;
    --warm-bg:rgba(240,131,7,.14);
    /* 趨勢線線下的面積填色，跟著線色分三階：正常淡青、警告淡琥珀、危險淡紅。
       2026-09-15 走查：原本只有正常那階有面積，結果記憶體跑到警告階（橘線）時線下是空的，
       同一欄裡幾台裝置的「量級感」讀起來不一致——面積本來就是用來讀量級的，不該只有一階有。 */
    --spark-fill:rgba(26,161,169,.10);
    --spark-fill-warn:rgba(173,107,6,.14);
    --spark-fill-crit:rgba(178,58,46,.13);

    --ok:#1B7A66;
    --ok-bg:#E1F0EB;
    --warn:#AD6B06;
    --warn-bg:#F6ECDA;
    --crit:#B23A2E;
    --crit-bg:#F8E3DF;
    --crit-ink:#F8E3DF;         /* 實心 .btn-danger 上的文字色，跟 --accent-ink 同一套邏輯 */
    --info:#2F5F7D;             /* 區分「正常自動關閉」與「離線」 */
    --info-bg:#E4EEF4;
    --neutral:#6B7478;
    --neutral-bg:#E9ECED;

    /* 2026-09-14 品牌質感優化（/design 確認稿）：原本 #1B1D1F 是中性深灰，跟哪個品牌都沾不上邊、
       換誰的色都長一樣。改成從企業主色 7470 C 壓暗、帶一點藏青的深色，隨便一瞥就認得出是達耀科技，
       不是隨便一套深色模板。.sidebar 另外疊了一層微幅漸層做材質深度，這裡的值是漸層兩端的中間色，
       給 toast／收合鈕／窄螢幕頂欄／終端機頁頂列這些小面積、不適合疊漸層的地方用。 */
    --chrome-bg:#101F24;
    /* 側欄直向漸層兩端（30-shell.css .sidebar 吃這兩顆）：淺色模式維持原本藏青→更深，深色模式整組再壓一階，
       讓側欄比同樣變深的內容區還深一階、殼層與內容仍有分界。 */
    --sidebar-top:#101F24;
    --sidebar-bottom:#0B1519;
    --chrome-ink:#F4F5F4;
    --chrome-ink-soft:rgba(244,245,244,.66);
    --chrome-line:rgba(255,255,255,.10);
    /* chrome 永遠深色、不跟主題切換，--ok/--crit 淺色模式的值在這個背景上對比不夠，這兩個定死不隨主題變 */
    --chrome-ok:#5FCFBD;
    --chrome-crit:#F0917F;

    /* 陰影只留給真的浮層（彈窗、toast）；.panel／.kpi-card 改靠 --bg 跟 --surface 的
       明度差分層，不再吃這兩個變數 */
    --shadow-card:0 1px 2px rgba(20,22,24,.05), 0 8px 20px -14px rgba(20,22,24,.25);
    --shadow-pop:0 12px 32px -12px rgba(16,31,36,.35);

    /* 圓角四階：sm/md/lg 沿用舊名不改，xl 給彈窗浮層用。
       2026-09-15 重設計收尾：--r-lg 從 10px 改回 8px——設計稿密度規則寫死「面板圓角 8px、控制項 6px、標籤 4px」，
       面板那批本來就各自寫死 8px，token 停在 10px 只會讓下一個人吃 token 反而跟畫面不一致。 */
    --r-xl:14px; --r-lg:8px; --r-md:6px; --r-sm:4px; --r-pill:999px;

    /* 字級八階，不要再寫死 px；最上面三階（3xl/2xl/xl）數值跟著 18 號視覺稿調過，
       下面五階（lg 以下）維持原值——18 號同一批數值本來就完全相同 */
    --fs-3xl:26px;  /* 統計帶數字（設計稿字階：統計數字 26 / 600 tabular） */
    --fs-2xl:22px;  /* 頁面標題（設計稿字階：22 / 700） */
    --fs-xl:15px;   /* 區塊大標、埠號磚 */
    --fs-lg:14px;   /* 內文預設、面板標題、端點名 */
    --fs-md:13px;   /* 次要內文、按鈕、表格內容 */
    --fs-sm:12px;   /* 標籤、說明文字、麵包屑 */
    --fs-xs:11px;   /* 徽章、圖例、meta */
    --fs-2xs:10px;  /* 形狀符號、chip、圖表軸標 */

    /* 焦點框吃 7710 C：設計稿把亮青定義成「活著／選中／焦點」訊號色；--accent-strong 留給「當文字用」的原用途 */
    --focus:var(--accent-2);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      /* 2026-09-15 主控台全盤重設計：深色不是把淺色反過來——底色從側欄藏青延伸出來（#0E1518），
         表面三階往上疊而不是往下挖（surface-2／3 比 surface 更亮，跟淺色相反，深色模式的慣例是
         愈靠近使用者愈亮）；主色換成提亮的 7710 C（#2CB5BD），原 #1AA1A9 在深底上按鈕字對比不夠。 */
      --bg:#0E1518; --surface:#141C20; --surface-2:#18232A; --surface-3:#1E2B32;
      --ink:#E8ECED; --ink-soft:#AEB8BC; --ink-faint:#8A969C;
      --line:#22303A; --line-strong:#2E404A;
      --accent:#2CB5BD; --accent-strong:#5FD3DA; --accent-ink:#06171A; --accent-soft-bg:rgba(44,181,189,.16);
      --accent-2:#2CB5BD;
      --warm:#F59A34; --warm-bg:rgba(245,154,52,.16);
      --spark-fill:rgba(44,181,189,.12);
      --spark-fill-warn:rgba(224,166,76,.16); --spark-fill-crit:rgba(240,145,127,.15);
      --chrome-bg:#0A1114; --sidebar-top:#0A1114; --sidebar-bottom:#070D10;
      --chrome-ink-soft:rgba(244,245,244,.62); --chrome-line:rgba(255,255,255,.08);
      --ok:#5FCFBD; --ok-bg:#123430; --warn:#E0A64C; --warn-bg:#3A3122; --crit:#F0917F; --crit-bg:#3E241F; --crit-ink:#1B1D1F;
      --info:#8FBEDC; --info-bg:#1C2C36; --neutral:#9AA5AA; --neutral-bg:#25313A;
      --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -16px rgba(0,0,0,.6);
      --shadow-pop:0 12px 32px -12px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    /* 2026-09-15 主控台全盤重設計：深色不是把淺色反過來——底色從側欄藏青延伸出來（#0E1518），
       表面三階往上疊而不是往下挖（surface-2／3 比 surface 更亮，跟淺色相反，深色模式的慣例是
       愈靠近使用者愈亮）；主色換成提亮的 7710 C（#2CB5BD），原 #1AA1A9 在深底上按鈕字對比不夠。 */
    --bg:#0E1518; --surface:#141C20; --surface-2:#18232A; --surface-3:#1E2B32;
    --ink:#E8ECED; --ink-soft:#AEB8BC; --ink-faint:#8A969C;
    --line:#22303A; --line-strong:#2E404A;
    --accent:#2CB5BD; --accent-strong:#5FD3DA; --accent-ink:#06171A; --accent-soft-bg:rgba(44,181,189,.16);
    --accent-2:#2CB5BD;
    --warm:#F59A34; --warm-bg:rgba(245,154,52,.16);
    --spark-fill:rgba(44,181,189,.12);
    --spark-fill-warn:rgba(224,166,76,.16); --spark-fill-crit:rgba(240,145,127,.15);
    --chrome-bg:#0A1114; --sidebar-top:#0A1114; --sidebar-bottom:#070D10;
    --chrome-ink-soft:rgba(244,245,244,.62); --chrome-line:rgba(255,255,255,.08);
    --ok:#5FCFBD; --ok-bg:#123430; --warn:#E0A64C; --warn-bg:#3A3122; --crit:#F0917F; --crit-bg:#3E241F; --crit-ink:#1B1D1F;
    --info:#8FBEDC; --info-bg:#1C2C36; --neutral:#9AA5AA; --neutral-bg:#25313A;
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -16px rgba(0,0,0,.6);
    --shadow-pop:0 12px 32px -12px rgba(0,0,0,.7);
  }

  /* 2026-09-13 前端模組化 TASK-05：原本散在 shell／login-rbac 裡的品牌色系字面值收成 token，讓 brand-override 一次換到底。
     白／黑的 alpha 疊色（rgba(255,255,255,.06) 這類）是主題中性、不隨品牌色變，刻意留在原處。 */
  :root{
    /* 2026-09-14 企業四色與品牌識別規格：換算為亮青 7710 C／暖橘 144 C 對應的 rgba 數值，
       依原本用途分——側欄 chrome 上的強調疊色跟 7710 C 同色系，權限清單的「已選」暖色提示換 144 C。 */
    --accent-alpha-30:rgba(26,161,169,.3);
    --accent-alpha-18:rgba(26,161,169,.18);
    --accent-warm-alpha-16:rgba(240,131,7,.16);
    --accent-warm-alpha-10:rgba(240,131,7,.1);
    --chrome-bg-2:#24272B;
    --chrome-line-hard:#33383C;
  }