/**
 * assets/css/app.css — uniSchedule 基礎樣式（設計 token＋共用元件）
 *
 * 兩層 token 設計：
 *   品牌色（--brand-*）：各單位可於後台設定，由 theme.css 產生器覆寫（P1）
 *   類別語意色（--cat-*）：全平台固定、預先通過 4.5:1 對比驗證，不隨主題變動
 *     ——確保跨單位圖例一致與無障礙保證不失守
 * 類別編碼採「色＋形＋字」三重（形狀 chip 由 ::before 產生），
 * 色盲、灰階列印、高對比模式都不失義。
 */

:root {
  /* 品牌色（預設值；theme.css 會覆寫） */
  --brand-primary: #1a6b54;
  --brand-primary-hover: #145443;
  --brand-primary-subtle: #e2efeb;
  --brand-on-primary: #ffffff;

  /* 類別語意色（固定，勿改——已驗證與白底對比 >= 4.5:1） */
  --cat-tour: #1d4e89;      /* 定時導覽 ● */
  --cat-desk: #2d6a4f;      /* 展廳服務台 ■ */
  --cat-group: #6d3580;     /* 預約團 ▲ */
  --cat-leave: #5c636a;     /* 排休 ─ */
  --cat-support: #a4551e;   /* 支援 ◆ */

  --state-draft: #8a6d00;   /* 草稿標記 */

  /* Bootstrap 變數橋接 */
  --bs-primary: var(--brand-primary);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
}

* { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }

body { font-size: 16px; line-height: 1.6; }

/* 班表數字（時間、次數、人數）等寬對齊——專業排班工具的體感關鍵 */
.tabular, .slot-time, .stat-num { font-variant-numeric: tabular-nums; }

/* 跳至主要內容（無障礙） */
.skip-link {
  position: absolute; left: 0.5rem; top: 0.5rem; z-index: 2000;
  background: var(--brand-primary); color: var(--brand-on-primary);
  padding: 0.5rem 1rem; border-radius: 0.375rem;
}

/* 可見 focus 指示（全站一致） */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* 品牌主按鈕走品牌變數 */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-color: var(--brand-on-primary);
}
/* a11y：outline 按鈕的預設文字色是 Bootstrap 藍 #0d6efd（白底僅 3.7:1，AA 不合格）。
 * outline-primary 改品牌綠 #1a6b54（白底 5.9:1）；
 * outline-secondary 由 #6c757d 加深為 #565d64（淡灰底如平台頁 #f4f5f6 也達 4.5:1）。 */
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
}
.btn-outline-secondary {
  --bs-btn-color: #565d64;
  --bs-btn-border-color: #adb5bd;
  --bs-btn-hover-bg: #565d64;
  --bs-btn-hover-border-color: #565d64;
}

/* ============ 類別 chip（色＋形＋字 三重編碼） ============ */
.cat-chip {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.875rem; line-height: 1.4;
}
.cat-chip::before {
  content: "●"; font-size: 0.7em; line-height: 1;
  color: var(--chip-color, currentColor);
}
.cat-chip.cat-tour    { --chip-color: var(--cat-tour); }
.cat-chip.cat-tour::before    { content: "●"; }
.cat-chip.cat-desk    { --chip-color: var(--cat-desk); }
.cat-chip.cat-desk::before    { content: "■"; }
.cat-chip.cat-group   { --chip-color: var(--cat-group); }
.cat-chip.cat-group::before   { content: "▲"; }
.cat-chip.cat-leave   { --chip-color: var(--cat-leave); }
.cat-chip.cat-leave::before   { content: "─"; }
.cat-chip.cat-support { --chip-color: var(--cat-support); }
.cat-chip.cat-support::before { content: "◆"; }

/* 草稿標記（虛線框＋字樣，非僅色） */
.is-draft {
  border: 1px dashed var(--state-draft) !important;
  position: relative;
}

/* ============ 後台版面 ============ */
.admin-topbar { background-color: var(--brand-primary); }
.admin-wrap { min-height: calc(100vh - 56px); }
.admin-sidebar {
  width: 15rem; flex-shrink: 0;
  background: #f8f9fa; border-right: 1px solid #dee2e6;
}
@media (min-width: 992px) {
  .admin-sidebar { position: sticky; top: 0; height: calc(100vh - 56px); overflow-y: auto; }
}
.admin-sidebar .nav-link { color: #333; border-radius: 0.375rem; padding: 0.35rem 0.75rem; }
.admin-sidebar .nav-link.active {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary); font-weight: 700;
}
.nav-group-label { text-transform: none; letter-spacing: 0.02em; }

/* ============ 平台管理版面（固定深色，永不套單位主題） ============ */
.platform-topbar { background-color: #1a1d20; }
.platform-body { background: #f4f5f6; }

/* ============ 前台公開排班月曆（P2） ============
 * 單一份 <table> markup 三種呈現：
 *   桌面（>=992px）＝月曆格線；手機（<992px）＝線性化逐日 agenda 卡片；
 *   列印＝print.css 強制還原表格（本區手機 media query 限定 screen，
 *   避免 A4 版面誤中線性化——這正是舊系統 ::before 注入 hack 的病灶之一）。
 */

/* 列印專用區塊：螢幕一律隱藏（print.css 於列印時顯示） */
.print-only { display: none; }

.calendar-scroll { overflow-x: auto; }   /* 保險絲：極窄桌面視窗時表格自身捲動，不撐破頁面 */

.schedule-calendar {
  width: 100%;
  table-layout: fixed;          /* 七欄均分，長字換行不擠壓他欄 */
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.schedule-calendar caption { caption-side: top; }
.schedule-calendar thead th {
  border: 1px solid #dee2e6;
  background: var(--brand-primary-subtle);
  padding: 0.35rem 0.5rem;
  text-align: center;
}
.schedule-calendar td {
  border: 1px solid #dee2e6;
  vertical-align: top;
  padding: 0.35rem 0.4rem;
  min-height: 7rem;
  height: 7rem;                 /* table-cell 的 height 作用如 min-height */
}

/* 日期標題：桌面顯示日數字（day-num）、完整日期（day-label）僅供螢幕閱讀器；
 * 手機 agenda 反轉——day-label 成為卡片標頭 */
.day-heading { font-size: 0.875rem; margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.4rem; }
.day-heading .day-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.day-heading .day-label {   /* visually-hidden（保留給輔助科技） */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 今天：邊框＋「今天」文字標記（非僅色） */
.day-today { border: 2px solid var(--brand-primary) !important; }
.badge-today {
  background: var(--brand-primary); color: var(--brand-on-primary);
  font-size: 0.6875rem; line-height: 1; padding: 0.2em 0.45em; border-radius: 0.25rem;
}

/* 非本月日期：整格淡化。
 * a11y：淡化改用「仍達 4.5:1 對比」的實色而非 opacity（axe color-contrast serious），
 * #565d64 於 #f8f9fa／#e9ecef 底皆合格；視覺降階仍成立 */
.day-outside { background: #f8f9fa; }
.day-outside .day-heading, .day-outside .cal-items, .day-outside .day-subtotal,
.day-outside .closed-label { color: #565d64; }
.day-outside .day-heading .day-num { color: #565d64; font-weight: 400; }

/* 休館日：整格灰底＋label（灰底之外仍有文字，非僅色） */
.day-closed { background: #e9ecef; }
.closed-label { color: #495057; font-weight: 700; }

/* 每日項目清單 */
.cal-items { list-style: none; margin: 0; padding: 0; }
.cal-item { margin-bottom: 0.15rem; line-height: 1.45; overflow-wrap: anywhere; }
.cal-item .slot-time { white-space: nowrap; }   /* 時間不可斷行（overflow-wrap:anywhere 會把 10:00 拆成兩行） */
.cal-item .cat-chip { font-size: inherit; }
.slot-bar { color: #adb5bd; margin-right: 0.1em; }
.cal-names { display: inline; }
.cal-unassigned { color: #595f66; }     /* 「（未排）」本身即文字標示；#595f66 於淡底仍 >= 4.5:1 */

/* 人力不足：色＋icon＋文字三重 */
.shortage { color: #b02a37; white-space: nowrap; }

/* 格底小計 */
.day-subtotal { font-size: 0.75rem; color: #495057; border-top: 1px dashed #dee2e6;
  margin-top: 0.25rem; padding-top: 0.15rem; }

/* 統計表 chip 表頭不換行 */
.stats-table th .cat-chip { white-space: nowrap; }

/* ---- 手機（<992px）：線性化為逐日 agenda ----
 * 限定 screen：列印絕不套用（print.css 另強制表格版面雙保險） */
@media screen and (max-width: 991.98px) {
  /* 表格家族全轉 block，脫離格線 */
  .schedule-calendar,
  .schedule-calendar tbody,
  .schedule-calendar tr,
  .schedule-calendar td,
  .schedule-calendar caption { display: block; width: 100%; }

  /* thead 以 visually-hidden 隱藏（非 display:none，輔助科技仍可及） */
  .schedule-calendar thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* 非本月日期整卡隱藏（agenda 只列本月） */
  .schedule-calendar td.day-outside { display: none; }

  /* 每日一卡 */
  .schedule-calendar { font-size: 0.9375rem; }
  .schedule-calendar td {
    border: 1px solid #dee2e6; border-radius: 0.375rem;
    margin-bottom: 0.5rem; min-height: 0; height: auto;
    padding: 0.5rem 0.75rem;
  }
  .schedule-calendar tr { border: 0; }

  /* 卡片標頭＝完整日期；日數字隱藏 */
  .day-heading { border-bottom: 1px solid #e9ecef; padding-bottom: 0.25rem; }
  .day-heading .day-num { display: none; }
  .day-heading .day-label {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
    font-weight: 700;
  }
}
/* 桌面隱藏「跳到今天」捷徑由 Bootstrap 的 .d-lg-none 處理（markup 端） */

/* ============ 動態尊重 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}