/* ---------- 登入頁（#loginGate，使用者登入與帳號體系 TASK-04） ---------- */
  /* 做成蓋住整個主控台的全螢幕覆蓋層，不是獨立 /login 頁面：理由見開發規格 TASK-04——
     這支檔案是單頁應用，switchView() 只切內部 view 沒有真的路由，覆蓋層天生「就在原地」，
     session 中途過期時蓋上去、重新登入後拿掉，使用者停在哪一頁就還在哪一頁，不用處理
     「登入後導回哪裡」這種來回狀態。z-index 要蓋過畫面上**所有**浮層：toast（60）、新增裝置
     側滑面板（70），以及最容易漏算的 .skip-link（100，Tab 一下就會從畫面上緣滑出來）。
     用 120 是「比目前最高的那個再高一階，還留一格空間」——閘門是最高優先的畫面，
     底下不該有任何東西透出來，新增浮層時記得回來確認這個數字仍然最大。 */
  /* 2026-09-14 企業四色與品牌識別全站更換規格 TASK-03：登入頁鎖定淺色科技白，不吃 --bg/--surface
     這兩個隨主題切換的 token——官方橫式彩色 Logo 的「達耀科技」字是炭黑深灰，深色模式下會吃色隱形，
     所以這裡跟下面幾顆品牌區/表單元素改成寫死色碼，不隨 data-theme="dark" 變暗。 */
  /* 2026-09-14 登入頁二輪（/design 變化四定案）：版面從「灰底＋置中白卡片」改成「無框三件式」——
     表單欄置中、版權字樣定在左下角，中間不再有卡片邊框與陰影。.login-gate 自己當定位容器
     （position:fixed 本來就是），版權用 absolute 貼角落，表單欄靠 flex 置中。底色從 #EEF2F4
     略提亮到 #F5F7F8：沒有白卡片之後整頁就是這一個底色，原本的灰在大面積下會顯得髒。 */
  .login-gate{
    position:fixed; inset:0; z-index:120; background:#F5F7F8;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  /* 2026-09-15 走查：Logo 原本跟這條規則一樣用 position:absolute 貼在閘門左上角，跟置中的表單欄
     各自獨立定位——使用者反饋離卡片太遠、不明顯。改成 Logo 是 .login-card 這個 flex 直欄裡的
     第一個項目（HTML 已搬進卡片內），靠 align-self:flex-start 不被欄寬撐開，維持原本 40px
     高度、跟標題同一條左緣線。 */
  .login-logo{ display:block; height:40px; width:auto; align-self:flex-start; }
  /* 表單欄：名字沿用 .login-card（#forcePasswordGate／login.mjs 都靠它），但已經不是「卡片」——
     沒有底色、邊框、陰影、圓角，只是一個 360px 寬的直向堆疊。max-width:100% 讓窄螢幕縮得進去。 */
  .login-card{
    width:360px; max-width:100%; display:flex; flex-direction:column; gap:28px;
    background:transparent; border:0; box-shadow:none; padding:0;
  }
  /* .login-brand 現在只剩兩顆 hidden 的 data-brand 掛勾（brand.json 有值時 brand.mjs 會把它們
     打開）；gap 為 0 免得它們 hidden 時還占一格 gap。 */
  .login-brand{ display:flex; flex-direction:column; gap:4px; }
  .login-brand:empty, .login-brand:not(:has(:not([hidden]))){ display:none; }
  .login-brand-company{ font-size:var(--fs-sm); color:#73848E; letter-spacing:.06em; }
  .login-brand-name{ font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1.3; color:#4E5357; }
  /* 標題區：30px 產品名＋一行灰色引言，靠左——沒有卡片框之後置中對齊會讓長短不一的文字左右飄，
     靠左才有「排版過」的感覺。2026-09-15 走查：原本標題上面還有一行等寬字眉「STAR SHINING
     ENETEK」，使用者反饋 Logo 搬進卡片後兩者貼在一起、字樣重複，拿掉了（.login-eyebrow 規則
     一併移除）。 */
  .login-heading{ display:flex; flex-direction:column; gap:10px; }
  .login-title{ margin:0; font-size:30px; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:#3E3A39; }
  .login-lead{ margin:0; font-size:14px; line-height:1.6; color:#73848E; }
  /* 錯誤容器頁面載入時就要存在於 DOM（見下面 body 裡的 #loginError），這裡只負責樣式；
     min-height 讓它沒內容時也占住一行高度，錯誤出現/消失不會讓表單跳動。 */
  .login-error{ min-height:20px; color:#A8362A; font-size:var(--fs-sm); text-align:left; line-height:1.5; }
  /* 2026-09-14 登入頁精修：有內容時才長成一個帶底色的警示框（:not(:empty) 純 CSS 判斷，不用改
     login.mjs 的 JS——那邊本來就只是 textContent 塞字，DOM 結構沒變）。背景／邊框色沿用既有
     --crit／--crit-bg 的字面值（#A8362A／#F8E3DF），跟全站其他危險狀態配色一致，不是新配色。 */
  .login-error:not(:empty){
    padding:10px 12px; border-radius:6px; background:#F8E3DF; border:1px solid #F0C4BC;
  }
  .login-hint{ margin:0; text-align:left; color:#73848E; font-size:13px; }
  /* 2026-09-15 走查：原本這裡有一顆 .login-copyright 規則，貼閘門左下角顯示「© 年份 公司名稱」。
     先拿掉公司名稱（Logo 就在卡片最上方，重複兩次沒必要），使用者接著要求連「© 年份」也整行拿掉——
     版權列連同 HTML 裡的 <p class="login-copyright"> 一併移除，登入頁現在只有 Logo＋表單欄，
     沒有頁尾。 */

  /* 表單元素跟著 .login-gate 一起鎖定淺色，不吃全域 --surface-2/--ink/--line-strong 深色模式值——
     不然頁面鎖白了、輸入框卻還是深色模式的暗底，會變成白底上挖幾個黑洞。 */
  .login-gate .form-row{ gap:7px; }
  .login-gate .form-row > label{ color:#3E3A39; }
  .login-gate .form-row .hint{ color:#73848E; }
  /* 欄位改純白底（沒有白卡片之後，原本的 #F4F8FA 淡灰底在 #F5F7F8 的頁底上幾乎看不見框）；
     高度 46px、圓角 6px 是設計稿值，只在 .login-gate 範圍內覆寫，不動 var(--r-sm) 本身。 */
  .login-gate .form-control{ background:#FFFFFF; border-color:#D3DFE4; color:#141C21; height:46px; border-radius:6px; padding-left:14px; padding-right:14px; font-size:14px; }
  .login-gate .pv-password-field .form-control{ padding-right:44px; }
  .login-gate .form-control:focus-visible{ outline:2px solid #1AA1A9; outline-offset:1px; }
  .login-gate .pv-password-toggle{ color:#73848E; }
  .login-gate .pv-password-toggle:hover{ color:#3E3A39; }
  .login-gate .btn-primary{ background:#004B64; color:#FFFFFF; height:46px; border-radius:6px; font-size:15px; font-weight:600; }
  .login-gate .link-btn{ color:#004B64; }

  /* 窄螢幕：閘門本來就是文件流上下堆疊，只剩 Logo＋卡片這一疊置中，不用特別處理版面打架。 */
  @media (max-width:767px){
    .login-gate{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:40px; padding:32px 24px; overflow:auto; }
    /* 窄螢幕稍微縮小 Logo，align-self:flex-start 已經在基礎規則設好，不用在這裡重複。 */
    .login-logo{ height:34px; }
    .login-card{ width:100%; }
    /* 產品名 30px 在 375 寬會把「PowerVellance Console」切成兩行，縮到 26px 一行放得下。 */
    .login-title{ font-size:26px; }
  }

  /* ---------- RBAC 角色與管轄範圍（TASK-04a） ---------- */
  /* 使用者分頁的次級頁籤：直接沿用既有 .tabs/.tab 那組樣式（裝置分頁那排），只補一條下緣分隔線
     讓它跟下面的面板拉開，不新開一套頁籤語言。 */
  .sub-tabs{ border-bottom:1px solid var(--line); margin-bottom:16px; }

  /* 權限清單方案三：雙欄橫排包覆 (Split Row Box) */
  .perm-section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .perm-section-title{ font-weight:600; margin:0; font-size:var(--fs-md); color:var(--ink); }
  .perm-section-actions{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); }
  .btn-text-action{ background:none; border:none; padding:0; color:var(--accent); font-size:var(--fs-xs); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .btn-text-action:hover{ color:var(--ink); }
  .perm-action-sep{ color:var(--ink-faint); font-size:var(--fs-xs); }

  .perm-table-box{
    border:1px solid var(--line-strong, rgba(255,255,255,.15)); border-radius:var(--r-md); overflow:hidden;
    background:var(--surface); margin-bottom:8px;
  }
  .perm-table-hint{ font-size:var(--fs-xs); color:var(--ink-faint); margin:4px 0 16px; line-height:1.4; }
  .perm-group{
    display:flex; align-items:center; padding:10px 16px;
    border-bottom:1px solid var(--line); background:var(--surface);
    transition:background .15s;
  }
  .perm-group:last-child{ border-bottom:none; }
  .perm-group:hover{ background:rgba(255,255,255,.02); }
  .perm-left{
    width:140px; flex:none; display:flex; flex-direction:column; gap:3px;
  }
  .perm-group-name{
    font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  }
  .perm-group-selectall{
    display:inline-flex; align-items:center; gap:5px; font-weight:400; font-size:var(--fs-xs);
    color:var(--ink-faint); cursor:pointer; user-select:none;
  }
  .perm-group-selectall:hover{ color:var(--ink-soft); }
  .perm-group-selectall input{ width:auto; flex:none; cursor:pointer; accent-color:var(--accent); }
  .perm-group-selectall input:disabled{ cursor:not-allowed; }
  .perm-right{
    flex:1; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  }
  .perm-box-group{
    display:inline-flex; border:1px solid var(--line-strong, rgba(255,255,255,.2));
    border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,.05);
  }
  /* 每個權限按鈕連在同一個外框裡 */
  .pv-modal-row .perm-item{
    display:flex; align-items:center; gap:8px; margin:0; font-weight:400; font-size:var(--fs-sm);
    padding:8px 16px; color:var(--ink-soft); cursor:pointer;
    border-right:1px solid var(--line); border-radius:0; border-top:none; border-bottom:none; border-left:none;
    background:transparent; transition:all .15s; user-select:none;
  }
  .pv-modal-row .perm-item:last-child{ border-right:none; }
  .pv-modal-row .perm-item:hover{
    background:rgba(255,255,255,.06); color:var(--ink);
  }
  .pv-modal-row .perm-item:has(input:checked){
    background:var(--accent-warm-alpha-16); color:var(--ink); font-weight:500;
  }
  .perm-item input{ width:auto; flex:none; cursor:pointer; accent-color:var(--accent); }
  .perm-item.is-locked{ opacity:.45; cursor:not-allowed; }
  .pv-modal-row .perm-item.is-locked:hover{ background:transparent; }

  /* 管轄範圍的標籤多選：卡片化樣式，視覺 rhythm 一致 */
  .scope-tag-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
  .pv-modal-row .scope-tag-item{
    display:flex; align-items:center; gap:8px; margin:0; font-weight:400; font-size:var(--fs-sm);
    padding:6px 10px; border-radius:var(--r-md); border:1px solid var(--line);
    background:rgba(255,255,255,.03); cursor:pointer; transition:border-color .15s, background .15s;
    user-select:none;
  }
  .pv-modal-row .scope-tag-item:hover{
    border-color:var(--line-strong, rgba(255,255,255,.25));
    background:rgba(255,255,255,.06);
  }
  .pv-modal-row .scope-tag-item:has(input:checked){
    border-color:var(--accent);
    background:var(--accent-warm-alpha-10);
  }
  .scope-tag-item input{ width:auto; flex:none; cursor:pointer; }
  .scope-empty{ color:var(--ink-faint); font-size:var(--fs-sm); }

  /* 角色清單的權限摘要：一列可能十幾個鍵，限高 + 換行，不讓某一列把整張表撐爆。 */
  .role-perm-summary{ display:flex; flex-wrap:wrap; gap:4px; max-width:420px; }
  /* 「系統內建」徽章：既有 .inv-state 只定義了 ok／bad／warn 三個語意色，這一顆兩者都不是
     （不是好也不是壞，就是「這一列不能改」的中性事實），補一個中性變體吃 --neutral 那組。 */
  .inv-state.neutral{ background:var(--neutral-bg); color:var(--neutral); }