/* ---------- 新增設備彈窗（device-bootstrap-enrollment TASK-03） ---------- */
  /* 2026-09 改版：業主要求把「新增裝置」從置中彈窗改成貼右側滑出的側滑面板，樣式照視覺稿
     docs/reports/18-主控台介面重新設計視覺稿.html 的 .overlay-backdrop/.slideover 寫法（該視覺稿
     openAddDeviceSlideover() 那個側滑面板）。容器 class 改名成 .pv-slideover-backdrop/
     .pv-slideover-panel，沿用這支檔案既有的 pv- 命名慣例，沒有照抄視覺稿那組沒有 pv- 前綴的
     class 名稱——直接混進來會跟這支檔案其他同族元件（pv-modal- 開頭那組／pv-cmd-box／pv-inline）對不上，
     之後不容易一眼看出是同一組東西。
     面板「內部」的標題列／表單列／指令框／提示文字繼續沿用 .pv-modal-head/.pv-modal-row/
     .pv-inline/.pv-cmd-box/.pv-modal-note（含 .is-ok/.is-warn）完全不動：這幾個 class 名稱
     有多處被下面 <script> 用字面字串直接指定（例如 className = "pv-modal-note is-ok"），改名
     必須連動改 JS 字串——這次是「純視覺容器改版」，不動 JS 是明確要求，所以只換外層容器兩個
     class，內層維持原樣。 */
  .pv-slideover-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:70;
    display:flex; justify-content:flex-end;
    animation:pv-slideover-backdrop-in .18s ease; }
  @keyframes pv-slideover-backdrop-in{ from{ background-color:rgba(0,0,0,0); } to{ background-color:rgba(0,0,0,.45); } }
  /* 面板貼右、滿版高、內容過長時自己捲動；圓角只留面向頁面內側的左邊兩角（右邊直接貼視窗邊緣，
     圓角留在那裡反而會在視窗邊界露出一小角背景，不留比較乾淨）。圓角、陰影沿用原本 .pv-modal-card
     的 --r-xl／--shadow-card，沒有借 toast 在用的 --shadow-pop。寬度 min(440px,100%)：<440px
     的窄螢幕（含規格提到的 <480px 手機）會自動貼滿寬度，下面另外補一條 <480px 的 media query
     把圓角收掉、padding 縮小，避免滿寬時左邊兩個圓角在視窗邊緣露出破圖的小三角。 */
  /* 2026-09-15 重設計：圓角從 --r-xl(14px) 收成 --r-lg(8px)，跟設計稿的面板圓角同一階（畫面上
     不該同時存在 8px 與 14px 兩種大圓角）；陰影改 --shadow-pop——側滑面板是真的浮層，
     --shadow-card 在重設計裡已經退場（卡片一律無陰影）。 */
  .pv-slideover-panel{ background:var(--surface); color:var(--ink); border-left:1px solid var(--line);
    border-radius:var(--r-lg) 0 0 var(--r-lg); box-shadow:var(--shadow-pop);
    width:min(440px, 100%); height:100%; box-sizing:border-box; padding:22px 24px; overflow-y:auto;
    animation:pv-slideover-in .22s ease; }
  @keyframes pv-slideover-in{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
  /* 進場滑入刻意用 @keyframes/animation，不是 transition：面板平常是 hidden（第 143 行有一條
     全域 [hidden]{ display:none !important; }），transition 沒辦法在「display:none → flex」
     這種一刀切的瞬間播放（沒有「前一格畫面」可以內插出中間值），但 animation 只要 display 一變
     成非 none 就會照 @keyframes 從頭播一次，不需要額外的 JS 去切一個「開啟中」的 class。
     離場（closeNewDeviceModal 把 hidden 設回 true）目前沒有對應的滑出動畫：要做到「動畫播完才
     真的隱藏」勢必要在 closeNewDeviceModal 裡等 transitionend 或加 setTimeout 延後設定 hidden，
     這會動到規格明文列為不能碰的函式內部邏輯，所以這次先不做，離場維持現有「立刻隱藏」的行為。
     這裡新增的兩個 animation 都會被檔案開頭 166-168 行那條全域
     @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; ... } }
     一併壓成幾乎瞬間播完，不用另外處理。 */
  @media (max-width:480px){
    .pv-slideover-panel{ width:100%; border-radius:0; padding:18px 16px; }
  }
  /* 角色視窗（#roleBackdrop）改置中寬幅：帳號、角色與客戶管理介面缺失收尾規格 TASK-05
     （2026-09-12）。只用限定選擇器覆寫這一個彈窗——其他四個彈窗（新增裝置／新增使用者／
     新增端點／移除裝置）還在共用上面 .pv-slideover-backdrop／.pv-slideover-panel 那組貼右
     滿版高的規則，這裡不動它們一個字。760px 是建議值，720～900px 之間都合理，改動不影響
     其他彈窗；圓角沿用既有 overlay 階 --r-xl（跟 .pv-modal-card／貼右版 .pv-slideover-panel
     同一階），不另外發明新圓角變數。 */
  #roleBackdrop.pv-slideover-backdrop{ justify-content:center; align-items:center; padding:20px; }
  #roleBackdrop .pv-slideover-panel{
    width:min(760px, 92vw); height:auto; max-height:calc(100vh - 40px);
    border-left:none; border-radius:var(--r-lg);   /* 2026-09-15：跟上面貼右版同一階圓角 */
  }
  @media (max-width:900px){
    #roleBackdrop .pv-slideover-panel{ width:100%; }
  }
  /* 這條不能省：上面 #roleBackdrop .pv-slideover-panel 選擇器特異性 (1,1,0) 比上面那條全域
     480px 規則 (0,1,0) 高，media query 命不命中不影響特異性比較——圓角覆寫如果不另外收進
     480px 媒體查詢，手機寬度下角色視窗仍然會保留 --r-xl 圓角，跟其他四個滿版貼齊、圓角收成 0
     的面板不一致，重演上面 .pv-slideover-panel 那段註解警告過的視窗邊緣破圖。 */
  @media (max-width:480px){
    #roleBackdrop .pv-slideover-panel{ border-radius:0; }
  }
  .pv-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
  /* 2026-09-15 重設計：彈窗標題跟面板標題同一階（14/600），原本 13px 比面板標題還小一階。 */
  .pv-modal-head h2{ margin:0; font-size:var(--fs-lg); font-weight:600; }
  /* 關閉鈕從裸的 22px「×」文字改成設計稿的 .icon-btn：32×32、6px 圓角、1px 髮絲線外框。
     裸文字的點擊區只有字本身那幾 px，觸控裝置上很難按中。 */
  .pv-modal-close{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-xl); line-height:1; cursor:pointer; flex:none;
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--ink-soft);
  }
  .pv-modal-close:hover{ background:var(--surface-2); color:var(--ink); }
  .pv-modal-row{ margin-bottom:14px; }
  .pv-modal-row label{ display:block; margin-bottom:5px; font-size:var(--fs-md); font-weight:600; }
  .pv-modal-row .pv-inline{ display:flex; gap:8px; }
  .pv-modal-row .pv-inline input{ flex:1; }
  .pv-cmd-box{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
    /* 2026-09-15 重設計：等寬字全站統一成 JetBrains Mono（其他等寬處早就是它），
       這裡原本走系統 ui-monospace，同一個畫面上會出現兩種等寬字形。 */
    border-radius:var(--r-md); padding:12px; font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;
    font-size:calc(var(--fs-md) - 1px); word-break:break-all; white-space:pre-wrap; }
  .pv-cmd-box.is-stale{ opacity:.45; }
  .pv-modal-note{ margin-top:10px; font-size:var(--fs-md); color:var(--ink-soft); }
  .pv-modal-note.is-ok{ color:var(--ok); }
  .pv-modal-note.is-warn{ color:var(--crit); }