@layer pages {
/* ===== 帳號與權限頁（RBAC 2026-08-13：桌面 3-B / 手機 M1 chip）=====
   2026-08-15 家豪選定：頂欄改「變體 B 麵包屑式」——topbar 輕量化（← + 庫存 › 帳號與權限），
   頁面大標題下移到內容區左上、與左側 user-list 對齊 */
[data-page="permissions"] .perm-layout { display: flex; gap: 16px; padding: 16px 16px 90px; max-width: 1200px; margin: 0 auto; align-items: flex-start; }

/* 覆寫全域 .topbar：權限頁改麵包屑式（display flex + 較矮 padding） */
[data-page="permissions"] .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
[data-page="permissions"] .vb-back { flex-shrink: 0; }
[data-page="permissions"] .vb-crumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: rgba(255,255,255,0.85); margin-left: 12px; }
[data-page="permissions"] .vb-crumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
[data-page="permissions"] .vb-crumb a:hover { text-decoration: underline; }
[data-page="permissions"] .vb-crumb .sep { opacity: .5; }
[data-page="permissions"] .vb-crumb .vb-crumb-current { color: var(--c-white); font-weight: var(--fw-medium); }

/* 內容區上方頁面大標題（與 user-list 頂端對齊） */
[data-page="permissions"] .vb-content-title { max-width: 1200px; margin: 16px auto 0; padding: 0 16px; }
[data-page="permissions"] .vb-content-title h2 { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--c-text); }
[data-page="permissions"] .vb-content-title p { font-size: var(--fs-12); color: var(--c-muted); margin-top: 3px; }
[data-page="permissions"] .user-list { width: 250px; flex-shrink: 0; background: var(--c-white); border-radius: var(--r-lg); border: 1px solid var(--c-border); overflow: hidden; }
[data-page="permissions"] .user-list-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--c-surface-2); transition: background .15s; }
[data-page="permissions"] .user-list-item:last-child { border-bottom: none; }
[data-page="permissions"] .user-list-item:hover { background: var(--c-primary-soft); }
[data-page="permissions"] .user-list-item.is-active { background: var(--c-primary-soft); border-left: 3px solid var(--c-primary); }
[data-page="permissions"] .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary); color: var(--c-white); display: flex; align-items: center; justify-content: center; font-size: var(--fs-14); flex-shrink: 0; }
[data-page="permissions"] .user-avatar.is-inactive { background: var(--c-border-control); }
[data-page="permissions"] .user-meta { flex: 1; min-width: 0; }
[data-page="permissions"] .user-name { font-weight: var(--fw-medium); font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-page="permissions"] .user-name .me-tag { color: var(--c-border-control); font-size: var(--fs-12); font-weight: var(--fw-regular); }
[data-page="permissions"] .user-sub { font-size: var(--fs-12); color: var(--c-muted); margin-top: 2px; }
[data-page="permissions"] .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
[data-page="permissions"] .status-dot.is-active { background: var(--c-success); }
[data-page="permissions"] .status-dot.is-inactive { background: var(--c-danger); }

[data-page="permissions"] .perm-main { flex: 1; min-width: 0; }
[data-page="permissions"] .perm-panel { background: var(--c-white); border-radius: var(--r-lg); border: 1px solid var(--c-border); padding: 18px 20px; }
[data-page="permissions"] .panel-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
[data-page="permissions"] .panel-head .user-avatar { width: 44px; height: 44px; font-size: var(--fs-20); }
[data-page="permissions"] .panel-title { font-size: var(--fs-16); font-weight: var(--fw-bold); }
[data-page="permissions"] .panel-sub { font-size: var(--fs-12); color: var(--c-muted); margin-top: 2px; }

[data-page="permissions"] .tabs { display: flex; gap: 6px; margin: 14px 0 4px; border-bottom: 1px solid var(--c-border); }

[data-page="permissions"] .perm-group { margin-top: 12px; }
[data-page="permissions"] .perm-group-title { font-size: var(--fs-12); color: var(--c-border-control); font-weight: var(--fw-medium); margin-bottom: 6px; padding-left: 2px; }
[data-page="permissions"] .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
[data-page="permissions"] .perm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
[data-page="permissions"] .perm-row.locked { background: var(--c-surface-2); opacity: .75; }
[data-page="permissions"] .perm-label { font-size: var(--fs-13); }
[data-page="permissions"] .perm-label small { display: block; color: var(--c-border-control); font-size: var(--fs-11); margin-top: 1px; }
[data-page="permissions"] .perm-src { font-size: var(--fs-11); color: var(--c-border-control); margin-left: 8px; white-space: nowrap; }
[data-page="permissions"] .perm-src.override { color: var(--c-warning); }
[data-page="permissions"] .perm-src.role { color: var(--c-success); }
[data-page="permissions"] .perm-src.locked { color: var(--c-border-control); }

/* 開關（iOS 風格）——2026-08-14 修正紀錄：
   第一/二輪：transition 限縮→移除動畫（誤判為動畫殘影，無效）
   第三輪：transform→left（仍無效——因為根本不是動畫問題）
   第四輪（根因）：style.css 有行事曆設定頁的 .switch（button 結構，.switch::after 白圈 left:2px 不動），
   與本頁 label+slider 結構的 .switch class 撞名 → 每個開關多出一個永遠停在左邊的白圈（「左邊圓圈還存在」）！
   解法：覆寫 .switch::after 為 content:none，並清掉 style.css 的 label 背景 */
[data-page="permissions"] .switch::after { content: none; }
[data-page="permissions"] .switch { background: transparent; }
[data-page="permissions"] .switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
[data-page="permissions"] .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
[data-page="permissions"] .switch .slider { position: absolute; inset: 0; background: var(--c-border-strong); border-radius: var(--r-pill); transition: none; cursor: pointer; }
[data-page="permissions"] .switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--c-white); border-radius: 50%; transition: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
[data-page="permissions"] .switch input:checked + .slider { background: var(--c-primary); }
[data-page="permissions"] .switch input:checked + .slider::before { left: 21px; }
[data-page="permissions"] .switch input:disabled + .slider { cursor: not-allowed; opacity: .55; }

/* save-bar：2026-08-15 家豪選定方案 B——桌面+手機都是 fixed 底部底條（sticky），
   權限列多時按鈕常駐可見；內容區底部留 padding 防遮擋 */
[data-page="permissions"] .save-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--c-white); border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  padding: 10px 20px; z-index: var(--z-save-bar);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
[data-page="permissions"] .save-bar-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-page="permissions"] .save-hint { font-size: var(--fs-12); color: var(--c-border-control); }
[data-page="permissions"] .save-hint.is-changed { color: var(--c-warning); font-weight: var(--fw-medium); }
[data-page="permissions"] .save-btns { display: flex; gap: 8px; }

/* Permission feature sub-tabs, filters, and pagination */
[data-page="permissions"] .perm-subtabs { display:flex; gap:6px; margin:14px 0 12px; border-bottom:1px solid var(--c-border); }
[data-page="permissions"] .perm-toolbar { display:grid; gap:10px; margin-bottom:10px; }
[data-page="permissions"] .perm-search-label { font-size:var(--fs-12); color:var(--c-muted); }
[data-page="permissions"] .perm-search { width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--c-border-strong); border-radius:var(--r-sm); font-size:var(--fs-14); }
[data-page="permissions"] .perm-module-filter { display:flex; flex-wrap:wrap; gap:6px; }
[data-page="permissions"] .perm-list { display:grid; gap:8px; }
[data-page="permissions"] .perm-empty { padding:24px 12px; text-align:center; color:var(--c-border-control); border:1px dashed var(--c-border-strong); border-radius:var(--r-md); }
[data-page="permissions"] .perm-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; color:var(--c-muted); font-size:var(--fs-12); }
[data-page="permissions"] .perm-page-buttons { display:flex; align-items:center; gap:8px; }

/* 帳號設定 tab */
[data-page="permissions"] .account-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
[data-page="permissions"] .account-field { padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
[data-page="permissions"] .account-field .k { font-size: var(--fs-12); color: var(--c-border-control); }
[data-page="permissions"] .account-field .v { font-size: var(--fs-14); font-weight: var(--fw-medium); margin-top: 2px; }
[data-page="permissions"] .account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
[data-page="permissions"] .account-edit-field { margin-bottom: 12px; }
[data-page="permissions"] .account-edit-field label { display: block; font-size: var(--fs-12); color: var(--c-text-2); }
[data-page="permissions"] .account-edit-input, [data-page="permissions"] .account-edit-select { width: 100%; padding: 9px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font-size: var(--fs-14); margin-top: 4px; box-sizing: border-box; }

[data-page="permissions"] .warn-box { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-warning-soft); border: 1px solid var(--c-warning-border); font-size: var(--fs-12); color: var(--c-warning); }

/* 手機：chip 列（M1）取代左列表 */
[data-page="permissions"] .chip-bar { display: none; overflow-x: auto; gap: 8px; padding: 12px 16px 2px; scrollbar-width: none; }
[data-page="permissions"] .chip-bar::-webkit-scrollbar { display: none; }
[data-page="permissions"] .chip .status-dot { width: 7px; height: 7px; }
[data-page="permissions"] .chip.is-inactive { opacity: .6; }

@media (max-width: 767px) {
  [data-page="permissions"] .perm-layout { padding: 0 0 110px; }
  [data-page="permissions"] .user-list { display: none; }
  [data-page="permissions"] .chip-bar { display: flex; }
  [data-page="permissions"] .perm-main { padding: 0 12px 12px; }
  [data-page="permissions"] .perm-grid { grid-template-columns: 1fr; }
  [data-page="permissions"] .perm-pagination { align-items:stretch; flex-direction:column; }
  [data-page="permissions"] .perm-page-buttons { justify-content:space-between; }
  [data-page="permissions"] .perm-subtab { flex:1; }
  /* 2026-08-15 變體 B：手機 topbar 只留「← + 帳號與權限」，麵包屑「庫存 ›」隱藏；內容區大標題隱藏（topbar 已顯示，避免重複） */
  [data-page="permissions"] .topbar { padding: 10px 14px; }
  [data-page="permissions"] .vb-crumb { margin-left: 10px; font-size: var(--fs-14); }
  [data-page="permissions"] .vb-crumb a, [data-page="permissions"] .vb-crumb .sep { display: none; }
  [data-page="permissions"] .vb-content-title { display: none; }
  /* 2026-08-15 方案 B 手機版：save-bar 改 column——提示置中在上、雙鈕等寬在下 */
  [data-page="permissions"] .save-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); flex-direction: column; gap: 6px; }
  [data-page="permissions"] .save-bar-inner { flex-direction: column; gap: 6px; }
  [data-page="permissions"] .save-hint { font-size: var(--fs-11); text-align: center; width: 100%; }
  [data-page="permissions"] .save-btns { width: 100%; display: flex; gap: 8px; }
  [data-page="permissions"] .save-btns .btn-primary, [data-page="permissions"] .save-btns .btn-ghost { flex: 1; text-align: center; }
}

/* 新增帳號 modal（權限頁內嵌，沿用既有 modal 樣式） */
[data-page="permissions"] .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 16px; }
[data-page="permissions"] .modal-overlay.is-open { display: flex; }
[data-page="permissions"] .modal { background: var(--c-white); border-radius: var(--r-lg); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; padding: 18px; }
[data-page="permissions"] .modal h3 { margin: 0 0 14px; font-size: var(--fs-16); }
[data-page="permissions"] .cr-input, [data-page="permissions"] .cr-select { width: 100%; padding: 9px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font-size: var(--fs-14); margin-top: 4px; box-sizing: border-box; }
[data-page="permissions"] .cr-field { margin-bottom: 12px; }
[data-page="permissions"] .cr-field label { font-size: var(--fs-12); color: var(--c-text-2); }
[data-page="permissions"] .batch-textarea { width: 100%; min-height: 110px; padding: 9px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font-size: var(--fs-13); box-sizing: border-box; font-family: inherit; margin-top: 4px; }
[data-page="permissions"] .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
[data-page="permissions"] .batch-result { margin-top: 10px; font-size: var(--fs-12); max-height: 140px; overflow-y: auto; }
[data-page="permissions"] .batch-result .ok { color: var(--c-success); }
[data-page="permissions"] .batch-result .err { color: var(--c-danger); }

/* 帳號名稱旁的「（自己）」標記（原本是 JS inline style） */
[data-page="permissions"] .perm-self-tag { color: var(--c-text-subtle); font-size: var(--fs-12); }
}