/* ─────────────────────────────────────────────────────────────────────────
 *  โหมดมืด/สว่าง — ชุดสีที่ออกแบบเอง (คู่กับ src/theme.js ที่แปลงสีตายตัวในแต่ละหน้าให้อัตโนมัติ)
 *  โหลดทุกหน้าที่ใช้ output.css (แทรกโดย config/theme.php) · theme.js จะไม่แปลงไฟล์นี้ซ้ำ (id="sms-theme-css")
 *  กฎโหมดมืดทั้งหมดอยู่ใน @media screen → สั่งพิมพ์ได้สีสว่างเสมอ
 *  พาเลตต์: พื้นหน้า #0f1217 · navbar/sidebar #14171d · การ์ด (เดิมขาว) #191c21 · เส้น #34383f · ตัวอักษร #e5e7eb
 * ───────────────────────────────────────────────────────────────────────── */

/* ── ปุ่มสลับโหมดใน navbar (หน้าตาเดียวกับปุ่มกระดิ่ง) ── */
.theme-toggle {
    width: 40px; height: 40px; border-radius: 10px; border: none; flex-shrink: 0;
    background: #f3f4f6; color: #374151; cursor: pointer; font-size: 16px; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.theme-toggle:hover { background: #e5e7eb; color: #111827; }
.theme-toggle .ic-sun { display: none; }

/* จอมือถือ: navbar มีปุ่มเพิ่ม 1 ปุ่ม → ชื่อหน้าเหลือที่แคบ ชื่อยาวจะตัดเป็นหลายบรรทัดล้น navbar (สูง 60px)
   → ชื่อหน้าบรรทัดเดียวต่อท้าย "…" (ชื่อเต็มมีหัวข้อในเนื้อหาอยู่แล้ว) + ลดช่องไฟปุ่มขวา */
@media (max-width: 768px) {
    /* 🪤 ต้อง min-width:0 ที่ navbar (ไอเท็มของ grid) ด้วย — ไม่งั้นชื่อที่ nowrap ดันคอลัมน์ grid ให้กว้างเกินจอ ทั้งหน้าโดนตัดขวา */
    .admin-navbar { min-width: 0; }
    .admin-navbar .navbar-left { min-width: 0; flex: 1 1 auto; }
    .admin-navbar .page-title { min-width: 0; }
    .admin-navbar .page-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-navbar .navbar-right { gap: 8px; flex-shrink: 0; }
}

/* ระหว่างสลับโหมด/โหลดหน้าในโหมดมืด (theme.js ใส่ class นี้ชั่วครู่) — ห้ามเฟดทีละปุ่ม */
html.sms-theme-switching *,
html.sms-theme-switching *::before,
html.sms-theme-switching *::after { transition: none !important; }

@media screen {
    html[data-theme="dark"] {
        color-scheme: dark;                         /* ช่องกรอก/ปฏิทิน/แถบเลื่อนของเบราว์เซอร์มืดตาม */
        /* โครงหน้า (ตัวแปรเดียวกันใน teacher|admin|student/sidebar.php) */
        --content-bg: #0f1217;
        --navbar-bg: #14171d;   --navbar-border: #262a31;
        --footer-bg: #14171d;   --footer-border: #262a31;
        --sidebar-bg: #14171d;  --sidebar-hover: #222731;
        /* DataTables 1.13 (แถบสลับสี/hover/คอลัมน์เรียง ใช้ค่า rgb นี้) */
        --dt-row-stripe: 255, 255, 255; --dt-row-hover: 255, 255, 255; --dt-column-ordering: 255, 255, 255;
        --dt-html-background: #0f1217;
        /* FullCalendar 6 */
        --fc-page-bg-color: #191c21; --fc-neutral-bg-color: rgba(255, 255, 255, .06); --fc-neutral-text-color: #9ca3af;
        --fc-border-color: #34383f; --fc-list-event-hover-bg-color: #202329; --fc-today-bg-color: rgba(251, 191, 36, .12);
    }
    html[data-theme="dark"] body { color: #e5e7eb; }   /* หน้าที่ไม่ได้กำหนดสีตัวอักษรเอง */

    html[data-theme="dark"] .theme-toggle { background: #232730; color: #fbbf24; }
    html[data-theme="dark"] .theme-toggle:hover { background: #2d323c; color: #fcd34d; }
    html[data-theme="dark"] .theme-toggle .ic-sun { display: inline; }
    html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

    /* พื้นที่ที่ต้องคงสีสว่าง: ลายเซ็น (หมึกดำ พื้นใส) ต้องอยู่บนพื้นขาวเสมอ ไม่งั้นมองไม่เห็นตอนเซ็น/ตอนดู
       ช่องเซ็น .sig-pad (approve_service, behavior_record) · #sigPadCanvas (profile, admin/manage_signatures)
       · #guardianSigCanvas (student/edit_home_visit) · กล่องที่มีลายเซ็นแล้ว .sig-preview-box.has-sig / .sig-img
       · รูปลายเซ็นที่โหลดจาก uploads/signatures/ ทุกหน้า · ที่อื่นที่ต้องการ → ใส่ class="keep-light" */
    html[data-theme="dark"] .keep-light,
    html[data-theme="dark"] .sig-pad,
    html[data-theme="dark"] .sig-preview-box.has-sig,
    html[data-theme="dark"] .sig-img,
    html[data-theme="dark"] #sigPadCanvas,
    html[data-theme="dark"] #guardianSigCanvas { background-color: #fff !important; color: #111827 !important; color-scheme: light; }
    html[data-theme="dark"] img[src*="signatures/"] { background-color: #fff; border-radius: 4px; }

    /* ── select2 (CSS จาก CDN — theme.js อ่านข้ามโดเมนไม่ได้) ── */
    html[data-theme="dark"] .select2-container--default .select2-selection--single,
    html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: #191c21; border-color: #3b4048; }
    html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
    html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: #e5e7eb; }
    html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #8b93a1; }
    html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: #9ca3af; }
    html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: #9ca3af; }
    html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
    html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #202329; }
    html[data-theme="dark"] .select2-dropdown { background-color: #191c21; border-color: #3b4048; color: #e5e7eb; }
    html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
    html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field { background-color: #14171d; border-color: #3b4048; color: #e5e7eb; }
    html[data-theme="dark"] .select2-container--default .select2-results__option--selected,
    html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: #282b32; }
    html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
    html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #1e40af; color: #fff; }
    html[data-theme="dark"] .select2-container--default .select2-results__option--disabled,
    html[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled=true] { color: #6b7280; }
    html[data-theme="dark"] .select2-container--default .select2-results__group { color: #93c5fd; background-color: #202329; }
    html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #282b32; border-color: #3b4048; color: #e5e7eb; }

    /* ── DataTables 1.13 (CDN) ── */
    html[data-theme="dark"] table.dataTable thead > tr > th,
    html[data-theme="dark"] table.dataTable thead > tr > td { border-bottom-color: rgba(255, 255, 255, .18); }
    html[data-theme="dark"] table.dataTable tfoot > tr > th,
    html[data-theme="dark"] table.dataTable tfoot > tr > td { border-top-color: rgba(255, 255, 255, .18); }
    html[data-theme="dark"] table.dataTable.row-border > tbody > tr > *,
    html[data-theme="dark"] table.dataTable.display > tbody > tr > * { border-top-color: rgba(255, 255, 255, .08); }
    html[data-theme="dark"] table.dataTable.no-footer { border-bottom-color: rgba(255, 255, 255, .18); }
    html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
    html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #282b32; border-color: #3b4048; color: #fff !important; }
    html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: #6b7280 !important; background: transparent; border-color: transparent; }
    html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
    html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { border-color: #3b4048; background-color: #191c21; }

    /* ── Leaflet (CDN) — ตัวแผนที่/ภาพดาวเทียมคงเดิม เปลี่ยนเฉพาะปุ่ม/ป๊อปอัป ── */
    html[data-theme="dark"] .leaflet-container { background: #1a1d22; }
    html[data-theme="dark"] .leaflet-popup-content-wrapper,
    html[data-theme="dark"] .leaflet-popup-tip { background: #191c21; color: #e5e7eb; }
    html[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: #9ca3af; }
    html[data-theme="dark"] .leaflet-bar a,
    html[data-theme="dark"] .leaflet-bar a:hover,
    html[data-theme="dark"] .leaflet-control-layers-toggle { background-color: #191c21; color: #e5e7eb; border-bottom-color: #34383f; }
    html[data-theme="dark"] .leaflet-control-layers,
    html[data-theme="dark"] .leaflet-control-attribution { background: rgba(25, 28, 33, .88); color: #cbd5e1; }
    html[data-theme="dark"] .leaflet-control-attribution a { color: #93c5fd; }
    /* ป้ายชื่อบนหมุด: พื้นมาจาก CSS ในหน้า (แปลงเป็นเข้มแล้ว) แต่สีตัวอักษร #222 มาจาก CDN → ต้องตั้งเอง ไม่งั้นมืดทับมืด */
    html[data-theme="dark"] .leaflet-tooltip { background-color: #191c21; border-color: #34383f; color: #e5e7eb; }
    html[data-theme="dark"] .leaflet-tooltip-top::before { border-top-color: #34383f; }
    html[data-theme="dark"] .leaflet-tooltip-bottom::before { border-bottom-color: #34383f; }
    html[data-theme="dark"] .leaflet-tooltip-left::before { border-left-color: #34383f; }
    html[data-theme="dark"] .leaflet-tooltip-right::before { border-right-color: #34383f; }
    html[data-theme="dark"] .leaflet-control-geocoder,
    html[data-theme="dark"] .leaflet-control-geocoder-form input,
    html[data-theme="dark"] .leaflet-control-geocoder-alternatives { background: #191c21; color: #e5e7eb; }
    html[data-theme="dark"] .leaflet-control-geocoder-alternatives li:hover,
    html[data-theme="dark"] .leaflet-control-geocoder-selected { background-color: #282b32; }
    /* ตัวเลขกลุ่มหมุด (MarkerCluster): วงกลมสีอ่อนของปลั๊กอินคงเดิม → ตัวเลขต้องเข้มเหมือนโหมดสว่าง */
    html[data-theme="dark"] .marker-cluster span { color: #111827; }
}