/* ===== 基本字型設定 ===== */
:root {
  --font-base: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;

  --color-text: #142b50;
  --color-muted: #536781;
  --color-primary: #1264df;
  --color-bg: #f1f7fc;
  --base-workspace-background: radial-gradient(ellipse at 100% 0%, rgb(191 224 250 / 28%), transparent 65%), linear-gradient(160deg, #f8fbfe 0%, #edf6fd 100%);

  /* 共用設計值：各頁可逐步改用，避免重複定義。 */
  --base-surface: #ffffff;
  --base-surface-muted: #edf4fa;
  --base-border: #d3e1ef;
  --base-primary-hover: #0956c5;
  --base-primary-soft: #e1f0ff;
  --base-danger: #b91c1c;
  --base-success: #15803d;
  --base-warning: #b45309;
  --base-overlay: rgb(15 23 42 / 32%);
  --base-space-1: 4px;
  --base-space-2: 8px;
  --base-space-3: 12px;
  --base-space-4: 16px;
  --base-space-5: 24px;
  --base-space-6: 32px;
  --base-radius: 10px;
  --base-control-height: 44px;
  --base-panel-width: 440px;
  --base-duration-fast: 140ms;
  --base-duration: 240ms;
  --base-panel-duration: 400ms;
  --base-page-duration: 520ms;
  --base-ease: cubic-bezier(.22, 1, .36, 1);
  --base-layer-overlay: 1000;
  --base-layer-panel: 1010;
  --base-layer-toast: 1020;
}

html, body {
  font-family: var(--font-base);
  font-size: var(--fs-md);
  color: var(--color-text);
  background-color: var(--color-bg);
}

body { background-image: var(--base-workspace-background); }

/* 標題層級 */
h1 { font-size: var(--fs-xl); }
h2 { font-size: 22px; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: 18px; }

/* 數字特別顯眼 */
.number {
  font-size: var(--fs-xl);
  font-weight: 600;
}

/* 輔助文字 */
.text-muted {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* 按鈕字級 */
button {
  font-size: var(--fs-md);
}

/* ===============================
   Cases page（案件查詢）專用樣式
   放在 base.css 最底下即可
   =============================== */

.cases-wrap{
  max-width: 980px;
  margin: 40px auto;
}

.cases-table td{
  font-size: var(--fs-sm);
}

.cases-col-id { width: 160px; }
.cases-col-time { width: 140px; }
.cases-col-loc { min-width: 220px; }
.cases-col-type { width: 140px; }
.cases-col-att { min-width: 180px; }
.cases-col-act { width: 90px; }

.cases-time{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.08);
  font-weight: 600;
}

.cases-dash{
  color: var(--color-muted);
}
/* 保留腳本使用的說明節點，畫面不再顯示補充文案。 */
[data-supplementary="true"] { display: none !important; }


/* 新共用元件採 base- 前綴；既有頁面逐步套用，不覆蓋個別頁面元件。 */
.base-page, .base-page *, .base-panel, .base-panel *,
.base-dialog, .base-dialog *, .base-loading, .base-loading * {
  box-sizing: border-box;
}
.base-page { background: var(--base-workspace-background); padding: var(--base-space-5); line-height: 1.5; }
.base-page-title { margin: 0 0 var(--base-space-5); font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.base-section-title { margin: 0 0 var(--base-space-2); color: var(--color-muted); font-size: var(--fs-sm); font-weight: 600; }
.base-stack { display: flex; flex-direction: column; gap: var(--base-space-4); }
.base-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--base-space-3); }
.base-divider { border: 0; border-top: 1px solid var(--base-border); margin: var(--base-space-5) 0; }

.base-button, .base-action {
  font: inherit; min-height: var(--base-control-height); display: inline-flex;
  align-items: center; justify-content: center; gap: var(--base-space-2);
  cursor: pointer; text-decoration: none; font-weight: 600;
  transition: background-color var(--base-duration-fast), color var(--base-duration-fast), transform var(--base-duration-fast) var(--base-ease);
}
.base-button { padding: 8px 16px; border: 1px solid var(--base-border); border-radius: var(--base-radius); color: var(--color-text); background: var(--base-surface); }
.base-button--soft, .base-button--primary { color: white; background: var(--color-primary); border-color: var(--color-primary); }
.base-button > svg, .base-action > svg { width: 20px; height: 20px; flex-shrink: 0; }
.base-action { padding: 8px; background: transparent; border: 0; border-radius: var(--base-radius); color: var(--color-primary); }
.base-button:active:not(:disabled), .base-action:active:not(:disabled) { transform: scale(.98); }
.base-button:disabled, .base-action:disabled { opacity: .55; cursor: default; }
.base-button:focus-visible, .base-action:focus-visible, .base-nav-item:focus-visible,
.base-list-item:focus-visible, .base-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.base-field { display: grid; min-width: 0; gap: var(--base-space-2); }
.base-label { font-size: var(--fs-sm); font-weight: 600; }
.base-input, .base-select, .base-textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--base-control-height);
  border: 1px solid var(--base-border); border-radius: var(--base-radius);
  padding: 10px 12px; background: var(--base-surface); color: var(--color-text); font: inherit;
  transition: border-color var(--base-duration-fast), box-shadow var(--base-duration-fast);
}
.base-input:disabled, .base-select:disabled, .base-textarea:disabled { background: var(--base-surface-muted); color: var(--color-muted); cursor: not-allowed; opacity: 1; }
.base-textarea { min-height: 112px; resize: vertical; }
.base-input:focus, .base-select:focus, .base-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
.base-input[aria-invalid="true"], .base-select[aria-invalid="true"], .base-textarea[aria-invalid="true"] { border-color: var(--base-danger); }
.base-field-error { margin: 0; color: var(--base-danger); font-size: var(--fs-sm); }

/* 單行控制項與原生日期欄位共用尺寸，避免 iOS 內容撐出 grid 欄位。 */
.base-input, .base-select:not([multiple]):not([size]) { height: var(--base-control-height); max-width: 100%; }
.base-input[type="date"], .base-input[type="time"], .base-input[type="datetime-local"] { appearance: none; -webkit-appearance: none; display: block; overflow: hidden; }
.base-input::-webkit-date-and-time-value { min-width: 0; text-align: start; }

/* 共用前後切換；各功能只負責目前值與切換事件。 */
.base-button.base-arrow { flex: 0 0 var(--base-control-height); width: var(--base-control-height); height: var(--base-control-height); min-width: var(--base-control-height); padding: 0; }
.base-arrow > svg { width: 20px; height: 20px; }
.base-stepper { display: flex; align-items: flex-end; gap: var(--base-space-3); min-width: 0; }
.base-stepper > .base-field { flex: 1 1 0; }
.base-stepper > .base-select, .base-stepper > .base-input { flex: 1 1 0; width: 0; }
.base-month-switch { display: grid; grid-template-columns: var(--base-control-height) minmax(0, 132px) minmax(0, 112px) var(--base-control-height) max-content; align-items: end; gap: var(--base-space-2); }
.base-month-switch > label { min-width: 0; }
.base-pagination { display: flex; align-items: center; justify-content: center; gap: var(--base-space-2); min-width: 0; }
.base-pagination-status { min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.base-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--base-space-4); }
.base-form-grid > * { min-width: 0; }
.base-footer-actions { display: flex; gap: var(--base-space-3); width: 100%; }
.base-footer-actions > .base-button { flex: 1 1 0; min-width: 0; }
@media (max-width: 600px) {
  .base-month-switch { grid-template-columns: var(--base-control-height) minmax(0, 1.15fr) minmax(0, 1fr) var(--base-control-height); }
  .base-month-switch > .base-action { grid-column: 2 / -1; justify-self: end; }
  .base-form-grid { grid-template-columns: minmax(0, 1fr); }
}

.base-list { margin: 0; padding: 0; list-style: none; }
.base-list-item, .base-nav-item {
  display: flex; align-items: center; gap: var(--base-space-3); min-height: 48px;
  padding: 10px 12px; color: var(--color-text); text-decoration: none;
  border: 0; background: transparent; font: inherit; width: 100%; text-align: start;
  cursor: pointer; transition: background-color var(--base-duration-fast), transform var(--base-duration) var(--base-ease);
}
.base-list-item { border-bottom: 1px solid var(--base-border); }
.base-list-arrow { margin-inline-start: auto; color: var(--color-muted); }
.base-nav-item { border-radius: var(--base-radius); transform-origin: center; }
.base-nav-item[aria-current="page"] { color: var(--color-primary); background: var(--base-primary-soft); font-weight: 600; }
/* 共用輕量篩選入口與單選清單；功能頁只提供選項資料。 */
.base-filter { min-height: var(--base-control-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--base-space-2); max-width: 100%; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--base-primary-soft); color: var(--color-primary); font: inherit; cursor: pointer; }
.base-filter > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-filter > svg { width: 16px; height: 16px; flex-shrink: 0; }
.base-filter:focus-visible, .base-choice-option:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.base-filter:disabled, .base-choice-option:disabled { opacity: .55; cursor: default; }
.base-filter:hover:not(:disabled) { background: var(--base-border); }
.base-choice-list { display: grid; gap: var(--base-space-1); }
.base-choice-option { display: flex; align-items: center; gap: var(--base-space-3); width: 100%; min-height: 48px; padding: 12px; border: 0; border-bottom: 1px solid var(--base-border); background: transparent; color: var(--color-text); text-align: start; font: inherit; cursor: pointer; }
.base-choice-label { min-width: 0; overflow-wrap: anywhere; }
.base-choice-description { margin-inline-start: auto; color: var(--color-muted); font-size: var(--fs-sm); white-space: nowrap; }
.base-choice-description[hidden] { display: none; }
.base-choice-check { width: 20px; height: 20px; flex-shrink: 0; margin-inline-start: auto; visibility: hidden; }
.base-choice-description:not([hidden]) + .base-choice-check { margin-inline-start: 0; }
.base-choice-option[aria-selected="true"] { background: var(--base-primary-soft); color: var(--color-primary); border-radius: var(--base-radius); border-bottom-color: transparent; }
.base-choice-option[aria-selected="true"] .base-choice-check { visibility: visible; }
.base-choice-option:hover:not(:disabled) { background: var(--base-surface-muted); }
/* 共用姓名標籤與原生收合區；不包含任何功能資料。 */
.base-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--base-space-2); min-width: 0; }
.base-chip { display: inline-block; max-width: 100%; padding: 6px 10px; border-radius: var(--base-radius); background: var(--base-primary-soft); color: var(--color-text); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.base-disclosure { min-width: 0; }
.base-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--base-space-3); min-height: var(--base-control-height); padding: 10px 12px; background: var(--base-primary-soft); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.base-disclosure > summary::-webkit-details-marker { display: none; }
.base-disclosure > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.base-disclosure > summary > svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--base-duration-fast) var(--base-ease); }
.base-disclosure[open] > summary > svg { transform: rotate(180deg); }
.base-disclosure-body { padding: var(--base-space-3); }
@media (prefers-reduced-motion: reduce) { .base-disclosure > summary > svg { transition: none; } }
.base-tabs { display: flex; gap: var(--base-space-4); border-bottom: 1px solid var(--base-border); }
.base-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 12px 8px; min-height: 44px; font: inherit; color: var(--color-muted); cursor: pointer; transition: color var(--base-duration-fast), border-color var(--base-duration-fast); }
.base-tab[aria-selected="true"] { border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

/* 容器應由共用 HTML / JS 放在主畫面；is-open 控制進出，不以 display 切斷動畫。
   關閉容器仍需由 JS 管理焦點 / inert，儲存與載入的操作鎖定也由 JS 負責。 */
.base-overlay { position: fixed; inset: 0; z-index: var(--base-layer-overlay); background: var(--base-overlay); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--base-duration) var(--base-ease), visibility var(--base-duration); }
.base-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.base-panel {
  position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; z-index: var(--base-layer-panel);
  margin: 0; padding: 0; height: 100dvh; max-width: none; max-height: none;
  border: 0; color: var(--color-text);
  width: min(var(--base-panel-width), 100%); background: var(--base-surface);
  display: flex; flex-direction: column; border-inline-start: 1px solid var(--base-border);
  transform: translateX(100%); visibility: hidden; pointer-events: none;
  transition: transform var(--base-panel-duration) var(--base-ease), visibility var(--base-panel-duration);
}
.base-panel--left { inset-inline-start: 0; inset-inline-end: auto; border-inline-start: 0; border-inline-end: 1px solid var(--base-border); transform: translateX(-100%); }
.base-panel.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.base-panel::backdrop {
  background: var(--base-overlay); opacity: 0;
  transition: opacity var(--base-panel-duration) var(--base-ease);
}
.base-panel.is-open::backdrop { opacity: 1; }
/* 桌機右側內容視窗浮於原畫面；左側導覽維持貼邊抽屜。 */
@media (min-width: 961px) {
  .base-panel:not(.base-panel--left) {
    inset-block: 20px; inset-inline-end: 20px;
    height: calc(100dvh - 40px); max-width: calc(100vw - 40px);
    border: 1px solid var(--base-border); border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 64px rgb(15 23 42 / 18%), 0 4px 16px rgb(15 23 42 / 8%);
    opacity: 0; transform: translateX(calc(100% + 24px)) scale(.98);
    transform-origin: right center;
    transition: transform var(--base-panel-duration) var(--base-ease), opacity var(--base-panel-duration) var(--base-ease), visibility var(--base-panel-duration);
  }
  .base-panel:not(.base-panel--left).is-open { opacity: 1; transform: translateX(0) scale(1); }
  .base-panel:not(.base-panel--left)::backdrop { background: rgb(15 23 42 / 20%); }
}

.base-panel-header, .base-panel-footer { display: flex; align-items: center; gap: 12px; padding: 16px 24px; flex-shrink: 0; }
.base-panel-header { border-bottom: 1px solid var(--base-border); padding-top: max(16px, env(safe-area-inset-top)); }
.base-panel-footer { border-top: 1px solid var(--base-border); justify-content: flex-end; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.base-panel-body { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 24px; }
/* 功能頁 iframe 的尺寸與捲動集中管理。 */
.base-panel--page .base-panel-body { padding: 0; display: flex; overflow: hidden; }
.base-panel-frame { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; border: 0; background: var(--base-workspace-background); }
.base-panel-footer[hidden] { display: none; }
.base-panel-title { margin: 0; font-size: var(--fs-lg); }
.base-panel-close { margin-inline-start: auto; }
.base-panel-handle { display: none; }

/* 手機內容明細共用底部視窗；左側導覽不套用。 */
@media (max-width: 600px) {
  .base-panel--sheet:not(.base-panel--left) {
    inset: auto 0 0; width: 100%; height: 72dvh;
    max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
    border: 1px solid var(--base-border); border-bottom: 0;
    border-radius: 20px 20px 0 0; overflow: hidden;
    box-shadow: 0 -12px 40px rgb(15 23 42 / 16%);
    transform: translateY(100%);
    transition: transform var(--base-panel-duration) var(--base-ease), height var(--base-panel-duration) var(--base-ease), visibility var(--base-panel-duration);
  }
  .base-panel--sheet.is-open { transform: translateY(var(--base-sheet-drag, 0px)); }
  .base-panel--sheet.is-expanded { height: calc(100dvh - env(safe-area-inset-top) - 12px); }
  .base-panel--sheet.is-dragging { transition: none; }
  .base-panel--sheet .base-panel-handle {
    display: flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 100%; padding: 0; border: 0; background: transparent;
    cursor: grab; touch-action: none;
  }
  .base-panel-handle span { width: 40px; height: 4px; border-radius: 4px; background: var(--color-muted); opacity: .5; }
  .base-panel--sheet .base-panel-header { padding-top: 0; }
  .base-panel--sheet .base-panel-body { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
.base-dialog {
  position: fixed; inset: 0; margin: auto; z-index: var(--base-layer-panel);
  width: min(420px, calc(100% - 32px)); height: fit-content; max-height: calc(100dvh - 32px);
  overflow: auto; padding: 24px; background: var(--base-surface); color: var(--color-text);
  border: 1px solid var(--base-border); border-radius: var(--base-radius);
  box-shadow: 0 12px 40px rgb(15 23 42 / 12%);
  opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none;
  transition: opacity var(--base-duration) var(--base-ease), transform var(--base-duration) var(--base-ease), visibility var(--base-duration);
}
.base-dialog.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.base-dialog::backdrop { background: var(--base-overlay); }
.base-toast { position: fixed; z-index: var(--base-layer-toast); inset-inline-end: 24px; top: max(24px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 12px 16px; background: var(--base-surface); border: 1px solid var(--base-border); border-radius: var(--base-radius); color: var(--color-text); box-shadow: 0 4px 16px rgb(15 23 42 / 8%); opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity var(--base-duration), transform var(--base-duration) var(--base-ease), visibility var(--base-duration); pointer-events: none; }
.base-toast.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
.base-toast--success { color: var(--base-success); }
.base-toast--error { color: var(--base-danger); }

/* 救護車圖形之後由 base HTML / JS 提供；CSS 只定義尺寸與動態。 */
.base-loading { position: fixed; inset: 0; z-index: var(--base-layer-panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--base-overlay); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--base-duration), visibility var(--base-duration); }
.base-loading.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.base-loading-vehicle { width: 72px; height: auto; animation: base-vehicle 700ms ease-in-out infinite; }
.base-loading-road { width: 88px; height: 2px; background: repeating-linear-gradient(90deg, var(--color-text) 0 10px, transparent 10px 22px); animation: base-road 600ms linear infinite; }
.base-loading-label { margin: 0; color: var(--color-text); font-size: var(--fs-md); font-weight: 600; }
@keyframes base-vehicle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes base-road { to { background-position: -22px 0; } }

@media (hover: hover) and (pointer: fine) {
  .base-button:hover:not(:disabled), .base-action:hover:not(:disabled), .base-list-item:hover { background: var(--base-surface-muted); }
  .base-button--soft:hover:not(:disabled), .base-button--primary:hover:not(:disabled) { background: var(--base-primary-hover); }
  .base-nav-item:hover { background: var(--base-primary-soft); transform: scale(1.015); }
}
@media (max-width: 600px) {
  .base-page { padding: 20px 16px; }
  .base-panel { width: 100%; }
  .base-panel--left { width: min(320px, 85%); }
  .base-panel-header, .base-panel-footer { padding-inline: 16px; }
  .base-panel-body { padding: 20px 16px; }
  .base-toast { inset-inline: 16px; top: max(16px, env(safe-area-inset-top)); }
  .base-nav-item:active { transform: scale(.985); }
  .base-loading-vehicle { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .base-button, .base-action, .base-input, .base-select, .base-textarea,
  .base-list-item, .base-nav-item, .base-tab, .base-overlay, .base-panel,
  .base-dialog, .base-toast, .base-loading { transition: none; }
  .base-nav-item:hover, .base-nav-item:active, .base-button:active, .base-action:active { transform: none; }
  .base-loading-vehicle, .base-loading-road { animation: none; }
  .base-panel::backdrop { transition: none; }
}

/* 列印不帶入工作面的背景漸層。 */
@media print { body { background-image: none; } .base-page { background: white; } }

/* 桌機同列操作使用一致寬度，避免依文字長度跳動。 */
@media (min-width: 961px) {
  .base-button.base-button--aligned { width: 184px; min-width: 184px; min-height: 44px; box-sizing: border-box; justify-content: center; }
}

/* 共用內容進場與貼底操作面。 */
.base-content-enter { animation: base-content-enter var(--base-duration) var(--base-ease); }
@keyframes base-content-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.base-sticky-surface { background: var(--base-workspace-background); }
@media (prefers-reduced-motion: reduce) { .base-content-enter { animation: none; } }

/* 手機功能頁共用滑頁轉場；只移動主內容，選單位置保持不變。 */
@media (max-width: 600px) {
  .base-page-forward, .base-page-backward { animation-duration: var(--base-page-duration); animation-timing-function: var(--base-ease); animation-fill-mode: both; pointer-events: none; }
  .base-page-forward { animation-name: base-page-forward; }
  .base-page-backward { animation-name: base-page-backward; }
}
@keyframes base-page-forward { from { transform: translateX(100%); opacity: .85; } to { transform: translateX(0); opacity: 1; } }
@keyframes base-page-backward { from { transform: translateX(-35%); opacity: .85; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .base-page-forward, .base-page-backward { animation: none; } }

.base-transition-container { overflow-x: clip; position: relative; }
@media (max-width: 600px) {
  .base-page-outgoing { position: absolute; inset: 0; width: 100%; pointer-events: none; animation: base-page-retreat var(--base-page-duration) var(--base-ease) both; }
  .base-page-forward, .base-page-backward { position: relative; z-index: 1; background: var(--base-workspace-background); box-shadow: -12px 0 24px rgb(20 43 80 / 12%); }
}
@keyframes base-page-retreat { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-20%); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .base-page-outgoing { animation: none; } }