/* =========================================================================
   VAC 主題（DemoVAC 步驟 1-1、1-2、1-3、1-5、1-6、1-8）
   外觀照 demo（VAC_DataCenter_程式_20260928 web/src/styles/app.css），各區段標註來源行號。

   設計原則（照 demo app.css 檔頭）：
   - 色彩取自機關徽記並柔化：主色 #3F55A3（星芒藍）、點綴 #C9A24D（徽記金）、警示 #B94A50、成功 #3A8363。
     元件內不寫死色碼，一律用 --c-* 變數。
   - 一組系統字型（不載入網頁字型）；字重只用 400／600／700。
   - 使用者年紀偏大：基準字級 17px，最小約 15px。
   - 只有淺色主題。

   注意：Falcon 是以 --falcon- 前綴編譯的 Bootstrap 5.2，demo 用的 --bs-* 元件變數在這裡一律改寫成 --falcon-*
   （例：--bs-btn-bg → --falcon-btn-bg）。Falcon 的 theme.min.css 是第三方檔，不要改，樣式都寫在這裡。
   ========================================================================= */

/* ─────────────────────────────────────────────
   變數（app.css :21-138）
   ───────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* 字體與字級 */
  --font: "Microsoft JhengHei UI", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", "Heiti TC", system-ui, sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  --fs-xs: .875rem;    /* 約 15px：最小字級 */
  --fs-sm: .9412rem;   /* 約 16px：表格、標籤、次要按鈕 */
  --fs-md: 1rem;       /* 17px：內文、按鈕、輸入框 */
  --fs-lg: 1.125rem;   /* 約 19px：卡片標題 */
  --fs-xl: 1.3rem;     /* 約 22px：頁面標題 */
  --fs-num: 1.9rem;    /* 彙總數字 */

  /* 主色（徽記藍，柔化） */
  --c-primary: #3f55a3;
  --c-primary-hover: #34498f;
  --c-primary-active: #2c3e7b;
  --c-primary-soft: #edf0fa;
  --c-primary-line: #c8d0ec;
  --c-primary-text: #33478c;

  /* 點綴（徽記金，柔化） */
  --c-gold: #c9a24d;
  --c-gold-soft: #faf5e8;
  --c-gold-line: #e6d3a3;
  --c-gold-text: #7a5b16;

  /* 語意色 */
  --c-success: #3a8363;
  --c-success-hover: #316f54;
  --c-success-soft: #eaf4ef;
  --c-success-line: #bfdccd;
  --c-success-text: #2d6b51;

  --c-danger: #b94a50;
  --c-danger-hover: #a23f45;
  --c-danger-soft: #fbeeef;
  --c-danger-line: #efc5c8;
  --c-danger-text: #9e3c42;

  --c-warning: #d6a04a;
  --c-warning-hover: #c58e38;
  --c-warning-soft: #fcf4e4;
  --c-warning-line: #eed5a5;
  --c-warning-text: #7d5812;

  --c-neutral: #6f7a8c;
  --c-neutral-hover: #5e687a;

  /* 介面底色與文字 */
  --c-bg: #f4f6fa;
  --c-surface: #ffffff;
  --c-surface-2: #f7f9fc;
  --c-head: #eef2f8;
  --c-border: #e1e6ee;
  --c-border-strong: #cdd4df;
  --c-text: #2b3445;
  --c-text-muted: #697386;
  --c-text-faint: #99a2b1;

  /* 側欄（柔和深藍） */
  --c-side-top: #36497d;
  --c-side-bottom: #2d3d6b;
  --c-side-text: #e9edf6;
  --c-side-muted: #b8c2d8;
  --c-side-hover: rgba(255, 255, 255, .08);
  --c-side-active: rgba(255, 255, 255, .15);

  /* 形狀 */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(30, 45, 90, .05), 0 4px 12px rgba(30, 45, 90, .04);
  --shadow-lg: 0 12px 36px rgba(30, 45, 90, .18);
  --focus-ring: 0 0 0 .2rem rgba(63, 85, 163, .2);

  --sidebar-w: 280px;
  --topbar-h: 68px;

  /* 捲軸 */
  --scroll-thumb: #cdd3dd;
  --scroll-thumb-hover: #a3acba;
  --scroll-inner-thumb: #dde2ea;
  --scroll-inner-thumb-hover: #b3bccb;
  --scroll-side-thumb: rgba(255, 255, 255, .18);
  --scroll-side-thumb-hover: rgba(230, 211, 163, .6);

  /* 對應 Falcon（demo 是 --bs-*，這裡是 --falcon-*） */
  --falcon-font-sans-serif: var(--font);
  --falcon-body-font-family: var(--font);
  --falcon-body-font-size: var(--fs-md);
  --falcon-body-line-height: 1.6;
  --falcon-body-color: var(--c-text);
  --falcon-body-bg: var(--c-bg);
  --falcon-border-color: var(--c-border);
  --falcon-link-color: var(--c-primary);
  --falcon-link-hover-color: var(--c-primary-hover);
  --falcon-primary: #3f55a3;
  --falcon-primary-rgb: 63, 85, 163;
  --falcon-secondary: #6f7a8c;
  --falcon-secondary-rgb: 111, 122, 140;
  --falcon-success: #3a8363;
  --falcon-success-rgb: 58, 131, 99;
  --falcon-danger: #b94a50;
  --falcon-danger-rgb: 185, 74, 80;
  --falcon-warning: #d6a04a;
  --falcon-warning-rgb: 214, 160, 74;
  --falcon-info: #3f55a3;
  --falcon-info-rgb: 63, 85, 163;
}

/* ─────────────────────────────────────────────
   基礎（app.css :141-172）
   ───────────────────────────────────────────── */
html { font-size: 17px; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, optgroup, h1, h2, h3, h4, h5, h6,
.btn, .form-control, .form-select, .tooltip, .popover, .toast, .dropdown-menu, .modal, code,
.font-sans-serif, .font-base {
  font-family: var(--font);
}
.font-monospace { font-family: var(--font-mono) !important; }
.min-w-0 { min-width: 0; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: var(--fw-bold); color: var(--c-text); }
.h5, h5 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.h6, h6 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.small, small { font-size: var(--fs-xs); }
strong, b, dl dt { font-weight: var(--fw-medium); }
.fw-bold { font-weight: var(--fw-bold) !important; }
.text-muted { color: var(--c-text-muted) !important; }
.text-danger { color: var(--c-danger-text) !important; }
.text-success { color: var(--c-success-text) !important; }
.text-warning { color: var(--c-warning) !important; }
a { color: var(--c-primary); }
a:hover { color: var(--c-primary-hover); }

/* ─────────────────────────────────────────────
   Bootstrap／Falcon 元件：字級放大、配色柔化（app.css :174-275）
   ───────────────────────────────────────────── */
.btn {
  --falcon-btn-font-size: var(--fs-md);
  --falcon-btn-padding-y: .42rem;
  --falcon-btn-padding-x: .95rem;
  --falcon-btn-font-weight: var(--fw-medium);
  --falcon-btn-border-radius: var(--radius-sm);
  --falcon-btn-focus-box-shadow: var(--focus-ring);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.5rem;
  box-shadow: none;
}
.btn-sm {
  --falcon-btn-font-size: var(--fs-sm);
  --falcon-btn-padding-y: .3rem;
  --falcon-btn-padding-x: .75rem;
  min-height: 2.15rem;
}
.btn-lg { --falcon-btn-font-size: var(--fs-lg); min-height: 3rem; }
.btn.icon-only { padding-left: .6rem; padding-right: .6rem; }
.btn.d-block, .btn.w-100 { display: flex; }

.btn-primary {
  --falcon-btn-color: #fff; --falcon-btn-bg: var(--c-primary); --falcon-btn-border-color: var(--c-primary);
  --falcon-btn-hover-color: #fff; --falcon-btn-hover-bg: var(--c-primary-hover); --falcon-btn-hover-border-color: var(--c-primary-hover);
  --falcon-btn-active-color: #fff; --falcon-btn-active-bg: var(--c-primary-active); --falcon-btn-active-border-color: var(--c-primary-active);
  --falcon-btn-disabled-color: #fff; --falcon-btn-disabled-bg: #8f9dcb; --falcon-btn-disabled-border-color: #8f9dcb;
}
.btn-outline-primary {
  --falcon-btn-color: var(--c-primary); --falcon-btn-bg: var(--c-surface); --falcon-btn-border-color: var(--c-primary-line);
  --falcon-btn-hover-color: var(--c-primary-text); --falcon-btn-hover-bg: var(--c-primary-soft); --falcon-btn-hover-border-color: var(--c-primary);
  --falcon-btn-active-color: var(--c-primary-text); --falcon-btn-active-bg: var(--c-primary-soft); --falcon-btn-active-border-color: var(--c-primary);
  --falcon-btn-disabled-color: var(--c-text-faint); --falcon-btn-disabled-bg: var(--c-surface); --falcon-btn-disabled-border-color: var(--c-border);
}
.btn-secondary {
  --falcon-btn-color: #fff; --falcon-btn-bg: var(--c-neutral); --falcon-btn-border-color: var(--c-neutral);
  --falcon-btn-hover-color: #fff; --falcon-btn-hover-bg: var(--c-neutral-hover); --falcon-btn-hover-border-color: var(--c-neutral-hover);
  --falcon-btn-active-color: #fff; --falcon-btn-active-bg: var(--c-neutral-hover); --falcon-btn-active-border-color: var(--c-neutral-hover);
}
.btn-outline-secondary {
  --falcon-btn-color: var(--c-text); --falcon-btn-bg: var(--c-surface); --falcon-btn-border-color: var(--c-border-strong);
  --falcon-btn-hover-color: var(--c-text); --falcon-btn-hover-bg: var(--c-surface-2); --falcon-btn-hover-border-color: var(--c-neutral);
  --falcon-btn-active-color: var(--c-text); --falcon-btn-active-bg: var(--c-head); --falcon-btn-active-border-color: var(--c-neutral);
  --falcon-btn-disabled-color: var(--c-text-faint); --falcon-btn-disabled-bg: var(--c-surface); --falcon-btn-disabled-border-color: var(--c-border);
}
.btn-success {
  --falcon-btn-color: #fff; --falcon-btn-bg: var(--c-success); --falcon-btn-border-color: var(--c-success);
  --falcon-btn-hover-color: #fff; --falcon-btn-hover-bg: var(--c-success-hover); --falcon-btn-hover-border-color: var(--c-success-hover);
  --falcon-btn-active-color: #fff; --falcon-btn-active-bg: var(--c-success-hover); --falcon-btn-active-border-color: var(--c-success-hover);
}
.btn-outline-success {
  --falcon-btn-color: var(--c-success-text); --falcon-btn-bg: var(--c-surface); --falcon-btn-border-color: var(--c-success-line);
  --falcon-btn-hover-color: var(--c-success-text); --falcon-btn-hover-bg: var(--c-success-soft); --falcon-btn-hover-border-color: var(--c-success);
  --falcon-btn-active-color: var(--c-success-text); --falcon-btn-active-bg: var(--c-success-soft); --falcon-btn-active-border-color: var(--c-success);
}
.btn-danger {
  --falcon-btn-color: #fff; --falcon-btn-bg: var(--c-danger); --falcon-btn-border-color: var(--c-danger);
  --falcon-btn-hover-color: #fff; --falcon-btn-hover-bg: var(--c-danger-hover); --falcon-btn-hover-border-color: var(--c-danger-hover);
  --falcon-btn-active-color: #fff; --falcon-btn-active-bg: var(--c-danger-hover); --falcon-btn-active-border-color: var(--c-danger-hover);
  --falcon-btn-disabled-color: #fff; --falcon-btn-disabled-bg: #d9a2a5; --falcon-btn-disabled-border-color: #d9a2a5;
}
.btn-outline-danger {
  --falcon-btn-color: var(--c-danger-text); --falcon-btn-bg: var(--c-surface); --falcon-btn-border-color: var(--c-danger-line);
  --falcon-btn-hover-color: var(--c-danger-text); --falcon-btn-hover-bg: var(--c-danger-soft); --falcon-btn-hover-border-color: var(--c-danger);
  --falcon-btn-active-color: var(--c-danger-text); --falcon-btn-active-bg: var(--c-danger-soft); --falcon-btn-active-border-color: var(--c-danger);
}
.btn-warning {
  --falcon-btn-color: var(--c-warning-text); --falcon-btn-bg: var(--c-warning-soft); --falcon-btn-border-color: var(--c-warning-line);
  --falcon-btn-hover-color: var(--c-warning-text); --falcon-btn-hover-bg: #f7e6c3; --falcon-btn-hover-border-color: var(--c-warning);
  --falcon-btn-active-color: var(--c-warning-text); --falcon-btn-active-bg: #f7e6c3; --falcon-btn-active-border-color: var(--c-warning);
}
/* Template2026 範本頁面用的 Falcon 專屬按鈕：外觀改成 demo 的外框按鈕 */
.btn-falcon-default, .btn-falcon-secondary, .btn-falcon-info {
  color: var(--c-text); background-color: var(--c-surface); border: 1px solid var(--c-border-strong); box-shadow: none;
}
.btn-falcon-default:hover, .btn-falcon-secondary:hover, .btn-falcon-info:hover,
.btn-falcon-default:focus, .btn-falcon-secondary:focus, .btn-falcon-info:focus {
  color: var(--c-text); background-color: var(--c-surface-2); border-color: var(--c-neutral); box-shadow: none;
}
.btn-falcon-primary {
  color: var(--c-primary); background-color: var(--c-surface); border: 1px solid var(--c-primary-line); box-shadow: none;
}
.btn-falcon-primary:hover, .btn-falcon-primary:focus {
  color: var(--c-primary-text); background-color: var(--c-primary-soft); border-color: var(--c-primary); box-shadow: none;
}
.btn-falcon-danger {
  color: var(--c-danger-text); background-color: var(--c-surface); border: 1px solid var(--c-danger-line); box-shadow: none;
}
.btn-falcon-danger:hover, .btn-falcon-danger:focus {
  color: var(--c-danger-text); background-color: var(--c-danger-soft); border-color: var(--c-danger); box-shadow: none;
}

.form-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text); margin-bottom: .3rem; }
.form-control, .form-select {
  font-size: var(--fs-md); min-height: 2.6rem;
  color: var(--c-text); background-color: var(--c-surface);
  border-color: var(--c-border-strong); border-radius: var(--radius-sm);
  box-shadow: none;
}
.form-control::placeholder { color: var(--c-text-faint); }
.form-control:focus, .form-select:focus { border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--c-surface-2); color: var(--c-text-muted); }
.form-text { font-size: var(--fs-xs); color: var(--c-text-muted); }
.form-check-input { width: 1.3rem; height: 1.3rem; cursor: pointer; border-color: var(--c-border-strong); }
.form-check-input:focus { border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }
.form-check-label { cursor: pointer; }
.form-switch .form-check-input { width: 2.4rem; }
fieldset:disabled .form-check-label { cursor: default; }

.badge { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.alert { font-size: var(--fs-md); }
.nav-link { font-size: var(--fs-md); }
.dropdown-menu {
  --falcon-dropdown-border-color: var(--c-border);
  --falcon-dropdown-border-radius: var(--radius);
  --falcon-dropdown-link-active-bg: var(--c-primary);
  --falcon-dropdown-font-size: var(--fs-md);
  box-shadow: var(--shadow);
}
.dropdown-item { font-size: var(--fs-md); padding: .45rem 1rem; }
.toast { --falcon-toast-font-size: var(--fs-md); --falcon-toast-border-radius: var(--radius); }
.modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--c-border); }
.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); display: flex; align-items: center; gap: .5rem; margin: 0; }
.modal-backdrop { --falcon-backdrop-bg: #2b3445; --falcon-backdrop-opacity: .45; }
.list-group-item { font-size: var(--fs-md); }

/* ─────────────────────────────────────────────
   版面（app.css :278-391）
   ───────────────────────────────────────────── */
.vac-shell { display: flex; min-height: 100vh; }

.vac-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--c-side-top) 0%, var(--c-side-bottom) 100%);
  color: var(--c-side-text);
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: 1040;
  /* 徽記金作為側欄與內容區的分界 */
  border-right: 3px solid var(--c-gold);
}
.vac-main { flex: 1 1 auto; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.vac-content { padding: 1.25rem 1.5rem 3rem; flex: 1 1 auto; }

/* 側欄品牌區 */
.vac-brand { padding: 1.1rem 1rem 1rem; text-align: center; border-bottom: 1px solid rgba(230, 211, 163, .3); }
.vac-brand a { color: inherit; text-decoration: none; display: block; }
.vac-brand img { width: 70px; height: 70px; display: block; margin: 0 auto .55rem; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3)); }
.vac-brand h1 { font-size: var(--fs-md); margin: 0; font-weight: var(--fw-bold); letter-spacing: .03em; color: #fff; }
.vac-brand .en { font-size: var(--fs-xs); margin: .1rem 0 0; color: var(--c-gold-line); letter-spacing: .02em; }
.vac-brand .sys { font-size: var(--fs-sm); margin: .45rem 0 0; color: var(--c-side-muted); padding-top: .45rem; border-top: 1px solid rgba(255, 255, 255, .12); }

/* 側欄選單 */
.vac-nav { overflow-y: auto; flex: 1 1 auto; padding: .4rem 0 1.5rem; }
.vac-nav-section + .vac-nav-section { border-top: 1px solid rgba(255, 255, 255, .08); }
.vac-nav-group {
  width: 100%;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem;
  background: none; border: 0;
  font-size: var(--fs-md); color: var(--c-gold-line);
  font-weight: var(--fw-bold); letter-spacing: .02em;
  cursor: pointer;
}
/* 有字就不用圖示：分組與收合鈕的圖示只在收合窄欄（沒有文字）時顯示 */
.vac-nav-group > .vac-nav-icon, .vac-nav-single > .vac-nav-icon, .vac-collapse-btn .vac-collapse-icon { display: none; font-size: 1.2rem; }
.vac-nav-group:hover { background: var(--c-side-hover); }
.vac-nav-group .chev { font-size: var(--fs-xs); transition: transform .18s ease; opacity: .7; }
.vac-nav-group.collapsed .chev { transform: rotate(-90deg); }

.vac-nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem .55rem 1.6rem;
  color: var(--c-side-text); text-decoration: none; font-size: var(--fs-md);
  border-left: 4px solid transparent;
}
.vac-nav a.vac-nav-single { padding-left: 1rem; font-weight: var(--fw-bold); }
.vac-nav a:hover { background: var(--c-side-hover); color: #fff; }
.vac-nav a.active {
  background: var(--c-side-active); color: #fff; font-weight: var(--fw-bold);
  /* 作用中指示改用徽記金，比紅色柔和、也與分界線呼應 */
  border-left-color: var(--c-gold);
}
.vac-nav-empty { color: var(--c-side-muted); }

.vac-collapse-btn {
  align-items: center; gap: .55rem;
  width: 100%; padding: .7rem 1rem;
  background: rgba(0, 0, 0, .08); border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--c-side-muted); font-size: var(--fs-sm);
  cursor: pointer;
}
.vac-collapse-btn:hover { color: #fff; background: var(--c-side-hover); }

/* 大螢幕收合：側欄縮成只剩徽記與分組圖示的窄欄 */
.vac-sidebar, .vac-main { transition: width .2s ease, flex-basis .2s ease, margin-left .2s ease, transform .2s ease; }
@media (min-width: 992px) {
  .vac-shell.sidebar-collapsed { --sidebar-w: 72px; }
  .sidebar-collapsed .vac-brand { padding: .8rem 0 .7rem; }
  .sidebar-collapsed .vac-brand img { width: 44px; height: 44px; margin-bottom: 0; }
  .sidebar-collapsed .vac-brand h1,
  .sidebar-collapsed .vac-brand .en,
  .sidebar-collapsed .vac-brand .sys,
  .sidebar-collapsed .vac-nav-group span,
  .sidebar-collapsed .vac-nav-group .chev,
  .sidebar-collapsed .vac-nav-group + div,
  .sidebar-collapsed .vac-nav-single span,
  .sidebar-collapsed .vac-collapse-btn .vac-collapse-text { display: none !important; }
  .sidebar-collapsed .vac-nav-group, .sidebar-collapsed .vac-nav-single { justify-content: center; padding: .9rem 0; border-left: 4px solid transparent; }
  .sidebar-collapsed .vac-nav-group > .vac-nav-icon,
  .sidebar-collapsed .vac-nav-single > .vac-nav-icon { display: inline-block; font-size: 1.45rem; }
  .sidebar-collapsed .vac-nav-group.has-active { background: var(--c-side-active); border-left-color: var(--c-gold); }
  .sidebar-collapsed .vac-collapse-btn { justify-content: center; padding: .8rem 0; font-size: 1.2rem; }
  .sidebar-collapsed .vac-collapse-btn .vac-collapse-icon.when-collapsed { display: inline-block; }
}
/* 收合鈕的圖示：展開時（有字）不顯示，收合時顯示「展開」方向 */
.vac-collapse-btn .vac-collapse-icon.when-expanded { display: none; }

/* 小螢幕展開側欄時的遮罩（照 demo App.vue :80-85） */
.vac-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(43, 52, 69, .45); z-index: 1035; }

/* 頂列 */
.vac-topbar {
  height: var(--topbar-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 1030;
  box-shadow: var(--shadow);
}
.vac-topbar .title {
  font-weight: var(--fw-bold); font-size: var(--fs-xl); margin: 0;
  padding-left: .7rem; border-left: 5px solid var(--c-gold);
  display: flex; align-items: center; gap: .5rem;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--c-text);
}
/* 開發環境才有的測試模式時鐘（範本功能） */
.vac-topbar-tools .nav-link { color: var(--c-text-muted); font-size: var(--fs-sm); padding: .3rem .5rem; border: 0; background: none; }
.vac-topbar-tools .dropdown-menu { min-width: 18rem; }
@media (max-width: 575.98px) {
  .vac-topbar { padding: 0 1rem; gap: .75rem; }
  .vac-topbar .title { font-size: var(--fs-lg); }
}

@media (max-width: 991.98px) {
  .vac-sidebar { transform: translateX(-100%); }
  .vac-sidebar.open { transform: translateX(0); }
  .vac-main { margin-left: 0; }
  .vac-content { padding: 1rem; }
}

/* ─────────────────────────────────────────────
   共用元件（app.css :394-484）
   ───────────────────────────────────────────── */
.vac-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.vac-card-head {
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--c-border);
  font-weight: var(--fw-bold); font-size: var(--fs-lg);
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  background: var(--c-surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.vac-card-body { padding: 1.1rem; }
.vac-card-foot {
  padding: .75rem 1.1rem;
  background: var(--c-surface-2); border-top: 1px solid var(--c-border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}

.vac-section-title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0 0 .6rem; }

/* 狀態標籤（StatusBadge）：淡底＋同色系文字，不用高彩度實心 */
.vac-status {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.3;
  padding: .2rem .6rem; border-radius: var(--radius-sm); white-space: nowrap;
  border: 1px solid transparent;
}
.vac-status.tone-success   { background: var(--c-success-soft); color: var(--c-success-text); border-color: var(--c-success-line); }
.vac-status.tone-danger    { background: var(--c-danger-soft); color: var(--c-danger-text); border-color: var(--c-danger-line); }
.vac-status.tone-warning   { background: var(--c-warning-soft); color: var(--c-warning-text); border-color: var(--c-warning-line); }
.vac-status.tone-primary   { background: var(--c-primary-soft); color: var(--c-primary-text); border-color: var(--c-primary-line); }
.vac-status.tone-secondary { background: var(--c-surface-2); color: var(--c-text-muted); border-color: var(--c-border); }
.vac-status.tone-light     { background: transparent; color: var(--c-text-muted); border-color: var(--c-border); }

.vac-category { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; min-width: 0; }
.vac-category .no { font-variant-numeric: tabular-nums; color: var(--c-text-muted); font-weight: var(--fw-bold); }

.vac-action { white-space: nowrap; }

/* 頁首工具列（PageToolbar）：左邊篩選，右邊彙總數字、主要操作，最右「更新」 */
.vac-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.vac-toolbar-start { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.vac-toolbar-end { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.4rem; margin-left: auto; }
.vac-toolbar-end .btn { margin: 0; }

/* 彙總數字：上小字標籤、下大數字 */
.summary-figure { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 3.5rem; }
.summary-figure .n { font-size: var(--fs-num); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-text); }
.summary-figure .lbl { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-muted); line-height: 1.3; white-space: nowrap; }
.summary-figure.tone-danger .n { color: var(--c-danger); }

/* 分段切換 */
.vac-segment { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.vac-segment button {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text);
  border-radius: var(--radius-pill); padding: .35rem .9rem; font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.vac-segment button:hover:not(:disabled) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.vac-segment button.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.vac-segment button:disabled { opacity: .7; }
.vac-segment .count {
  font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: center;
  background: var(--c-head); color: var(--c-text); border-radius: var(--radius-pill); padding: 0 .4rem;
}
.vac-segment button.active .count { background: rgba(255, 255, 255, .22); color: #fff; }

/* 頁籤（TabPage，app.css :762-770） */
.vac-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.25rem; padding: 0; list-style: none; border-bottom: 1px solid var(--c-border); }
.vac-tabs a {
  display: inline-block; padding: .6rem 1.1rem; margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-text-muted); text-decoration: none;
}
.vac-tabs a:hover { color: var(--c-primary); }
.vac-tabs a.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: var(--fw-bold); }

/* 空狀態 */
.vac-empty { text-align: center; color: var(--c-text-muted); padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: var(--fs-md); }
.vac-empty.compact { padding: 1.5rem 1rem; }
.vac-empty .spinner-border { color: var(--c-primary); }

/* 一行提示 */
.vac-hint {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--c-gold-soft); border: 1px solid var(--c-gold-line); color: var(--c-gold-text);
  border-radius: var(--radius-sm); padding: .55rem .8rem; font-size: var(--fs-sm);
}
.vac-hint.danger { background: var(--c-danger-soft); border-color: var(--c-danger-line); color: var(--c-danger-text); }
.vac-hint.ok { background: var(--c-success-soft); border-color: var(--c-success-line); color: var(--c-success-text); }
.vac-hint.d-none { display: none !important; }

/* 對話框 */
.vac-modal { background: rgba(43, 52, 69, .45); }
.vac-modal .modal-body { font-size: var(--fs-md); }

.vac-facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0 0 1rem; }
.vac-facts dt { color: var(--c-text-muted); font-weight: var(--fw-medium); white-space: nowrap; }
.vac-facts dd { margin: 0; word-break: break-all; }

/* 提示訊息（ToastStack，右下角） */
.vac-toast-stack { z-index: 1080; }
.toast.text-bg-success { background-color: var(--c-success) !important; color: #fff !important; }
.toast.text-bg-danger { background-color: var(--c-danger) !important; color: #fff !important; }
.toast.text-bg-warning { background-color: var(--c-warning-soft) !important; color: var(--c-warning-text) !important; border: 1px solid var(--c-warning-line) !important; }
.toast.text-bg-info { background-color: var(--c-primary) !important; color: #fff !important; }

/* ─────────────────────────────────────────────
   表格（app.css :486-569）
   ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table {
  --falcon-table-color: var(--c-text);
  --falcon-table-border-color: var(--c-border);
  --falcon-table-hover-bg: var(--c-primary-soft);
  --falcon-table-hover-color: var(--c-text);
  --falcon-table-striped-bg: var(--c-surface-2);
  /* DataTables 2 為 Bootstrap 5.3 寫了 background-color: var(--bs-table-bg)，Falcon 沒有這個變數，這裡補上 */
  --bs-table-bg: var(--c-surface);
  color: var(--c-text);
}
.table > :not(caption) > * > * { padding: .65rem .8rem; border-bottom-color: var(--c-border); }
.table thead th, .table thead.table-primary th {
  --bs-table-bg: var(--c-head);
  --falcon-table-bg: var(--c-head);
  background: var(--c-head); color: var(--c-text);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  white-space: nowrap; border-bottom: 2px solid var(--c-gold-line);
}
/* 資料表格不折行：窄視窗由 .table-wrap 橫向捲動；備註類欄位加 .wrap 允許折行 */
.table td { font-size: var(--fs-sm); vertical-align: middle; }
.table td.wrap { white-space: normal; min-width: 14rem; }
.table .sub { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
/* 異常列：左側色條＋淡底，不只靠顏色 */
.table tr.row-alert > * { background: var(--c-danger-soft); }
.table tr.row-alert > :first-child { box-shadow: inset 4px 0 0 var(--c-danger); }

/* 清單表格（ListTable） */
.list-table__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem;
  padding: .9rem 1.1rem;
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.list-table__info { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; }
.list-table__size { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); white-space: nowrap; }
.list-table__size .form-select { width: auto; min-width: 5rem; }
.list-table__filters { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.list-table__filter { width: auto; min-width: 8rem; }
.list-table__search { width: 22rem; max-width: 100%; }
.list-table__sort { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; font-weight: var(--fw-bold); white-space: nowrap; }
.list-table__sort:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.sort-mark { display: inline-flex; flex-direction: column; gap: 2px; color: var(--c-primary); }
.sort-mark::before, .sort-mark::after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .3; }
.sort-mark::before { border-bottom: 5px solid currentColor; }
.sort-mark::after { border-top: 5px solid currentColor; }
.sort-mark.asc::before, .sort-mark.desc::after { opacity: 1; }
.list-table__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  padding: .75rem 1.1rem;
  background: var(--c-surface-2); border-top: 1px solid var(--c-border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.list-table__foot .form-select, .list-table__foot .btn-outline-secondary { background-color: var(--c-surface); }
.list-table__pager { display: flex; flex-wrap: wrap; gap: .35rem; }
.list-table__pager .btn { min-width: 2.4rem; }

.perm-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 14rem; white-space: normal; }
.perm-chip {
  display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-sm);
  background: var(--c-primary-soft); border: 1px solid var(--c-primary-line); color: var(--c-primary-text);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.45;
}
.perm-chip.personal { background: var(--c-gold-soft); border-color: var(--c-gold-line); color: var(--c-gold-text); }
/* 範本列表直接把標籤放在儲存格（GetTagHtml），沒有 .perm-chips 容器：欄位太窄時不要一字一行 */
td > .perm-chip { white-space: nowrap; }
.row-actions { display: flex; flex-wrap: wrap; gap: .35rem; width: max-content; }
/* 螢幕不夠寬時操作鈕折成兩行 */
@media (max-width: 1679.98px) { .row-actions { width: 13.5rem; } }

/* ─────────────────────────────────────────────
   VAC 頁面（_VacPage.cshtml 的 #app.vac-page）與 VAC 對話框（AppModal 的 .vac-modal，掛在 body）：
   demo 是 Bootstrap 5.3，這裡是 Falcon（Bootstrap 5.2＋自己的樣式），不同的地方只在 VAC 畫面校正；
   範本頁面（帳號、角色等 DataTables 列表與表單）維持階段 1 的樣子，不受影響（階段 5）
   ───────────────────────────────────────────── */
/* 資料表格不折行（app.css :497-498）：窄視窗由 .table-wrap 橫向捲動；備註類欄位加 .wrap 允許折行 */
.vac-page .table td:not(.wrap), .vac-modal .table td:not(.wrap) { white-space: nowrap; }
/* 勾選框與文字橫排（app.css :257-258；Falcon 是 float＋左內距，框放大後會壓到文字） */
.vac-page .form-check, .vac-modal .form-check { min-height: 1.8rem; display: flex; align-items: center; gap: .45rem; padding-left: 0; }
.vac-page .form-check .form-check-input, .vac-modal .form-check .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
/* Falcon 的 section 有登陸頁用的上下留白（4rem～7.5rem）；demo 的 section 只是區塊 */
.vac-page section { padding-top: 0; padding-bottom: 0; }
/* Falcon 的 fs-* 是自己的字級表（fs-6 約 3rem）；demo 用的是 Bootstrap 的 fs-6＝1rem（每月排程與查核的月份） */
.vac-page .fs-6 { font-size: 1rem !important; }

/* ─────────────────────────────────────────────
   DataTables（Template2026 範本頁面的列表）：排成 demo ListTable 的樣子（步驟 1-8）
   表格放在 .vac-card.list-table 裡；DataTables 的 layout 設成「下方左：每頁筆數＋筆數；下方右：分頁」（site.js）
   ───────────────────────────────────────────── */
/* DataTables 的 Bootstrap 5 版型：每一列是 div.row（有表格的那一列＝表格本體，其他列＝表格下方的頁尾） */
.list-table > .dt-container { margin: 0; }
.list-table .dt-container > .row { margin: 0 !important; --falcon-gutter-x: 0; --bs-gutter-x: 0; }
.list-table .dt-container > .row > * { padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; }
.list-table .dt-container > .row:has(table) > * { overflow-x: auto; }
.list-table .dt-container > .row:not(:has(table)) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  padding: .75rem 1.1rem;
  background: var(--c-surface-2); border-top: 1px solid var(--c-border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.list-table .dt-container > .row:not(:has(table)) > * { width: auto; flex: 0 1 auto; max-width: 100%; margin: 0 !important; }
/* 頁尾左邊：「每頁 N 筆」與「第 a–b 筆，共 n 筆」同一行 */
.list-table .dt-container > .row:not(:has(table)) > :first-child { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; }
.list-table .dt-length { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.list-table .dt-length label { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.list-table .dt-length select { width: auto; min-width: 5rem; min-height: 2.15rem; padding-top: .2rem; padding-bottom: .2rem; font-size: var(--fs-sm); background-color: var(--c-surface); }
.list-table .dt-info { padding: 0 !important; }
.list-table div.dt-container table.dataTable { margin: 0 !important; border-collapse: collapse !important; }
.list-table div.dt-container .dt-paging .pagination { gap: .35rem; margin: 0; flex-wrap: wrap; }
.list-table div.dt-container .dt-paging .page-link {
  min-width: 2.4rem; min-height: 2.15rem; padding: .3rem .75rem; text-align: center;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm) !important;
  box-shadow: none;
}
.list-table div.dt-container .dt-paging .page-link:hover { background: var(--c-surface-2); border-color: var(--c-neutral); }
.list-table div.dt-container .dt-paging .page-item.active .page-link { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }
.list-table div.dt-container .dt-paging .page-item.disabled .page-link { color: var(--c-text-faint); background: var(--c-surface); border-color: var(--c-border); }
/* 排序記號：DataTables 的 ▲▼ 改成 demo 的主色小三角 */
.list-table table.dataTable thead th .dt-column-order::before,
.list-table table.dataTable thead th .dt-column-order::after { color: var(--c-primary); font-size: .6em; }
div.dt-container div.dt-processing { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ─────────────────────────────────────────────
   查詢條件區（QueryPanel，app.css :556-622）
   ───────────────────────────────────────────── */
.query-panel { margin-bottom: 1rem; }
.query-panel__head {
  padding: .65rem 1.1rem; font-weight: var(--fw-bold); font-size: var(--fs-md);
  border-bottom: 1px solid var(--c-border); background: var(--c-surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.query-panel__body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.query-panel__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .9rem 1.1rem; }
.query-field { min-width: 0; }
.query-field .form-label { display: block; }
.query-field--range { grid-column: span 2; }
.query-range { display: flex; align-items: center; gap: .5rem; }
.query-range .form-control { min-width: 0; }
.query-range span { color: var(--c-text-muted); flex: 0 0 auto; }
.query-panel__actions { display: flex; justify-content: flex-end; gap: .5rem; }
.query-panel__actions .btn { min-width: 6rem; }
@media (max-width: 767.98px) { .query-field--range { grid-column: auto; } .query-range { flex-wrap: wrap; } }

/* ─────────────────────────────────────────────
   多選下拉（MultiSelect，app.css :572-618；階段 3 搬元件時使用）
   ───────────────────────────────────────────── */
.multi-select { position: relative; }
.multi-select .ms-control {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  min-height: 2.6rem; padding: .35rem .6rem; text-align: left;
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.5;
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
}
.multi-select .ms-control:focus-visible { border-color: var(--c-primary); box-shadow: var(--focus-ring); outline: none; }
.multi-select.open .ms-control { border-color: var(--c-primary); }
.multi-select .ms-control:disabled { background: var(--c-surface-2); color: var(--c-text-muted); }
.multi-select .ms-value { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.multi-select .ms-placeholder { color: var(--c-text-muted); }
.multi-select .ms-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .05rem .2rem .05rem .45rem; border-radius: 999px;
  background: var(--c-primary-soft); color: var(--c-primary-text); font-size: var(--fs-sm);
}
.multi-select .ms-x { cursor: pointer; padding: 0 .25rem; border-radius: 999px; line-height: 1; }
.multi-select .ms-x:hover { background: var(--c-primary-line); color: var(--c-surface); }
.multi-select .ms-more { align-self: center; font-size: var(--fs-sm); color: var(--c-text-muted); }
.multi-select .ms-caret { flex: 0 0 auto; color: var(--c-text-muted); transition: transform .15s; }
.multi-select.open .ms-caret { transform: rotate(180deg); }
.multi-select .ms-panel {
  position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; right: 0;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .5rem;
}
.multi-select .ms-search { margin-bottom: .4rem; }
.multi-select .ms-actions { display: flex; align-items: center; gap: .25rem; font-size: var(--fs-sm); padding: 0 .15rem .3rem; }
.multi-select .ms-actions .btn-link { padding: 0 .35rem; font-size: var(--fs-sm); }
.multi-select .ms-actions .text-muted { margin-right: auto; }
.multi-select .ms-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; scrollbar-width: thin; }
.multi-select .ms-option { display: flex; align-items: center; gap: .5rem; padding: .35rem .3rem; cursor: pointer; border-radius: var(--radius-sm); }
.multi-select .ms-option:hover { background: var(--c-surface-2); }
.multi-select .ms-label { min-width: 0; }
.multi-select .ms-hint { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); }
.multi-select .ms-empty { padding: .75rem .3rem; color: var(--c-text-muted); text-align: center; }
.multi-select.drop-up .ms-panel { top: auto; bottom: calc(100% + .25rem); }
.search-select .ms-option { width: 100%; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
.search-select .ms-option.active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }

/* ─────────────────────────────────────────────
   登入與變更密碼（app.css :1095-1120）
   ───────────────────────────────────────────── */
.vac-login-bg {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(201, 162, 77, .18), transparent 45%),
    linear-gradient(160deg, var(--c-side-top) 0%, var(--c-side-bottom) 100%);
}
.vac-login-card {
  max-width: 460px; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--c-gold);
}
.vac-login-card .brand { text-align: center; padding: 1.6rem 1.5rem .9rem; }
.vac-login-card .brand img { width: 90px; height: 90px; }
.vac-login-card .brand h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: .7rem 0 .1rem; color: var(--c-primary-text); letter-spacing: .03em; }
.vac-login-card .brand .en { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; }
.vac-login-card .brand .sys { font-size: var(--fs-md); color: var(--c-text); margin: .6rem 0 0; padding-top: .6rem; border-top: 1px solid var(--c-border); }
.vac-login-card .page-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0 0 1rem; text-align: center; }
.vac-login-card .text-validation:empty { display: none; }
.vac-login-links { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); margin-top: .9rem; }

/* 密碼規則清單：打勾用 CSS 畫（不用 Font Awesome：FA 會把 <i> 換成 <svg>，Vue 再改 class 不會生效） */
.rule-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .3rem; font-size: var(--fs-sm); }
.rule-list li { display: flex; align-items: center; gap: .45rem; color: var(--c-text-muted); }
.rule-list li.ok { color: var(--c-success-text); font-weight: var(--fw-medium); }
.rule-mark { width: 1rem; height: 1rem; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.rule-list li.ok .rule-mark { background: var(--c-success); border-color: var(--c-success); }
.rule-list li.ok .rule-mark::after {
  content: ""; position: absolute; left: .26rem; top: .08rem; width: .3rem; height: .55rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ─────────────────────────────────────────────
   捲軸：細、低對比（app.css :1122-1141）
   ───────────────────────────────────────────── */
html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.table-wrap, .flow-track, .modal, .dropdown-menu, .list-table .dt-layout-table > .dt-layout-cell { scrollbar-width: thin; scrollbar-color: var(--scroll-inner-thumb) transparent; }
.flow-track:hover { scrollbar-color: var(--scroll-inner-thumb-hover) transparent; }
.vac-nav { scrollbar-width: thin; scrollbar-color: var(--scroll-side-thumb) transparent; }
.vac-nav:hover { scrollbar-color: var(--scroll-side-thumb-hover) transparent; }

/* ─────────────────────────────────────────────
   Template2026 範本頁面的相容（帳號、角色等範本頁在階段 7 換成 demo 畫面前，外觀先貼近 demo）
   ───────────────────────────────────────────── */
/* Falcon 卡片 → demo 卡片 */
.card { border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--c-surface); }
.card > .card-header {
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2) !important;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card .card-body.bg-light { background: var(--c-surface) !important; }
/* 範本的列表樣板仍有 h2#title（舊做法是同步到頂端列）：標題已在頂端列，這裡不重複顯示 */
.vac-content h2#title { display: none; }
/* Falcon 的 soft 標籤 → demo 的狀態標籤色 */
.badge-soft-success { background: var(--c-success-soft); color: var(--c-success-text); }
.badge-soft-secondary { background: var(--c-surface-2); color: var(--c-text-muted); }
.badge-soft-primary { background: var(--c-primary-soft); color: var(--c-primary-text); }
.badge-soft-danger { background: var(--c-danger-soft); color: var(--c-danger-text); }
.badge-soft-warning { background: var(--c-warning-soft); color: var(--c-warning-text); }

/* 範本表單外框（Create／Edit…）標題列黏在頂端列下方 */
.form-header-sticky { top: var(--topbar-h); }

/* 確認視窗（ModalConfirm） */
#modal-confirm .modal-dialog { max-width: 450px; }
#modal-confirm .modal-confirm-head { padding: .9rem 1.5rem; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); border-radius: var(--radius) var(--radius) 0 0; }
#modal-confirm .modal-confirm-head h4 { margin: 0; text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
#modal-confirm .modal-confirm-body { padding: 1.1rem 1.5rem; text-align: center; white-space: pre-wrap; font-size: var(--fs-md); }
#modal-confirm .modal-footer .btn { min-width: 6rem; }
/* 圖示用 CSS 畫（Font Awesome 會把元素換成 <svg>，Vue 切換 class 就失效） */
#modal-confirm .modal-confirm-icon {
  display: none; width: 2.6rem; height: 2.6rem; margin: 0 auto .7rem; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: var(--fw-bold); line-height: 1; color: #fff; white-space: normal;
}
#modal-confirm .modal-confirm-icon.is-warning { display: flex; background: var(--c-warning); }
#modal-confirm .modal-confirm-icon.is-warning::before { content: "!"; }
#modal-confirm .modal-confirm-icon.is-success { display: flex; background: var(--c-success); }
#modal-confirm .modal-confirm-icon.is-success::before { content: "\2713"; }
#modal-confirm .modal-confirm-icon.is-danger { display: flex; background: var(--c-danger); }
#modal-confirm .modal-confirm-icon.is-danger::before { content: "\2715"; }

/* ─────────────────────────────────────────────
   階段 3 共用元件用到、階段 1 還沒搬的樣式
   ───────────────────────────────────────────── */
/* 圖示（VacIcon，DemoVAC）：外層 span 固定，Font Awesome 把裡面的 <i> 換成 <svg> */
.vac-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.multi-select .vac-icon.ms-caret { display: inline-flex; }

/* 狀態篩選（app.css :683-702） */
.status-filter { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.status-filter__item {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.35rem; padding: 0 1rem;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-text);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.status-filter__item:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.status-filter__item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.status-filter__count {
  min-width: 1.65rem; padding: 0 .45rem; border-radius: var(--radius-pill);
  background: var(--c-head); color: var(--c-text-muted);
  font-variant-numeric: tabular-nums; text-align: center; line-height: 1.45rem;
}
.status-filter__item.is-emphasis .status-filter__count { background: var(--c-danger-soft); color: var(--c-danger-text); }
.status-filter__item.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 檔名連結（app.css :748-754） */
.file-link {
  padding: 0; border: 0; background: none; text-align: left;
  color: var(--c-primary); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px;
  word-break: break-all;
}
.file-link:hover { color: var(--c-primary-hover); }
.file-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }

/* 逐欄異動對照表（app.css :903-905） */
.change-section + .change-section { margin-top: 1rem; }
.change-table td.before { color: var(--c-text-muted); }
.change-table td.after { font-weight: var(--fw-medium); }

/* ─────────────────────────────────────────────
   今日執行狀況：卡片（app.css :623-681，階段 4-1）
   ───────────────────────────────────────────── */
.status-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--c-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; height: 100%;
}
.status-card.s-M, .status-card.s-Q { border-left-color: var(--c-warning); }
.status-card.s-F { border-left-color: var(--c-danger); }
.status-card.s-R { border-left-color: var(--c-primary); }
.status-card.s-S { border-left-color: var(--c-success); }

.status-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; padding: .75rem .9rem .55rem; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.status-card-head .vac-category { white-space: normal; }
.lane-label { display: flex; align-items: center; gap: .35rem; padding: .2rem .9rem 0; font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: var(--fw-medium); }
/* 還沒跑完的舊期別（今日執行狀況會繼續顯示，115/09/27）；都跑完的卡片不列節點 */
.lane-done { padding: .6rem .9rem; margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.lane-label .lane-open { padding: 0 .4rem; border-radius: var(--radius-sm); background: var(--c-warning-soft); color: var(--c-warning-text); font-size: var(--fs-xs); }

.step-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .2rem; padding: .15rem .9rem .3rem; flex: 1 1 auto; }
.step-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--fs-sm); line-height: 1.45;
  padding: .18rem .5rem; border-radius: var(--radius-sm);
  background: var(--c-surface-2); color: var(--c-text-muted);
  white-space: nowrap;
}
/* 做完的節點用綠底（115/09/27）；目前這一步仍以狀態色加框強調 */
.step-chip.done { background: var(--c-success-soft); color: var(--c-success-text); }
.step-chip.now-manual { background: var(--c-warning-soft); color: var(--c-warning-text); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1.5px var(--c-warning-line); }
.step-chip.now-failed { background: var(--c-danger-soft); color: var(--c-danger-text); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1.5px var(--c-danger-line); }
.step-chip.now-running { background: var(--c-primary-soft); color: var(--c-primary-text); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1.5px var(--c-primary-line); }
.step-chip.todo { background: transparent; color: var(--c-text-faint); }
.step-sep { color: var(--c-border-strong); font-size: var(--fs-xs); }

.status-card-foot {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem .65rem;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
/* 節點區佔滿標題與底部之間的空間並垂直置中；底部（時間、細項）因此固定貼齊卡片下緣 */
.status-card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: .1rem 0 .45rem; }
.card-link {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-left: auto; margin-right: -.5rem;
  min-height: 2.1rem; padding: 0 .5rem;
  border-radius: var(--radius-sm);
  color: var(--c-primary); font-weight: var(--fw-bold); text-decoration: none;
}
/* demo 是 .card-link .bi；DemoVAC 的圖示是 VacIcon（.vac-icon） */
.card-link .vac-icon { transition: transform .15s ease; }
.card-link:hover { color: var(--c-primary-hover); background: var(--c-primary-soft); }
.card-link:hover .vac-icon { transform: translateX(3px); }
.card-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ─────────────────────────────────────────────
   流程畫布（app.css :704-755，階段 5：執行紀錄明細）
   ───────────────────────────────────────────── */
.canvas-head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: 1rem; }
.canvas-head__title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.canvas-head__time { color: var(--c-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.flow-track { display: flex; align-items: stretch; overflow-x: auto; padding: .25rem .1rem 1rem; }
/* 節點：淡色頂條＋狀態色上緣，文字用同色系深色，清爽不刺眼 */
.flow-step {
  flex: 0 0 230px; display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-top: 4px solid var(--c-border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.flow-step__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .45rem .7rem; font-weight: var(--fw-bold);
  background: var(--c-surface-2); color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.flow-step__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-step .flow-step__head > .vac-status.flow-step__pill { font-size: var(--fs-xs); padding: .05rem .45rem; flex: 0 0 auto; }
.flow-step__body { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .7rem .7rem; flex: 1 1 auto; }
.flow-step__file { font-size: var(--fs-sm); word-break: break-all; line-height: 1.4; }
.flow-step__count { font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.flow-step__meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; margin-top: .2rem; font-size: var(--fs-xs); color: var(--c-text-muted); }
.flow-step .btn { margin-top: .45rem; width: 100%; }

.flow-step.is-S { border-top-color: var(--c-success); }
.flow-step.is-S .flow-step__head { background: var(--c-success-soft); color: var(--c-success-text); }
.flow-step.is-F { border-color: var(--c-danger-line); border-top-color: var(--c-danger); }
.flow-step.is-F .flow-step__head { background: var(--c-danger-soft); color: var(--c-danger-text); }
.flow-step.is-Q, .flow-step.is-M { border-top-color: var(--c-warning); }
.flow-step.is-Q .flow-step__head, .flow-step.is-M .flow-step__head { background: var(--c-warning-soft); color: var(--c-warning-text); }
.flow-step.is-R { border-top-color: var(--c-primary); }
.flow-step.is-R .flow-step__head { background: var(--c-primary-soft); color: var(--c-primary-text); }
.flow-step.is-P { border-style: dashed; border-top-style: solid; box-shadow: none; }
.flow-step.is-P .flow-step__head { color: var(--c-text-muted); }

.flow-link { flex: 0 0 34px; align-self: center; position: relative; height: 2px; background: var(--c-border-strong); margin: 0 .35rem 0 .15rem; }
.flow-link::after { content: ""; position: absolute; right: -7px; top: -5px; border-left: 8px solid var(--c-border-strong); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.flow-legend { margin: 0 0 1rem; font-size: var(--fs-xs); color: var(--c-text-muted); }
.flow-table .count { color: var(--c-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─────────────────────────────────────────────
   流程設定（基本資料／作業流程／通知設定，app.css :758-906，階段 5）
   ───────────────────────────────────────────── */
/* 頁內頁籤（流程設計的三個頁籤是 button）；頁面層的頁籤列（_VacTabs）是連結，樣式在上面「頁籤」 */
.vac-tabs[role="tablist"] { gap: .25rem; }
.vac-tabs button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.1rem; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: none;
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-text-muted);
}
.vac-tabs button:hover { color: var(--c-primary-text); }
.vac-tabs button.active { color: var(--c-primary-text); border-bottom-color: var(--c-primary); font-weight: var(--fw-bold); }
.vac-tabs .tab-count { font-size: var(--fs-xs); padding: 0 .45rem; border-radius: var(--radius-pill); background: var(--c-head); color: var(--c-text-muted); }
.vac-tabs .tab-alert { font-size: var(--fs-xs); padding: 0 .45rem; border-radius: var(--radius-sm); background: var(--c-danger-soft); color: var(--c-danger-text); }
.vac-subhead { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }

/* 節點類型色系：淡底＋同色系深字，上緣色條 */
.node-tone-gold    { --tone: var(--c-gold);    --tone-soft: var(--c-gold-soft);    --tone-line: var(--c-gold-line);    --tone-text: var(--c-gold-text); }
.node-tone-primary { --tone: var(--c-primary); --tone-soft: var(--c-primary-soft); --tone-line: var(--c-primary-line); --tone-text: var(--c-primary-text); }
.node-tone-warning { --tone: var(--c-warning); --tone-soft: var(--c-warning-soft); --tone-line: var(--c-warning-line); --tone-text: var(--c-warning-text); }
.node-tone-success { --tone: var(--c-success); --tone-soft: var(--c-success-soft); --tone-line: var(--c-success-line); --tone-text: var(--c-success-text); }
.node-tone-danger  { --tone: var(--c-danger);  --tone-soft: var(--c-danger-soft);  --tone-line: var(--c-danger-line);  --tone-text: var(--c-danger-text); }
.node-tone-navy    { --tone: var(--c-side-bottom); --tone-soft: #e8ebf3; --tone-line: #c3cadb; --tone-text: var(--c-side-bottom); }
.node-tone-neutral { --tone: var(--c-neutral); --tone-soft: var(--c-surface-2); --tone-line: var(--c-border-strong); --tone-text: var(--c-text); }

.chain-pill {
  display: inline-flex; align-items: center; padding: .15rem .7rem; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
  background: var(--tone-soft); border: 1px solid var(--tone-line); color: var(--tone-text);
}
.chain-pill.disabled { opacity: .55; text-decoration: line-through; }
.chain-arrow { color: var(--c-text-faint); }

.flow-chain-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding: .75rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2);
}
.flow-chain-summary .label { font-weight: var(--fw-bold); }
.flow-chain-summary.invalid { border-color: var(--c-danger-line); }

.flow-board {
  position: relative; overflow: auto; min-height: 280px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background-color: #eef1f7;
  background-image: radial-gradient(rgba(63, 85, 163, .12) 1px, transparent 1px);
  background-size: 16px 16px;
  scrollbar-width: thin;
}
.flow-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.flow-edge { fill: none; stroke: var(--c-neutral); stroke-width: 2; }
.flow-arrow-head { fill: var(--c-neutral); }

.flow-node {
  position: absolute; z-index: 2; display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--tone-line); border-top: 4px solid var(--tone);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; user-select: none; cursor: pointer;
}
.flow-node:hover, .flow-node:focus-visible { box-shadow: 0 0 0 3px var(--c-primary-line), var(--shadow); outline: none; }
.flow-node.disabled { opacity: .6; border-style: dashed; border-top-style: solid; }
/* 還沒接進主線的節點 */
.flow-node.unlinked { border: 2px dashed var(--c-danger-line); border-top: 4px solid var(--c-danger); }
.flow-node-head .unlinked-tag { color: var(--c-danger); }
.flow-node-head {
  display: flex; align-items: center; gap: .4rem; padding: .3rem .65rem;
  background: var(--tone-soft); color: var(--tone-text);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.flow-node-body { flex: 1 1 auto; padding: .4rem .65rem 0; min-height: 0; overflow: hidden; }
.flow-node-body .name { font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-node-body .desc {
  font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.flow-node-foot { display: flex; align-items: center; gap: .15rem; padding: .2rem .45rem .35rem .65rem; border-top: 1px solid var(--c-border); }
.flow-node-foot .code { margin-right: auto; font-size: var(--fs-xs); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.link-btn {
  padding: .05rem .4rem; border: 0; border-radius: var(--radius-sm); background: none;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-primary);
}
.link-btn:hover { background: var(--c-primary-soft); }
.link-btn.danger { color: var(--c-danger); }
.link-btn.danger:hover { background: var(--c-danger-soft); }
.flow-board-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; color: var(--c-text-muted); text-align: center; }
.flow-canvas-editor .flow-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; }

.template-list { display: grid; gap: .5rem; max-height: 55vh; overflow-y: auto; }
.template-item, .pick-item {
  display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .8rem; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface);
}
.template-item .form-check-input, .pick-item .form-check-input { margin-top: .3rem; flex: 0 0 auto; }
.template-item.active, .pick-item.checked { border-color: var(--c-primary-line); background: var(--c-primary-soft); }

/* 通知設定 */
.notify-events { display: grid; gap: .6rem; }
.notify-event-row { border: 1px solid var(--c-border); border-radius: var(--radius); padding: .6rem .85rem; }
.notify-event-row.checked { border-color: var(--c-primary-line); background: var(--c-primary-soft); }
.notify-event-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; cursor: pointer; }
.notify-event-body { display: grid; gap: .6rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--c-border); }
.notify-nodes { display: flex; flex-wrap: wrap; gap: .4rem; }
.notify-node { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; cursor: pointer; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-pill); font-size: var(--fs-sm); }
.notify-node.checked { border-color: var(--c-primary); color: var(--c-primary-text); }
.notify-template { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.notify-template-body { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: .75rem; }

/* 通知範本編輯與預覽 */
.variable-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.variable-chip {
  padding: .2rem .6rem; border-radius: var(--radius-pill); font-size: var(--fs-sm);
  background: var(--c-gold-soft); border: 1px solid var(--c-gold-line); color: var(--c-gold-text);
}
.variable-chip:hover { background: var(--c-gold-line); }
.mail-preview { border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.mail-preview__subject { padding: .6rem .85rem; background: var(--c-head); font-weight: var(--fw-bold); }
.mail-preview__body {
  margin: 0; padding: .85rem; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font); font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text);
}
.pick-list { display: grid; gap: .4rem; max-height: 22rem; overflow-y: auto; padding: .5rem; border: 1px solid var(--c-border); border-radius: var(--radius); scrollbar-width: thin; }

/* 狀態標籤帶有原因說明時加虛線底線，提示「滑上去看得到內容」 */
.vac-status.has-note { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
/* 點得開細項的狀態：整顆標籤可點，游標與淡框提示可互動 */
.status-link { display: inline-block; text-decoration: none; border-radius: 999px; }
.status-link:hover .vac-status { filter: brightness(.95); box-shadow: 0 0 0 2px var(--c-primary-line); }
.status-link:focus-visible { outline: none; }
.status-link:focus-visible .vac-status { box-shadow: var(--focus-ring); }

/* 系統紀錄：單筆操作的請求內容（JSON 原文），等寬字並允許長行換行 */
.audit-detail {
  margin: 0; padding: .75rem; max-height: 18rem; overflow: auto;
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-all;
}

/* 異動紀錄 */
.version-item { padding: .9rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: .75rem; }
.version-item.current { border-color: var(--c-success-line); }
.version-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.version-no { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.version-meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.version-reason { margin: .4rem 0 .2rem; }
.restore-panel { padding: 1rem; border: 1px solid var(--c-warning-line); background: var(--c-warning-soft); border-radius: var(--radius); }
.node-chain-text { font-size: var(--fs-sm); }

/* 流程設計 ↔ 詮釋資料的互連（app.css :1001-1004） */
.meta-flow-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.meta-flow-links a.vac-status { text-decoration: none; }
.meta-flow-links a.vac-status:hover { text-decoration: underline; }

/* 參數設定（demo ParametersView.vue 的 scoped style）。
   demo 的 hover／選取底色寫 var(--c-surface-hover)，但 demo 沒定義這個變數，實際沒有底色；這裡照實際效果不寫 */
.param-group__head { padding: .6rem 1rem .3rem; font-size: .9rem; color: var(--c-text-muted); }
.param-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .55rem 1rem; background: none; border: 0; border-left: 3px solid transparent; color: inherit;
}
.param-item.active { border-left-color: var(--c-primary); font-weight: 600; }
.param-item__count { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────
   每月排程與查核｜排程總覽（app.css :1014-1041，階段 5：查核表）
   ───────────────────────────────────────────── */
.schedule-matrix { font-size: var(--fs-sm); }
.schedule-matrix th, .schedule-matrix td { text-align: center; padding: .35rem .2rem; white-space: nowrap; }
.schedule-matrix thead th { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.schedule-matrix .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--c-surface); text-align: left; min-width: 11rem; box-shadow: 1px 0 0 var(--c-border); }
.schedule-matrix thead .sticky-col { background: var(--c-head); z-index: 2; }
.schedule-matrix td:not(.sticky-col) { border-left: 1px solid var(--c-border); }
.schedule-matrix .is-today { background: var(--c-primary-soft); }
.schedule-legend { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--c-text-muted); }
.schedule-legend .dot { margin-left: .5rem; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 1px; }
/* 本月排程矩陣的節點：圓圈內為節點順序，依本月狀態上色 */
.node-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .2rem; margin: 1px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; color: #fff; cursor: default;
  border: 2px solid transparent; vertical-align: middle;
}
.schedule-legend .node-mark { min-width: .9rem; height: .9rem; margin-left: .6rem; }
.node-mark.st-S { background: var(--c-success); }
.node-mark.st-F { background: var(--c-danger); }
.node-mark.st-Q, .node-mark.st-M { background: var(--c-warning); color: var(--c-text); }
.node-mark.st-R { background: var(--c-primary); }
.node-mark.st-P { background: var(--c-surface-2); color: var(--c-text-muted); border-color: var(--c-border-strong); }
.dot.send { background: var(--c-side-bottom); }
.dot.receive { background: var(--c-warning); }

/* ─────────────────────────────────────────────
   資料剖析報告（人工補傳，app.css :1148-1160，階段 5）
   demo 的 dt 寫 font-weight: var(--fw-normal)，demo 沒定義這個變數，實際是繼承；這裡寫 inherit
   ───────────────────────────────────────────── */
.profile-report .profile-file { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.profile-report .profile-file dt { color: var(--c-text-muted); font-weight: inherit; }
.profile-report .profile-file dd { margin: 0; word-break: break-all; }
.profile-report .profile-file .fixed { font-family: var(--font-mono); font-size: var(--fs-sm); }
.profile-findings { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.profile-findings li { display: flex; align-items: baseline; gap: .6rem; }
.profile-findings .vac-status { flex: none; }
.profile-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; margin: 0; }
.profile-counts > div { padding: .5rem .75rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.profile-counts dt { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: inherit; }
.profile-counts dd { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.profile-fields { font-size: var(--fs-sm); }
/* Bootstrap 5.3 的 .text-warning-emphasis（demo 用 5.3，Falcon 是 5.2 沒有這個 class），色碼同 5.3 淺色的 --bs-warning-text-emphasis */
.text-warning-emphasis { color: #664d03 !important; }

/* ─────────────────────────────────────────────
   資料品質｜品質儀表板、六大維度卡片與檢核矩陣（app.css :912-999，階段 6）
   demo 的固定欄寫 font-weight: var(--fw-normal)，demo 沒定義這個變數，實際是繼承；這裡寫 inherit
   ───────────────────────────────────────────── */
/* 品質儀表板的篩選列：期別、流程、檢核時機 */
.quality-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.quality-filters .multi-select { min-width: 14rem; }
/* 標籤與欄位成對換行，不拆開 */
.quality-filters .filter-pair { display: inline-flex; align-items: center; gap: .4rem; }
.matrix-filters { margin-bottom: .75rem; }
.matrix-filters .multi-select { min-width: 11rem; }

.quality-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.quality-dim {
  padding: .9rem 1rem; border: 1px solid var(--c-border); border-left-width: 4px;
  border-radius: var(--radius); background: var(--c-surface);
}
.quality-dim.good { border-left-color: var(--c-success-line); }
.quality-dim.warn { border-left-color: var(--c-warning-line); }
.quality-dim.bad  { border-left-color: var(--c-danger-line); }
.quality-dim .dim-head { display: flex; align-items: baseline; gap: .5rem; }
.quality-dim .dim-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.quality-dim .dim-rate { margin-left: auto; font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.quality-dim .dim-bar { display: flex; height: .5rem; border-radius: 999px; overflow: hidden; background: var(--c-surface-2); }
.quality-dim .dim-bar .seg { flex-basis: 0; }
.quality-dim .dim-bar .seg.pass { background: var(--c-success-line); }
.quality-dim .dim-bar .seg.warn { background: var(--c-warning-line); }
.quality-dim .dim-bar .seg.fail { background: var(--c-danger-line); }
.quality-dim .dim-facts {
  margin: .45rem 0 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.quality-dim.none { border-left-color: var(--c-border); }

/* 本期概況：四張數字卡 */
.quality-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.quality-kpi {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 1rem; border: 1px solid var(--c-border); border-left-width: 4px;
  border-left-color: var(--c-border); border-radius: var(--radius); background: var(--c-surface);
}
.quality-kpi.good { border-left-color: var(--c-success-line); }
.quality-kpi.warn { border-left-color: var(--c-warning-line); }
.quality-kpi.bad  { border-left-color: var(--c-danger-line); }
.quality-kpi .kpi-label { font-size: var(--fs-sm); color: var(--c-text-muted); }
.quality-kpi .kpi-value { font-size: 2rem; font-weight: var(--fw-bold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.quality-kpi .kpi-sub { font-size: var(--fs-sm); color: var(--c-text-muted); }
.quality-kpi .kpi-bar { height: .5rem; margin-top: .35rem; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.quality-kpi .kpi-bar span { display: block; height: 100%; }
.quality-kpi .kpi-bar .good { background: var(--c-success-line); }
.quality-kpi .kpi-bar .bad { background: var(--c-danger-line); }

/* 六大維度：左雷達圖、右長條 */
.quality-radar-wrap { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .quality-radar-wrap { grid-template-columns: 1fr; } }
.quality-radar {
  width: 100%; max-width: 22rem; height: auto;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); padding: .5rem;
}
.quality-radar .radar-ring { fill: none; stroke: var(--c-border); stroke-width: 1; }
.quality-radar .radar-axis { stroke: var(--c-border); stroke-width: 1; }
.quality-radar .radar-shape { fill: rgba(31, 78, 140, .18); stroke: var(--c-primary); stroke-width: 2; }
.quality-radar .radar-label { font-size: 13px; fill: var(--c-text); }
.quality-radar-wrap .quality-dims { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.quality-matrix { font-size: var(--fs-sm); }
/* 本期檢核結果：左欄固定，右側每條流程一欄 */
.quality-matrix .flow-col { min-width: 6.5rem; white-space: normal; }
.quality-matrix tfoot th, .quality-matrix tfoot td {
  border-top: 2px solid var(--c-border); font-variant-numeric: tabular-nums;
}
.quality-matrix th, .quality-matrix td { text-align: center; padding: .4rem .35rem; white-space: nowrap; }
.quality-matrix thead th { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.quality-matrix .sticky-col {
  position: sticky; left: 0; z-index: 1; background: var(--c-surface);
  text-align: left; min-width: 12rem; box-shadow: 1px 0 0 var(--c-border); font-weight: inherit;
}
.quality-matrix thead .sticky-col { background: var(--c-head); z-index: 2; }
.cell-btn {
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: .15rem .5rem;
  font-size: var(--fs-sm); font-family: inherit; cursor: pointer; white-space: nowrap;
}
.cell-btn .cell-sub { margin-left: .3rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cell-btn .cell-times { margin-left: .3rem; font-size: .8em; opacity: .75; font-variant-numeric: tabular-nums; }
/* 明細對話框：一期重複檢核時的批次分段標題（115/09/28） */
.batch-head th { background: var(--c-surface-2); font-weight: var(--fw-bold); }
.cell-btn.tone-success { background: var(--c-success-soft); border-color: var(--c-success-line); color: var(--c-success-text); }
.cell-btn.tone-warning { background: var(--c-warning-soft); border-color: var(--c-warning-line); color: var(--c-warning-text); }
.cell-btn.tone-danger  { background: var(--c-danger-soft);  border-color: var(--c-danger-line);  color: var(--c-danger-text); }
.cell-btn:hover { filter: brightness(.96); }

/* ─────────────────────────────────────────────
   詮釋資料明細｜欄位標準表（app.css :1006-1012、:1179-1182，階段 6）
   欄位名稱與型態是英數字，用等寬字比較好對照；可維護的欄位在同一列直接輸入。
   ───────────────────────────────────────────── */
.meta-field-table { font-size: var(--fs-sm); }
.meta-field-table td, .meta-field-table th { padding: .35rem .4rem; vertical-align: middle; }
.meta-field-table td.fixed { font-family: var(--font-mono); white-space: nowrap; }
.meta-field-table .form-control { font-size: var(--fs-sm); }
/* 欄位標準表的品質規則格：已掛的規則編號＋設定按鈕 */
.meta-rule-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.meta-rule-cell .vac-status { font-family: var(--font-mono); }
/* 逐欄品質規則對話框的查找列 */
.rule-search { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.rule-search .form-control { flex: 1 1 auto; }
.rule-search .form-label { white-space: nowrap; }

/* ─────────────────────────────────────────────
   個人查詢的基本資料、統計報表與名冊、下載紀錄的勾選欄（app.css :1044-1056、:1194-1201，階段 6）
   ───────────────────────────────────────────── */
/* 個人查詢的基本資料：標籤在左、內容在右，兩欄並排 */
.person-facts { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 8rem minmax(0, 1fr); gap: .1rem 1rem; margin: 0; }
.person-facts dt { font-weight: var(--fw-medium); color: var(--c-text-muted); padding: .35rem 0; }
.person-facts dd { margin: 0; padding: .35rem 0; border-bottom: 1px solid var(--c-border); }
@media (max-width: 991.98px) { .person-facts { grid-template-columns: 7rem minmax(0, 1fr); } }

.report-sheet__head { margin-bottom: 1rem; }
.report-sheet__head h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0 0 .6rem; }
.report-table { font-variant-numeric: tabular-nums; }
.report-table tr.report-total td { font-weight: var(--fw-bold); background: var(--c-head); }

/* 清單的勾選欄（下載紀錄批次回報已銷毀） */
.pick-col { width: 2.75rem; text-align: center; }
.pick-col .form-check-input { margin: 0; }

/* ─────────────────────────────────────────────
   權限設定｜權限矩陣 GrantMatrix、使用者清單（app.css :1068-1086、:1172-1177、:1184-1192，階段 7）
   ───────────────────────────────────────────── */
.matrix-table { font-size: var(--fs-sm); }
.matrix-table th, .matrix-table td { white-space: nowrap; vertical-align: middle; }
.matrix-table thead th { min-width: 72px; }
/* 類別欄頭只寫名稱（不用編號）；名稱較長者換行，欄寬固定避免整張表被撐開 */
.matrix-table .cat-head { width: 5.5rem; line-height: 1.25; white-space: normal; font-weight: var(--fw-medium); }
.matrix-table .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--c-surface); min-width: 200px; text-align: left; box-shadow: 1px 0 0 var(--c-border); }
.matrix-table thead .sticky-col { background: var(--c-head); z-index: 2; }
.matrix-table .clickable { cursor: pointer; }
.matrix-table .clickable:hover { color: var(--c-primary); }
.matrix-table td.cell-na { background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(105, 115, 134, .08) 5px 10px); }
.matrix-table .cell { display: inline-flex; align-items: center; gap: .3rem; }
.matrix-table .role-mark { color: var(--c-primary); font-size: 1rem; }
.matrix-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; font-size: var(--fs-sm); color: var(--c-text-muted); }
.matrix-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--c-border); border-radius: 3px; }
.legend.na { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(105, 115, 134, .25) 3px 6px); }

/* 權限矩陣：系統功能依畫面分組 */
.system-fn-table .system-page th {
  background: var(--c-surface-2); color: var(--c-text-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); padding-top: .55rem; padding-bottom: .55rem;
}
.system-fn-table .fn-name { width: 11rem; font-weight: var(--fw-medium); white-space: nowrap; }

/* 使用者權限：套用角色下拉與已選角色摘要 */
.role-select { display: grid; gap: .5rem; max-width: 44rem; }
.role-select .role-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .5rem .75rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); }

/* 使用者清單：角色與額外的功能分兩行 */
.grant-lines { display: grid; gap: .35rem; }
.grant-line { display: flex; align-items: flex-start; gap: .5rem; }
.grant-line__label { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--c-text-muted); padding-top: .15rem; min-width: 2.2em; }

/* ─────────────────────────────────────────────
   整批匯入（demo BulkImportView.vue 的 scoped style，階段 5）
   demo 的外框寫 var(--c-line)，但 demo 沒定義這個變數，實際沒有框線；這裡照實際效果不寫
   ───────────────────────────────────────────── */
.import-kpis { display: flex; flex-wrap: wrap; gap: .75rem; }
.import-kpi { min-width: 7rem; padding: .6rem .9rem; border-radius: var(--radius); background: var(--c-surface-2); }
.import-kpi .kpi-label { display: block; color: var(--c-text-muted); font-size: .9em; }
.import-kpi .kpi-value { font-size: 1.4em; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.import-kpi.good .kpi-value { color: var(--c-success-text); }
.import-kpi.bad .kpi-value { color: var(--c-danger-text); }

/* ─────────────────────────────────────────────
   列印（app.css :1058-1066）
   ───────────────────────────────────────────── */
@media print {
  .vac-sidebar, .vac-topbar, .vac-toast-stack, .vac-backdrop, .modal-header, .modal-footer, .d-print-none { display: none !important; }
  .vac-modal { position: static; background: none; }
  .vac-modal .modal-dialog { max-width: none; margin: 0; }
  .vac-modal .modal-content { border: 0; box-shadow: none; }
  .vac-main { margin-left: 0 !important; }
  .vac-main, body { background: #fff; }
  .table-wrap { overflow: visible; }
  /* 開著 VAC 對話框（例：報表預覽）時只印對話框（階段 6）：demo 註解與規範書「名冊、報表預覽列印」要只印報表內容，
     但 demo 的對話框掛在 body、版面沒有隱藏，實際會連背後的清單一起印；DemoVAC 照原意只印對話框 */
  body:has(> .vac-modal) .vac-shell { display: none !important; }
  /* 可捲動的大對話框（extra-wide）列印時不截高度，長的名冊才印得完 */
  .vac-modal .modal-dialog-scrollable { height: auto; }
  .vac-modal .modal-dialog-scrollable .modal-content { max-height: none; overflow: visible; }
  .vac-modal .modal-dialog-scrollable .modal-body { overflow: visible; }
}