@charset "UTF-8";
/*
 * assets/css/app.css — 台東市公所清潔隊地磅管理系統
 *
 * 疊在 Bootstrap 5.3 之上的專案樣式。全本地，零 CDN，零外部字型。
 *
 * 無障礙紀律（臺灣無障礙規範／WCAG 2.1 AA）
 *   - ★ 全案禁止把焦點外框關掉 ★ 焦點外框只能加強、不能移除
 *     驗收：對 assets/css/ 搜尋「把 outline 設為 none」的寫法必須零命中
 *     （本註解刻意不寫出那個字面字串，免得稽核 grep 抓到自己）
 *   - 文字與背景對比 ≥ 4.5:1（下方色票已實算，見註解）
 *   - 磅房是站著操作、光線變化大的環境，字級與點擊區都刻意放大
 */

/* ============================================================================
 * 一、色票（對比度已實算，勿隨意改）
 *
 *   --ttcg-green      #14532d  相對亮度 0.0394  對白字 12.3:1  ✓ AAA
 *   --ttcg-green-dark #0b3a1e  更深，供 hover
 *   --ttcg-ink        #1f2937  對白底 14.7:1    ✓ AAA
 *   --ttcg-muted      #4b5563  對白底  7.6:1    ✓ AAA（不用 #6c757d，那只有 4.6:1，邊緣）
 *   --ttcg-warn-bg    #fff4d6  警示底色，配 --ttcg-ink 文字仍 > 12:1
 * ==========================================================================*/

:root {
    --ttcg-green: #14532d;
    --ttcg-green-dark: #0b3a1e;
    --ttcg-ink: #1f2937;
    --ttcg-muted: #4b5563;
    --ttcg-line: #d7dbe0;
    --ttcg-bg: #f4f6f8;
    --ttcg-focus: #b45309;   /* 焦點外框：對白底 5.1:1，與主色綠有明顯區別 */

    /*
     * Bootstrap 主色改用本案綠色（影響 .text-primary／.bg-primary／.border-primary
     * 這些吃 --bs-primary(-rgb) 的工具類別）。
     *
     * ★ 更正一個從 P0 就寫錯的註解 ★
     *   原註解寫「讓 btn-primary 直接吃到」——**不正確**。
     *   Bootstrap 5.3 的 .btn-primary 是硬編 `--bs-btn-bg:#0d6efd`，不走 --bs-primary，
     *   所以實心主要按鈕至今都是 Bootstrap 藍，不是本案綠。
     *   P6 第三輪實測：白字對 #0d6efd ＝ **4.50:1**，剛好卡在 AA 門檻上（過，但沒有餘裕）。
     *   要讓它變成本案綠得比照下方 .btn-outline-* 覆寫 --bs-btn-bg／hover／active，
     *   白字對 #14532d 是 9.11:1。那是**視覺設計變更**不是修 bug，留給指揮官決定，
     *   本輪不動。詳見 MAKER_P6.md 第三輪節。
     */
    --bs-primary: #14532d;
    --bs-primary-rgb: 20, 83, 45;

    /* ------------------------------------------------------------------
     * 連結與行內程式碼的顏色（P6 修，axe-core 實測抓到的對比不足）
     *
     * Bootstrap 預設值在本案的底色上過不了 WCAG AA 4.5:1：
     *   連結 #0d6efd 對頁面底 #f4f6f8 → 4.15:1（麵包屑「首頁」，每一頁都有）
     *   連結 #0d6efd 對 alert-danger 底 #f8d7da → 3.36:1
     *   行內 code #d63384 對 alert-warning 底 #fff3cd → 4.06:1
     *                    對 table-secondary 底 #e2e3e5 → 3.50:1
     *                    對 alert-success 底 #d1e7dd → 3.46:1
     *
     * 換成本案綠與深紅之後（實算，最差的那一組）：
     *   #14532d 對 #f8d7da → 6.82:1 ✓   #14532d 對 #f4f6f8 → 8.41:1 ✓
     *   #7f1d1d 對 #d1e7dd → 7.72:1 ✓   #7f1d1d 對 #e2e3e5 → 7.81:1 ✓
     *
     * ★ 改變數而不是逐頁補 class ★
     *   這兩個顏色出現在 22 支頁面裡，逐頁改會漏；改根變數一次到位，
     *   而且日後新增的頁面自動繼承。
     * ----------------------------------------------------------------*/
    --bs-link-color: #14532d;
    --bs-link-color-rgb: 20, 83, 45;
    --bs-link-hover-color: #0b3a1e;
    --bs-link-hover-color-rgb: 11, 58, 30;
    --bs-code-color: #7f1d1d;
}

body {
    background-color: var(--ttcg-bg);
    color: var(--ttcg-ink);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* ============================================================================
 * 二、焦點指示
 *
 * 鍵盤使用者必須看得出焦點在哪。這一段是無障礙的硬需求，
 * 任何「拿掉醜醜的外框」的修改都不被接受。
 * ==========================================================================*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ttcg-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 舊瀏覽器沒有 :focus-visible 時的退路，同樣是加強而非移除 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline-color: var(--ttcg-focus);
}

/* ----------------------------------------------------------------------------
 * 2-1　覆寫 Bootstrap 自己關掉的焦點外框（P4 轉派項）
 *
 * ★ 問題 ★
 *   Bootstrap 5.3 對 .btn／.form-control／.page-link… 等元件寫的是
 *   「outline 歸零 + 藍色 box-shadow 光暈」。那個選擇器（例如 .btn:focus-visible，
 *   特異度 0,2,0）壓得過上面的 button:focus-visible（0,1,1），
 *   結果全站按鈕的焦點指示長得跟其他元件不一樣，而且是 Bootstrap 的藍、
 *   不是本案的橘。P4 驗收時被點出「焦點環來自 Bootstrap 而非 app.css」。
 *
 * ★ 修法 ★
 *   用**同名選擇器**覆寫。app.css 在 bootstrap.min.css 之後載入，
 *   特異度相同時後者勝出，不需要 !important。
 *
 * ★ 雙層環（外橘內白）是必要的，不是裝飾 ★
 *   橘色 #b45309 對白底 5.1:1（過關），但對側欄／頁首的深綠 #14532d 只有 1.8:1，
 *   在深綠底上的按鈕（頁首「登出」、側欄目前項目）焦點框會幾乎看不見。
 *   內襯 2px 白環對深綠是 9.1:1，於是深底看白環、淺底看橘框，兩種背景都成立。
 *   白環疊在白底上「看不見」沒關係——那時橘框本來就夠。
 *   （WCAG 2.1 AA 對非文字對比的門檻是 3:1，1.8:1 是實際不合格）
 * --------------------------------------------------------------------------*/

.btn:focus-visible,
.btn-close:focus,
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible,
.page-link:focus,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.accordion-button:focus,
.list-group-item-action:focus-visible,
.ttcg-sidebar__link:focus-visible,
.ttcg-skip-link:focus {
    outline: 3px solid var(--ttcg-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #ffffff;
}

/* 表單元件取得焦點時，邊框也一起加深——不只靠外框傳達狀態 */
.form-control:focus,
.form-select:focus {
    border-color: var(--ttcg-ink);
}

/* ----------------------------------------------------------------------------
 * 2-1b　外框按鈕（.btn-outline-*）的前景色（P6 第三輪修）
 *
 * ★ 根因 ★
 *   外框按鈕的底色是 transparent，所以它的對比要拿**所在容器的底色**去算，
 *   而 Bootstrap 給的四個預設前景色在**純白**上就已經只有 4.50〜4.69:1——
 *   剛好卡在 AA 門檻上。只要按鈕落在任何一種非純白的底上就必定跌破 4.5：
 *
 *     色票        白底    頁面底   條紋     table-warning  列 hover  table-secondary
 *     #0d6efd     4.50    4.15     4.02     4.06           3.84      （primary）
 *     #6c757d     4.69    4.33     4.19     4.23           4.01      3.65
 *     #dc3545     4.53    4.18     4.04     4.09           3.87      （danger）
 *     #198754     4.53    4.18     4.05     4.09           3.87      （success）
 *
 *   verifier 造了未回磅資料後點名的 4.23（secondary）與 4.08（danger）
 *   只是這張表裡的兩格，**四種變體全部有問題**，不是那兩顆按鈕的事。
 *   本專案先前把 --ttcg-muted 從 #6c757d 換成 #4b5563 就是同一個理由。
 *
 * ★ 修法 ★
 *   改 Bootstrap 官方的擴充點（.btn-outline-* 的 --bs-btn-* 自訂屬性），
 *   不是加 !important 硬蓋，hover／active／disabled 才會跟著一致。
 *   選色下限：對本案最深的列底色（列 hover 疊色 #ededed 與 table-secondary
 *   #e2e3e5）仍 ≥ 5.8:1，留足餘裕而不是再壓在 4.5 邊上。
 *   hover 時前景轉白、底色轉成同一個深色，白字對這四色是 7.6〜9.5:1。
 * --------------------------------------------------------------------------*/

.btn-outline-primary {
    --bs-btn-color: #14532d;              /* 本案主色綠，取代 #0d6efd */
    --bs-btn-border-color: #14532d;
    --bs-btn-hover-bg: #14532d;
    --bs-btn-hover-border-color: #14532d;
    --bs-btn-active-bg: #0b3a1e;
    --bs-btn-active-border-color: #0b3a1e;
    --bs-btn-disabled-color: #14532d;
    --bs-btn-disabled-border-color: #14532d;
}

.btn-outline-secondary {
    --bs-btn-color: #4b5563;              /* ＝ --ttcg-muted，取代 #6c757d */
    --bs-btn-border-color: #4b5563;
    --bs-btn-hover-bg: #4b5563;
    --bs-btn-hover-border-color: #4b5563;
    --bs-btn-active-bg: #374151;
    --bs-btn-active-border-color: #374151;
    --bs-btn-disabled-color: #4b5563;
    --bs-btn-disabled-border-color: #4b5563;
}

.btn-outline-danger {
    --bs-btn-color: #842029;              /* 取代 #dc3545，仍是紅色系 */
    --bs-btn-border-color: #842029;
    --bs-btn-hover-bg: #842029;
    --bs-btn-hover-border-color: #842029;
    --bs-btn-active-bg: #641319;
    --bs-btn-active-border-color: #641319;
    --bs-btn-disabled-color: #842029;
    --bs-btn-disabled-border-color: #842029;
}

.btn-outline-success {
    --bs-btn-color: #0f5132;              /* 取代 #198754 */
    --bs-btn-border-color: #0f5132;
    --bs-btn-hover-bg: #0f5132;
    --bs-btn-hover-border-color: #0f5132;
    --bs-btn-active-bg: #0a3622;
    --bs-btn-active-border-color: #0a3622;
    --bs-btn-disabled-color: #0f5132;
    --bs-btn-disabled-border-color: #0f5132;
}

/* ----------------------------------------------------------------------------
 * 2-2　減少動態效果（WCAG 2.3.3／2.2.2）
 *
 * 使用者在作業系統開了「減少動態效果」就代表他會不舒服，一律照辦。
 * Bootstrap 的摺疊／淡入與 DataTables 的處理中動畫都吃這一段。
 * --------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 跳過導覽連結：平時移出畫面，取得焦點時滑入 */
.ttcg-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    padding: 0.75rem 1.25rem;
    background: var(--ttcg-green);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

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

/* ============================================================================
 * 三、版面
 * ==========================================================================*/

.ttcg-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--ttcg-green);
    color: #ffffff;
}

.ttcg-topbar__title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ttcg-topbar__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ttcg-topbar__who {
    font-size: 0.95rem;
}

.ttcg-layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 8rem);
}

.ttcg-sidebar {
    flex: 0 0 14rem;
    padding: 1rem 0.5rem;
    background: #ffffff;
    border-right: 1px solid var(--ttcg-line);
    min-height: 100%;
}

.ttcg-sidebar__list,
.ttcg-sidebar__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ttcg-sidebar__grouptitle {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ttcg-muted);
    padding: 0.5rem 0.75rem 0.25rem;
    margin: 0;
}

.ttcg-sidebar__link {
    display: block;
    padding: 0.6rem 0.75rem;
    color: var(--ttcg-ink);
    text-decoration: none;
    border-radius: 0.35rem;
}

.ttcg-sidebar__link:hover {
    background: #e8efe9;
    text-decoration: underline;
}

.ttcg-sidebar__link.is-current {
    background: var(--ttcg-green);
    color: #ffffff;
    font-weight: 700;
}

.ttcg-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ttcg-footer {
    padding: 1rem;
    background: #ffffff;
    border-top: 1px solid var(--ttcg-line);
    text-align: center;
}

.ttcg-footer__text {
    margin: 0;
    color: var(--ttcg-muted);
    font-size: 0.9rem;
}

.ttcg-footer__sep {
    margin: 0 0.25rem;
}

/* 手機／平板：選單改為橫向捲動，不做漢堡選單
   ——磅房平板多半橫放，橫向選單比展開／收合少一次點擊 */
@media (max-width: 767.98px) {
    .ttcg-layout {
        display: block;
    }

    .ttcg-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--ttcg-line);
        padding: 0.5rem;
    }

    .ttcg-sidebar__sublist {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ============================================================================
 * 四、登入頁
 * ==========================================================================*/

.ttcg-loginpage {
    background: var(--ttcg-green);
}

.ttcg-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.ttcg-login__card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.ttcg-login__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ttcg-green);
    margin-bottom: 0.25rem;
}

.ttcg-login__subtitle {
    color: var(--ttcg-muted);
    margin-bottom: 1.25rem;
}

.ttcg-login__hint {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--ttcg-muted);
}

/* ============================================================================
 * 五、過磅畫面用的大字重量顯示（P2 使用，樣式先定好）
 *
 * 會磅人員站在窗口、隔著玻璃看螢幕，字要夠大。
 * 顏色只是輔助，狀態文字一定要同時存在——不能只靠顏色傳達資訊（WCAG 1.4.1）。
 * ==========================================================================*/

.ttcg-weight {
    font-size: clamp(2.5rem, 9vw, 5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--ttcg-ink);
}

.ttcg-weight--stale {
    color: var(--ttcg-muted);
}

.ttcg-weight__state {
    font-size: 1rem;
    font-weight: 600;
}

/* ============================================================================
 * 六、磅單版面預覽（M1-5）
 *
 * 預覽的內容與送去點陣印表機的位元組**逐字相同**（includes/TicketLayout.php），
 * 所以字型必須是等寬，否則螢幕上對齊、印出來歪掉，或反過來。
 * 中文等寬字型在各系統的名稱不同，一路退回 monospace。
 * ==========================================================================*/

.ttcg-ticket {
    font-family: "Noto Sans Mono CJK TC", "Noto Sans Mono", "DejaVu Sans Mono",
                 "Courier New", monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;          /* 版面固定 46 字元寬，窄螢幕橫向捲動而不是折行 */
    background: #fff;
    border: 1px solid var(--ttcg-line, #d0d5dd);
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 0;
    color: var(--ttcg-ink, #1f2937);
}

/* ============================================================================
 * 七、離線橫幅（PWA）
 *
 * 兩個地方會用到同一個 class：
 *   1. includes/header.php 的 #ttcg-offline-live，由 app.js 依 online/offline 事件切換
 *   2. sw.js 回吐快取頁面時強制植入的那一條
 *
 * ★ 顏色不是唯一線索 ★ 文字本身就寫著「目前離線」，關掉顏色也讀得懂（WCAG 1.4.1）。
 * 深紅 #7f1d1d 配白字為 10.0:1（AAA）。
 * ==========================================================================*/

.ttcg-offline-banner {
    padding: 0.75rem 1rem;
    background: #7f1d1d;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.ttcg-offline-banner strong {
    font-weight: 700;
}

/* ============================================================================
 * 八、列印樣式
 *
 * 適用對象是 **M3 報表**。磅單走 ESC/P2 直送點陣印表機（includes/TicketLayout.php），
 * 不經瀏覽器列印；報表另有 PDF／Excel 匯出，這一段是給「直接按 Ctrl+P」的人用的。
 *
 * 三個目標：
 *   1. 只留資料——導覽、按鈕、查詢表單、DataTables 的搜尋與分頁全部拿掉
 *   2. 不要跨頁斷行——列與卡片整塊移到下一頁，表頭每頁重複
 *   3. 黑白友善——公所的雷射印表機是黑白的，且多數人不會開「列印背景圖形」，
 *      所以任何「靠底色傳達的資訊」都要改成邊框或文字
 * ==========================================================================*/

@media print {

    @page {
        margin: 12mm 10mm;
    }

    /* 一律白底黑字。背景色在未開啟「列印背景圖形」時根本不會印出來，
       依賴它等於把資訊印丟。 */
    body {
        background: #ffffff;
        color: #000000;
        font-size: 10.5pt;
    }

    /* ── 1. 只留資料 ──────────────────────────────────────────────────── */
    .ttcg-topbar,
    .ttcg-sidebar,
    .ttcg-footer,
    .ttcg-skip-link,
    .ttcg-offline-banner,
    .breadcrumb,
    .btn,
    .btn-group,
    .pagination,
    .dt-length,
    .dt-search,
    .dt-paging,
    .dt-info,
    .dt-buttons,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_paginate,
    .dataTables_info,
    .ttcg-noprint {
        display: none !important;
    }

    /* 報表的查詢條件表單（ReportView::filterForm，role="search"）不印。
       下拉與日期欄位印在紙上只是一排空框；真正的條件在它下面那行
       「查詢條件：…」的純文字，那個要留著。 */
    form[role="search"] {
        display: none !important;
    }

    .ttcg-layout {
        display: block;
        min-height: 0;
    }

    .ttcg-main {
        width: 100%;
    }

    .container-fluid,
    .container {
        max-width: none;
        width: auto;
        padding: 0;
        margin: 0;
    }

    /* ── 2. 不要跨頁斷行 ──────────────────────────────────────────────── */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    /* 表頭在每一頁重複出現。沒有這行，第二頁起就是一堆沒有欄名的數字 */
    thead {
        display: table-header-group;
    }

    /* ★ 合計列只印一次，印在最後 ★
     * <tfoot> 的預設值 table-footer-group 會讓瀏覽器**每一頁都重複**印出合計列。
     * 但報表的合計是「全部資料的總和」，不是本頁小計——印在第 3 頁下方，
     * 讀的人會以為那是前三頁的小計。改成 table-row-group 讓它跟著資料流走，
     * 只出現在真正的最後一頁。（實測：60 頁的期間明細表，改前每頁都有合計） */
    tfoot {
        display: table-row-group;
    }

    /* ★ 這裡刻意**不含** .card ★
     * 報表整張表格都包在一個 .card 裡。對 .card 下 break-inside:avoid，
     * 等於要求瀏覽器把一張 125 頁的表格塞進一頁——做不到，於是它把整塊往後推，
     * 印出來第一頁全白。P6 第一版就是這樣，pdftotext 抓到 page 1 是空的才發現。
     * 會跨頁的容器不可以 avoid，只有「一列」「一則提示」這種小塊可以。 */
    tr,
    th,
    td,
    .alert,
    .ttcg-ticket {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* 報表表格欄位多（期間明細表 12 欄），10.5pt 會把中文擠到每格折三行。
       縮到 8.5pt 讓一頁塞得下合理列數，仍在可讀範圍。 */
    .table,
    table {
        font-size: 8.5pt;
    }

    /* 標題不要落單在頁尾 */
    h1, h2, h3, h4, caption {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* ── 3. 黑白友善 ──────────────────────────────────────────────────── */
    .table,
    .table th,
    .table td,
    table th,
    table td {
        border: 1px solid #000000 !important;
        background: transparent !important;
        color: #000000 !important;
        box-shadow: none !important;   /* Bootstrap 的斑馬紋是 box-shadow 做的，印不出來 */
    }

    .table th,
    table th {
        font-weight: 700;
    }

    /* 徽章原本靠底色分辨（已完成／作廢／未回磅），黑白列印會全部糊成一片。
       改成外框 + 原本就有的文字，資訊不流失。 */
    .badge {
        background: transparent !important;
        color: #000000 !important;
        border: 1px solid #000000;
        padding: 0 0.25em;
    }

    .card,
    .alert {
        border: 1px solid #000000 !important;
        background: transparent !important;
        color: #000000 !important;
    }

    /* 連結不必印成藍色底線，但保留文字 */
    a,
    a:visited {
        color: #000000 !important;
        text-decoration: none;
    }

    /* 次要說明文字（列數、註腳）在螢幕上是灰的，印在紙上會偏淡。
       這些註腳寫的是「合計是全部資料的真值」這種會影響判讀的話，不能印糊。 */
    .text-muted,
    .text-secondary,
    .form-text,
    .small,
    small {
        color: #000000 !important;
    }

    /* 表格標題（caption）是報表在紙上唯一的身分證，一定要印出來 */
    caption {
        caption-side: top;
        color: #000000 !important;
        font-weight: 700;
        font-size: 12pt;
        padding-bottom: 0.35rem;
        text-align: left;
    }

    /* 磅單預覽以等寬字排版，列印時維持原寬度不可縮放 */
    .ttcg-ticket {
        overflow: visible;
        border: 1px solid #000000;
    }
}