/* =====================================================================
   花蓮縣衛生局檢驗科 — 檢驗線上申請系統 (OnlineExam2026)
   共用設計系統 system.css
   設計方向：公務清晰 (Clear Public-Service) — 乾淨、專業、可信賴
   無障礙：對齊 WCAG 2.1 AA（語意化、label 關聯、對比達標、focus 可見、鍵盤可操作）
   說明：主色以單一深青(teal) 為功能色，紅色僅用於必填/錯誤，
         版面以文件級留白與細線分隔，不使用漸層/裝飾性圖示(反 AI slop)。
   ===================================================================== */

/* ---------- 設計變數 ---------- */
:root {
    /* 主色：深青，象徵衛生/檢驗/可信賴；白字於其上對比 ≥ 4.5:1 (AA) */
    --primary:        #0d6e74;
    --primary-dark:   #0a565b;   /* hover / 深一階 */
    --primary-soft:   #e6f1f1;   /* 淺底（區塊標題、選取列） */
    /* 花蓮縣衛生局既有識別玫瑰色，保留為可替換品牌色（預設不啟用） */
    --brand-rose:     #b01e54;

    --ink:            #1b2733;    /* 主要文字（高對比） */
    --muted:          #56646f;    /* 次要文字，於白底對比 ≈ 4.6:1 */
    --bg:             #f4f6f7;    /* 頁面底 */
    --surface:        #ffffff;    /* 卡片/表面 */
    --surface-alt:    #f8fafa;    /* 表格斑馬列/區塊底 */
    --border:         #d3d9dd;    /* 一般細線 */
    --border-strong:  #b6bfc6;    /* 強調框線 */

    --required:       #c0392b;    /* 必填星號 / 錯誤 */
    --focus:          #1565c0;    /* focus 外框（高對比藍） */
    --link:           #0b6b86;

    --radius:         8px;
    --radius-sm:      5px;
    --shadow:         0 1px 2px rgba(16,30,40,.06), 0 4px 16px rgba(16,30,40,.06);
    --shadow-modal:   0 12px 40px rgba(16,30,40,.28);

    --maxw:           1120px;
    --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    --mono: "Roboto Mono", "Consolas", "Noto Sans Mono CJK TC", monospace;
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.35; color: var(--ink); letter-spacing: .01em; }
p { margin: 0 0 .6em; }
a { color: var(--link); }
a:hover { text-decoration: underline; }

/* 可見 focus（鍵盤操作）：所有可互動元素統一高對比外框 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 跳至主內容（無障礙） */
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- 版面外殼 ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.gov-header { background: var(--primary); color: #fff; }
.gov-header__bar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; }
.gov-header__crest {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
    background: #fff; color: var(--primary);
    display: grid; place-items: center; font-weight: 800; font-size: 13px; line-height: 1.1; text-align: center;
    border: 2px solid rgba(255,255,255,.85);
}
.gov-header__titles { display: flex; flex-direction: column; }
.gov-header__org { font-size: 14px; opacity: .92; letter-spacing: .04em; }
.gov-header__sys { font-size: 21px; font-weight: 800; letter-spacing: .03em; }
.gov-header__spacer { flex: 1; }
.gov-header__user { font-size: 13.5px; text-align: right; opacity: .96; }
.gov-header__user a { color: #fff; text-decoration: underline; }

/* 導覽列（前/後台共用，依角色給不同項目） */
.gov-nav { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.gov-nav__inner { display: flex; gap: 2px; max-width: var(--maxw); margin: 0 auto; padding: 0 12px; flex-wrap: wrap; }
.gov-nav a {
    display: inline-block; padding: 13px 16px; color: var(--muted); text-decoration: none;
    font-size: 15px; font-weight: 600; border-bottom: 3px solid transparent;
}
.gov-nav a:hover { color: var(--primary-dark); background: var(--surface-alt); }
.gov-nav a[aria-current="page"] { color: var(--primary-dark); border-bottom-color: var(--primary); }

/* 麵包屑 */
.crumb { font-size: 13px; color: var(--muted); padding: 14px 0 0; }
.crumb a { color: var(--muted); }
.crumb b { color: var(--ink); }

main { padding: 8px 0 48px; }
.page-title { font-size: 23px; margin: 12px 0 4px; }
.page-title small { display:block; font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 4px; }

.gov-footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; }
.gov-footer .wrap { padding: 18px 24px; display:flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

/* ---------- 卡片 / 區塊 ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 20px; }
.card__hd { padding: 14px 20px; border-bottom: 1px solid var(--border); display:flex; align-items:center; gap:12px; }
.card__hd h2 { font-size: 17px; }
.card__hd .seq { color: var(--primary); }
.card__bd { padding: 20px; }

/* 表單區塊（用 fieldset/legend 做語意分組） */
fieldset.section { border: 0; padding: 0; margin: 0 0 26px; }
fieldset.section > legend {
    width: 100%; font-size: 16px; font-weight: 800; color: #fff; background: var(--primary);
    padding: 9px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; letter-spacing:.04em;
}

/* ---------- 表單欄位 ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 28px; }
.grid--1 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.req { color: var(--required); font-weight: 700; margin-right: 2px; }
.req-mark::after { content: " *"; color: var(--required); font-weight: 700; }
.hint { font-size: 12.5px; color: var(--muted); }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=password], input[type=number], select, textarea {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
    background: var(--surface);
    padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
input::placeholder { color: #9aa6ad; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input[readonly], input:disabled, select:disabled {
    background: #eef1f2; color: var(--muted); border-style: dashed; cursor: not-allowed;
}
textarea { resize: vertical; min-height: 64px; }

/* 單選/複選群組 */
.choice { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-top: 4px; }
.choice label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ---------- 按鈕 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
    padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; text-decoration: none;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn--ghost { background: var(--surface); color: var(--primary-dark); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-alt); text-decoration: none; }
.btn--danger { background: #fff; color: var(--required); border-color: #e2b3ad; }
.btn--lg { font-size: 16px; padding: 13px 28px; }
.btn--sm { font-size: 13.5px; padding: 7px 12px; }
.btn-row { display: flex; gap: 12px; justify-content: center; padding-top: 8px; }
.btn-row--end { justify-content: flex-end; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface); }
table.data caption { text-align: left; padding: 10px 14px; font-weight: 700; color: var(--muted); }
table.data th, table.data td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.data thead th { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; border-bottom: 2px solid var(--primary); white-space: nowrap; }
table.data tbody tr:nth-child(even) { background: var(--surface-alt); }
table.data tbody tr:hover { background: #eef6f6; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
table.data .row-actions { white-space: nowrap; display:flex; gap:6px; }

/* 申請樣品表（輸入型表格） */
table.grid-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid-table th, table.grid-table td { border: 1px solid var(--border); padding: 8px; vertical-align: top; }
table.grid-table thead th { background: var(--surface-alt); font-weight: 700; text-align: center; white-space: nowrap; }
table.grid-table input[type=text], table.grid-table input[type=date], table.grid-table input[type=number] { padding: 7px 8px; }

/* ---------- 狀態徽章 ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.badge::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--draft   { color:#5a6b78; background:#eef1f2; border-color:#d7dde1; }   /* 已填單 */
.badge--accept  { color:#1257a8; background:#e7f0fb; border-color:#c3dbf4; }   /* 已受理 */
.badge--testing { color:#9a6310; background:#fcf2e0; border-color:#f0d9ad; }   /* 檢驗中 */
.badge--done    { color:#0a565b; background:#e0f0f0; border-color:#bfe0e0; }   /* 檢驗完成 */
.badge--report  { color:#43368f; background:#ece9fb; border-color:#cfc7f0; }   /* 報告上傳 */
.badge--closed  { color:#1f7a3d; background:#e4f4e9; border-color:#bfe5cb; }   /* 結案 */
.badge--reject  { color:#b3271b; background:#fbeae8; border-color:#f1c5bf; }   /* 不受理 */

/* 認證標記說明（★ / ◎） */
.cert { font-weight: 800; }
.cert--star { color: #b8860b; }    /* ★ TFDA/衛福部認證 (HLR-067) */
.cert--circle { color: var(--primary-dark); }  /* ◎ 縣府版 (HLR-085) */

/* ---------- 注意事項 / 提示框 ---------- */
.notice { border: 1px solid var(--border); border-left: 4px solid var(--primary); background: var(--surface-alt); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 13.5px; color: var(--muted); }
.notice h3 { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.notice ol { margin: 0; padding-left: 1.3em; }
.notice li { margin: 3px 0; }

/* 總計列 */
.total-bar { display:flex; justify-content: flex-end; align-items: baseline; gap: 10px; padding: 14px 4px 2px; font-size: 15px; }
.total-bar .amt { font-size: 24px; font-weight: 800; color: var(--required); font-family: var(--mono); }

/* ---------- Modal（檢驗項目選擇） ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16,30,40,.45); display: grid; place-items: center; padding: 24px; z-index: 50; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-modal); width: min(900px, 100%); max-height: 90vh; display:flex; flex-direction: column; }
.modal__hd { padding: 16px 20px; border-bottom: 1px solid var(--border); display:flex; align-items:center; gap: 10px; }
.modal__hd h2 { font-size: 17px; }
.modal__bd { padding: 18px 20px; overflow:auto; }
.modal__ft { padding: 14px 20px; border-top: 1px solid var(--border); display:flex; justify-content:flex-end; gap: 10px; }

/* ---------- 小工具 ---------- */
.pill-meta { display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--muted); }
.kpi-row { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .n { font-size: 28px; font-weight: 800; color: var(--primary-dark); font-family: var(--mono); }
.kpi .l { font-size: 13.5px; color: var(--muted); }
.toolbar { display:flex; flex-wrap:wrap; gap: 10px; align-items:center; justify-content: space-between; margin: 14px 0; }
.search { display:flex; gap:8px; align-items:center; }
.search input { width: 240px; }
.pager { display:flex; gap:4px; justify-content:center; padding: 16px 0 0; }
.pager a, .pager span { display:inline-grid; place-items:center; min-width: 34px; height: 34px; padding: 0 8px; border:1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); text-decoration:none; font-size:14px; }
.pager .cur { background: var(--primary); color:#fff; border-color: var(--primary); font-weight:700; }

.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.tag-req-legend { font-size: 13px; color: var(--muted); }
.tag-req-legend .req { font-size: 14px; }

@media (max-width: 760px) {
    .grid, .grid--3, .kpi-row { grid-template-columns: 1fr; }
    .gov-header__sys { font-size: 18px; }
    /* 工具列/查詢：手機改為堆疊、輸入全寬，避免溢出 */
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar > .btn { width: 100%; text-align: center; }
    .search { flex-wrap: wrap; width: 100%; }
    .search input, .search select { width: 100%; }
    .search .btn { width: 100%; }
    /* KPI 兩欄較省空間 */
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    /* 分頁可換行 */
    .pager { flex-wrap: wrap; }
    /* 寬資料表在手機以橫向捲動呈現（.table-wrap 已 overflow-x:auto），加提示陰影 */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    table.data { min-width: 640px; }
}