/* ธีมวัดเขาสมโภชน์ — สองโทน คุมด้วยตัวแปรชุดเดียว
 *
 * เดิมสไตล์ทั้งหมดฝังอยู่ใน <style> ของ base.html ทำให้ทำโทนมืดไม่ได้
 * เพราะต้องไล่แก้สีทีละบรรทัด ตอนนี้ทุกสีอยู่ในตัวแปรที่หัวไฟล์
 * โทนมืดแค่เขียนทับตัวแปร ไม่ต้องแตะกฎด้านล่างเลยสักข้อ
 *
 * สลับโทนด้วย data-bs-theme ของ Bootstrap 5.3 ซึ่งจัดการสีของ
 * component มาตรฐาน (ตาราง ฟอร์ม modal) ให้เองอยู่แล้ว
 * ไฟล์นี้ทับเฉพาะสีแบรนด์ของวัด
 */

/* ── โทนสว่าง (ค่าเริ่มต้น) ───────────────────────────────── */
:root {
    --wat-bg:            #f8f5f0;   /* ครีม */
    --wat-surface:       #ffffff;
    --wat-text:          #212529;
    --wat-muted:         #6c757d;

    --wat-brand:         #8B4513;   /* น้ำตาลวัด */
    --wat-brand-2:       #A0522D;
    --wat-brand-dark:    #6B3410;   /* ตอน hover ปุ่ม */
    --wat-on-brand:      #ffffff;   /* ตัวอักษรบนพื้นน้ำตาล */
    --wat-accent:        #FFD700;   /* ทอง — เมนูที่เลือกอยู่ */

    --wat-row-hover:     #f5ece3;
    --wat-card-shadow:   0 2px 8px rgba(0, 0, 0, .1);
    --wat-border:        rgba(0, 0, 0, .125);
    --wat-warning-btn:   #e6a817;

    /* แถวสถานะ — โทนสว่างใช้ค่าเดิมของ Bootstrap เป๊ะ ๆ หน้าตาจึงไม่เปลี่ยน */
    --wat-row-warning:       #fff3cd;   /* เกินกำหนด */
    --wat-row-warning-hover: #f2e7c3;
    --wat-row-danger:        #f8d7da;   /* ห้ามเข้า */
    --wat-row-danger-hover:  #eecbce;
    --wat-row-text:          #212529;
    --wat-thead-bg:          #f8f9fa;

    /* ป้ายสถานะ — โทนสว่างคือสีทึบเดิมของ Bootstrap */
    --wat-badge-warning-bg:   #ffc107;
    --wat-badge-warning-fg:   #000000;
    --wat-badge-danger-bg:    #dc3545;
    --wat-badge-danger-fg:    #ffffff;
    --wat-badge-success-bg:   #198754;
    --wat-badge-success-fg:   #ffffff;
    --wat-badge-info-bg:      #0dcaf0;
    --wat-badge-info-fg:      #000000;
    --wat-badge-secondary-bg: #6c757d;
    --wat-badge-secondary-fg: #ffffff;

    --wat-stat-green:  #28a745;
    --wat-stat-red:    #dc3545;
    --wat-stat-blue:   #007bff;
    --wat-stat-orange: #fd7e14;

    --wat-panel:      #f8f9fa;   /* แถบสรุปในหน้ารายละเอียด */
    --wat-panel-text: #212529;

    /* ช่องกรอกสีขาวบนการ์ดสีขาว กวาดสายตาแล้วไม่เห็นว่าช่องอยู่ตรงไหน
     * จึงให้ช่องมีโทนครีมอ่อนกว่าการ์ด ส่วนช่องที่กำลังพิมพ์อยู่จึงกลับเป็นขาว
     */
    --wat-input-bg:           #F2ECE1;
    --wat-input-border:       #D3C5B4;
    --wat-input-focus-bg:     #ffffff;
    --wat-input-focus-border: #8B4513;
    --wat-input-focus-ring:   rgba(139, 69, 19, .2);
}

/* ── โทนมืด ────────────────────────────────────────────────
 * คุมโทนน้ำตาล-ทองเดิมไว้ ให้ยังรู้สึกเป็นวัดเดียวกัน
 * ไม่ใช่ธีมมืดสำเร็จรูปที่ดูเหมือนเว็บอะไรก็ได้
 */
:root[data-bs-theme="dark"] {
    --wat-bg:            #1E1A17;   /* น้ำตาลเข้มอมดำ */
    --wat-surface:       #2A2320;
    --wat-text:          #EDE6DD;   /* ครีมนวล */
    --wat-muted:         #A89C90;

    --wat-brand:         #3A2A1E;   /* น้ำตาลเข้มสำหรับแถบบน */
    --wat-brand-2:       #4A3526;
    --wat-brand-dark:    #5A4230;
    --wat-on-brand:      #EDE6DD;
    --wat-accent:        #E0A82E;   /* ทอง — ใช้เป็นสีหลักแทนน้ำตาล */

    --wat-row-hover:     #352C27;
    --wat-card-shadow:   0 2px 8px rgba(0, 0, 0, .5);
    --wat-border:        rgba(255, 255, 255, .12);
    --wat-warning-btn:   #E0A82E;

    /* แถวสถานะ — Bootstrap ตั้งสีแถวไว้ตายตัวเป็นครีมอ่อน ไม่เปลี่ยนตามธีม
     * พอพื้นเป็นน้ำตาลเข้ม แถวครีมจึงกระโดดออกมาแสบตา
     * โทนมืดจึงใช้สีเดียวกันแต่เข้ม แค่ยกขึ้นจากพื้นให้พอสังเกตเห็น
     */
    --wat-row-warning:       #3A2E1D;
    --wat-row-warning-hover: #453824;
    --wat-row-danger:        #3A2325;
    --wat-row-danger-hover:  #46292B;
    --wat-row-text:          #EDE6DD;
    --wat-thead-bg:          #332B26;

    /* ป้ายสถานะ — โทนมืดเป็นชิปสีจางพร้อมตัวอักษรสีเดียวกันแต่สว่าง
     * สีทึบเต็มดวงบนพื้นเข้มจะจ้าเกินไปเมื่อมีหลายสิบแถวในจอเดียว
     */
    --wat-badge-warning-bg:   rgba(224, 168, 46, .18);
    --wat-badge-warning-fg:   #E8C46A;
    --wat-badge-danger-bg:    rgba(224, 104, 112, .18);
    --wat-badge-danger-fg:    #EF8F96;
    --wat-badge-success-bg:   rgba(90, 190, 130, .18);
    --wat-badge-success-fg:   #7ED39B;
    --wat-badge-info-bg:      rgba(110, 180, 220, .18);
    --wat-badge-info-fg:      #86C8E8;
    --wat-badge-secondary-bg: rgba(237, 230, 221, .12);
    --wat-badge-secondary-fg: #C9BEB2;

    --wat-stat-green:  #5FA574;
    --wat-stat-red:    #B85F68;
    --wat-stat-blue:   #5B85B8;
    --wat-stat-orange: #C08A46;

    /* Bootstrap ตรึง .bg-light ไว้ที่สีขาวเทาเสมอ พอมาอยู่โทนมืดแถบจะสว่างจ้า
     * แต่ตัวอักษรกลายเป็นเทาอ่อนตามธีม contrast เหลือราว 2:1 คืออ่านแทบไม่ออก
     */
    --wat-panel:      #342C27;
    --wat-panel-text: #EDE6DD;

    /* โทนมืดกลับกัน — ช่องกรอกเข้มกว่าการ์ด เหมือนหลุมที่รอให้เติมข้อมูล
     * ค่าเดิมของ Bootstrap เป็นเทาอมฟ้า ตัดกับการ์ดโทนน้ำตาลอย่างชัดเจน
     */
    --wat-input-bg:           #221C19;
    --wat-input-border:       #4A3F38;
    --wat-input-focus-bg:     #2E2621;
    --wat-input-focus-border: #E0A82E;
    --wat-input-focus-ring:   rgba(224, 168, 46, .25);

    /* สีสถานะของ Bootstrap เอง (ตัวเลขการ์ดสถิติ ขอบการ์ด) — สีเดิมอิ่มตัวสูง
     * ออกแบบมาสำหรับพื้นขาว พอมาอยู่บนพื้นเข้มจะทั้งจ้าและอ่านยากพร้อมกัน
     */
    --bs-success-rgb: 126, 211, 155;
    --bs-danger-rgb:  239, 143, 150;
    --bs-warning-rgb: 232, 196, 106;
    --bs-primary-rgb: 132, 180, 232;
    --bs-info-rgb:    134, 200, 232;
}

/* ── กฎที่ใช้ตัวแปร — ไม่มีสีดิบในส่วนนี้ ─────────────────── */
body {
    font-family: 'Sarabun', 'Segoe UI', sans-serif;
    background: var(--wat-bg);
    color: var(--wat-text);
    font-size: 16px;
}

.navbar {
    background: linear-gradient(135deg, var(--wat-brand) 0%, var(--wat-brand-2) 100%);
}

.navbar-brand,
.nav-link { color: var(--wat-on-brand) !important; }

.nav-link:hover,
.nav-link.active { color: var(--wat-accent) !important; }
.nav-link.active { font-weight: bold; }

.card {
    border: none;
    background: var(--wat-surface);
    box-shadow: var(--wat-card-shadow);
    border-radius: 10px;
}

.card-header {
    background: linear-gradient(135deg, var(--wat-brand), var(--wat-brand-2));
    color: var(--wat-on-brand);
    border-radius: 10px 10px 0 0 !important;
}

.btn-primary {
    background-color: var(--wat-brand);
    border-color: var(--wat-brand);
    color: var(--wat-on-brand);
}

.btn-primary:hover {
    background-color: var(--wat-brand-dark);
    border-color: var(--wat-brand-dark);
}

.btn-warning {
    background-color: var(--wat-warning-btn);
    border-color: var(--wat-warning-btn);
}

/* โทนมืด: ปุ่มหลักใช้สีทองบนพื้นเข้ม จะเด่นกว่าน้ำตาลบนน้ำตาล */
:root[data-bs-theme="dark"] .btn-primary {
    background-color: var(--wat-accent);
    border-color: var(--wat-accent);
    color: #1E1A17;
}

:root[data-bs-theme="dark"] .btn-primary:hover {
    background-color: #C9942A;
    border-color: #C9942A;
    color: #1E1A17;
}

.stat-card { border-left: 5px solid; }
.stat-green  { border-left-color: var(--wat-stat-green); }
.stat-red    { border-left-color: var(--wat-stat-red); }
.stat-blue   { border-left-color: var(--wat-stat-blue); }
.stat-orange { border-left-color: var(--wat-stat-orange); }

.badge-overdue { background-color: var(--wat-badge-danger-bg); }

.table-hover tbody tr:hover > * {
    background-color: var(--wat-row-hover);
}

/* ── แถวสถานะ ─────────────────────────────────────────────────
 * Bootstrap ตั้ง .table-warning / .table-danger เป็นสีอ่อนตายตัว
 * ไม่ขยับตาม data-bs-theme เลย ต้องยึดคืนมาคุมเองผ่านตัวแปร
 */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--wat-text);
}

.table-warning {
    --bs-table-bg: var(--wat-row-warning);
    --bs-table-color: var(--wat-row-text);
    --bs-table-hover-bg: var(--wat-row-warning-hover);
    --bs-table-hover-color: var(--wat-row-text);
    --bs-table-border-color: var(--wat-border);
}

.table-danger {
    --bs-table-bg: var(--wat-row-danger);
    --bs-table-color: var(--wat-row-text);
    --bs-table-hover-bg: var(--wat-row-danger-hover);
    --bs-table-hover-color: var(--wat-row-text);
    --bs-table-border-color: var(--wat-border);
}

.table-light {
    --bs-table-bg: var(--wat-thead-bg);
    --bs-table-color: var(--wat-row-text);
    --bs-table-border-color: var(--wat-border);
}

/* ── ป้ายสถานะ ────────────────────────────────────────────────
 * ต้องใช้ !important เพราะทั้ง .bg-* และ .text-dark ของ Bootstrap
 * เป็น utility ที่ประกาศ !important มาก่อนแล้ว
 */
.badge.bg-warning,
.card-header.bg-warning {
    background-color: var(--wat-badge-warning-bg) !important;
    color: var(--wat-badge-warning-fg) !important;
}

.badge.bg-danger {
    background-color: var(--wat-badge-danger-bg) !important;
    color: var(--wat-badge-danger-fg) !important;
}

.badge.bg-success {
    background-color: var(--wat-badge-success-bg) !important;
    color: var(--wat-badge-success-fg) !important;
}

.badge.bg-info {
    background-color: var(--wat-badge-info-bg) !important;
    color: var(--wat-badge-info-fg) !important;
}

.badge.bg-secondary {
    background-color: var(--wat-badge-secondary-bg) !important;
    color: var(--wat-badge-secondary-fg) !important;
}

.bg-light {
    background-color: var(--wat-panel) !important;
    color: var(--wat-panel-text) !important;
}

/* ── ช่องกรอก ─────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--wat-input-bg);
    border-color: var(--wat-input-border);
    color: var(--wat-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--wat-input-focus-bg);
    border-color: var(--wat-input-focus-border);
    color: var(--wat-text);
    box-shadow: 0 0 0 .2rem var(--wat-input-focus-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--wat-input-bg);
    opacity: .7;
}

.form-check-input {
    background-color: var(--wat-input-bg);
    border-color: var(--wat-input-border);
}

.form-check-input:checked {
    background-color: var(--wat-input-focus-border);
    border-color: var(--wat-input-focus-border);
}

/* ── ฟอร์มแบบบีบระยะ ──────────────────────────────────────────
 * ฟอร์มลงทะเบียนยาวราวสามเท่าของหน้าจอ เจ้าหน้าที่ต้องเลื่อนหาช่องบ่อย
 * บีบระยะที่นี่ที่เดียว ไม่ต้องไล่ใส่คลาสทีละช่องในเทมเพลต
 */
.form-compact .form-label {
    margin-bottom: .1rem;
    font-size: .85rem;
}

.form-compact .form-control,
.form-compact .form-select {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.form-compact h6 { margin-bottom: .25rem; }
.form-compact .form-check { margin-bottom: 0; }
.form-compact .alert { margin-bottom: .5rem; }

.section-title {
    color: var(--wat-brand);
    border-bottom: 2px solid var(--wat-brand);
    padding-bottom: 5px;
}

/* โทนมืด: หัวข้อใช้ทอง เพราะน้ำตาลเข้มจะจมไปกับพื้น */
:root[data-bs-theme="dark"] .section-title {
    color: var(--wat-accent);
    border-bottom-color: var(--wat-accent);
}

/* ปุ่มสลับโทน */
#themeToggle {
    background: none;
    border: none;
    color: var(--wat-on-brand);
    cursor: pointer;
    padding: .5rem .75rem;
}
#themeToggle:hover { color: var(--wat-accent); }

/* ── พิมพ์ — บังคับโทนสว่างเสมอ ──────────────────────────────
 * ถ้าไม่บังคับ คนที่ตั้งจอเป็นโทนมืดจะพิมพ์รายงานออกมาพื้นดำ
 * เปลืองหมึกและอ่านไม่ออก
 */
@media print {
    :root,
    :root[data-bs-theme="dark"] {
        --wat-bg:        #ffffff;
        --wat-surface:   #ffffff;
        --wat-text:      #000000;
        --wat-muted:     #555555;
        --wat-brand:     #8B4513;
        --wat-brand-2:   #A0522D;
        --wat-on-brand:  #ffffff;
        --wat-row-hover: #ffffff;
        --wat-border:    rgba(0, 0, 0, .125);

        --wat-brand-dark:  #6B3410;
        --wat-accent:      #FFD700;
        --wat-card-shadow: 0 2px 8px rgba(0, 0, 0, .1);
        --wat-warning-btn: #e6a817;

        --wat-row-warning:       #fff3cd;
        --wat-row-warning-hover: #fff3cd;
        --wat-row-danger:        #f8d7da;
        --wat-row-danger-hover:  #f8d7da;
        --wat-row-text:          #000000;
        --wat-thead-bg:          #f8f9fa;

        --wat-badge-warning-bg:   #ffc107;
        --wat-badge-warning-fg:   #000000;
        --wat-badge-danger-bg:    #dc3545;
        --wat-badge-danger-fg:    #ffffff;
        --wat-badge-success-bg:   #198754;
        --wat-badge-success-fg:   #ffffff;
        --wat-badge-info-bg:      #0dcaf0;
        --wat-badge-info-fg:      #000000;
        --wat-badge-secondary-bg: #6c757d;
        --wat-badge-secondary-fg: #ffffff;

        --wat-stat-green:  #28a745;
        --wat-stat-red:    #dc3545;
        --wat-stat-blue:   #007bff;
        --wat-stat-orange: #fd7e14;

        --wat-panel:      #f8f9fa;
        --wat-panel-text: #000000;

        --wat-input-bg:           #ffffff;
        --wat-input-border:       #999999;
        --wat-input-focus-bg:     #ffffff;
        --wat-input-focus-border: #999999;
        --wat-input-focus-ring:   transparent;

        --bs-success-rgb: 25, 135, 84;
        --bs-danger-rgb:  220, 53, 69;
        --bs-warning-rgb: 255, 193, 7;
        --bs-primary-rgb: 13, 110, 253;
        --bs-info-rgb:    13, 202, 240;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    /* กฎของโทนมืดที่ไม่ได้อ้างตัวแปร ต้องเขียนทับตรง ๆ ตอนพิมพ์
     * ไม่งั้นหัวข้อสีทองจะจางหายไปบนกระดาษขาว
     */
    :root[data-bs-theme="dark"] .section-title {
        color: var(--wat-brand);
        border-bottom-color: var(--wat-brand);
    }

    :root[data-bs-theme="dark"] .btn-primary,
    :root[data-bs-theme="dark"] .btn-primary:hover {
        background-color: var(--wat-brand);
        border-color: var(--wat-brand);
        color: var(--wat-on-brand);
    }

    .no-print { display: none !important; }

    .print-page-break {
        break-before: page !important;
        page-break-before: always !important;
        display: block;
    }

    @page { margin-bottom: 20mm; }

    body::after {
        content: "พิมพ์เมื่อ: " attr(data-print-time) "  |  วัดเขาสมโภชน์";
        display: block;
        position: fixed;
        bottom: 6mm;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 10pt;
        color: #666;
        border-top: 1px solid #ccc;
        padding-top: 3mm;
    }
}