/* MKS 工作管制系統 — 色彩 token（淺色 / 深色） */
:root, [data-bs-theme="light"] {
  --app-bg: #f5f6f8;
  --app-nav: #1f3a5f;
  --app-nav-fg: #ffffff;
  --surface-1: #ffffff;
  --series-1: #2a78d6;       /* 分類色 1：藍 */
  --series-2: #eb6834;       /* 分類色 2：橘 */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --incomplete: #6250d6;
  --incomplete-bg: #efedfb;
  --chart-grid: #e6e6e3;
  --chart-text: #52514e;
  --instruction: #8a5a00;
  --instruction-bg: #fff6e0;
}
[data-bs-theme="dark"] {
  --app-bg: #141413;
  --app-nav: #1a2433;
  --surface-1: #1f1f1e;
  --series-1: #3987e5;
  --series-2: #d95926;
  --incomplete: #9085e9;
  --incomplete-bg: #2a2740;
  --chart-grid: #383835;
  --chart-text: #c3c2b7;
  --instruction: #f0c060;
  --instruction-bg: #33290f;
}
body { background: var(--app-bg); font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.card { --bs-card-bg: var(--surface-1); border-color: var(--bs-border-color-translucent); }

/* 導覽列 */
.app-nav { background: var(--app-nav); }
.app-nav .navbar-brand, .app-nav .nav-link, .app-nav .nav-bell, .app-nav .nav-user { color: rgba(255,255,255,.85); }
.app-nav .nav-link:hover, .app-nav .nav-link.active, .app-nav .navbar-brand { color: #fff; }
.app-nav .nav-link.active { background: rgba(255,255,255,.12); border-radius: .375rem; }
.app-nav .navbar-toggler { border-color: rgba(255,255,255,.3); }
.app-nav .navbar-toggler-icon { filter: invert(1); }
.nav-bell { border: 1px solid rgba(255,255,255,.3); }
.bell-badge { position: absolute; top: -6px; right: -8px; font-size: .65rem; }
.fab { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 1030; }

/* 提醒標籤：顏色一律搭配圖示與文字 */
.badge-critical { background: var(--status-critical); color: #fff; }
.badge-warning { background: var(--status-warning); color: #3a2a00; }
.badge-incomplete { background: var(--incomplete); color: #fff; }
.alert-incomplete { background: var(--incomplete-bg); border-color: var(--incomplete); color: var(--bs-body-color); }
.prio { display: inline-block; min-width: 1.8em; padding: .1em .45em; border-radius: .3rem; font-size: .8rem; font-weight: 600; text-align: center; border: 1px solid currentColor; }
.prio-high { color: var(--status-critical); }
.prio-medium { color: #b07800; }
[data-bs-theme="dark"] .prio-medium { color: var(--status-warning); }
.prio-low { color: var(--bs-secondary-color); }

/* 列表 */
.work-table tbody tr { cursor: pointer; }
.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--status-critical); }
.row-soon td:first-child { box-shadow: inset 3px 0 0 var(--status-warning); }
.work-card { border-left: 3px solid transparent; }
.card-overdue { border-left-color: var(--status-critical); }
.card-soon { border-left-color: var(--status-warning); }
.tab-pills .nav-link { white-space: nowrap; }
.filter-card .form-label { margin-bottom: .15rem; color: var(--bs-secondary-color); }
.empty-state { text-align: center; color: var(--bs-secondary-color); padding: 3rem 1rem; }
.empty-state > i { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* 統計卡 */
.stat-tile { border-top: 3px solid var(--bs-border-color); }
.stat-tile .stat-label { font-size: .82rem; color: var(--bs-secondary-color); }
.stat-tile .stat-value { font-size: 1.9rem; font-weight: 600; line-height: 1.2; color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.stat-tile .stat-value small { font-size: 1rem; color: var(--bs-secondary-color); }
.tone-critical { border-top-color: var(--status-critical); } .tone-critical .stat-label i { color: var(--status-critical); }
.tone-warning { border-top-color: var(--status-warning); } .tone-warning .stat-label i { color: #b07800; }
.tone-good { border-top-color: var(--status-good); } .tone-good .stat-label i { color: var(--status-good); }
.tone-incomplete { border-top-color: var(--incomplete); } .tone-incomplete .stat-label i { color: var(--incomplete); }
a.stat-tile:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.chart-box { position: relative; width: 100%; }

/* 明細 / 時間軸 */
.pre-wrap { white-space: pre-wrap; word-break: break-word; }
.detail-dl dt { font-weight: 500; color: var(--bs-secondary-color); }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 4px; bottom: 4px; width: 2px; background: var(--bs-border-color); }
.tl-item { position: relative; padding: 0 0 1rem 44px; }
.tl-dot { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: 2px solid var(--bs-border-color); font-size: .85rem; }
.tl-body { background: var(--surface-1); border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; padding: .6rem .8rem; }
.tl-instruction .tl-dot { border-color: var(--instruction); color: var(--instruction); }
.tl-instruction .tl-body { background: var(--instruction-bg); border-color: var(--instruction); }
.tl-status_change .tl-dot { border-color: var(--status-good); color: var(--status-good); }
.tl-system .tl-body { background: transparent; border-style: dashed; }
.tl-system .tl-dot { color: var(--bs-secondary-color); }
.border-instruction { border-color: var(--instruction); }
.btn-instruction { background: var(--instruction); color: #fff; }
[data-bs-theme="dark"] .btn-instruction { color: #1a1a19; }

/* 表單 */
.form-board td, .form-board th { min-width: 52px; }
.cell-dot { font-size: 1.15rem; text-decoration: none; }
.dot-ok { color: var(--status-good); } .dot-bad { color: var(--status-critical); } .dot-none { color: var(--bs-tertiary-color); }
.matrix-table select { min-width: 92px; }
.matrix-2, .matrix-3 { border-color: var(--status-good); }
.matrix-0 { border-color: var(--status-critical); }
.score-group .btn { min-width: 44px; }
.notif-unread { border-left: 3px solid var(--series-1); }
.notif-overdue { color: var(--status-critical); } .notif-due_soon { color: #b07800; } .notif-instruction { color: var(--instruction); } .notif-incomplete { color: var(--incomplete); }
.admin-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* 登入 */
.login-wrap { min-height: calc(100vh - 3rem); display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 420px; }
.login-logo { width: 56px; height: 56px; border-radius: 14px; background: var(--app-nav); color: #fff; font-size: 1.7rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; }

/* 手機 */
@media (max-width: 767.98px) {
  main.container-xl { padding-left: 12px; padding-right: 12px; padding-bottom: 88px !important; }
  .stat-tile .stat-value { font-size: 1.5rem; }
  .sticky-actions { position: sticky; bottom: 0; background: var(--app-bg); padding: .75rem 0; z-index: 5; }
  .form-control, .form-select { font-size: 16px; } /* 避免 iOS 聚焦時自動放大 */
}
.card > .table-responsive > .table > :not(caption) > * > *:first-child { padding-left: 1rem; }
.card > .table-responsive > .table > :not(caption) > * > *:last-child { padding-right: 1rem; }