/* ---------- 總覽 ---------- */
  /* minmax(0,1fr) 而不是 1fr：1fr 的最小值是 min-content，標籤最長的那一格會自己撐寬 */
  /* 2026-09：拿掉「裝置離線」那張卡，改成併入「裝置」卡的副標，3 張變 2 張 */
  /* 2026-09-15 主控台重設計：兩張 KPI 卡改成一條「統計帶」——一個外框、格與格之間 1px 髮絲線分隔
     （Stripe 那種），數字 26px tabular、標籤前面一顆狀態圓點。gap:0 靠 .kpi-card 的 border-right 分格。 */
  /* 2026-09-15 重設計收尾：圓角改吃 --r-lg（token 已調成設計稿的 8px），不再寫死。 */
  .kpi-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
  @media (max-width:640px){ .kpi-grid{ grid-template-columns:minmax(0,1fr); } .kpi-card{ border-right:none; border-bottom:1px solid var(--line); } }
  /* 沿用既有 kpi-grid 的 grid 結構，不改用 18 號那套「gap:1px 借縫隙透邊框色」的卡片拼接技巧
     ——代價小很多，拿掉邊框陰影、換底色分層一樣能貼齊 18 號「卡片本身無邊框」的視覺結果 */
  .kpi-card{
    background:var(--surface); border:none; border-right:1px solid var(--line); border-radius:0; padding:16px 20px;
    text-align:left; cursor:pointer; width:100%; display:flex; flex-direction:column; gap:6px; font:inherit; color:inherit;
  }
  .kpi-card:last-child{ border-right:none; }
  .kpi-card.is-static{ cursor:default; }
  .kpi-card.is-static:hover{ background:var(--surface); }
  .kpi-card:hover{ background:var(--surface-2); }
  /* 2026-09-15 重設計收尾：26px 改吃 --fs-3xl（token 已從 32px 調成設計稿的統計數字 26px），不再寫死。 */
  .kpi-value{ font-family:'Noto Sans TC',sans-serif; font-weight:600; font-size:var(--fs-3xl); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:6px; }
  .kpi-value small{ font-size:var(--fs-md); font-weight:500; color:var(--ink-faint); letter-spacing:0; }
  /* 遠端連線頁「最快到期」那格例外：設計稿把小時留在 26px 滿級、分鐘用 18px 弱化一階，但顏色
     仍是正文色（不是別格 small 的淡灰）——它是同一個數字的後半段，不是註解。18px 沒有對應字階
     token，設計稿也是寫死的，只有顏色走 token。只限 #connStats，不外溢到總覽統計帶。 */
  #connStats .kpi-value small{ font-size:18px; font-weight:500; color:var(--ink); }
  /* 離線數不再整顆數字變琥珀色——重設計把 144 C／warn 留給「該注意」的地方，統計帶的數字一律正文色，
     狀態靠標籤前的圓點講。 */
  .kpi-value.is-warn{ color:inherit; }
  .kpi-dot{ width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }
  /* 數字沒有後端來源的卡：虛線邊框，跟旁邊算得出來的那幾張一眼分得開
     （.kpi-card 拿掉邊框之後，這裡要自己畫一條完整的虛線邊框，不能只改 border-style） */
  .kpi-card.is-planned{ border:1px dashed var(--line-strong); background:var(--surface-2); cursor:default; }
  .kpi-card.is-planned:hover .kpi-value{ color:inherit; }
  .kpi-label{ color:var(--ink-faint); font-size:var(--fs-sm); display:flex; align-items:center; gap:6px; order:-1; }
  /* 每張 KPI 卡都給一個對照數字，一個孤零零的數字看不出「這是多還是少」 */
  .kpi-sub{ color:var(--ink-faint); font-size:var(--fs-sm); }

  /* ---------- 資源用量（裝置 × 指標矩陣） ---------- */
  /* 版面 history：原本是「CPU／系統記憶體／磁碟各佔一欄、每欄排自己的前三名」三欄排行榜，
     2026-09-09 業主反映「看起來不太明顯」後整個換成現在這個矩陣。三個具體毛病：
     一、視覺層級剛好倒過來——裝置名 13px、百分比只有 12px，眼睛先讀到名字，但這個面板的內容
         其實是數字；
     二、量表只有 56px 寬，4.5% 畫出來剩 2px、跟 0% 分不出來，一根量不出量級的尺等於白佔位置，
         而且它跟旁邊的數字在講同一件事；
     三、同一台裝置的三個指標被拆到三欄各出現一次，要判斷「這台是只有磁碟吃緊、還是三項都在燒」
         得自己用眼睛把名字配對回去。矩陣一台一列、三項並排，這三件事一次解掉，裝置越多越耐看。
     代價（刻意接受、不是漏掉）：它不再是「每欄各自排序的 Top 3」，而是「綜合最吃緊的前幾台」，
     語意變了，所以面板標題與副標也跟著改掉，畫面上不再寫 Top 3。 */
  /* 每一格＝24 小時趨勢線 ＋ 當下值，用在裝置表的 CPU／記憶體／磁碟三欄。門檻色沿用跟 .inv-state
     一致的三階（≥80 危險、≥60 警告），tabular-nums 讓同一欄的個位數不會因為字寬不同而左右跳動。
     寬度 118px＝趨勢線（彈性）＋「100.0%」這種 5 碼數字（約 42px）＋左右內距，是量出來的最小值；
     margin-left:auto 讓它在靠右對齊的 td 裡貼齊右邊。 */
  .res-cell{
    /* 重設計：拿掉格子的底色框，只剩「趨勢線＋數字」裸放在儲存格裡（設計稿的資源欄），滑上去才浮出淡底。 */
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
    /* 2026-09-15 重設計收尾：96→92px、28→22px。設計稿 Main.dc.html 的資源欄是 120px（含格子左右各
       14px 內距＝內容 92px），高度只有「迷你圖／量表＋數字」一行的自然高；原本 96×28 讓三欄各多吃 4px、
       列高多 8px，1440 寬下把「裝置」欄擠到 107px，裝置名會折行、列高從 ~60px 變成 68～80px。 */
    width:92px; margin-left:auto; height:22px; padding:0 4px;
    border:none; font:inherit; color:inherit; text-align:right;
    border-radius:var(--r-sm); background:transparent;
  }
  button.res-cell{ cursor:pointer; }
  button.res-cell:hover{ background:var(--surface-3); }
  /* 窄畫面（手機）整個拿掉趨勢線退回純數字：擠到六七十 px 塞不下一條看得懂的線，硬塞只會變成裝飾。
     SVG 本身照產、只是藏起來，render 那邊不用為了窄畫面另外分支。 */
  @media (max-width:680px){
    .res-spark{ display:none; }
    .res-cell{ width:auto; min-width:52px; padding:0 6px; }
  }
  /* preserveAspectRatio="none" 讓線橫向填滿彈性寬度，所以線寬要靠 non-scaling-stroke 固定住，
     不然格子越寬線被拉得越細。也因為縱橫比會被壓，格子裡不放圓點標記（會變成橢圓）——
     「當下值」本來就由右邊的數字負責，線只負責走勢，不需要再標一次。 */
  .res-spark{ flex:1; min-width:0; height:20px; display:block; }
  .res-spark .line{
    fill:none; stroke:var(--res-line); stroke-width:1.5;
    stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke;
  }
  /* 2026-09-15 重設計：趨勢線補一層線下面積（設計稿資源欄是「面積＋線」兩層），走勢的量級感才出得來。
     2026-09-15 走查修正：面積色跟著線色走三階（--res-fill），不是只有正常那階有——實機上記憶體
     跑到警告階時線下是空的，同一欄的幾台裝置量級讀起來不一致。三個 alpha 都壓在 .13～.16，
     是「線下的一層薄霧」而不是整格底色，沒有違反「狀態不用整格底色」那條原則。 */
  .res-spark .area{ fill:var(--res-fill, none); stroke:none; }
  /* 2026-09-15 重設計收尾：磁碟欄的量表。設計稿 Main.dc.html 的磁碟格是 .bar（48x4 圓角 2、
     底 --surface-3），不是 CPU／記憶體那種趨勢線——磁碟問的是「用掉幾成」，條狀比走勢好讀。
     過半吃 144 C 是 canvas.json 總覽便利貼寫死的規則，≥80 才轉 --crit。 */
  .res-bar{ flex:1; min-width:0; max-width:48px; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; display:block; }
  .res-bar i{ display:block; height:100%; background:var(--accent-2); }
  .res-bar.is-half i{ background:var(--warm); }
  .res-bar.is-bad i{ background:var(--crit); }
  .res-num{ font-size:var(--fs-sm); font-weight:500; font-family:'JetBrains Mono',monospace; color:var(--res-tone); font-variant-numeric:tabular-nums; flex:none; min-width:38px; }
  /* 正常範圍的數字刻意留一般文字色（不是 --ok 的青綠）：矩陣裡大多數格子都正常，全部上色等於
     沒上色，反而把真正該注意的琥珀／紅稀釋掉。徽章（.inv-state）一次只出現一個，那裡上色才有意義。
     線再退一階用 --ink-soft：十幾條線同時出現時，全用正文色會比數字還搶眼，喧賓奪主。 */
  .res-cell.is-ok  { --res-tone:var(--ink);       --res-line:var(--accent-2); --res-fill:var(--spark-fill); }
  .res-cell.is-warn{ --res-tone:var(--warn);      --res-line:var(--warn);     --res-fill:var(--spark-fill-warn); }
  .res-cell.is-bad { --res-tone:var(--crit);      --res-line:var(--crit);     --res-fill:var(--spark-fill-crit); }
  .res-cell.is-none{ --res-tone:var(--ink-faint); --res-line:transparent;     --res-fill:none; }


  /* ---------- 近期日誌清單（2026-09-15 重設計） ---------- */
  /* 設計稿 Main.dc.html 的日誌列是「分類藥丸在最左 → 兩行主文 → 時間靠右」水平三段，
     實作原本把徽章塞在第一行文字裡、裝置名另外拆第三行，讀起來像三段不同的東西。
     全部 scoped 在 #overviewFeed 底下：.row-list／.session-row 是共用 class，日誌頁與連線頁還在用，
     不能直接改。`> li.feed-row` 的權重也剛好壓得過 .row-list > li 的 12px 16px 內距，
     而空狀態那顆 <li> 沒有 feed-row class，維持原樣不受影響。 */
  #overviewFeed > li.feed-row{ display:flex; align-items:center; gap:12px; padding:10px 16px; }
  #overviewFeed .li-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  #overviewFeed .li-title{ font-size:var(--fs-md); font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* .link-btn 是 display:block／600，塞進標題那行會自己換行、字重也比設計稿的 500 重一階 */
  #overviewFeed .li-title .link-btn{ display:inline; font-size:inherit; font-weight:inherit; }
  #overviewFeed .li-sub{ font-size:var(--fs-sm); color:var(--ink-faint); }
  #overviewFeed .li-time{ flex:none; font-size:var(--fs-xs); color:var(--ink-faint); }
  #overviewFeed .badge{ flex:none; }

  /* 面板標題列右邊的純文字收尾連結（「全部日誌 →」）：設計稿是一顆沒有底色沒有外框的 <a>，
     12px、繼承 400 字重、hover 只換色不加底線。
     絕對不能寫 display——permissions.mjs 是靠 btn.hidden 藏這顆按鈕的，寫了會蓋掉 [hidden]。 */
  .panel-link-btn{ background:none; border:none; padding:0; height:auto; min-height:0; font:inherit; font-size:var(--fs-sm); color:var(--accent); cursor:pointer; }
  .panel-link-btn:hover{ color:var(--accent-2); }

  /* 總覽頁首：設計稿右側那組動作鈕是跟導言那行文字的底線切齊，不是跟 22px 標題的頂端切齊。
     下面兩行是連動的——.view-lead 的 20px 下邊距目前實際扮演 context-bar 的底部內距，
     單獨拿掉導言會貼死在 .context-bar 的下緣線上；不拿掉則 align-items:flex-end 會把按鈕
     壓到導言下方 20px，比原本更歪。只在總覽 scoped，不動全站共用規則。 */
  #view-overview .page-head{ align-items:flex-end; }
  #view-overview .view-lead{ margin:6px 0 0; }
  #view-overview .context-inner{ padding-bottom:20px; }