/*
 * 人才庫系統畫面樣式
 * 色彩：介面本身不上色，品牌藍（數位教育研究所 #6caedf）只用在 logo、主要資料（停留天數）與主要按鈕。
 * 版面：左側 240px 選單 + 流動內容區，內距 32px；格線 12 欄、間距 16px。
 * 1440 寬：1440 − 240 − 32×2 = 1136 內容寬，兩欄 = 8 欄 744 + 16 + 4 欄 376。
 */
:root {
  --ground: #f3f6f9;
  --surface: #ffffff;
  --raised: #f7f9fb;
  --active: #e4eaf0;
  --border: #e1e7ed;
  --rule: #edf1f5;
  --control: #cdd5de;
  --text: #14181d;
  --muted: #56606b;
  --faint: #6a7480;

  --brand: #6caedf;          /* 官網主色，只做圖形（對白底 2.4:1，不可當文字色） */
  --brand-ink: #1f6aa5;      /* 由品牌色加深，連結與主要按鈕（對白底 5.6:1） */
  --brand-ink-hover: #185687;
  --brand-pale: #e9f3fb;

  --positive: #247b50;  --pill-positive-bg: #dcfae5;  --pill-positive-ink: #04250e;
  --negative: #c4242a;  --pill-negative-bg: #ffedea;  --pill-negative-ink: #831c1e;
  --pill-warning-bg: #fffbeb;  --pill-warning-ink: #92400e;  --pill-warning-line: #fde68a;
  --pill-info-bg: var(--brand-pale);  --pill-info-ink: #164e7a;
  --pill-neutral-bg: #eef1f4;  --pill-neutral-ink: #3d4651;

  --radius-card: 8px;  --radius-control: 6px;  --radius-chip: 4px;
  --gap: 16px;  --card-pad: 20px;  --pad: 32px;
  --sidebar: 240px;  --control-height: 36px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --fs-title: 24px;  --fs-section: 16px;  --fs-kpi: 28px;  --fs-body: 14px;  --fs-small: 12px;

  /* Bootstrap 對應 */
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--fs-body);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--ground);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-control);
  --bs-border-radius-sm: var(--radius-chip);
  --bs-border-radius-lg: var(--radius-card);
  --bs-primary: var(--brand-ink);
  --bs-primary-rgb: 31, 106, 165;
  --bs-link-color: var(--brand-ink);
  --bs-link-color-rgb: 31, 106, 165;
  --bs-link-hover-color: var(--brand-ink-hover);
  --bs-link-hover-color-rgb: 24, 86, 135;
  --bs-focus-ring-color: rgba(31, 106, 165, 0.28);
}

body {
  background: var(--ground);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.num, .table td.num { font-variant-numeric: tabular-nums; }
.text-secondary { color: var(--muted) !important; }
.small, small { font-size: 13px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-control); }
.skip-link:focus { left: 8px; }

/* ── 外框 ─────────────────────────────────────────── */
.is-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.canvas { padding: var(--pad); min-width: 0; max-width: 1480px; width: 100%; }

.sidebar {
  background: var(--ground);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 20px 20px; }
.brand { display: flex; flex-direction: column; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { display: block; }
.brand-product { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
.sidebar-nav { flex: 1; padding: 0 12px 16px; }
.nav-group + .nav-group { margin-top: 20px; }
.nav-label { font-size: 12px; color: var(--faint); padding: 0 8px 6px; }
.sidebar .nav-link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 34px; padding: 6px 8px; border-radius: var(--radius-control);
  color: #3a434d; font-size: 14px;
}
.sidebar .nav-link:hover { background: #eaeff4; text-decoration: none; color: var(--text); }
.sidebar .nav-link[aria-current="page"] { background: var(--active); color: var(--text); font-weight: 600; }
.nav-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--brand-ink); color: #fff; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.sidebar-foot { border-top: 1px solid var(--border); padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.user-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 4px; }
.avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-pale); color: var(--pill-info-ink); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.user-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta { font-size: 12px; color: var(--muted); }
.nav-button { border: 0; background: none; width: auto; justify-content: center; color: var(--muted) !important; padding: 6px 10px !important; }

.topbar {
  position: sticky; top: 0; z-index: 1020;
  height: 52px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 14px; }
.topbar-brand:hover { text-decoration: none; }
.icon-btn {
  position: relative; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--radius-control);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
}
.icon-btn:hover { background: var(--raised); }
.icon-btn .dot { position: absolute; top: 11px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--negative); }

@media (max-width: 991.98px) {
  .is-shell { display: block; }
  .canvas { padding: 20px 16px 40px; }
  .sidebar { width: 288px !important; background: var(--surface); }
}

/* ── 標題列 ───────────────────────────────────────── */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 24px; }
.page-head h1 { font-size: var(--fs-title); font-weight: 700; margin: 0; line-height: 1.25; }
.page-head .page-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
h2.h6, .block-title { font-size: var(--fs-section); font-weight: 600; margin-bottom: 12px; }
@media (max-width: 575.98px) {
  .page-head h1 { font-size: 20px; }
}

/* ── 面板 ─────────────────────────────────────────── */
.panel, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.card { --bs-card-border-color: var(--border); --bs-card-border-radius: var(--radius-card); --bs-card-spacer-y: 20px; --bs-card-spacer-x: 20px; }
.panel { padding: 4px 20px; margin-bottom: 24px; }
.panel-pad { padding: var(--card-pad); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.panel-head h2 { font-size: var(--fs-section); font-weight: 600; margin: 0; }
.panel-head .meta { color: var(--muted); font-size: 13px; }
.panel-head h2 { display: flex; align-items: baseline; gap: 8px; }
.head-count { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.head-count.is-zero { color: var(--faint); font-weight: 400; }
.meta-bad { color: var(--negative); font-weight: 500; }
.aside-note { margin: 0; padding: 0 4px; font-size: 13px; color: var(--muted); }
.panel > .panel-body { padding: 0 20px 16px; }
.panel.flush { padding: 0; }
.panel .table-responsive { margin: 0 -20px; padding: 0 20px; }
.panel.flush > .table-responsive { margin: 0; }
.panel > .panel-body.table-responsive { padding-bottom: 4px; }

/* ── KPI（一個容器以分隔線切欄） ───────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--gap); }
.kpi { padding: 16px 20px; color: var(--text); display: block; }
.kpi + .kpi { border-left: 1px solid var(--border); }
a.kpi:hover { background: var(--raised); text-decoration: none; }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-value { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-value .unit { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.kpi-value.is-none { color: var(--faint); font-weight: 400; }
.kpi-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi-note.bad { color: var(--negative); font-weight: 600; }
@media (max-width: 767.98px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
  .kpi-value { font-size: 24px; }
}

/* ── 首頁格線 ─────────────────────────────────────── */
.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.home-grid .panel { margin-bottom: 0; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (max-width: 1199.98px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

/* 停留天數：軌道長度到逾期門檻，填色為已停留天數，超過門檻轉紅 */
.dwell { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.dwell-track { position: relative; width: 72px; height: 6px; border-radius: 3px; background: var(--rule); flex: none; }
.dwell-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--brand); }
.dwell.is-over .dwell-fill { background: var(--negative); }
.dwell-text { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.dwell.is-over .dwell-text { color: var(--negative); font-weight: 500; }

/* 首頁的簽核表格：手機上關卡與對象併到第二行 */
.flow-table td.num { white-space: nowrap; }
.flow-table .only-phone { display: none; }
@media (max-width: 639.98px) {
  .flow-table .col-step, .flow-table .col-who { display: none; }
  .flow-table .only-phone { display: block; }
  .flow-table .dwell-track { display: none; }
  .flow-table td:first-child { min-width: 0; }
}

/* 清單列（側欄的退件、通知） */
.rows { list-style: none; margin: 0; padding: 0 20px 8px; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.rows li:first-child { border-top: 0; }
.rows .row-main { min-width: 0; }
.rows .row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .row-sub { display: block; font-size: 12px; color: var(--muted); }
.rows .row-side { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rows .row-actions { flex: none; display: flex; gap: 8px; align-items: center; }
.form-catalog .rows { padding: 4px 20px; }
@media (min-width: 1200px) {
  .form-catalog .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .form-catalog .rows li:nth-child(2) { border-top: 0; }
}
.form-catalog .rows li { align-items: center; min-height: 64px; }
.empty-line { margin: 0 20px 16px; padding: 10px 12px; border: 1px dashed var(--control); border-radius: var(--radius-card); color: var(--muted); font-size: 13px; }
.panel-foot { padding: 0 20px 16px; font-size: 13px; }

/* ── 表格 ─────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--raised);
  --bs-table-border-color: var(--rule);
  margin-bottom: 0;
  font-size: 14px;
}
.table > thead th {
  font-size: 12px; font-weight: 400; color: var(--muted);
  border-bottom: 1px solid var(--border); padding-top: 12px; padding-bottom: 8px; white-space: nowrap;
}
.table > tbody > tr > td { padding-top: 11px; padding-bottom: 11px; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; }
.cell-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.cell-strong { font-weight: 600; }
.table-sm > :not(caption) > * > * { padding-left: 8px; padding-right: 8px; }
.table > :not(caption) > tr > :first-child { padding-left: 0; }
.table > :not(caption) > tr > :last-child { padding-right: 0; }
.list-empty { color: var(--muted); padding: 14px 0; margin: 0; }

/* 通知：未讀以粗體加品牌色圓點 */
.note-title { display: inline-flex; align-items: baseline; gap: 8px; }
.note-title.is-unread a, .note-title.is-unread > span:last-child { font-weight: 600; }
.unread-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); position: relative; top: -1px; }
.note-title:not(.is-unread) { padding-left: 16px; }
.note-title:not(.is-unread) a { color: var(--muted); }

/* ── 狀態標籤：淡底深字同色系 ─────────────────────── */
.pill {
  display: inline-flex; align-items: center; flex: none; white-space: nowrap;
  height: 22px; padding: 0 8px; border-radius: var(--radius-chip);
  font-size: 12px; font-weight: 500; line-height: 1;
  background: var(--pill-neutral-bg); color: var(--pill-neutral-ink);
}
.pill-positive { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pill-negative { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pill-warning { background: var(--pill-warning-bg); color: var(--pill-warning-ink); box-shadow: inset 0 0 0 1px var(--pill-warning-line); }
.pill-info { background: var(--pill-info-bg); color: var(--pill-info-ink); }
.badge.text-bg-danger { background: var(--negative) !important; }

/* ── 按鈕與欄位 ───────────────────────────────────── */
.btn { --bs-btn-font-size: 14px; --bs-btn-border-radius: var(--radius-control); --bs-btn-padding-y: 6px; --bs-btn-padding-x: 14px; font-weight: 500; }
.btn-sm { --bs-btn-font-size: 14px; --bs-btn-padding-y: 5px; --bs-btn-padding-x: 12px; --bs-btn-border-radius: var(--radius-control); }
.btn-primary {
  --bs-btn-bg: var(--brand-ink); --bs-btn-border-color: var(--brand-ink);
  --bs-btn-hover-bg: var(--brand-ink-hover); --bs-btn-hover-border-color: var(--brand-ink-hover);
  --bs-btn-active-bg: #134870; --bs-btn-active-border-color: #134870;
  --bs-btn-disabled-bg: var(--brand-ink); --bs-btn-disabled-border-color: var(--brand-ink);
}
.btn-outline-primary, .btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--text); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--control);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--raised); --bs-btn-hover-border-color: #b7c1cc;
  --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--active); --bs-btn-active-border-color: #b7c1cc;
  --bs-btn-disabled-color: var(--faint); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--border);
}
.btn-outline-danger { --bs-btn-color: var(--negative); --bs-btn-border-color: #e9b4b6; --bs-btn-hover-bg: var(--pill-negative-bg); --bs-btn-hover-color: var(--pill-negative-ink); --bs-btn-hover-border-color: #e19a9d; --bs-btn-bg: var(--surface); }
.btn-danger { --bs-btn-bg: var(--negative); --bs-btn-border-color: var(--negative); --bs-btn-hover-bg: #a51d22; --bs-btn-hover-border-color: #a51d22; }
.btn-success { --bs-btn-bg: var(--positive); --bs-btn-border-color: var(--positive); --bs-btn-hover-bg: #1d6542; --bs-btn-hover-border-color: #1d6542; }
.btn-link { --bs-btn-color: var(--brand-ink); padding-left: 0; padding-right: 0; }
.btn-ghost { --bs-btn-color: var(--brand-ink); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--brand-pale); --bs-btn-hover-color: var(--brand-ink-hover); --bs-btn-hover-border-color: transparent; }

.form-control, .form-select {
  min-height: var(--control-height); font-size: 14px;
  border-color: var(--control); border-radius: var(--radius-control); background-color: var(--surface);
}
.form-control::placeholder { color: var(--faint); }
.form-control-sm, .form-select-sm { min-height: 34px; font-size: 14px; border-radius: var(--radius-control); }
.form-control:focus, .form-select:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--brand-ink); border-color: var(--brand-ink); }
.form-label { font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.form-label.small { font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 4px; }
.form-text { color: var(--muted); font-size: 12px; }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* 表單填寫頁：左欄表單（申請內容、指定簽核人、附件），右欄簽核流程 */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.form-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.form-sheet .panel, .form-flow { margin: 0; }
.form-sheet .panel .panel { border: 0; padding: 0; margin: 0; }
.form-flow { position: sticky; top: 24px; }
.flow-steps { list-style: none; margin: 0; padding: 0 20px 16px; counter-reset: step; }
.flow-steps li { counter-increment: step; position: relative; padding: 8px 0 8px 32px; }
.flow-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 8px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand-pale); color: var(--pill-info-ink);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.flow-steps li + li::after { content: ""; position: absolute; left: 10px; top: -6px; width: 2px; height: 14px; background: var(--rule); }
@media (max-width: 1199.98px) {
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form-flow { position: static; order: -1; }
  .flow-steps { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .flow-steps li + li::after { display: none; }
}
.page-head h1 .pill { vertical-align: middle; position: relative; top: -2px; }

/* 查詢條件列 */
.filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 16px 14px; margin: 0 0 var(--gap) !important; }

/* 提示 */
.alert { border-radius: var(--radius-card); font-size: 14px; border-width: 1px; }
.alert-info { --bs-alert-bg: var(--brand-pale); --bs-alert-color: #164e7a; --bs-alert-border-color: #cfe3f3; }
.alert-warning { --bs-alert-bg: var(--pill-warning-bg); --bs-alert-color: var(--pill-warning-ink); --bs-alert-border-color: var(--pill-warning-line); }
.alert-success { --bs-alert-bg: #effaf3; --bs-alert-color: #14502f; --bs-alert-border-color: #c6ebd3; }
.alert-danger { --bs-alert-bg: #fff4f2; --bs-alert-color: var(--pill-negative-ink); --bs-alert-border-color: #f6cdc8; }

/* 對話框與浮動元件：唯一使用陰影的地方 */
.modal-content { border: 0; border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 24, 29, 0.18); }
.modal-header, .modal-footer { border-color: var(--rule); }
.modal-title { font-size: 16px; font-weight: 600; }
.dropdown-menu, .list-group.position-absolute { box-shadow: 0 8px 24px rgba(20, 24, 29, 0.12); border-color: var(--border); }
.toast { border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(20, 24, 29, 0.16); }

/* 明細頁：重點欄位（一個容器以分隔線切欄） */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--gap); }
.fact { padding: 14px 20px; min-width: 0; }
.fact + .fact { border-left: 1px solid var(--border); }
.fact-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
@media (min-width: 768px) {
  .facts .fact:nth-child(4n+1) { border-left: 0; }
  .facts .fact:nth-child(n+5) { border-top: 1px solid var(--border); }
}
@media (max-width: 767.98px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* 關卡進度：已通過的段落以品牌色標示，目前關卡加粗 */
.stepper { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 24px; overflow-x: auto; }
.step { flex: 1 1 0; min-width: 120px; padding: 10px 12px 0; border-top: 3px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.step.is-done { border-top-color: var(--brand); }
.step.is-current { border-top-color: var(--brand-ink); }
.step-name { font-size: 14px; }
.step.is-current .step-name { font-weight: 600; }
.step-state { font-size: 12px; color: var(--muted); }
.step.is-current .step-state { color: var(--brand-ink); }

/* 流程關卡 */
.list-group { --bs-list-group-border-color: var(--border); --bs-list-group-active-bg: var(--brand-ink); }
.list-group-item-primary { background: var(--brand-pale); color: #164e7a; font-weight: 600; }
.list-group-item-success { background: #f2faf5; color: #14502f; }

/* 觸控區至少 44px（開發規劃 2.6 節） */
@media (pointer: coarse) {
  .btn-touch, .sidebar .nav-link { min-height: 44px; }
}
.btn-touch { display: inline-flex; align-items: center; justify-content: center; }

/* ── 登入頁 ───────────────────────────────────────── */
.bare { min-height: 100vh; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-box { width: 100%; max-width: 400px; }
.login-brand { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.login-brand h1 { font-size: 22px; font-weight: 700; margin: 0; }
.login-brand p { margin: 0; color: var(--muted); }
.login-box .panel { padding: 24px; margin: 0; }
.login-foot { margin-top: 16px; font-size: 12px; color: var(--muted); }

/* 列印：隱藏操作元件並加上列印人浮水印（F-SYS-021） */
@media print {
  .btn, .sidebar, .topbar, .toast-container { display: none !important; }
  .is-shell { display: block; }
  .canvas { padding: 0; }
  body[data-watermark]::before {
    content: attr(data-watermark);
    position: fixed;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.15);
    transform: rotate(-20deg);
    pointer-events: none;
  }
}

/* 表格第一欄在手機上保留可讀寬度 */
@media (max-width: 767.98px) {
  .table td:first-child { min-width: 7rem; }
}