/**
 * ewClinicCloud 全站樣式（P0 基礎版）
 *
 * P4 會換上 Claude Design 的完整視覺；本檔只負責三件事：
 *   1. 診所客製色彩的 CSS 變數接口（--ewcc-primary / --ewcc-accent 由 layout 注入）
 *   2. 無障礙基線：可見焦點、skip link、足夠對比
 *   3. 幾個共用版面元件
 *
 * 對比度備註（WCAG 2.1 AA 一般文字需 >= 4.5:1）：
 *   #0d5c63（預設主色）對白底 ≈ 7.6:1，白字對 #0d5c63 亦 ≈ 7.6:1
 *   #c05621（預設輔色）白字對其 ≈ 4.5:1，僅用於徽章／按鈕，不作內文色
 *   內文次要文字用 #495057（對白底 ≈ 8.6:1），不使用更淺的灰
 */

:root {
    --ewcc-primary: #0d5c63;
    --ewcc-accent: #c05621;
    --ewcc-text: #212529;
    --ewcc-text-muted: #495057;
    --ewcc-surface: #ffffff;
    --ewcc-bg: #f4f6f7;
}

body {
    background-color: var(--ewcc-bg);
    color: var(--ewcc-text);
}

/* ---- 跳至主要內容（鍵盤第一個焦點；未聚焦時移出畫面但不用 display:none）---- */
.ewcc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    padding: 0.5rem 1rem;
    background: var(--ewcc-primary);
    color: #ffffff;
    text-decoration: underline;
}

.ewcc-skip-link:focus {
    left: 0;
}

/* ---- 可見焦點：不得以 outline:none 移除 ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 3px solid var(--ewcc-accent);
    outline-offset: 2px;
}

/* ---- 頁首／頁尾 ---- */
.ewcc-header {
    background-color: var(--ewcc-primary);
    color: #ffffff;
}

.ewcc-header .nav-link,
.ewcc-header .ewcc-user,
.ewcc-header .ewcc-brand {
    color: #ffffff;
}

.ewcc-header .nav-link:hover,
.ewcc-header .nav-link:focus {
    color: #ffffff;
    text-decoration: underline;
}

.ewcc-brand {
    font-size: 1.15rem;
    font-weight: 700;
}

.ewcc-logo {
    height: 2rem;
    width: auto;
}

.ewcc-user {
    font-size: 0.9rem;
}

.ewcc-footer {
    background-color: #ffffff;
    border-top: 1px solid #d5dbde;
    color: var(--ewcc-text-muted);
}

/* ---- 卡片與統計數字 ---- */
/*
 * P1 修正：拿掉原本寫死的 height:100%。
 * 原因（P1 截圖實測發現）：同一欄裡上下堆疊多張卡片時，每張都想撐到「整欄的高度」，
 * 結果卡片相互擠出版面、頁尾被推到頁面中間。
 * 需要同列等高的地方（例如總覽的統計卡）改用 Bootstrap 原生的 `h-100` 工具類別
 * ——那正是它存在的用途，不必自訂樣式（平台原生優於自建）。
 */
.ewcc-card {
    background: var(--ewcc-surface);
    border: 1px solid #d5dbde;
    /* P2：圓角與內距改吃版型變數（見檔尾「版型」段），預設值等同原本的寫死值 */
    border-radius: var(--ewcc-radius, 0.5rem);
    padding: var(--ewcc-card-pad, 1.25rem);
}

.ewcc-stat {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ewcc-primary);
    line-height: 1.2;
}

.ewcc-stat-label {
    color: var(--ewcc-text-muted);
    font-size: 0.95rem;
}

/* ---- 主要按鈕（沿用診所主色，白字對比已驗證）---- */
.btn-ewcc {
    background-color: var(--ewcc-primary);
    border-color: var(--ewcc-primary);
    color: #ffffff;
}

.btn-ewcc:hover,
.btn-ewcc:focus {
    background-color: #094348;
    border-color: #094348;
    color: #ffffff;
}

/* ---- 登入表單 ---- */
.ewcc-login-card {
    max-width: 26rem;
    margin: 2rem auto;
}

/* ---- 病歷紅線警語（PLAN 2-I：所有備註欄位旁固定顯示）---- */
.ewcc-note-warning {
    color: #8a3208;
    background-color: #fdf3ec;
    border-left: 4px solid var(--ewcc-accent);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* ---- 必填標記 ---- */
.ewcc-required {
    color: #b02a37;
    font-weight: 700;
}

/* =========================================================================
   欄位級錯誤（P1 建立的全案慣例，之後各 phase 沿用）

   結構：
     <input class="form-control is-invalid" aria-invalid="true"
            aria-describedby="hint_x err_x">
     <div class="invalid-feedback d-block" id="err_x">訊息</div>
   表單頂端另有錯誤摘要 .ewcc-error-summary，每則錯誤是指向欄位的錨點（WCAG 3.3.1）。

   對比度：#b02a37 對白底 ≈ 5.9:1（AA 通過）；紅色只是輔助，
   錯誤本身一定有文字說明，不以顏色作為唯一的傳達手段（WCAG 1.4.1）。
   ========================================================================= */
.invalid-feedback {
    color: #b02a37;
    font-size: 0.9rem;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
    border-color: #b02a37;
    /* 除了顏色，另加一條較粗的左框線，色覺障礙者也能辨識 */
    border-left-width: 4px;
}

.ewcc-error-summary ul {
    padding-left: 1.25rem;
}

.ewcc-error-summary a {
    color: #7a1c26;
}

/* 錯誤摘要以程式聚焦時（tabindex="-1"）仍要看得見焦點 */
.ewcc-error-summary:focus-visible {
    outline: 3px solid var(--ewcc-accent);
    outline-offset: 2px;
}

/* ---- 行內程式碼色彩 ----
   Bootstrap 預設的 code 色 #d63384（粉紅）在淺色底上對比不足：
   axe 實測 #d63384 對 alert-info 的 #cff4fc 只有 3.85:1（AA 需 4.5:1）。
   改用較深的 #8a1c4f：對白底約 8.9:1、對 #cff4fc 約 7.6:1，兩種底色都通過。 */
code {
    color: #8a1c4f;
}

/* ---- alert 區塊內的連結（P8c）----
   與上面 code 色是同一個成因：Bootstrap 預設連結色 #0d6efd 在 .alert-info 的
   淺底 #cff4fc 上只有 3.85:1（AA 需 4.5:1）——axe 實測。
   修法：連結沿用該 alert 自己的文字色（.alert-info 是 #055160，本來就是為那個底色
   挑的，任何 alert 變體都必然達標），再用「永久底線＋粗體」維持「這是連結」的
   非顏色識別（WCAG 1.4.1：不得只靠顏色傳達資訊）。
   影響範圍：所有 .alert 內的連結（含 P5 現場掛號頁「無可掛診次」提示裡的既有連結，
   那一個是同樣的潛在違規，只是過去的掃描剛好都有診次而沒渲染到）。 */
.alert a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

/* ---- 表單卡片（單欄表單頁面的寬度上限，避免超長行難以閱讀）---- */
.ewcc-form-card {
    max-width: 46rem;
}

/* ---- 稽核紀錄的 JSON 區塊 ---- */
.ewcc-audit-json {
    background: #f4f6f7;
    border: 1px solid #d5dbde;
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* =========================================================================
   版型（N11，P2）— body 的 theme-{代碼} class

   三個版型的差異刻意做成「同一組 CSS 變數的三組值」，不是三份樣式表：
     - 只有一個地方定義「卡片內距是什麼」，改版時不會有兩份漸漸長歪；
     - 版型代碼永遠不會變成檔案路徑（不做動態 layout 載入＝沒有 LFI 面）。

   差異必須**可量測**（驗收會用 Playwright 讀 computed style）：
     卡片內距、圓角、卡片間距、表格密度、主要內容區上下留白。
   顏色不隨版型改變（那是 color_primary／color_accent 的職責）。
   ========================================================================= */
:root {
    --ewcc-card-pad: 1.25rem;
    --ewcc-radius: 0.5rem;
    --ewcc-main-pad: 1.5rem;
    --ewcc-cell-pad: 0.5rem;
}

/* 標準：與 P0／P1 的既有版面完全相同（不改變既有畫面） */
body.theme-default {
    --ewcc-card-pad: 1.25rem;
    --ewcc-radius: 0.5rem;
    --ewcc-main-pad: 1.5rem;
    --ewcc-cell-pad: 0.5rem;
}

/* 緊湊：資訊密度高，適合櫃檯一次看很多列 */
body.theme-compact {
    --ewcc-card-pad: 0.65rem;
    --ewcc-radius: 0.2rem;
    --ewcc-main-pad: 0.75rem;
    --ewcc-cell-pad: 0.3rem;
}

/* 寬鬆：間距大、圓角柔和，適合觸控與長者使用 */
body.theme-cozy {
    --ewcc-card-pad: 2rem;
    --ewcc-radius: 1rem;
    --ewcc-main-pad: 2.5rem;
    --ewcc-cell-pad: 0.85rem;
}

/* 主要內容區上下留白
   注意：這裡不能沿用 Bootstrap 的 .py-4——它的 utility class 帶 !important，
   會蓋掉版型變數（P2 實測：三種版型的 main padding 都被鎖在 24px）。
   layout 改用自訂的 .ewcc-main，留白完全由版型變數決定。 */
.ewcc-main {
    padding-top: var(--ewcc-main-pad);
    padding-bottom: var(--ewcc-main-pad);
}

/* 表格密度 */
body.ewcc-app .table > :not(caption) > * > * {
    padding-top: var(--ewcc-cell-pad);
    padding-bottom: var(--ewcc-cell-pad);
}

/* 卡片之間的垂直間距（.mb-3／.mb-4 之外的一致基準） */
body.theme-compact .ewcc-card + .ewcc-card,
body.theme-compact .row.g-3 { margin-top: 0.5rem; }
body.theme-cozy .ewcc-card + .ewcc-card { margin-top: 1.5rem; }

/* =========================================================================
   客製化設定頁（P2）
   ========================================================================= */

/* Logo 預覽：限制高度避免大圖撐破版面（實際上傳已限制 2000px） */
.ewcc-logo-preview {
    max-height: 6rem;
    max-width: 100%;
    height: auto;
    background: #ffffff;
    border: 1px solid #d5dbde;
    border-radius: var(--ewcc-radius, 0.5rem);
    padding: 0.25rem;
}

/* 色碼欄位旁的色塊預覽（純裝飾，aria-hidden；顏色不是唯一資訊來源） */
.ewcc-color-swatch {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border: 1px solid #6c757d;
    border-radius: 0.25rem;
}

/* =========================================================================
   排班網格（P3）— 醫師診次班表／人員排班的週檢視
   ========================================================================= */

/* 網格儲存格：固定最小寬度讓七天並排，內容多時各格自行捲動不撐破版面 */
.ewcc-schedule-grid th,
.ewcc-schedule-grid td {
    min-width: 6.5rem;
    vertical-align: top;
}

/* 今天那一欄／列的表頭標記：以較深的邊框強調（顏色非唯一資訊，另有「（今天）」文字） */
.ewcc-schedule-grid th.ewcc-today {
    background-color: #fff3cd;   /* 淺琥珀底，與深色表頭文字對比 > 4.5:1 */
    box-shadow: inset 0 -3px 0 var(--ewcc-primary, #0d5c63);
}

/* =========================================================================
   民眾端線上預約（P4）— 行動優先 RWD

   視覺目標：現代、清爽、掛號 3 步內完成。所有版面用 Bootstrap 的 grid／flex
   達成三斷點（手機／平板／桌機）自適應，這裡只補幾個語意元件的樣式。
   對比度：診次卡片文字用 --ewcc-text / --ewcc-text-muted（皆對白底 > 4.5:1）。
   ========================================================================= */

/* 診次卡片：卡片式清單，剩餘名額與「預約」鈕清楚可點（觸控友善） */
.ewcc-shift-card {
    transition: box-shadow 0.15s ease-in-out;
}
.ewcc-shift-card:hover,
.ewcc-shift-card:focus-within {
    box-shadow: 0 0.25rem 0.75rem rgba(13, 92, 99, 0.15);
}
.ewcc-shift-doctor {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ewcc-text);
}
.ewcc-shift-date {
    font-weight: 600;
}

/* 確認頁的定義清單：標籤欄用次要文字色，值欄用主要文字色 */
.ewcc-confirm-list dt {
    color: var(--ewcc-text-muted);
    font-weight: 600;
}
.ewcc-confirm-list dd {
    color: var(--ewcc-text);
}

/* 我的預約頁頂端操作列在窄螢幕自動換行（Bootstrap flex-wrap 已處理，
   這裡只確保按鈕在極窄寬度不溢出） */
.ewcc-booking .btn {
    white-space: normal;
}

/* Bootstrap 的 .btn-outline-secondary 預設文字色 #6c757d，對本站淺灰底
   (#f4f6f7) 只有 4.32:1，未達 WCAG 1.4.3 的 4.5:1（axe 實測 serious）。
   加深為 #495057（對白底 ≈ 8.6:1、對 #f4f6f7 ≈ 8.2:1，皆通過 AA）；
   hover/focus 時 Bootstrap 會填入底色＋白字，不受本規則影響。
   這是全站修正（各 phase 都有用到 outline-secondary），只加深文字＝只會提升對比。 */
.btn-outline-secondary {
    color: #495057;
}

/* =========================================================================
   P5 民眾端叫號看板（queue/display）
   顏色全取自既有 CSS 變數：--ewcc-primary(#0d5c63) 對白底 ≈ 6.5:1、
   --ewcc-text-muted(#495057) ≈ 8.6:1，皆通過 WCAG 1.4.3 AA（含大字級 3:1）。
   大字級供候診室遠距辨識；窄螢幕（手機）以 clamp() 自動縮小不溢出。
   ========================================================================= */
.ewcc-queue-board {
    background: var(--ewcc-surface);
    border: 1px solid #d7dde0;
    border-radius: var(--ewcc-radius, 0.5rem);
    padding: 1.5rem 1.25rem;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.ewcc-queue-clinic {
    color: var(--ewcc-text);
    margin-bottom: 0.25rem;
}
.ewcc-queue-caption {
    color: var(--ewcc-text-muted);
    margin-bottom: 0.5rem;
}
.ewcc-queue-number {
    /* 手機 3.5rem → 大螢幕 8rem，隨視窗寬度平滑縮放，不會水平溢出 */
    font-size: clamp(3.5rem, 18vw, 8rem);
    line-height: 1.1;
    font-weight: 700;
    color: var(--ewcc-primary);
    margin: 0.25rem 0 0.75rem;
    word-break: keep-all;
}
.ewcc-queue-meta {
    color: var(--ewcc-text);
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}
.ewcc-queue-session {
    color: var(--ewcc-text-muted);
}
.ewcc-queue-status {
    color: var(--ewcc-text-muted);
    font-size: 0.9rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* P5b 多醫師看板：多診並列的卡片格線（單醫師時退化為單一置中卡片）。
   顏色沿用單醫師版（號碼 --ewcc-primary、文字 --ewcc-text on --ewcc-surface），
   對比與 P5 相同，故 axe 對比檢查不受影響。 */
.ewcc-queue-board:has(.ewcc-queue-doctors .ewcc-queue-doctor + .ewcc-queue-doctor) {
    /* 只有「兩位以上醫師」時才放寬版面，讓多卡並列；單醫師維持 640px 置中 */
    max-width: 1100px;
}
.ewcc-queue-doctors {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.ewcc-queue-doctor,
.ewcc-queue-empty {
    border: 1px solid #d7dde0;
    border-radius: var(--ewcc-radius, 0.5rem);
    padding: 1rem 0.75rem;
    background: transparent;   /* 沿用 board 的 --ewcc-surface 底色，維持對比 */
}
.ewcc-queue-doctor-name {
    color: var(--ewcc-text);
    margin-bottom: 0.25rem;
}
/* 多卡並列時號碼略縮（clamp 上限降到 5rem），避免多欄時水平溢出 */
.ewcc-queue-doctor .ewcc-queue-number,
.ewcc-queue-empty .ewcc-queue-number {
    font-size: clamp(2.5rem, 10vw, 5rem);
    margin: 0.1rem 0 0.5rem;
}

/* =========================================================================
   P5 叫號操作台的操作按鈕（contrast-safe outline）
   Bootstrap 的 .btn-outline-info/-warning/-primary 以「淺色」當文字色，對白底
   對比僅 1.9~3.7:1（axe 實測 serious）。此處自訂五個操作各自的深色，文字色對白底
   皆 ≥ 5.8:1（見 gate 內數值），hover/focus 反白填色（白字對這些深色亦 ≥ 5.8:1）。
   狀態不只靠顏色：每顆按鈕都有文字標籤（報到/叫號/開始看診/完診/未到，WCAG 1.4.1）。
   ========================================================================= */
.btn.ewcc-op {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
}
.btn.ewcc-op-checkin { color: #0b6b7b; border-color: #0b6b7b; }
.btn.ewcc-op-call    { color: #0d5c63; border-color: #0d5c63; }
.btn.ewcc-op-start   { color: #8a5000; border-color: #8a5000; }
.btn.ewcc-op-done    { color: #1a7431; border-color: #1a7431; }
.btn.ewcc-op-noshow  { color: #495057; border-color: #6c757d; }
.btn.ewcc-op-checkin:hover, .btn.ewcc-op-checkin:focus { background-color: #0b6b7b; color: #ffffff; }
.btn.ewcc-op-call:hover,    .btn.ewcc-op-call:focus    { background-color: #0d5c63; color: #ffffff; }
.btn.ewcc-op-start:hover,   .btn.ewcc-op-start:focus   { background-color: #8a5000; color: #ffffff; }
.btn.ewcc-op-done:hover,    .btn.ewcc-op-done:focus    { background-color: #1a7431; color: #ffffff; }
.btn.ewcc-op-noshow:hover,  .btn.ewcc-op-noshow:focus  { background-color: #495057; color: #ffffff; }

/* =========================================================================
   P6 叫號統計圖表容器
   canvas 用 maintainAspectRatio:false + responsive，需由容器固定高度，
   否則會隨內容無限拉高。圖表只是視覺加強，資料以下方 <table> 完整呈現（A8）。
   ========================================================================= */
.ewcc-chart-wrap {
    position: relative;
    width: 100%;
    height: 260px;
}
.ewcc-chart-wrap canvas {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   P8 RWD 修正：分頁在窄螢幕自動換行
   問題（P8 全站 RWD 實測）：Bootstrap 的 .pagination 是 display:flex 且預設不換行，
   資料頁數一多（如稽核紀錄有數百筆＝十幾頁）時，頁碼會在 320px 寬把頁面撐出約 3px 的
   水平溢出（body.scrollWidth=323）。這是 data-dependent 的真實溢出，非表格捲動假象。
   根因修法：讓分頁列可換行——一次修好所有分頁頁面（稽核/會員/人員/診所清單…）。
--------------------------------------------------------------------------- */
.pagination {
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   P8b RWD 修正：窄螢幕資料表改「整行不換行＋容器橫向捲動」

   問題（P8b 使用者回報＋指揮官截圖實證）：clinicDetail 手機版「租用歷史」等
   多欄資料表在 375px 下，瀏覽器把每欄壓到極窄以求塞進畫面，導致：
     - 欄標題直排（「週期」被折成「週/期」）、內容被截斷（ewcc_test_subsc…）。
   根因：Bootstrap 的 .table-responsive 已提供 overflow-x:auto，但表格 cell 預設
   允許自動換行，於是瀏覽器選擇「壓縮欄寬＋換行」而非「維持欄寬＋捲動」，
   結果 table 寬度 <= 容器寬 → 永遠不觸發捲動 → 一直擠壓。

   修法：窄螢幕下讓資料 cell 不換行（white-space:nowrap），table 自然寬度就會
   超過容器 → .table-responsive 的 overflow-x:auto 生效 → 改為橫向捲動、
   欄寬與標題完整、內容不截斷（DataTables／Bootstrap 文件表格都是這個行為）。

   邊界（避免 regression）：
     - 只在 <768px（手機／小平板）套用；桌機維持既有正常換行，不受影響。
     - 排除 .ewcc-schedule-grid（排班週檢視）——它已有自己的 min-width 儲存格
       捲動設計，且格內是多行班次內容，強制單行反而不利閱讀。
     - 捲動被 .table-responsive 內部吸收，body 不會產生水平溢出（A4 不破壞）。
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-responsive > table.table:not(.ewcc-schedule-grid) > :not(caption) > * > * {
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   P10-B：頁籤（nav-tabs）——診所詳細頁分頁用
   
   兩個都是 axe 實測抓到的問題，不是預防性樣式：
   
   1. **對比**：Bootstrap 預設的 .nav-link 顏色是 #0d6efd，對本站頁面底色
      #f4f6f7 只有 **4.15:1**，未達 WCAG 1.4.3 AA 的 4.5:1（axe 在四個頁籤各報
      3 個 color-contrast/serious，共 6 個畫面 × 3）。改為固定深青 #0a4a50 →
      對 #f4f6f7 為 **9.19:1**、對卡片白為 9.96:1。
      為什麼用**固定色**而不是 var(--ewcc-primary)：那個變數會被診所客製色覆寫
      （Controller::safeHexColor 只驗格式不驗對比），診所挑一個淺色就會讓
      無障礙又掉下去。頁籤是導覽元件，不參與診所配色。

   2. **焦點可見**：app.css 的全域 `button:focus-visible`（3px outline）
      被 Bootstrap 的 `.nav-link:focus-visible { outline: 0 }` 蓋掉
      （class+偽類的優先權高於元素+偽類，與載入順序無關），實測 outline-width=0px。
      這裡用同等級的選擇器把 outline 補回來——**不可以用 outline:none 走 box-shadow**，
      Windows 高對比模式下 box-shadow 會消失。
   --------------------------------------------------------------------------- */
.nav-tabs .nav-link {
    color: #0a4a50;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: #063236;
}

/* 作用中的頁籤：深字 ＋ 底部強調線（不只靠顏色區分，WCAG 1.4.1） */
.nav-tabs .nav-link.active {
    color: var(--ewcc-text);
    font-weight: 700;
    border-bottom-color: transparent;
    box-shadow: inset 0 -3px 0 0 var(--ewcc-accent);
}

/* 焦點可見：蓋回被 Bootstrap 清掉的 outline（同 app.css 全域規則的樣式） */
.nav-tabs .nav-link:focus-visible {
    outline: 3px solid var(--ewcc-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   S4：兩個新的呈現 hook
   --------------------------------------------------------------------------- */

/* 「我的預約」ETA 那一格的 live region 外框（S4 修 S3 的無障礙退化）。
   它只是把絕對時刻／相對分鐘數／前方人數三段包在同一個 aria-live 容器裡，
   視覺上不該有任何改變——所以只補一個 display:block 讓版面與 S3 逐像素相同
   （三個子元素本來就靠 Bootstrap 的 d-block 自行換行）。 */
.ewcc-eta-live {
    display: block;
}

/* 叫號看板的「診次時段狀態」一行（S4 把 S3 的 clockState 接到民眾畫面上）。
   用 --ewcc-text（非 muted）：這是門診時間的正式資訊，不是附註。
   對比沿用 .ewcc-queue-meta 的既有配色，axe 對比檢查不受影響。 */
.ewcc-queue-clock {
    font-weight: 600;
}

/* S4：班表格子裡的「當日時刻」微型表單。
   兩個 time 欄位要能與「停診／刪除」按鈕並存在一個很窄的格子裡，
   所以給一個固定的窄寬度；仍是原生 <input type="time">（鍵盤可操作、有原生驗證）。 */
.ewcc-time-input {
    width: 7.5rem;
    max-width: 100%;
}
.ewcc-shift-time {
    margin-top: 0.25rem;
}
/* 診次設定頁的排序欄：數字欄位不需要跟名稱一樣寬 */
.ewcc-sort-input {
    width: 6rem;
    max-width: 100%;
}