/**
 * DM9 UI design tokens (style1)
 * - สี --dm-action-* / --dm-swal-* ด้านล่าง = fallback ก่อนโหลดธีม; หลังโหลดหน้า LayoutHelper ฉีด :root จาก
 *   config/layouts.php + merge config/ui_dm_token_defaults.php จะ override สีตามธีม (Teacher / light / dark …)
 * - ขนาดปุ่ม / หัวการ์ด / typography ไม่ฉีดจาก PHP — แก้ที่ไฟล์นี้
 */
:root {
    /* --- Primary action (บันทึก / ยืนยันใน Swal) — โทนสี fallback --- */
    --dm-action-save-top: #6f8dff;
    --dm-action-save-bottom: #4967d8;
    --dm-action-save-border: #4967d8;
    --dm-action-save-hover-top: #5f7ff8;
    --dm-action-save-hover-bottom: #3f5fcd;
    --dm-action-save-hover-border: #3f5fcd;
    --dm-action-save-text: #ffffff;
    /* สีเรียบสำหรับองค์ประกอบที่ไม่รองรับ gradient (เช่น Swal ปุ่มยืนยัน) */
    --dm-action-save-solid: #4967d8;
    --dm-action-save-solid-hover: #3f5fcd;

    /* --- Cancel / กลับ / ปุ่มรอง --- */
    --dm-action-cancel-bg: #f4f7fb;
    --dm-action-cancel-border: #c9d2de;
    --dm-action-cancel-text: #233a57;
    --dm-action-cancel-hover-bg: #e9eff7;
    --dm-action-cancel-hover-border: #b8c3d2;
    --dm-action-cancel-hover-text: #1b2f48;

    /* --- ปุ่มอันตราย (ลบ / Swal deny) — พื้นแดงอ่อน ขอบ+ตัวอักษรแดงเข้ม --- */
    --dm-action-danger-bg: #fff5f6;
    --dm-action-danger-border: #dc3545;
    --dm-action-danger-text: #c82333;
    --dm-action-danger-hover-bg: #ffe8ec;
    --dm-action-danger-hover-border: #bb2d3b;
    --dm-action-danger-hover-text: #a71d2a;

    /* ปุ่มไอคอนแถวตาราง (ดู / แก้ไข / ลบ) — ใช้กับ .dm-btn-icon-action.btn-sm */
    --dm-btn-icon-action-size: 2.125rem;

    /* ขนาดปุ่มข้อความ — ฟอร์ม / modal / header (dm-btn-* ยกเว้น .dm-btn-icon-action) */
    --dm-btn-pad-y: 0.55rem;
    --dm-btn-pad-x: 1rem;
    --dm-btn-pad-y-sm: 0.35rem;
    --dm-btn-pad-x-sm: 0.75rem;
    --dm-btn-min-height: 2.375rem;
    --dm-btn-min-height-sm: 2.125rem;
    /* line-height ข้อความในปุ่ม (ลดความต่าง a vs button / โทนต่างกัน) */
    --dm-btn-text-line-height: 1.35;
    --dm-btn-text-line-height-sm: 1.25;

    /*
     * หัวข้อหลักในแถบ .card-header (ทะเบียน / ฟอร์ม / เลือกหลักสูตร)
     * ปรับที่เดียว — ลดกรณี h3 vs h2.h5 ไม่เท่ากัน
     */
    --dm-card-header-title-size: 1.15rem;
    --dm-card-header-title-weight: 600;
    --dm-card-header-title-line-height: 1.35;

    /* --- โทน Swal พื้นหลัง popup (อ่านง่ายบน admin theme) --- */
    --dm-swal-bg: #ffffff;
    --dm-swal-text: #1e293b;
    --dm-swal-border-radius: 12px;

    /*
     * เงาการ์ดเนื้อหาหลัก (ทะเบียน/ฟอร์ม) — เบลอน้อย ฟุ้งแคบ ชิดขอบการ์ด
     * โหมดมืด override ที่ body.theme-dark
     */
    --dm-card-elev-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(8, 32, 42, 0.14),
        0 10px 24px rgba(6, 28, 38, 0.14);

    /*
     * ขอบกล่องตารางข้อมูลที่อยู่ใน card-body / form (ไม่ใช้เงา elevation ซ้อน)
     * ผสมจากขอบการ์ด + ตัวอักษรหลักให้เห็นเส้นชัดทั้งโหมดสว่าง/มืด
     */
    --dm-table-inset-border: color-mix(
        in srgb,
        var(--dm-card-border, var(--dm-border, #dce4ec)) 62%,
        var(--dm-text-main, #1e293b) 38%
    );

    /* --- Shared tabs (endpoint-independent) --- */
    --dm-tab-nav-bg: var(--dm-bg-surface, #ffffff);
    --dm-tab-nav-border: var(--dm-border, #dee2e6);
    --dm-tab-text: var(--dm-text-muted, #6c757d);
    --dm-tab-active-bg: var(--dm-primary, #4967d8);
    --dm-tab-active-text: #ffffff;
    --dm-tab-hover-bg: color-mix(in srgb, var(--dm-primary, #4967d8) 12%, transparent);
    --dm-tab-badge-bg: color-mix(in srgb, var(--dm-tab-active-text, #ffffff) 22%, transparent);
    --dm-tab-disabled-bg: color-mix(in srgb, var(--dm-tab-nav-bg, #ffffff) 88%, #000000 12%);
    --dm-tab-disabled-text: color-mix(in srgb, var(--dm-tab-text, #6c757d) 75%, #000000 25%);
    --dm-tab-disabled-border: var(--dm-tab-nav-border, #dee2e6);

    /* --- Shared semantic text palette (bootstrap-like) --- */
    --dm-text-primary: var(--dm-text-main, #2c3e50);
    --dm-text-secondary: #5b6b7b;
    --dm-text-info: #0f6c86;
    --dm-text-success: #0f6a42;
    --dm-text-warning: #8a6300;
    --dm-text-danger: #a62834;
    --dm-text-alert: var(--dm-text-danger, #a62834);

    /*
     * Text hierarchy guideline (shared mapping)
     * - primary   : เนื้อหาหลัก / heading / default text
     * - secondary : เนื้อหารองที่ยังต้องอ่านชัด
     * - muted     : meta text / timestamp / helper
     * - info      : ข้อความสถานะเชิงข้อมูล, ลิงก์รอง, icon accent
     * - warning   : ข้อความเตือนที่ยังไม่ใช่ error
     * - danger    : ข้อความผิดพลาด/ลบข้อมูล/เสี่ยงสูง
     * - alert     : alias ของ danger สำหรับ semantic ที่สื่อคำเตือนชัดเจน
     */
}

body.theme-dark {
    --dm-card-elev-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 14px 32px rgba(0, 0, 0, 0.28);

    --dm-table-inset-border: color-mix(
        in srgb,
        var(--dm-card-border, var(--dm-border, rgba(255, 255, 255, 0.14))) 48%,
        var(--dm-text-main, #e8eef5) 52%
    );

    --dm-text-muted: #b9c4d6;
    --dm-tab-nav-bg: var(--dm-bg-soft, #2b3035);
    --dm-tab-nav-border: var(--dm-border, rgba(255, 255, 255, 0.12));
    --dm-tab-text: var(--dm-text-main, #f1f3f5);
    --dm-tab-active-bg: var(--dm-primary, #5a8dee);
    --dm-tab-active-text: var(--dm-text-main, #ffffff);
    --dm-tab-hover-bg: color-mix(in srgb, var(--dm-primary, #5a8dee) 18%, transparent);
    --dm-tab-badge-bg: color-mix(in srgb, var(--dm-tab-active-text, #ffffff) 26%, transparent);
    --dm-tab-disabled-bg: color-mix(in srgb, var(--dm-tab-nav-bg, #2b3035) 85%, #000000 15%);
    --dm-tab-disabled-text: color-mix(in srgb, var(--dm-tab-text, #f1f3f5) 52%, #000000 48%);
    --dm-tab-disabled-border: color-mix(in srgb, var(--dm-tab-nav-border, rgba(255, 255, 255, 0.12)) 70%, #000000 30%);

    --dm-text-primary: var(--dm-text-main, #f4f7fb);
    --dm-text-secondary: #d8e0ee;
    --dm-text-info: #9ec5ff;
    --dm-text-success: #8fe0b5;
    --dm-text-warning: #ffd487;
    --dm-text-danger: #ff9ca8;
    --dm-text-alert: var(--dm-text-danger, #ff9ca8);
}

/* ---------- StudentPicker modal semantic theme ---------- */
#dm9StudentPickerModal .modal-content {
    background: var(--dm-card-bg, var(--dm-bg-surface, #ffffff));
    color: var(--dm-card-text, var(--dm-text-main, #212529));
    border: 1px solid var(--dm-border, #dce4ec);
}

#dm9StudentPickerModal .modal-header {
    border-bottom: 1px solid var(--dm-border, #dce4ec);
}

#dm9StudentPickerModal .modal-footer {
    border-top: 1px solid var(--dm-border, #dce4ec);
}

#dm9StudentPickerModal .form-control {
    background-color: var(--dm-input-bg, var(--dm-card-bg, var(--dm-bg-surface, #ffffff)));
    color: var(--dm-input-text, var(--dm-text-main, #212529));
    border-color: var(--dm-input-border, var(--dm-border, #dce4ec));
}

#dm9StudentPickerModal .form-control::placeholder {
    color: var(--dm-input-placeholder, rgba(108, 117, 125, 0.95));
    opacity: 1;
}

body.theme-dark #dm9StudentPickerModal .form-control::placeholder {
    color: var(--dm-input-placeholder, rgba(255, 255, 255, 0.78));
}

/* Table of search results (Bootstrap table classes inside modal) */
#dm9StudentPickerModal .table-responsive {
    background: var(--dm-table-bg, var(--dm-card-bg, var(--dm-bg-surface, #ffffff)));
    border: 1px solid var(--dm-table-border, var(--dm-border, #dce4ec));
    border-radius: 8px;
    overflow: hidden;
}

#dm9StudentPickerModal .table {
    margin-bottom: 0;
    color: var(--dm-card-text, var(--dm-text-main, #212529));
    background-color: var(--dm-table-bg, var(--dm-card-bg, var(--dm-bg-surface, #ffffff)));
    --bs-table-bg: transparent;
    --bs-table-striped-bg: color-mix(in srgb, var(--dm-bg-hover, rgba(0, 0, 0, 0.05)) 55%, transparent);
    --bs-table-hover-bg: var(--dm-bg-hover, rgba(73, 103, 216, 0.10));
    --bs-table-border-color: var(--dm-table-border, var(--dm-border, #dce4ec));
}

#dm9StudentPickerModal .table > :not(caption) > * > * {
    border-bottom-color: var(--dm-table-border, var(--dm-border, #dce4ec));
}

#dm9StudentPickerModal .table thead th {
    background: var(--dm-table-head-bg, var(--dm-secondary, var(--dm-primary, #34495e)));
    color: var(--dm-table-head-text, var(--dm-card-header-text, #ffffff));
    font-weight: 600;
    border-bottom-color: var(--dm-table-head-border, var(--dm-table-border, var(--dm-border, #dce4ec)));
}

#dm9StudentPickerModal .table tbody td {
    background-color: var(--dm-table-row-bg, var(--dm-table-bg, var(--dm-card-bg, var(--dm-bg-surface, #ffffff))));
    color: var(--dm-card-text, var(--dm-text-main, #212529));
    vertical-align: middle;
}

#dm9StudentPickerModal .table tbody tr:hover td {
    background-color: var(--dm-bg-hover, rgba(73, 103, 216, 0.10)) !important;
}

#dm9StudentPickerModal .table tbody tr.table-active td {
    background-color: color-mix(in srgb, var(--dm-primary, #4967d8) 18%, var(--dm-table-row-bg, var(--dm-table-bg, #ffffff))) !important;
}

/* ---------- DM9InputControl Thai date picker semantic theme ---------- */
button[data-dm9-date-btn="1"].btn {
    background-color: var(--dm-toolbar-control-bg, var(--dm-bg-soft, #eef2f5)) !important;
    border-color: var(--dm-toolbar-control-border, var(--dm-border, #dce4ec)) !important;
    color: var(--dm-toolbar-control-text, var(--dm-text-main, #212529)) !important;
}

button[data-dm9-date-btn="1"].btn:hover,
button[data-dm9-date-btn="1"].btn:focus {
    background-color: var(--dm-bg-hover, rgba(73, 103, 216, 0.08)) !important;
    border-color: var(--dm-toolbar-control-border, var(--dm-border, #dce4ec)) !important;
}

#dm9DatePicker {
    background: var(--dm-card-bg, var(--dm-bg-surface, #ffffff)) !important;
    color: var(--dm-card-text, var(--dm-text-main, #212529)) !important;
    border: 1px solid var(--dm-border, #dce4ec) !important;
    box-shadow: var(--dm-card-elev-shadow) !important;
}

/* Navigation buttons (<, >) */
#dm9DatePicker [data-dm9-nav].btn {
    background: var(--dm-action-cancel-bg, #f4f7fb) !important;
    border: 1px solid var(--dm-action-cancel-border, #c9d2de) !important;
    color: var(--dm-action-cancel-text, #233a57) !important;
}

/* Day buttons */
#dm9DatePicker button[data-dm9-day].btn {
    background: transparent !important;
    border-color: var(--dm-border, #dce4ec) !important;
    color: var(--dm-text-main, #212529) !important;
}

#dm9DatePicker button[data-dm9-day].btn:hover,
#dm9DatePicker button[data-dm9-day].btn:focus {
    background: var(--dm-bg-hover, rgba(73, 103, 216, 0.10)) !important;
    border-color: var(--dm-primary, #4967d8) !important;
}

/*
 * Unified Theme Variable Bridge:
 * Maps new DM tokens to legacy variable names for system-wide compatibility.
 * This ensures all layouts (Admin, Teacher, Student, Guest) can use the same token source.
 */
:root {
    /* Legacy Common */
    --primary-color: var(--dm-primary);
    --secondary-color: var(--dm-secondary);
    --text-color: var(--dm-text-main);
    --border-color: var(--dm-border);
    --table-border: var(--dm-border);
    --table-hover: var(--dm-bg-hover);
    --card-bg: var(--dm-bg-surface);
    --card-header-bg: var(--dm-primary);
    --card-header-text: #ffffff;
    --link-color: var(--dm-link, var(--dm-primary));
    --link-hover: var(--dm-link-hover, var(--dm-accent));
    --background-gradient: var(--dm-bg-gradient);
    --text-secondary-color: var(--dm-text-secondary, var(--dm-text-muted));
    --text-info-color: var(--dm-text-info, var(--dm-secondary));
    --text-success-color: var(--dm-text-success, #198754);
    --text-warning-color: var(--dm-text-warning, #ffc107);
    --text-danger-color: var(--dm-text-danger, #dc3545);
    --text-alert-color: var(--dm-text-alert, var(--dm-text-danger));

    /* Legacy Teacher tokens */
    --teacher-primary: var(--dm-primary);
    --teacher-secondary: var(--dm-secondary);
    --teacher-accent: var(--dm-accent);
    --teacher-text: var(--dm-text-main);
    --teacher-muted: var(--dm-text-muted);
    --teacher-border: var(--dm-border);
    --teacher-card-bg: var(--dm-bg-surface);
    --teacher-bg: var(--dm-bg-main);
    --teacher-bg-soft: var(--dm-bg-soft);
    --teacher-sidebar: var(--dm-sidebar-bg);
    --teacher-sidebar-soft: var(--dm-sidebar-bg-alt);
    --teacher-hover: var(--dm-bg-hover);

    /* Legacy Admin tokens */
    --admin-header-start: var(--dm-header-bg-start);
    --admin-header-end: var(--dm-header-bg-end);
}

/* ---------- หัวข้อหลักแถบหัวการ์ด (อ่านค่า --dm-card-header-title-* ด้านบน) ---------- */
.card-header .card-title,
.card-header > h1,
.card-header > h2,
.card-header > h3,
.card-header h1.card-title,
.card-header h2.card-title,
.card-header h3.card-title,
.card-header h2.h5 {
    font-size: var(--dm-card-header-title-size);
    font-weight: var(--dm-card-header-title-weight);
    line-height: var(--dm-card-header-title-line-height);
}

/* ตัวอย่าง override ตาม layout ในอนาคต (เปิดใช้เมื่อต้องการ)
body.student-theme { ... }
body.guest-layout { ... }
*/