@charset "UTF-8";
/* =====================================================================
   投資地圖後台管理系統 — 全站樣式
   房規對齊「台灣指數公司 TIP」style.css：原色階 + 語意 token + utility 層、
   多行格式、嚴格 BEM。色值沿用 InvestMap 設計系統（青藍主色、深海軍藍外框、
   AA 狀態色）。視覺與原型 1:1。
   ---------------------------------------------------------------------
   目錄
     0. Reset / Normalize
     1. Variables（Design Tokens）
     2. Base（html / body / scrollbar / a11y）
     3. Typography（標題、文字類別）
     4. Utilities（display / flex / gap / spacing）
     5. Layout（app shell：sidebar + header + main）
     6. Components – Sidebar
     7. Components – App Header（頂部列 + 使用者選單）
     8. Components – Page Head（頁內標題列 / 麵包屑）
     9. Components – Button
    10. Components – Badge / Tag
    11. Components – Card
    12. Components – Form / Input / Select / Textarea
    13. Components – Checkbox / Radio / Switch
    14. Components – Filter / Search panel / Multi-select / Segmented
    15. Components – Table / Pagination
    16. Components – Modal
    17. Components – Toast（全域）
    18. Components – Page Loading（全域）
    19. Components – Note / Empty State / Reject banner
    20. Page – Dashboard（KPI / 統計表 / 圖表）
    21. RWD（斷點收合）
   ===================================================================== */


/* =====================================================================
   0. Reset / Normalize
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
select,
textarea {
  font-family: inherit;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}


/* =====================================================================
   1. Variables（Design Tokens）
   ===================================================================== */
:root {
  /* --- Breakpoints（參考；@media 寫死）---
     sm: < 768px（手機）｜ md: 768–1199px（平板）｜ lg: ≥ 1200px（桌機）
     另外 sidebar 在 ≤ 760px 改抽屜（沿用原型斷點） */

  /* --- Spacing（4pt 制）------------------------------------------- */
  --space-0: 0;
  --space-2: 0.125rem;   /* 2  */
  --space-4: 0.25rem;    /* 4  */
  --space-6: 0.375rem;   /* 6  */
  --space-8: 0.5rem;     /* 8  */
  --space-10: 0.625rem;  /* 10 */
  --space-12: 0.75rem;   /* 12 */
  --space-14: 0.875rem;  /* 14 */
  --space-16: 1rem;      /* 16 */
  --space-18: 1.125rem;  /* 18 */
  --space-20: 1.25rem;   /* 20 */
  --space-22: 1.375rem;  /* 22 */
  --space-24: 1.5rem;    /* 24 */
  --space-28: 1.75rem;   /* 28 */
  --space-32: 2rem;      /* 32 */
  --space-40: 2.5rem;    /* 40 */
  --space-48: 3rem;      /* 48 */

  /* --- Radius ----------------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 999px;

  /* --- Icon Sizes ------------------------------------------------- */
  --icon-12: 0.75rem;
  --icon-14: 0.875rem;
  --icon-16: 1rem;
  --icon-18: 1.125rem;
  --icon-20: 1.25rem;
  --icon-22: 1.375rem;
  --icon-24: 1.5rem;

  /* --- Shadow ----------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(18, 41, 66, 0.06);
  --shadow-sm: 0 1px 3px rgba(18, 41, 66, 0.08);
  --shadow-md: 0 4px 12px rgba(18, 41, 66, 0.10);
  --shadow-lg: 0 12px 32px rgba(18, 41, 66, 0.16);
  --shadow-card-hover: 0 8px 18px rgba(18, 41, 66, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 126, 134, 0.20);

  /* --- Transition ------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* --- Z-index ---------------------------------------------------- */
  --z-overlay: 105;
  --z-header: 100;
  --z-sidebar: 110;
  --z-userpanel: 130;
  --z-dropdown: 30;
  --z-page-loading: 190;
  --z-modal: 200;
  --z-login: 2000;
  --z-toast: 9000;

  /* --- Color Palette（原色階）------------------------------------ */
  /* Teal（Primary 主色 — 青藍） */
  --teal-50:  #E6F3F4;
  --teal-100: #C7E6E8;
  --teal-200: #9BD2D6;
  --teal-300: #5FB4BA;
  --teal-400: #2A969E;
  --teal-500: #007E86;
  --teal-600: #00626A;
  --teal-700: #004E55;
  --teal-800: #003B41;
  --teal-900: #00262A;

  /* Navy（Secondary — 深海軍藍，側邊欄 / Header 外框） */
  --navy-50:  #F4F6F8;
  --navy-100: #E0E8F0;
  --navy-200: #BBCFE5;
  --navy-300: #8DB1D8;
  --navy-400: #5F95CE;
  --navy-500: #347AC4;
  --navy-600: #2765A7;
  --navy-700: #1F5186;
  --navy-800: #183D64;
  --navy-900: #122942;
  --navy-950: #0B1B30;

  /* Blue（Info — 沉穩藍） */
  --blue-50:  #E4F0FA;
  --blue-100: #C8E2F4;
  --blue-200: #93C6EA;
  --blue-300: #5DA9DF;
  --blue-400: #288DD5;
  --blue-500: #1A6FA8;
  --blue-600: #14598F;
  --blue-700: #114A75;
  --blue-800: #0C3A5C;
  --blue-900: #082A43;

  /* Green（Success — 常綠） */
  --green-50:  #E2F5E7;
  --green-100: #C3EBCF;
  --green-200: #97D9AC;
  --green-300: #63C081;
  --green-400: #33A557;
  --green-500: #1F8B3A;
  --green-600: #1B7E2E;
  --green-700: #156325;
  --green-800: #0F4A1C;
  --green-900: #093011;

  /* Yellow（Warning — 正黃，對齊原型 warning 色階） */
  --yellow-50:  #FFFBE6;
  --yellow-100: #FEF4B8;
  --yellow-200: #FCE981;
  --yellow-300: #F8DA45;
  --yellow-400: #F2C81C;
  --yellow-500: #DEB30C;
  --yellow-600: #B08608;
  --yellow-700: #947206;
  --yellow-800: #5E4804;
  --yellow-900: #3C2E03;

  /* Red（Danger — 朱紅） */
  --red-50:  #FDE7E7;
  --red-100: #FAC4C4;
  --red-200: #F29797;
  --red-300: #EA6A6A;
  --red-400: #E53935;
  --red-500: #D32F2F;
  --red-600: #C62828;
  --red-700: #A21E1E;
  --red-800: #7D1717;
  --red-900: #581010;

  /* Gray（Neutral — 藍調灰 Cool Gray） */
  --gray-50:  #F5F8FC;
  --gray-100: #EEF1F5;
  --gray-200: #DCE6F1;
  --gray-300: #C5D4E4;
  --gray-400: #9DAEC0;
  --gray-500: #6B7C8C;
  --gray-600: #46586A;
  --gray-700: #33485A;
  --gray-800: #22323F;
  --gray-900: #1B2B3A;

  --white: #FFFFFF;
  --black: #000000;

  /* --- Semantic Tokens（明暗式 5 階）-----------------------------
     base    ＝填色＋白字 / 白底 icon
     -strong ＝淺底上的深字 / hover（base 加深一階）
     -dark   ＝最深強調 / 數值
     -light  ＝淺底邊框 / 點綴
     -soft   ＝淺底面（badge / note / KPI 底）
     ─ Warning（黃）為特規：見下方說明。 */

  /* Primary（主色 / 行動色 — 青藍） */
  --color-primary:        var(--teal-600);
  --color-primary-strong: var(--teal-700);
  --color-primary-dark:   var(--teal-800);
  --color-primary-light:  var(--teal-200);
  --color-primary-soft:   var(--teal-50);
  --color-primary-solid:  var(--teal-500);  /* 品牌特例：logo / segmented 實心填色 */
  --color-primary-accent: var(--teal-400);  /* 品牌特例：作用中項目 icon */

  /* Secondary（深海軍藍 — 側邊欄 / Header） */
  --color-secondary:        var(--navy-700);
  --color-secondary-strong: var(--navy-800);
  --color-secondary-dark:   var(--navy-900);
  --color-secondary-darker:  var(--navy-950);
  --color-secondary-light:  var(--navy-600);
  --color-secondary-soft:    var(--navy-50);

  /* Info（沉穩藍） */
  --color-info:        var(--blue-600);
  --color-info-strong: var(--blue-700);
  --color-info-dark:   var(--blue-800);
  --color-info-light:  var(--blue-200);
  --color-info-soft:   var(--blue-50);

  /* Success（常綠） */
  --color-success:        var(--green-600);
  --color-success-strong: var(--green-700);
  --color-success-dark:   var(--green-800);
  --color-success-light:  var(--green-200);
  --color-success-soft:   var(--green-50);

  /* Warning（正黃 — 特規）：黃色明度高，任何黃色填充上的字 / 圖標一律用墨色
     （--color-warning-ink）；白底上要露出黃色文字 / 圖標時用 -strong 以上深黃。 */
  --color-warning:        var(--yellow-500);  /* base：填充 / 圓點 / icon（其上配墨字） */
  --color-warning-strong: var(--yellow-700);  /* 白底上可讀的黃字 / 圖標（4.5） */
  --color-warning-dark:   var(--yellow-800);  /* 淺底深字 / 徽章字（8.4） */
  --color-warning-light:  var(--yellow-300);  /* 亮黃：實心按鈕底（搭墨字，AAA） */
  --color-warning-soft:   var(--yellow-100);  /* 淺底面 */
  --color-warning-ink:    var(--color-text-strong);  /* 特規：黃上文字 / 圖標恆墨 */

  /* Danger（朱紅；base 沿用慣例 red-500，白字 4.98 達 AA） */
  --color-danger:        var(--red-500);
  --color-danger-strong: var(--red-700);
  --color-danger-dark:   var(--red-800);
  --color-danger-light:  var(--red-200);
  --color-danger-soft:   var(--red-50);

  /* Background / Surface */
  --color-bg-default: #F3F8FC;             /* 對齊原型 --bg */
  --color-bg-content: #F3F8FC;
  --color-bg-soft:    var(--gray-50);
  --color-bg-muted:   var(--gray-100);
  --color-surface:    var(--white);
  --color-surface-alt:var(--gray-50);
  --color-surface-emphasis: var(--gray-200);  /* 頭像底 / 實心中性塊 */

  /* 中性實心（時間軸灰點 / disabled 填色） */
  --color-neutral-solid: var(--gray-500);

  /* Text */
  --color-text-strong:   var(--gray-900);
  --color-text-default:  var(--gray-900);
  --color-text-soft:     var(--gray-600);
  --color-text-muted:    #5F6E7D;          /* 較 gray-500 略深，說明文字達 WCAG AA（5.2:1） */
  --color-text-disabled: var(--gray-400);
  --color-text-inverse:  var(--white);
  --color-text-primary:  var(--color-primary-strong);  /* 標題 / 連結（青藍深階） */
  --color-text-danger:   var(--color-danger);
  --color-text-success:  var(--color-success);

  /* Border */
  --color-border-default: var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-border-soft:    var(--gray-200);
  --color-border-hover:   var(--gray-400);  /* 捲軸 thumb hover 等 */
  --color-border-focus:   var(--color-primary-solid);

  /* Title（區塊 / 卡片標題） */
  --color-title: var(--color-primary-strong);

  /* 狀態徽章（柔底 + 深字，AA） */
  --color-status-gray-bg:    var(--color-bg-muted);     --color-status-gray-fg:    var(--color-text-soft);
  --color-status-info-bg:    var(--color-info-soft);    --color-status-info-fg:    var(--color-info-strong);
  --color-status-warning-bg: var(--color-warning-soft); --color-status-warning-fg: var(--color-warning-dark);   /* 黃底 -100 + 深黃字 8.4 */
  --color-status-success-bg: var(--color-success-soft); --color-status-success-fg: var(--color-success-strong);
  --color-status-danger-bg:  var(--color-danger-soft);  --color-status-danger-fg:  var(--color-danger-strong);

  /* Sidebar / Header 專用 */
  --sidebar-bg-start:   var(--navy-900);
  --sidebar-bg-end:     var(--navy-950);
  --sidebar-text:       var(--white);
  --sidebar-text-muted: rgba(255, 255, 255, 0.82);
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-border:     rgba(255, 255, 255, 0.07);
  --sidebar-width:      240px;
  --header-height:      60px;

  /* --- Typography（系統字庫，不附帶字型檔） ----------------------- */
  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
    "Microsoft JhengHei", "微軟正黑體", "Helvetica Neue",
    Arial, "Noto Sans TC", sans-serif;
  /* 數字沿用系統字（不再附 Roboto） */
  --font-num: var(--font-family);

  /* 字級（沿用 InvestMap 尺寸；命名採 TIP 房規） */
  --font-size-display: 1.875rem;  /* 30px — KPI 數字 */
  --font-size-h1:      1.5rem;    /* 24px — 頁面標題 */
  --font-size-h2:      1.375rem;  /* 22px */
  --font-size-h3:      1.25rem;   /* 20px — 區塊標題 */
  --font-size-h4:      1.125rem;  /* 18px — 卡片標題 */
  --font-size-body-m:  1rem;      /* 16px — 內文（預設） */
  --font-size-body-s:  0.875rem;  /* 14px — 次要文字 */
  --font-size-caption: 0.75rem;   /* 12px — 輔助說明 */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    600;
  --font-weight-heavy:   700;
}


/* =====================================================================
   2. Base
   ===================================================================== */
html,
body {
  font-family: var(--font-family);
  font-size: var(--font-size-body-m);
  line-height: 1.6;
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
}

.lni {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.1em;
}

/* 全域鍵盤聚焦樣式（滑鼠點擊不顯，鍵盤導覽才顯） */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 數字 / 編號（沿用 .num 慣例） */
.num {
  font-family: var(--font-num);
}

/* A11y：螢幕閱讀器專用文字 */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A11y：跳到主要內容 */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-toast);
  padding: var(--space-10) var(--space-18);
  background-color: var(--color-secondary-dark);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) 0;
  transform: translateY(-120%);
  transition: transform var(--transition-fast);
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* 自訂捲軸（body 淺灰底 / 容器白底，各自對齊） */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-round);
  border: 2px solid var(--color-bg-default);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover);
}
.table-wrap::-webkit-scrollbar-thumb {
  border-color: var(--color-surface);
}


/* =====================================================================
   3. Typography（文字類別）
   ===================================================================== */
.heading-1   { font-size: var(--font-size-h1); font-weight: var(--font-weight-heavy); line-height: 1.3; color: var(--color-title); letter-spacing: 0.5px; }
.heading-2   { font-size: var(--font-size-h2); font-weight: var(--font-weight-heavy); line-height: 1.3; color: var(--color-title); }
.heading-3   { font-size: var(--font-size-h3); font-weight: var(--font-weight-heavy); line-height: 1.4; color: var(--color-title); }
.heading-4   { font-size: var(--font-size-h4); font-weight: var(--font-weight-heavy); line-height: 1.4; color: var(--color-title); }
.text-body   { font-size: var(--font-size-body-m); font-weight: var(--font-weight-regular); line-height: 1.6; }
.text-body-s { font-size: var(--font-size-body-s); line-height: 1.6; }
.text-caption{ font-size: var(--font-size-caption); line-height: 1.5; }

.text-bold   { font-weight: var(--font-weight-bold); }
.text-medium { font-weight: var(--font-weight-medium); }

.text-primary { color: var(--color-text-primary) !important; }
.text-danger  { color: var(--color-text-danger)  !important; }
.text-success { color: var(--color-text-success) !important; }
.text-strong  { color: var(--color-text-strong)  !important; }
.text-default { color: var(--color-text-default) !important; }
.text-soft    { color: var(--color-text-soft)    !important; }
.text-muted   { color: var(--color-text-muted)   !important; }
.text-inverse { color: var(--color-text-inverse) !important; }

.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }
.text-nowrap { white-space: nowrap !important; }

.ellipsis-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}


/* =====================================================================
   4. Utilities
   ===================================================================== */
/* Display */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-grid         { display: grid !important; }

/* Flex */
.flex-row    { display: flex; flex-direction: row; }
.flex-col    { display: flex; flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1      { flex: 1 1 0%; min-width: 0; }
.flex-auto   { flex: 1 1 auto; }
.flex-none   { flex: 0 0 auto; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Gap */
.gap-4  { gap: var(--space-4); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }

/* Margin */
.m-0   { margin: 0 !important; }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Padding */
.p-0  { padding: 0 !important; }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }


/* =====================================================================
   5. Layout（app shell：sidebar + header + main）
   原型版型：固定頂部列（全寬，padding-left 讓位給 sidebar）+ 固定側邊欄 +
   主內容區（margin-left / margin-top 讓位）。
   ===================================================================== */
.layout {
  min-height: 100vh;
}

.layout__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(11, 27, 48, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.layout__main {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  padding: var(--space-24) var(--space-28);
  min-height: calc(100vh - var(--header-height));
  transition: margin-left var(--transition-base);
}


/* =====================================================================
   6. Components – Sidebar
   ===================================================================== */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 70%, #081428 100%),
    var(--sidebar-bg-end);
  transition: transform var(--transition-base);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/sidebar-map.svg") no-repeat;
  background-size: 118% auto;
  background-position-x: 50%;
  background-position-y: calc(100% + 150px);
  pointer-events: none;
}

.sidebar__brand {
  position: relative;
  z-index: 1;
  height: var(--header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 0 var(--space-18);
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar__logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--icon-20);
  background: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-strong));
  box-shadow: 0 3px 8px rgba(0, 126, 134, 0.35);
}
.sidebar__logo img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  display: block;
}
.sidebar__brand-name {
  font-size: var(--icon-16);
  font-weight: var(--font-weight-heavy);
  color: var(--white);
  letter-spacing: 1px;
  line-height: 1.15;
}
.sidebar__brand-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 2.5px;
  margin-top: 1px;
}

/* 側欄品牌：純文字（站名＋「後台系統」換行），深色側欄上白色呈現 */
.sidebar__brandtext {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.sidebar__brandtext-main {
  font-size: var(--icon-16);
  font-weight: var(--font-weight-heavy);
  color: var(--white);
  letter-spacing: 0.5px;
}
.sidebar__brandtext-sub {
  font-size: 12.5px;
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 3px;
  margin-top: 2px;
}

.sidebar__nav {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: var(--space-14) 0;
  overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border: 0; }

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-22);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-size-body-m);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sidebar__item-icon {
  font-size: var(--icon-18);
  width: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--transition-fast);
}
.sidebar__item:hover {
  background-color: var(--sidebar-item-hover);
  color: var(--white);
}
.sidebar__item:hover .sidebar__item-icon { color: rgba(255, 255, 255, 0.9); }
.sidebar__item:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: -2px; }
.sidebar__item.is-active {
  background: linear-gradient(90deg, rgba(0, 126, 134, 0.28) 0%, rgba(0, 126, 134, 0.04) 100%);
  color: var(--white);
  font-weight: var(--font-weight-bold);
  border-left-color: var(--color-primary-solid);
}
.sidebar__item.is-active .sidebar__item-icon { color: var(--color-primary-accent); }


/* =====================================================================
   7. Components – App Header（頂部列）
   ===================================================================== */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  padding-left: var(--sidebar-width);
  background-color: var(--color-surface);
  background-image: url("../images/header-map.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% center;
  border-bottom: 1px solid var(--color-border-default);
  box-shadow: 0 1px 2px rgba(18, 41, 66, 0.05);
  transition: padding-left var(--transition-base);
}
.app-header__toggle {
  width: 42px;
  height: 42px;
  margin-left: var(--space-16);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--icon-18);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.app-header__toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-soft);
}
.app-header__spacer { flex: 1; }
.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-18);
  padding-right: var(--space-24);
}

/* 使用者選單 */
.user-menu {
  position: relative;
}
.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-round);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background-color var(--transition-fast);
}
.user-menu__trigger:hover { background-color: var(--color-secondary-soft); }
.user-menu__trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.user-menu__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-surface-emphasis);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--icon-22);
  border: 1px solid var(--color-border-default);
}
.user-menu__name { font-size: var(--font-size-body-m); font-weight: var(--font-weight-bold); color: var(--color-secondary-strong); }
.user-menu__arrow { font-size: var(--font-size-body-m); color: var(--color-text-muted); }

.user-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 214px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  padding: var(--space-14);
  display: none;
  z-index: var(--z-userpanel);
  cursor: default;
}
.user-menu__panel.is-open { display: block; }
.user-menu__info {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: var(--space-12);
  margin-bottom: 11px;
  border-bottom: 1px solid var(--color-border-default);
}
.user-menu__info-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-18);
}
.user-menu__info-name { display: block; font-size: var(--font-size-body-m); color: var(--color-text-default); font-weight: var(--font-weight-bold); }
.user-menu__info-role { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.06em; }
.user-menu__logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-10);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-bold);
  transition: var(--transition-fast);
}
.user-menu__logout:hover { color: var(--color-primary); border-color: var(--color-primary-light); background-color: var(--color-primary-soft); }


/* =====================================================================
   8. Components – Page Head（頁內標題列 / 麵包屑）
   ===================================================================== */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-20);
  flex-wrap: wrap;
}
.page-head__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heavy);
  color: var(--color-title);
  letter-spacing: 0.5px;
}
.page-head__desc {
  font-size: var(--font-size-body-s);
  color: var(--color-text-soft);
  margin-top: 5px;
}
.page-head__actions {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-text-soft); cursor: pointer; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__current { color: var(--color-text-default); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text-soft);
  font-size: var(--font-size-body-s);
  cursor: pointer;
  padding: var(--space-8) var(--space-14);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}
.back-link:hover { color: var(--color-primary); border-color: var(--color-primary-light); background-color: var(--color-primary-soft); }


/* =====================================================================
   9. Components – Button
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
}
.btn > .lni { font-size: var(--icon-16); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled,
.btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* Sizes */
.btn--sm { padding: var(--space-6) var(--space-12); font-size: var(--font-size-body-s); }
.btn--lg { padding: var(--space-12) var(--space-24); font-size: var(--font-size-h4); }
.btn--block { display: flex; width: 100%; }

/* 變體 */
.btn--primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--white); }
.btn--primary:hover { background-color: var(--color-primary-strong); border-color: var(--color-primary-strong); }

.btn--outline { background-color: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-soft); }
.btn--outline:hover { color: var(--color-primary); border-color: var(--color-primary-light); background-color: var(--color-primary-soft); }

.btn--secondary { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--white); }
.btn--secondary:hover { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); }

.btn--danger { background-color: var(--color-danger); border-color: var(--color-danger); color: var(--white); }
.btn--danger:hover { background-color: var(--color-danger-strong); border-color: var(--color-danger-strong); }

.btn--success { background-color: var(--color-success); border-color: var(--color-success); color: var(--white); }
.btn--success:hover { background-color: var(--color-success-strong); border-color: var(--color-success-strong); }

/* Warning：亮黃底 + 深字（黃底黑字對比達 AAA，較白字更易讀也更「正黃」） */
.btn--warning { background-color: var(--color-warning-light); border-color: var(--color-warning-light); color: var(--color-warning-ink); }
.btn--warning:hover { background-color: var(--color-warning); border-color: var(--color-warning); color: var(--color-warning-ink); }

.btn--text { background-color: transparent; border-color: transparent; color: var(--color-primary); padding: var(--space-10); }
.btn--text:hover { background-color: var(--color-primary-soft); }

/* Loading 狀態 */
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--white);
  animation: spin 0.7s linear infinite;
}
.btn--outline.is-loading::after,
.btn--text.is-loading::after { color: var(--color-primary); }
.btn--warning.is-loading::after { color: var(--color-text-strong); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 表格列內操作鈕 */
/* 表格列操作鈕：彩色外框（邊框＝字色），每個功能一個語意色；
   hover 以該色填滿配白字。各色 rest / hover 皆達 WCAG AA。
   功能對應：檢視=灰、編輯=主色青藍、送審=資訊藍、審核=成功綠、
   分案=金黃、刪除=危險紅。 */
.table-action {
  --ta-color: var(--color-text-soft);   /* 各變體只需覆寫這個變數，邊框＝字色 */
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-12);
  background-color: var(--color-surface);
  border: 1px solid var(--ta-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  color: var(--ta-color);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
  white-space: nowrap;   /* 按鈕文字不換行 */
}
.table-action:hover { background-color: var(--ta-color); border-color: var(--ta-color); color: var(--white); }
.table-action:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.table-action--view   { --ta-color: var(--color-text-soft); }    /* 檢視：中性灰 */
.table-action--edit   { --ta-color: var(--color-primary); }      /* 編輯：主色青藍 */
.table-action--submit,                                            /* 送審/重新送審 */
.table-action--review { --ta-color: var(--color-info); }         /* 審核：同送審＝資訊藍（同屬覆核流程） */
.table-action--assign,                                              /* 分案／撤回 */
.table-action--warn   { --ta-color: var(--color-warning-strong); }  /* 警示動作（分案／撤回／重設密碼）：深金黃（白底框/字、hover 白字皆達 AA 4.5） */
.table-action--danger { --ta-color: var(--color-danger-strong); }  /* 刪除：危險紅 */

/* 純文字連結鈕 */
.btn-link {
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-body-s);
  cursor: pointer;
  text-decoration: underline;
}


/* =====================================================================
   10. Components – Badge / Tag
   ===================================================================== */
.badge {
  display: inline-block;
  padding: 3px var(--space-10);
  border-radius: var(--radius-round);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--gray    { background-color: var(--color-status-gray-bg);    color: var(--color-status-gray-fg); }
.badge--info    { background-color: var(--color-status-info-bg);    color: var(--color-status-info-fg); }
.badge--warning { background-color: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.badge--success { background-color: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.badge--danger  { background-color: var(--color-status-danger-bg);  color: var(--color-status-danger-fg); }
.badge--strong  { background-color: var(--color-danger); color: var(--white); }
.badge--hot     { background-color: var(--color-danger); color: var(--white); animation: badge-pulse 1.8s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* 機構標籤（資誠／貿協）：刻意與「狀態 badge」區隔——白底、方角、色框＋前置色點 */
.org-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 2px var(--space-8);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-soft);
  line-height: 1.5;
  white-space: nowrap;
}
.org-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: currentColor;
}
.org-tag--pwc    { color: var(--color-info-strong);    border-color: var(--color-info-light); }
.org-tag--taitra { color: var(--color-success-strong); border-color: var(--color-success-light); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--space-8);
  background-color: var(--color-bg-muted);
  color: var(--color-text-soft);
  font-size: var(--font-size-caption);
  border-radius: var(--radius-sm);
}
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}


/* =====================================================================
   11. Components – Card
   ===================================================================== */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-14) var(--space-20);
  border-bottom: 1px solid var(--color-border-default);
}
.card__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-title);
}
.card__title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background-color: var(--color-primary);
}
.card__note { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.card__body { padding: var(--space-18) var(--space-20); }
.card__body--flush { padding: 0; }


/* =====================================================================
   12. Components – Form / Input / Select / Textarea
   ===================================================================== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-22);
  margin-bottom: var(--space-16);
}
.form-row:last-child { margin-bottom: 0; }
.form-row--single { grid-template-columns: 1fr; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.form-group--full { grid-column: 1 / -1; }
.form-group__label {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.form-group__required { color: var(--color-danger); }
.form-group__hint { font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.5; }
.form-group__error { display: none; font-size: var(--font-size-caption); color: var(--color-danger); }
.form-group.is-error .form-group__error { display: block; }
.form-group__readonly { padding: var(--space-8) 0; font-size: var(--font-size-body-m); color: var(--color-text-default); font-weight: var(--font-weight-medium); }

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: var(--space-10) var(--space-12);
  font-size: var(--font-size-body-s);
  color: var(--color-text-default);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--color-text-muted); }
.input:focus,
.select:focus,
.textarea:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.input:disabled,
.select:disabled,
.textarea:disabled { background-color: var(--color-bg-muted); color: var(--color-text-disabled); cursor: not-allowed; border-color: var(--color-border-default); }
.textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.form-group.is-error .input,
.form-group.is-error .select,
.form-group.is-error .textarea { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-status-danger-bg); }

/* Input with icon */
.input-wrap { position: relative; }
.input-wrap__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--icon-16);
}
.input-wrap__icon--left  { left: var(--space-12); }
.input-wrap__icon--right { right: var(--space-8); pointer-events: auto; cursor: pointer; background: none; border: none; padding: var(--space-6); }
.input-wrap__icon--right:hover { color: var(--color-text-soft); }
.input-wrap__icon--right:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
/* 密碼「隱藏」狀態：在 lni-eye 上疊斜線（lineicons 4.0 無 eye-off glyph） */
.input-wrap__icon--right.is-off::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 -1.5px 0 var(--color-surface);
}
.input-wrap--has-left  .input { padding-left: 38px; }  /* 38px：左側圖示留位 */
.input-wrap--has-right .input { padding-right: 38px; } /* 38px：右側圖示留位 */


/* =====================================================================
   13. Components – Checkbox / Radio / Switch
   ===================================================================== */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-body-s);
  color: var(--color-text-soft);
}
.checkbox__input,
.radio__input { position: absolute; opacity: 0; width: 1.125rem; height: 1.125rem; margin: 0; }
.checkbox__box,
.radio__box {
  position: relative;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--color-border-strong);
  background-color: var(--color-surface);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.checkbox__box { border-radius: var(--radius-xs); }
.radio__box { border-radius: 50%; }
.checkbox__input:checked + .checkbox__box { background-color: var(--color-primary); border-color: var(--color-primary); }
.checkbox__input:checked + .checkbox__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox__input:indeterminate + .checkbox__box { background-color: var(--color-primary); border-color: var(--color-primary); }
.checkbox__input:indeterminate + .checkbox__box::after {
  content: "";
  position: absolute;
  left: 3px; top: 7px;
  width: 10px; height: 2px;
  background-color: var(--white);
}
.radio__input:checked + .radio__box { border-color: var(--color-primary); }
.radio__input:checked + .radio__box::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.checkbox__input:focus-visible + .checkbox__box,
.radio__input:focus-visible + .radio__box { box-shadow: var(--shadow-focus); }
.checkbox__input:disabled + .checkbox__box,
.radio__input:disabled + .radio__box { background-color: var(--color-bg-muted); border-color: var(--color-border-default); cursor: not-allowed; }
.checkbox__input:checked:disabled + .checkbox__box { background-color: var(--color-text-disabled); border-color: var(--color-text-disabled); }
.radio__input:checked:disabled + .radio__box { background-color: var(--color-surface); border-color: var(--color-text-disabled); }
.radio__input:checked:disabled + .radio__box::after { background-color: var(--color-text-disabled); }
.checkbox__input:disabled ~ .checkbox__label,
.radio__input:disabled ~ .radio__label { color: var(--color-text-disabled); cursor: not-allowed; }
.checkbox__label,
.radio__label { font-size: var(--font-size-body-s); color: var(--color-text-soft); }

/* 原生小勾選（表格全選等沿用 accent-color） */
.checkbox-native { width: 14px; height: 14px; accent-color: var(--color-primary); cursor: pointer; }

/* Switch / Toggle */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  user-select: none;
}
.switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  background-color: var(--color-border-strong);
  border-radius: var(--radius-round);
  transition: background-color var(--transition-base);
  flex-shrink: 0;
}
.switch__track::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px;
  height: 18px;
  background-color: var(--white);
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.switch__input:checked + .switch__track { background-color: var(--color-success); }
.switch__input:checked + .switch__track::before { transform: translateX(22px); }
.switch__input:focus-visible + .switch__track { box-shadow: var(--shadow-focus); }
.switch__input:disabled + .switch__track { opacity: 0.5; cursor: not-allowed; }
.switch__label { font-size: var(--font-size-body-s); color: var(--color-text-soft); white-space: nowrap; }


/* =====================================================================
   14. Components – Filter / Search panel / Multi-select / Segmented
   ===================================================================== */
.filter {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-18) var(--space-20);
  margin-bottom: var(--space-20);
  display: flex;
  align-items: flex-end;
  gap: var(--space-18);
  flex-wrap: wrap;
}
.filter__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 190px;
}
.filter__label { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); color: var(--color-text-default); }
.filter__control { position: relative; }
.filter__control .input,
.filter__control .select { padding: var(--space-10) var(--space-12); }
.filter__control-icon {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--icon-16);
}
.filter__actions { display: flex; gap: var(--space-10); flex-shrink: 0; }

/* 區段快捷鈕（segmented） */
.segmented {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.segmented__btn {
  padding: var(--space-8) var(--space-14);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-round);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--font-size-body-s);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.segmented__btn:hover { border-color: var(--color-primary-light); color: var(--color-primary-strong); }
.segmented__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.segmented__btn.is-active { background-color: var(--color-primary-solid); border-color: var(--color-primary-solid); color: var(--white); }

/* 搜尋面板 */
.search-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-20) var(--space-22);
  margin-bottom: var(--space-18);
}
.search-panel__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16) var(--space-22);
  margin-bottom: var(--space-16);
}
.search-panel__row--2 { grid-template-columns: repeat(2, 1fr); }
.search-panel__row--4 { grid-template-columns: repeat(4, 1fr); }
.search-panel__field { display: flex; flex-direction: column; gap: var(--space-6); }
.search-panel__label { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); color: var(--color-text-default); }
.search-panel__radios { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center; padding-top: var(--space-8); }
.search-panel__actions { display: flex; justify-content: center; gap: var(--space-10); padding-top: var(--space-4); }

/* 日期輸入框（單一輸入框 ＋ 月曆圖標，搭 Air Datepicker；單日或 range 區間）
   全站時間區間統一用此模式：<div class="input-date"><input data-datepicker="range"><i class="...input-date__icon"></div> */
.input-date { position: relative; }
.input-date .input { width: 100%; padding-right: 36px; }
.input-date__icon {
  position: absolute;
  right: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--icon-16);
}

/* 日期區間：起訖兩框 + 中間「~」連接（兩框由 data-range-start／-end 連動防呆）*/
.input-daterange {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.input-daterange .input-date { flex: 1 1 0; min-width: 0; }
.input-daterange__sep {
  flex: none;
  color: var(--color-text-muted);
  user-select: none;
}
@media (max-width: 480px) {
  .input-daterange { flex-wrap: wrap; }
  .input-daterange .input-date { flex: 1 1 100%; }
  .input-daterange__sep { display: none; }
}

/* 唯讀檢視：被 App.lockForm 設為 readonly 的輸入呈現灰底不可改 */
.input.is-readonly,
.select.is-readonly,
.textarea.is-readonly {
  background-color: var(--color-bg-muted);
  color: var(--color-text-soft);
  cursor: default;
}

/* 唯讀情境的頁面提示橫幅（檢視模式／已下架／案件已結案等）*/
.readonly-banner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  padding: var(--space-10) var(--space-14);
  border: 1px solid var(--color-info);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background-color: var(--color-info-soft);
  color: var(--color-info-strong);
  font-size: var(--font-size-body-s);
}
.readonly-banner__icon { font-size: var(--icon-16); flex: none; }

/* 名額上限：不限 / 限制 [數字] 人 */
.quota-field {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.quota-field__num { width: 90px; }
.quota-field__unit { color: var(--color-text-soft); }
.quota-field__num:disabled { background-color: var(--color-bg-muted); color: var(--color-text-disabled); }

/* 已下架名單唯讀：鎖報到開關、隱藏編輯鈕（勾選與匯出仍可用）*/
.table.is-roster-locked .switch { pointer-events: none; opacity: .55; }
.table.is-roster-locked [data-edit] { display: none; }

/* 批次操作浮列 */
.batch-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-18);
  background-color: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-primary-light);
}
.batch-bar.is-show { display: flex; }
.batch-bar__info { display: flex; align-items: center; gap: var(--space-12); font-size: var(--font-size-body-s); color: var(--color-text-default); }

/* 狀態篩選頁籤 Tabs */
.tabs {
  display: flex;
  flex-wrap: nowrap;        /* 不換行 */
  overflow-x: auto;         /* 過長時可左右滾動 */
  border-bottom: 1px solid var(--color-border-default);
  margin-bottom: var(--space-18);
  scrollbar-width: none;    /* 隱藏捲軸（Firefox） */
}
.tabs::-webkit-scrollbar { display: none; }  /* 隱藏捲軸（WebKit） */
.tab {
  flex-shrink: 0;
  white-space: nowrap;
  padding: var(--space-10) var(--space-18);
  font-size: var(--font-size-body-s);
  color: var(--color-text-soft);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-family: inherit;
}
.tab:hover { color: var(--color-primary); }
.tab:focus-visible { outline: none; color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-heavy); }


/* =====================================================================
   15. Components – Table / Pagination
   ===================================================================== */
.table-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-card__toolbar {
  padding: var(--space-14) var(--space-18);
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.table-card__toolbar-left { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; }
.table-card__toolbar-right { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-m);   /* 一般表格內文 16px（表頭另設小字） */
}
.table thead { background-color: var(--color-primary-soft); }
.table thead th {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-caption);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border-default);
  white-space: nowrap;
}
.table td {
  padding: var(--space-14) var(--space-16);
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: middle;
}
.table tbody tr:hover td { background-color: var(--color-bg-soft); }
.table tbody tr:last-child td { border-bottom: none; }
.table .is-summary td { background-color: var(--color-primary-soft); font-weight: var(--font-weight-heavy); color: var(--color-primary-dark); }
.table .col-check { width: 36px; }
.table.is-nobatch .col-check { display: none; }   /* 無批次權限（承辦／督導）時隱藏勾選欄 */
.table__actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-8); justify-content: flex-end; align-items: center; }
.is-text-right { text-align: right !important; }
.is-text-center { text-align: center !important; }

/* 報名名單（單一活動）：固定表頭 ＋ 凍結前欄的寬表；不分頁，第一屏約 10 筆高、其餘捲動 */
.table-wrap--sticky { max-height: 658px; overflow: auto; }   /* 表頭 48 + 10 列 × 61 */
.table--roster {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1860px;
  font-size: var(--font-size-body-m);
}
.table--roster thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--color-primary-soft);
}
.table--roster th,
.table--roster td { white-space: nowrap; border-bottom: 1px solid var(--color-border-default); }
.table--roster tbody td { background-color: var(--color-surface); }
.table--roster tbody tr:hover td { background-color: var(--color-primary-soft); }
/* 凍結欄（左側 4 欄） */
.table--roster .col-sticky { position: sticky; z-index: 2; background-color: var(--color-surface); }
.table--roster thead .col-sticky { z-index: 6; background-color: var(--color-primary-soft); }
.col-sticky--1 { left: 0; width: 46px; min-width: 46px; text-align: center; }
.col-sticky--2 { left: 46px; width: 142px; min-width: 142px; text-align: center; }
.col-sticky--3 { left: 188px; width: 64px; min-width: 64px; }
.col-sticky--4 { left: 252px; width: 116px; min-width: 116px; box-shadow: 6px 0 8px -6px rgba(16, 42, 67, 0.18); }

/* 報到開關文字（未報到／已報到） */
.switch__label--checkin { min-width: 3.5em; }
.switch__input:checked ~ .switch__label--checkin { color: var(--color-success-strong); font-weight: var(--font-weight-bold); }

/* 工具列統計數字 */
.roster-stat { font-size: var(--font-size-body-s); color: var(--color-text-soft); }
.roster-stat b { color: var(--color-primary-strong); font-size: var(--font-size-body-m); font-weight: var(--font-weight-heavy); }
.roster-stat--muted { color: var(--color-text-muted); }

/* 統計表（dashboard 區域 × 項目） */
.stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-s);
}
.stat-table thead th {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-caption);
  padding: var(--space-12) var(--space-14);
  text-align: center;
  border-bottom: 1px solid var(--color-border-default);
}
.stat-table thead th:first-child { text-align: left; }
.stat-table td { padding: var(--space-12) var(--space-14); text-align: center; border-bottom: 1px solid var(--color-border-default); font-family: var(--font-num); }
.stat-table td:first-child { text-align: left; font-family: var(--font-family); color: var(--color-text-default); }
.stat-table tbody tr:hover td { background-color: var(--color-bg-soft); }
.stat-table .is-total td { background-color: var(--color-primary-soft); font-weight: var(--font-weight-heavy); color: var(--color-primary-dark); border-bottom: none; }

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-14) var(--space-18);
  border-top: 1px solid var(--color-border-default);
  font-size: var(--font-size-body-s);
  color: var(--color-text-soft);
  flex-wrap: wrap;
  gap: var(--space-10);
}
.pagination b { font-family: var(--font-num); }
.pagination__list { display: flex; gap: var(--space-4); }
.pagination__item {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-s);
  cursor: pointer;
  color: var(--color-text-soft);
  font-family: var(--font-num);
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination__item:hover:not(.is-active):not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pagination__item.is-active { background-color: var(--color-primary); color: var(--white); border-color: var(--color-primary); }
.pagination__item:disabled { opacity: 0.45; pointer-events: none; }
.pagination__gap { min-width: 24px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); }


/* =====================================================================
   16. Components – Modal
   ===================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px var(--space-20); /* 60px：彈窗距頂定位偏移（版面定位，非元件間距） */
  overflow-y: auto;
  background-color: rgba(11, 27, 48, 0.55);
}
.modal.is-open { display: flex; }
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modal-in 0.2s ease;
}
.modal--sm .modal__dialog { max-width: 440px; }
.modal--lg .modal__dialog { max-width: 720px; }
.modal--xl .modal__dialog { max-width: 960px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-22);
  border-bottom: 1px solid var(--color-border-default);
}
.modal__title {
  font-size: var(--icon-16);
  font-weight: var(--font-weight-heavy);
  color: var(--color-title);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.modal__close {
  border: none;
  background: transparent;
  font-size: var(--icon-18);
  color: var(--color-text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal__close:hover { background-color: var(--color-bg-muted); color: var(--color-text-default); }
.modal__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.modal__body { padding: var(--space-22); display: flex; flex-direction: column; gap: var(--space-16); }
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-22);
  border-top: 1px solid var(--color-border-default);
  background-color: var(--color-bg-soft);
}
/* modal 內欄位 */
.modal-field { display: flex; flex-direction: column; gap: var(--space-6); }
.modal-field > label { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); color: var(--color-text-default); }
/* 表單格線（modal 內多欄位） */
.form-grid { display: grid; gap: var(--space-14); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.modal-field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid--2 { grid-template-columns: 1fr; } }
.modal-note { font-size: var(--font-size-caption); line-height: 1.7; border-radius: var(--radius-sm); padding: var(--space-10) var(--space-14); }
.modal-note--info    { background-color: var(--color-info-soft);    border-left: 3px solid var(--color-info);    color: var(--color-info-strong); }
.modal-note--warning { background-color: var(--color-warning-soft); border-left: 3px solid var(--color-warning); color: var(--color-warning-dark); }
.modal-note--success { background-color: var(--color-success-soft); border-left: 3px solid var(--color-success); color: var(--color-success-dark); }
.modal-note--primary { background-color: var(--color-primary-soft);  border-left: 3px solid var(--color-primary-solid);  color: var(--color-primary-dark); }
/* 刪除確認 */
.confirm { display: flex; gap: var(--space-14); align-items: flex-start; }
.confirm__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-danger-soft);
  color: var(--color-danger-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-20);
}
.confirm__icon--warning { background-color: var(--color-warning-soft); color: var(--color-warning-dark); }
.confirm__icon--success { background-color: var(--color-success-soft); color: var(--color-success-strong); }
.confirm__text { font-size: var(--font-size-body-s); color: var(--color-text-default); line-height: 1.7; }


/* =====================================================================
   17. Components – Toast（全域，由 main.js 建立）
   ===================================================================== */
.toast-container {
  position: fixed;
  top: var(--space-18);
  right: var(--space-18);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: 360px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  min-width: 280px;
  padding: var(--space-12) var(--space-14) var(--space-12) var(--space-16);
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in 0.22s ease;
}
.toast.is-leaving { animation: toast-out 0.22s ease forwards; }
.toast--success { border-left-color: var(--color-success); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--danger,
.toast--error { border-left-color: var(--color-danger); }
.toast__icon { font-size: var(--icon-20); line-height: 1.3; flex-shrink: 0; color: var(--color-info); }
.toast--success .toast__icon { color: var(--color-success); }
.toast--warning .toast__icon { color: var(--color-warning-strong); }  /* 白底圖標：鮮黃 base 對比不足，用深黃 */
.toast--danger .toast__icon,
.toast--error .toast__icon { color: var(--color-danger); }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: var(--font-size-body-s); font-weight: var(--font-weight-heavy); color: var(--color-text-default); line-height: 1.4; }
.toast__msg { font-size: var(--font-size-caption); color: var(--color-text-soft); line-height: 1.6; margin-top: 2px; }
.toast__close { border: none; background: none; color: var(--color-text-muted); cursor: pointer; font-size: var(--icon-16); padding: 2px; flex-shrink: 0; line-height: 1; }
.toast__close:hover { color: var(--color-text-default); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }


/* =====================================================================
   18. Components – Page Loading（全頁遮罩，由 main.js 控制）
   ===================================================================== */
.page-loading {
  position: fixed;
  inset: 0;
  z-index: var(--z-page-loading);
  background-color: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
}
.page-loading.is-show { display: flex; }
.page-loading__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}


/* =====================================================================
   19. Components – Note / Empty State / Reject banner
   ===================================================================== */
.note {
  display: flex;
  gap: var(--space-12);
  background-color: var(--color-info-soft);
  border: 1px solid var(--color-info-light);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-sm);
  padding: var(--space-14) var(--space-16);
}
.note__icon { color: var(--color-info); font-size: var(--icon-18); flex-shrink: 0; margin-top: 1px; }
.note__body { font-size: var(--font-size-caption); color: var(--color-text-soft); line-height: 1.85; }
.note__body b { color: var(--color-info-strong); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-48) var(--space-20);
  text-align: center;
}
.empty-state__icon { font-size: 42px; color: var(--color-border-strong); }
.empty-state__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); color: var(--color-text-soft); }
.empty-state__hint { font-size: var(--font-size-body-s); color: var(--color-text-muted); }

.reject-banner {
  display: flex;
  gap: var(--space-14);
  background-color: var(--color-danger-soft);
  border: 1px solid var(--color-danger-light);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-14) var(--space-18);
  margin-bottom: var(--space-18);
}
.reject-banner__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-danger);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-16);
  flex-shrink: 0;
}
.reject-banner__title { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); color: var(--color-danger-strong); margin-bottom: var(--space-6); }
.reject-banner__reason { font-size: var(--font-size-caption); color: var(--color-text-default); background-color: var(--color-surface); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-12); line-height: 1.7; }


/* =====================================================================
   19.5 Components – Timeline（審核軌跡 / 處理時間軸）
   每個歷程一個 .timeline__item，圓點內含狀態圖示，顏色依語意：
   primary 青＝建立草稿 / info 藍＝送審推進 / success 綠＝指派 /
   warning 黃＝退回修改 / danger 紅＝駁回終結 / gray 灰＝前台收件。
   圓點上的白色圖示與背景皆維持 ≥3:1 圖形對比（淺色階加深一階）。
   ===================================================================== */
.timeline {
  position: relative;
  padding-left: 2px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: var(--color-border-default);
}
.timeline__item {
  display: flex;
  gap: var(--space-14);
  padding: var(--space-8) 0;
  position: relative;
}
.timeline__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--font-size-body-s);
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--color-surface);
  background-color: var(--color-neutral-solid);
}
.timeline__dot--primary { background-color: var(--color-primary); }
.timeline__dot--info    { background-color: var(--color-info); }
.timeline__dot--success { background-color: var(--color-success); }
.timeline__dot--warning { background-color: var(--color-warning-light); color: var(--color-warning-ink); }  /* 亮黃底（同按鈕）＋墨圖標 */
.timeline__dot--danger  { background-color: var(--color-danger); }
.timeline__dot--gray    { background-color: var(--color-neutral-solid); }
.timeline__body { flex: 1; min-width: 0; padding-top: 2px; }
.timeline__title { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); color: var(--color-text-default); }
.timeline__meta { font-size: var(--font-size-caption); color: var(--color-text-muted); font-family: var(--font-num); margin-top: 1px; }
.timeline__note {
  font-size: var(--font-size-caption);
  color: var(--color-text-soft);
  background-color: var(--color-bg-soft);
  border-left: 3px solid var(--color-border-strong);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  margin-top: var(--space-6);
  line-height: 1.6;
}
/* 退回歷程的意見框：紅底紅線 */
.timeline__item--rejected .timeline__note {
  background-color: var(--color-danger-soft);
  border-left-color: var(--color-danger);
  color: var(--color-danger-strong);
}


/* =====================================================================
   20. Page – Dashboard（KPI / 統計圖表）
   ===================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-22);
}
.kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid;
  border-radius: 14px;
  padding: var(--space-18) var(--space-20);
  transition: transform 0.2s, box-shadow 0.2s;
}
.kpi > div { position: relative; z-index: 1; }
.kpi::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -36px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.kpi:hover { transform: translateY(-3px); }
.kpi__icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-24);
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 9px -5px rgba(11, 27, 48, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.kpi__label { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); margin-bottom: 5px; }
.kpi__value { font-size: 33px; font-weight: 800; font-family: var(--font-num); line-height: 1; }
.kpi__value small { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); margin-left: 3px; opacity: 0.6; }
.kpi--intake  { background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface)); border-color: var(--color-primary-light); }
.kpi--intake .kpi__icon  { color: var(--color-primary); }
.kpi--intake .kpi__label { color: var(--color-primary-strong); }
.kpi--intake .kpi__value { color: var(--color-primary-dark); }
.kpi--pending { background: linear-gradient(135deg, var(--color-warning-soft), var(--color-surface)); border-color: var(--color-warning-light); }
.kpi--pending .kpi__icon  { color: var(--color-warning-strong); }  /* 淺黃面：深黃圖標才達對比 */
.kpi--pending .kpi__label { color: var(--color-warning-dark); }
.kpi--pending .kpi__value { color: var(--color-warning-dark); }
.kpi--process { background: linear-gradient(135deg, var(--color-info-soft), var(--color-surface)); border-color: var(--color-info-light); }
.kpi--process .kpi__icon  { color: var(--color-info); }
.kpi--process .kpi__label { color: var(--color-info-strong); }
.kpi--process .kpi__value { color: var(--color-info-dark); }
.kpi--done { background: linear-gradient(135deg, var(--color-success-soft), var(--color-surface)); border-color: var(--color-success-light); }
.kpi--done .kpi__icon  { color: var(--color-success); }
.kpi--done .kpi__label { color: var(--color-success-strong); }
.kpi--done .kpi__value { color: var(--color-success-dark); }

/* 雙軌 KPI（督導 7 格）：左＝總收件 hero（撐滿高度）；右＝資誠／貿協 兩列各三態 */
.kpi-dual {
  display: grid;
  grid-template-columns: minmax(190px, 240px) 1fr;
  gap: var(--space-16);
  margin-bottom: var(--space-22);
}
.kpi--hero {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-10);
}
.kpi--hero .kpi__icon { width: 56px; height: 56px; }
.kpi--hero .kpi__value { font-size: 46px; margin-top: var(--space-2); }
.kpi--hero .kpi__label { margin-bottom: 0; font-size: var(--font-size-body-m); }
.kpi-dual__orgs { display: flex; flex-direction: column; gap: var(--space-14); }
.kpi-org2__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-strong);
  margin-bottom: var(--space-8);
}
.kpi-org2__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
@media (max-width: 720px) {
  .kpi-dual { grid-template-columns: 1fr; }
  .kpi-org2__cards { grid-template-columns: 1fr; }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-20);
  align-items: start;
}
.dashboard-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
}
/* Chart.js 圖表容器（父層需有固定高度，canvas 填滿） */
.chart-box {
  position: relative;
  width: 100%;
}

/* 儀表板問卷統計：圖表格（2 等欄，每格一張卡） */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-18);
  align-items: start;
}
.chart-grid > .note { margin: 0; }

/* 落地支援：環形量規群（Chart.js mini doughnut + 中央百分比） */
.gauge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-12) 0 var(--space-2);
}
.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 84px;
}
.gauge__ring {
  position: relative;
  width: 84px;
  height: 84px;
}
.gauge__pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-strong);
  font-family: var(--font-num);
}
.gauge__label {
  font-size: var(--font-size-caption);
  color: var(--color-text-soft);
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 1080px) {
  .chart-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   20.8 Page – Workflow（流程權責設定：步驟條 + 關卡卡 + 帳號池）
   ===================================================================== */
/* 流程步驟條 */
.flow-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-18);
  margin-bottom: var(--space-18);
}
.flow-step { display: flex; align-items: center; gap: var(--space-10); }
.flow-step__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--white);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flow-step--end .flow-step__dot { background-color: var(--color-success); }
.flow-step__text b { display: block; font-size: var(--font-size-body-s); color: var(--color-title); line-height: 1.2; }
.flow-step__text i { font-style: normal; font-size: var(--font-size-caption); color: var(--color-text-muted); }
.flow-step__arrow { color: var(--color-border-strong); font-size: var(--icon-18); margin: 0 var(--space-2); }

/* 關卡卡 */
.stage-list { display: flex; flex-direction: column; gap: var(--space-8); }
.stage {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stage__head {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-12) var(--space-20);
  border-bottom: 1px solid var(--color-border-default);
  background-color: var(--color-bg-soft);
}
.stage__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--white);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stage__headinfo { flex: 1; min-width: 0; }
.stage__name { font-size: var(--font-size-h4); font-weight: var(--font-weight-heavy); color: var(--color-title); }
.stage__meta { font-size: var(--font-size-caption); color: var(--color-text-muted); margin-top: 2px; }
.stage__count {
  flex-shrink: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-soft);
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-round);
  padding: var(--space-4) var(--space-12);
  white-space: nowrap;
}
.stage__count b { color: var(--color-primary); font-family: var(--font-num); }
.stage__body { padding: var(--space-16) var(--space-20); }
.stage-connector { display: flex; align-items: center; justify-content: center; padding: var(--space-2) 0; color: var(--color-text-disabled); }
.stage-connector .lni { font-size: var(--icon-20); }

/* 帳號池列 */
.acct-list { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-12); }
.acct {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-14);
  background-color: var(--color-secondary-soft);   /* 輔色系（navy）淡底 */
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
.acct__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-secondary);        /* 輔色系實心頭像 */
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-body-s);
  flex-shrink: 0;
}
.acct__info { flex: 1; min-width: 0; }
.acct__name { font-size: var(--font-size-body-s); font-weight: var(--font-weight-bold); color: var(--color-secondary-strong); }
.acct__id { font-size: var(--font-size-caption); color: var(--color-text-muted); font-family: var(--font-num); }
/* 移除鈕：與上傳檔案項目一致（有框 icon＋文字、hover 轉危險紅） */
.acct__del {
  flex-shrink: 0;
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-caption);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  transition: var(--transition-fast);
}
.acct__del:hover { border-color: var(--color-danger); color: var(--color-danger); }
.acct-add { display: flex; gap: var(--space-10); align-items: center; flex-wrap: wrap; }
.acct-add .select { flex: 1; min-width: 180px; }

/* 運作說明小提示 */
.run-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-12);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  background-color: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-12);
  line-height: 1.65;
}
.run-note .lni { color: var(--color-warning-strong); font-size: var(--icon-14); flex-shrink: 0; margin-top: 1px; }

/* 流程權責：資誠／貿協 雙軌並排（手機版堆疊）*/
.wf-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: start;
}
.wf-track { min-width: 0; }
.wf-track__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-strong);
  margin-bottom: var(--space-12);
}
/* 承辦小組分群（每組各自一個可加入帳號的池）*/
.acct-group { margin-top: var(--space-16); }
.acct-group:first-of-type { margin-top: 0; }
.acct-group__title {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-soft);
  margin-bottom: var(--space-8);
}
@media (max-width: 900px) {
  .wf-tracks { grid-template-columns: 1fr; }
}

/* 表單底部儲存列 */
.form-savebar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
  margin-top: var(--space-14);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-default);
}


/* =====================================================================
   20.9 Page – Event Edit / Review（活動編輯／審核：收合卡 + 富文本 + 附件 + 審核意見）
   ===================================================================== */
/* 可收合卡（審核軌跡等） */
.card--collapsible > .card__head { cursor: pointer; user-select: none; }
.card__toggle {
  color: var(--color-text-muted);
  font-size: var(--icon-20);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.card.is-collapsed > .card__head { border-bottom-color: transparent; }
.card.is-collapsed .card__toggle { transform: rotate(-90deg); }
.card.is-collapsed > .card__body { display: none; }

/* 編輯卡群間距 */
.edit-stack { display: flex; flex-direction: column; gap: var(--space-18); }

/* 富文本編輯器（示意；contenteditable） */
.rich {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rich__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-default);
}
.rich__btn {
  border: none;
  background-color: transparent;
  min-width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-soft);
  font-size: var(--icon-14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rich__btn:hover { background-color: var(--color-bg-muted); color: var(--color-text-default); }
.rich__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rich__select {
  border: none;
  background-color: transparent;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-soft);
  font-size: var(--font-size-body-s);
  padding: 0 var(--space-6);
}
.rich__sep { width: 1px; height: 18px; background-color: var(--color-border-default); margin: 0 var(--space-4); }
.rich__area {
  padding: var(--space-14) var(--space-16);
  min-height: 150px;
  font-size: var(--font-size-body-m);
  line-height: 1.75;
  color: var(--color-text-default);
}
.rich__area:focus { outline: none; }
.rich__area p { margin-bottom: var(--space-8); }
.rich__area[contenteditable="false"] { background-color: var(--color-bg-soft); cursor: default; }

/* 附件上傳列 + 列表 */
.upload-row { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; }
.attachment-list { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); }
.attachment {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-14);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
.attachment__icon { color: var(--color-danger); font-size: var(--icon-18); flex-shrink: 0; }
.attachment__name { font-size: var(--font-size-body-s); color: var(--color-text-default); flex: 1; min-width: 0; }
.attachment__size { font-size: var(--font-size-caption); color: var(--color-text-muted); font-family: var(--font-num); flex-shrink: 0; }
.attachment__btn {
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-caption);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.attachment__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.attachment__btn--danger:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* 主管審核意見區（info 淡藍底，突出於白色表單卡群） */
.review-box {
  background-color: var(--color-info-soft);
  border: 1px solid var(--color-info-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-18) var(--space-20);
}
.review-box__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-title);
}
.review-box__desc {
  font-size: var(--font-size-body-s);
  color: var(--color-text-soft);
  line-height: 1.75;
  margin: var(--space-10) 0 var(--space-12);
}
.review-box__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
  margin-top: var(--space-14);
  flex-wrap: wrap;
}

/* =====================================================================
   20.10 詳情頁（諮詢申請）— 兩欄佈局 ＋ 唯讀答案值
   ===================================================================== */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-18);
  align-items: start;
}
.detail-grid__main { display: flex; flex-direction: column; gap: var(--space-18); min-width: 0; }
.detail-grid__side { display: flex; flex-direction: column; gap: var(--space-18); }
@media (max-width: 1024px) { .detail-grid { grid-template-columns: 1fr; } }

/* 唯讀答案值（前台申請書內容，後台僅檢視不可改） */
.readonly-val {
  margin-top: var(--space-6);
  padding: var(--space-10) var(--space-14);
  background-color: var(--color-bg-soft);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-m);
  color: var(--color-text-default);
  line-height: 1.7;
}
.readonly-val--link { color: var(--color-text-primary); }
.readonly-val--note { font-weight: var(--font-weight-regular); white-space: pre-line; }

/* 詳情卡內的區段小標（如「回覆內容」「結案說明與結案報告」分隔）*/
.detail-subhead {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-strong);
  margin-bottom: var(--space-12);
}
.detail-subhead--divider {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-default);
}


/* =====================================================================
   20.11 角色權限 — 權限分組清單（列表）＋ 權限矩陣（modal）
   ===================================================================== */
/* 角色列表的權限分組顯示 */
.perm-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-28); }
.perm-list .pg-title { font-size: var(--font-size-body-s); color: var(--color-title); font-weight: var(--font-weight-bold); margin-bottom: var(--space-6); }
.perm-list .pg-items { padding-left: var(--space-16); list-style: disc; color: var(--color-text-soft); font-size: var(--font-size-body-s); line-height: 1.85; }
.perm-list .pg-items li::marker { color: var(--color-primary); }
@media (max-width: 640px) { .perm-list { grid-template-columns: 1fr; } }

/* 角色描述（列表內，名稱下方） */
.role-desc { font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.5; margin: var(--space-4) 0 var(--space-8); }

/* 新增 / 編輯角色 modal 的權限矩陣 */
.perm-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body-s); }
.perm-table th,
.perm-table td { padding: var(--space-8) var(--space-10); text-align: center; border-bottom: 1px solid var(--color-border-default); }
.perm-table th:first-child,
.perm-table td:first-child { text-align: left; white-space: nowrap; }
.perm-table thead th { background-color: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: var(--font-weight-bold); }
.perm-table .pm-allcol { display: block; font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); color: var(--color-primary); cursor: pointer; margin-top: 2px; }
.perm-table .pm-allcol:hover { text-decoration: underline; }
.perm-table .pm-na { color: var(--color-text-disabled); }


/* =====================================================================
   20.12 通知 — header 鈴鐺 ＋ 下拉預覽 ＋ 通知中心列表
   ===================================================================== */
/* header 鈴鐺 */
.app-header__bell { position: relative; }
.app-header__bell-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-round);   /* 圓形框 */
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--icon-18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.app-header__bell-btn:hover { color: var(--color-primary); border-color: var(--color-primary-light); background-color: var(--color-primary-soft); }
.app-header__bell-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.app-header__bell-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-round);
  background-color: var(--color-danger);
  color: var(--white);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-num);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface);
}
.app-header__bell-badge[hidden] { display: none; }   /* 無未讀時確實隱藏（覆蓋上方 display:flex） */

/* 下拉預覽 */
.notif-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 372px;
  max-width: 88vw;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  display: none;
  z-index: var(--z-userpanel);
  overflow: hidden;
}
.notif-pop.is-open { display: block; }
.notif-pop__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border-default); }
.notif-pop__head b { font-size: var(--font-size-body-m); color: var(--color-title); }
.notif-pop__list { max-height: 380px; overflow-y: auto; }
.notif-pop__empty { padding: var(--space-24); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-body-s); }
.notif-pop__foot { padding: var(--space-10); text-align: center; border-top: 1px solid var(--color-border-default); }
.notif-pop__foot a { font-size: var(--font-size-body-s); color: var(--color-primary); font-weight: var(--font-weight-bold); }

/* 下拉項目（精簡；button 重設為滿寬左對齊） */
.notif-row { display: flex; width: 100%; gap: var(--space-10); padding: var(--space-12) var(--space-16); border: none; border-bottom: 1px solid var(--color-border-default); background-color: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: var(--transition-fast); text-decoration: none; }
.notif-row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background-color: var(--color-bg-soft); }
.notif-row.is-unread { background-color: var(--color-info-soft); }
.notif-row__ic { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--icon-16); }
.notif-row__bd { flex: 1; min-width: 0; }
.notif-row__ttl { font-size: var(--font-size-body-s); color: var(--color-text-default); font-weight: var(--font-weight-bold); line-height: 1.4; }
.notif-row__time { font-size: var(--font-size-caption); color: var(--color-text-muted); font-family: var(--font-num); margin-top: 3px; }

/* 通知中心頁列表 */
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; gap: var(--space-14); padding: var(--space-16) var(--space-18); border-bottom: 1px solid var(--color-border-default); }
.notif-item:last-child { border-bottom: none; }
.notif-item.is-unread { background-color: var(--color-info-soft); }
.notif-item__ic { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--icon-18); }
.notif-item__bd { flex: 1; min-width: 0; }
.notif-item__row { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-4); }
.notif-item__row b { font-size: var(--font-size-body-m); color: var(--color-text-default); }
.notif-item__desc { font-size: var(--font-size-body-s); color: var(--color-text-soft); line-height: 1.6; }
.notif-item__time { font-size: var(--font-size-caption); color: var(--color-text-muted); font-family: var(--font-num); margin-top: var(--space-6); }
.notif-item__actions { display: flex; flex-direction: column; gap: var(--space-6); flex-shrink: 0; align-items: flex-end; justify-content: center; }
@media (max-width: 640px) {
  .notif-item { flex-wrap: wrap; }
  .notif-item__actions { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* 圖示底色（tone）— 下拉與通知中心共用 */
.notif-tone-warning { background-color: var(--color-warning-soft); color: var(--color-warning-dark); }
.notif-tone-danger  { background-color: var(--color-danger-soft);  color: var(--color-danger-strong); }
.notif-tone-info    { background-color: var(--color-info-soft);    color: var(--color-info-strong); }
.notif-tone-success { background-color: var(--color-success-soft); color: var(--color-success-strong); }
.notif-tone-gray    { background-color: var(--color-bg-muted);     color: var(--color-text-soft); }

/* 手機版：下拉改貼齊視窗、左右留邊自適應，避免被切 */
@media (max-width: 640px) {
  .notif-pop {
    position: fixed;
    top: calc(var(--header-height) + 6px);
    left: var(--space-12);
    right: var(--space-12);
    width: auto;
    max-width: none;
  }
}


/* =====================================================================
   20.5 Vendor 覆寫 — Tom Select（多選 + 搜尋）
   把 Tom Select 外觀對齊我們的設計 token；對應原生 .select/.input 質感。
   ===================================================================== */
.ts-wrapper { min-width: 0; }
.ts-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;                    /* 已選項目垂直置中 */
  min-height: 42px;                       /* 對齊 input 高度（16px 字 + 上下 padding） */
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-body-s);
  color: var(--color-text-default);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  gap: var(--space-4);
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control { cursor: pointer; }
.ts-control input { font-size: var(--font-size-body-s); color: var(--color-text-default); }
.ts-control input::placeholder { color: var(--color-text-muted); }
/* 已有選取項目時，不再顯示 placeholder（沒選才出現） */
.ts-wrapper.has-items .ts-control input::placeholder { color: transparent; }
.ts-wrapper.focus .ts-control { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.ts-wrapper.disabled .ts-control { background-color: var(--color-bg-muted); color: var(--color-text-disabled); cursor: not-allowed; }
/* 已選標籤（multi） */
.ts-wrapper.multi .ts-control > .item {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-8);
  font-size: var(--font-size-caption);
}
.ts-wrapper.multi .ts-control > .item.active { background-color: var(--color-primary); color: var(--white); border-color: var(--color-primary); }
.ts-wrapper.multi .ts-control > .item .remove { border-left-color: var(--color-primary-light); padding: 0 var(--space-6); }
.ts-wrapper.multi .ts-control > .item .remove:hover { background-color: var(--color-primary-light); }
/* 下拉面板 */
.ts-dropdown {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background-color: var(--color-surface);
}
.ts-dropdown .option {
  font-size: var(--font-size-body-s);
  color: var(--color-text-default);
  padding: var(--space-8) var(--space-10);
}
.ts-dropdown .option.active { background-color: var(--color-bg-soft); color: var(--color-primary-strong); }
.ts-dropdown .option:hover { background-color: var(--color-bg-soft); }
.ts-dropdown .optgroup-header { color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); }
.ts-dropdown .no-results { color: var(--color-text-muted); font-size: var(--font-size-body-s); padding: var(--space-8) var(--space-10); }


/* =====================================================================
   20.6 Vendor 覆寫 — Air Datepicker（月曆）
   以 --adp-* 變數對齊設計 token（沿用 TIP 房規所用之套件）。
   ===================================================================== */
.air-datepicker {
  --adp-font-family: var(--font-family);
  --adp-color: var(--color-text-default);
  --adp-color-secondary: var(--color-text-muted);
  --adp-accent-color: var(--color-primary);
  --adp-background-color-hover: var(--color-bg-soft);
  --adp-background-color-active: var(--color-bg-muted);
  --adp-border-color: var(--color-border-default);
  --adp-border-color-inner: var(--color-border-soft);
  --adp-border-radius: var(--radius-md);
  --adp-cell-border-radius: var(--radius-sm);
  --adp-color-current-date: var(--color-primary);
  --adp-cell-background-color-selected: var(--color-primary);
  --adp-cell-background-color-selected-hover: var(--color-primary-strong);
  --adp-cell-background-color-in-range: var(--color-primary-soft);
  --adp-cell-background-color-in-range-hover: var(--color-primary-light);
  --adp-cell-border-color-in-range: var(--color-primary-soft);
  --adp-day-name-color: var(--color-primary);
  --adp-color-disabled: var(--color-text-disabled);
  --adp-nav-color-secondary: var(--color-text-muted);
  --adp-nav-arrow-color: var(--color-text-soft);
  --adp-btn-color: var(--color-primary);
  --adp-btn-color-hover: var(--color-primary-strong);
  --adp-btn-background-color-hover: var(--color-bg-soft);
  box-shadow: var(--shadow-lg);
}


/* =====================================================================
   20.7 Components – File Upload（單檔 / 多檔，原生 JS）
   ===================================================================== */
.file-upload { display: flex; flex-direction: column; gap: var(--space-10); }
/* 行內變體：輸入框 + 按鈕（單檔，不需拖放） */
.file-upload__control { display: flex; gap: var(--space-10); align-items: center; }
.file-upload__filename { flex: 1; min-width: 0; cursor: default; background-color: var(--color-bg-soft); }
.file-upload__btn { flex-shrink: 0; }
.file-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-24) var(--space-20);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.file-upload__dropzone:hover,
.file-upload__dropzone.is-dragover { border-color: var(--color-primary); background-color: var(--color-primary-soft); color: var(--color-primary-strong); }
.file-upload__dropzone:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.file-upload__icon { font-size: 28px; color: var(--color-primary); }
.file-upload__text { font-size: var(--font-size-body-s); }
.file-upload__text b { color: var(--color-primary); }
.file-upload__hint { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.file-upload__input { display: none; }
.file-upload__list { display: flex; flex-direction: column; gap: var(--space-8); }
.file-upload__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-14);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}
.file-upload__item-icon { font-size: var(--icon-18); color: var(--color-primary); flex-shrink: 0; }
.file-upload__item-name { font-size: var(--font-size-body-s); color: var(--color-text-default); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload__item-size { font-size: var(--font-size-caption); color: var(--color-text-muted); font-family: var(--font-num); flex-shrink: 0; }
.file-upload__item-remove {
  flex-shrink: 0;
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-caption);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  transition: var(--transition-fast);
}
.file-upload__item-remove:hover { border-color: var(--color-danger); color: var(--color-danger); }
.file-upload__item-remove:focus-visible { outline: none; box-shadow: var(--shadow-focus); }


/* =====================================================================
   21. RWD（斷點收合）
   ===================================================================== */
/* 桌機：點漢堡 → 整個側邊欄收合，header / main 補滿 */
body.sidebar-hidden .sidebar { transform: translateX(-100%); }
body.sidebar-hidden .app-header { padding-left: 0; }
body.sidebar-hidden .layout__main { margin-left: 0; }

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1180px) {
  .search-panel__row--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .search-panel__row,
  .search-panel__row--2,
  .search-panel__row--4 { grid-template-columns: 1fr; }
}

/* 平板 + 行動裝置（≤1199）：側邊欄改覆蓋式抽屜 + 遮罩（平板比照手機）
   桌機（≥1200）維持固定側欄 + 漢堡推擠收合（body.sidebar-hidden）。 */
@media (max-width: 1199px) {
  .app-header { padding-left: 0; }
  .layout__main { margin-left: 0; }
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  body.sidebar-open .layout__overlay { opacity: 1; visibility: visible; }
}

/* 行動裝置專屬微調（≤760） */
@media (max-width: 760px) {
  .layout__main { padding: var(--space-18); }
  /* 使用者選單收成「只剩頭像」：gap 歸零、隱藏非頭像葉節點、padding 等寬使 hover 為正圓 */
  .user-menu__trigger { gap: 0; padding: var(--space-4); border-radius: 50%; }
  .user-menu__name,
  .user-menu__arrow { display: none; }
  /* 行動版頁籤：字小一點、padding 收窄（搭配 .tabs 可橫向滾動） */
  .tab { font-size: var(--font-size-caption); padding: var(--space-10) var(--space-12); }
  .kpi-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .toast-container { left: var(--space-12); right: var(--space-12); max-width: none; }
  .toast { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}