/* บังคับธีมให้พื้นหลังเป็นสีขาวล้วน และตัวอักษรสีดำเข้มชัดเจน */
        [data-theme="winter"] {
            --b1: 0 0% 100%;
            /* พื้นหลังสีขาวล้วน */
            --b2: 210 20% 98%;
            /* สีเทาอ่อนมากสำหรับ Hover/Cards */
            --b3: 210 14% 89%;
            /* สีเส้นขอบ */
            --bc: 222 47% 11%;
            /* ตัวอักษรสีดำ/เทาเข้มจัด (slate-900) */
        }

        [data-theme="night"] {
            --b1: 220 20% 15%;
            --b2: 220 20% 10%;
            --bc: 0 0% 95%;
        }

        body {
            font-family: var(--app-font-family, 'Kanit', sans-serif);
            background-color: hsl(var(--b1));
            color: #0f172a;
            /* บังคับสีฟอนต์หลักเป็นสีเข้มชัดเจน */
            -webkit-font-smoothing: antialiased;
        }

        /* Contrast hardening: ข้อความสถานะ/คำอธิบายต้องไม่จางจนอ่านยากบนพื้นสว่าง */
        .text-slate-400 { color: #64748b !important; }
        .text-slate-300 { color: #94a3b8 !important; }
        .text-gray-400 { color: #64748b !important; }
        .text-gray-300 { color: #94a3b8 !important; }

        /* Light theme contrast: สี pastel เดิมจางเกินไปบนพื้นขาว */
        [data-theme="winter"] :is(.text-warning, .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900) {
            color: #78350f !important;
        }
        [data-theme="winter"] :is(.text-accent, .text-rose-600, .text-rose-700, .text-rose-800, .text-rose-900) {
            color: #881337 !important;
        }
        [data-theme="winter"] :is(.text-violet-700, .text-violet-800, .text-violet-900) {
            color: #4c1d95 !important;
        }
        [data-theme="winter"] :is(.text-teal-700, .text-teal-800, .text-teal-900) {
            color: #134e4a !important;
        }
        [data-theme="winter"] :is(.text-cyan-700, .text-cyan-800, .text-cyan-900) {
            color: #164e63 !important;
        }
        [data-theme="winter"] :is(.bg-warning\/10, .bg-warning\/20) {
            background-color: #fef3c7 !important;
        }
        [data-theme="winter"] :is(.bg-accent\/10, .bg-accent\/20) {
            background-color: #ffe4e6 !important;
        }
        [data-theme="winter"] :is(.border-warning\/20, .border-warning\/30) {
            border-color: #fbbf24 !important;
        }
        [data-theme="winter"] :is(.border-accent\/20, .border-accent\/30) {
            border-color: #fda4af !important;
        }

        /* สี warning ของ daisyUI เป็นเหลือง ถ้าใช้ตัวอักษรขาวจะจมพื้นหลัง */
        .btn-warning.text-white,
        .badge-warning.text-white {
            color: #713f12 !important;
        }

        .page-section {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
        }

        .page-section.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .timetable-cell {
            transition: all 0.2s;
            border: 1px solid hsl(var(--b3));
            cursor: pointer;
        }

        .timetable-cell:hover {
            background-color: hsl(var(--b2));
            transform: scale(1.02);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 10;
            position: relative;
        }

        .timetable-break {
            border: 1px solid hsl(var(--b3));
            background-color: #fef08a;
            color: #854d0e;
        }

        .timetable-subject-title {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.25;
        }

        .timetable-teacher-line {
            display: block;
            white-space: normal;
            overflow: visible;
            overflow-wrap: anywhere;
            word-break: keep-all;
            line-height: 1.25;
        }

        .print-export-area .timetable-subject-title {
            display: block !important;
            -webkit-line-clamp: unset !important;
            -webkit-box-orient: initial !important;
            overflow: visible !important;
            white-space: normal !important;
            line-height: 1.22 !important;
        }

        .print-export-area .timetable-teacher-line {
            display: block !important;
            max-height: none !important;
            overflow: visible !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            word-break: keep-all !important;
            line-height: 1.18 !important;
            color: #475569 !important;
        }

        .print-export-area .timetable-teacher-line i {
            display: none !important;
        }

        .teacher-subject-input {
            min-height: 3rem;
            resize: vertical;
            line-height: 1.35;
        }

        #teacherSubjectsModal.teacher-subjects-fullscreen-modal {
            padding: 0 !important;
            align-items: stretch !important;
        }

        #teacherSubjectsModal .teacher-subjects-fullscreen-box {
            width: 100vw !important;
            max-width: 100vw !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 0 !important;
            display: grid !important;
            grid-template-rows: auto minmax(0, 1fr) auto;
            overflow: hidden !important;
        }

        .teacher-subjects-modal-header {
            padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.5rem 1rem;
            background: #fff;
            z-index: 2;
        }

        .teacher-subjects-modal-content {
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 1.5rem;
        }

        .teacher-subjects-modal-content .form-control,
        .teacher-subjects-modal-content :is(.input, .select, .textarea) {
            min-width: 0;
            width: 100%;
        }

        @media (min-width: 1024px) {
            .teacher-subject-form-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
        }

        @media (min-width: 1280px) {
            .teacher-subject-form-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            }
        }

        .teacher-subjects-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
            background: #fff;
            border-top: 1px solid #e2e8f0;
            box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
            z-index: 2;
        }

        /* Sticky columns for attendance cross-tab table */
        .sticky-col-1 { position: sticky; left: 0; z-index: 2; background: inherit; }
        .sticky-col-2 { position: sticky; left: 36px; z-index: 2; background: inherit; }
        .sticky-col-3 { position: sticky; left: 96px; z-index: 2; background: inherit; }
        thead .sticky-col-1, thead .sticky-col-2, thead .sticky-col-3 { z-index: 3; background: #f1f5f9; }

        /* Dark theme: sticky columns ใช้พื้นหลังโทนเข้ม */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(thead .sticky-col-1, thead .sticky-col-2, thead .sticky-col-3) {
            background: hsl(var(--b1)) !important;
            color: hsl(var(--bc)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        tbody tr :is(.sticky-col-1, .sticky-col-2, .sticky-col-3) {
            background: hsl(var(--b2)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        .table-zebra tbody tr:nth-child(even) :is(.sticky-col-1, .sticky-col-2, .sticky-col-3) {
            background: hsl(var(--b1) / 0.7) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        tbody tr:hover :is(.sticky-col-1, .sticky-col-2, .sticky-col-3) {
            background: hsl(var(--b3) / 0.7) !important;
        }

        /* Mobile bottom nav */
        #mobile-bottom-nav {
            display: none;
        }
        @media (max-width: 767px) {
            #app-sidebar { display: none !important; }
            #mobile-bottom-nav { display: flex; }
            #mobile-top-bar { display: flex; }
            main.flex-1 { padding-bottom: 70px; }
        }
        @media (min-width: 768px) {
            #mobile-top-bar { display: none; }
        }

        /* Mobile more-menu sheet */
        #mobile-more-menu {
            transform: translateY(100%);
            transition: transform 0.25s ease-in-out;
        }
        #mobile-more-menu.open {
            transform: translateY(0);
        }

        /* Calendar styles */
        .cal-day {
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%; font-size: 13px; font-weight: 600;
            cursor: pointer; transition: background 0.15s;
        }
        .cal-day:hover { background: #e0e7ff; }
        .cal-day.cal-today { background: #3b82f6; color: white; }
        .cal-day.cal-holiday { background: #fbbf24; color: #7c2d12; }
        .cal-day.cal-today.cal-holiday { background: #f59e0b; color: white; }
        .cal-day.cal-empty { cursor: default; }
        .cal-day.cal-empty:hover { background: transparent; }
        .cal-day.cal-no-edit { cursor: default; }
        .cal-day.cal-no-edit:hover { background: transparent; }
        .cal-day.cal-no-edit.cal-holiday:hover { background: #fbbf24; }
        .cal-weekend { color: #94a3b8; background: #f8fafc; }
        .cal-weekend:hover { background: #e0e7ff !important; color: #3730a3; }
        .cal-dow-อา { color: #ef4444; }
        .cal-dow-ส  { color: #8b5cf6; }

        /* วันหยุดไทย (แนะนำ — รอแอดมินยืนยัน) */
        .cal-suggest {
            position: relative;
            color: #c2410c;
            background: #fff7ed;
            border: 1.5px dashed #fb923c;
            box-sizing: border-box;
        }
        .cal-suggest:hover {
            background: #ffedd5;
            color: #9a3412;
        }
        .cal-suggest::after {
            content: '';
            position: absolute;
            right: 2px; top: 2px;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #fb923c;
        }
        /* bulk pick mode */
        body.cal-pick-mode .cal-day:not(.cal-empty) {
            cursor: pointer;
        }
        .cal-pick-selected {
            background: #3b82f6 !important;
            color: #fff !important;
            border: 2px solid #1d4ed8 !important;
            transform: scale(1.05);
        }
        .cal-pick-selected::after {
            content: '✓';
            position: absolute;
            right: 1px; bottom: -2px;
            font-size: 9px; font-weight: 900;
            color: #fff;
        }
        /* dark theme: suggest + selected */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .cal-suggest {
            background: hsl(30 60% 22%) !important;
            color: hsl(30 95% 75%) !important;
            border-color: hsl(30 85% 55%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .cal-suggest:hover {
            background: hsl(30 65% 30%) !important;
        }

        /* ========== SWAP TIMETABLE PICKER ========== */
        .swap-cell {
            cursor: pointer;
            transition: all 0.15s ease;
            position: relative;
        }
        .swap-cell:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 10px -2px rgba(0,0,0,0.12);
        }
        .swap-cell.swap-pick-a {
            background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
            border: 2px solid #f59e0b !important;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) inset;
        }
        .swap-cell.swap-pick-a::after {
            content: '1';
            position: absolute;
            top: 2px; right: 4px;
            width: 18px; height: 18px;
            background: #d97706; color: #fff;
            border-radius: 50%;
            font-size: 11px; font-weight: 900;
            display: flex; align-items: center; justify-content: center;
        }
        .swap-cell.swap-pick-b {
            background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
            border: 2px solid #3b82f6 !important;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) inset;
        }
        .swap-cell.swap-pick-b::after {
            content: '2';
            position: absolute;
            top: 2px; right: 4px;
            width: 18px; height: 18px;
            background: #2563eb; color: #fff;
            border-radius: 50%;
            font-size: 11px; font-weight: 900;
            display: flex; align-items: center; justify-content: center;
        }
        .swap-cell.swap-conflict {
            background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
            border: 2px solid #ef4444 !important;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) inset;
            cursor: not-allowed;
            position: relative;
        }
        .swap-cell.swap-conflict::after {
            content: '\f05e';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 4px; right: 6px;
            color: #dc2626; font-size: 12px;
        }
        .swap-cell.swap-existing {
            background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important;
            border: 2px dashed #8b5cf6 !important;
        }
        .swap-cell.swap-existing::before {
            content: '\f2f1';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 2px; left: 4px;
            color: #7c3aed; font-size: 11px;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swap-cell.swap-pick-a {
            background: linear-gradient(135deg, hsl(38 70% 30%), hsl(38 70% 38%)) !important;
            color: #fff !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swap-cell.swap-pick-b {
            background: linear-gradient(135deg, hsl(217 70% 30%), hsl(217 70% 38%)) !important;
            color: #fff !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swap-cell.swap-conflict {
            background: linear-gradient(135deg, hsl(0 60% 28%), hsl(0 60% 35%)) !important;
            color: #fff !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swap-cell.swap-existing {
            background: linear-gradient(135deg, hsl(262 45% 28%), hsl(262 45% 35%)) !important;
            color: #fff !important;
        }

        @media print {
            @page {
                size: A4 landscape;
                margin: 10mm;
            }

            body {
                background-color: white !important;
                color: black !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            body * {
                visibility: hidden;
            }

            #login-section,
            aside,
            .print-hidden,
            .btn,
            .tabs,
            .modal {
                display: none !important;
            }

            .print-export-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                max-width: 100%;
                height: auto;
                visibility: visible !important;
                background-color: white !important;
                color: black !important;
                margin: 0;
                padding: 0;
                box-shadow: none !important;
                border: none !important;
            }

            .print-export-area * {
                visibility: visible !important;
                color: black !important;
                box-sizing: border-box !important;
            }

            .print-export-area table {
                width: 100% !important;
                max-width: 100% !important;
                border-collapse: collapse;
                table-layout: fixed !important;
                border-spacing: 1px !important;
            }

            .print-export-area > .p-6,
            .print-export-area > .overflow-x-auto {
                padding: 4mm !important;
                overflow: visible !important;
                min-height: auto !important;
            }

            .print-export-area th,
            .print-export-area td {
                border: 1px solid #94a3b8 !important;
                padding: 3px 2px !important;
                font-size: 9.5px !important;
                line-height: 1.25 !important;
                height: auto !important;
                word-break: break-word;
                overflow-wrap: anywhere !important;
                width: auto !important; /* ยกเลิกคลาส w-32, w-24 ที่ล็อกความกว้างไว้ */
                min-width: 0 !important;
                white-space: normal !important; /* ยอมให้ตัดคำได้ */
            }

            .print-export-area th:first-child,
            .print-export-area td:first-child {
                width: 12mm !important;
            }

            .print-export-area .badge,
            .print-export-area [class*="badge"] {
                padding: 1px 4px !important;
                font-size: 8.5px !important;
                line-height: 1.1 !important;
                min-height: 0 !important;
            }

            .print-export-area .timetable-subject-title {
                font-size: 10.5px !important;
                line-height: 1.22 !important;
                overflow: visible !important;
                display: block !important;
                -webkit-line-clamp: unset !important;
            }

            .print-export-area .timetable-teacher-line {
                display: block !important;
                font-size: 8.6px !important;
                line-height: 1.18 !important;
                white-space: normal !important;
                overflow: visible !important;
                overflow-wrap: anywhere !important;
                word-break: keep-all !important;
                color: #475569 !important;
            }

            .overflow-x-auto {
                overflow: visible !important;
            }
        }

        .att-radio-group .btn {
            border-radius: 0;
            border-right: none;
            font-weight: 600;
        }

        .att-radio-group .btn:first-child {
            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }

        .att-radio-group .btn:last-child {
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            border-right: 1px solid hsl(var(--b3));
        }

        /* เพิ่มคลาสพิเศษให้ตัวอักษรอ่านง่ายขึ้น */
        .text-sharp {
            color: #1e293b;
            font-weight: 500;
        }

        .text-sharp-bold {
            color: #0f172a;
            font-weight: 700;
        }

        /* ========== Sidebar: collapsible + mobile drawer ========== */
        #app-sidebar {
            transition: width 0.25s ease, transform 0.25s ease;
        }

        /* Desktop: โหมดย่อเมนู (เฉพาะไอคอน) */
        @media (min-width: 768px) {
            body.sidebar-collapsed #app-sidebar {
                width: 5rem !important;
            }
            body.sidebar-collapsed #app-sidebar .sidebar-label,
            body.sidebar-collapsed #app-sidebar .sidebar-brand,
            body.sidebar-collapsed #app-sidebar .sidebar-user,
            body.sidebar-collapsed #app-sidebar .menu-title {
                display: none !important;
            }
            /* ซ่อนข้อความในเมนู (text nodes) ด้วย font-size: 0 */
            body.sidebar-collapsed #app-sidebar .menu a {
                font-size: 0 !important;
                justify-content: center !important;
                padding: 0.6rem 0.5rem !important;
                gap: 0 !important;
            }
            body.sidebar-collapsed #app-sidebar .menu a i {
                margin: 0 auto !important;
                font-size: 1.25rem !important;
            }
            body.sidebar-collapsed #app-sidebar #maintenance-label {
                display: none !important;
            }
            /* ซ่อนข้อความปุ่มออกจากระบบ / ปุ่ม action ที่มี .sidebar-btn-text */
            body.sidebar-collapsed #app-sidebar .sidebar-btn-text {
                display: none !important;
            }
            body.sidebar-collapsed #app-sidebar .btn-logout {
                padding: 0.5rem !important;
                aspect-ratio: 1 / 1;
            }
            body.sidebar-collapsed #app-sidebar .sidebar-brand-row {
                justify-content: center !important;
                padding: 1rem 0.5rem !important;
            }
            body.sidebar-collapsed #app-sidebar #desktop-sidebar-toggle i {
                transform: rotate(180deg);
            }
        }

        /* Mobile: drawer เลื่อนจากซ้าย */
        @media (max-width: 767.98px) {
            #app-sidebar {
                position: fixed;
                top: 0; left: 0; bottom: 0;
                width: 17rem !important;
                height: 100vh !important;
                z-index: 60;
                transform: translateX(-105%);
                box-shadow: 6px 0 32px rgba(0, 0, 0, 0.12);
            }
            body.sidebar-open #app-sidebar {
                transform: translateX(0);
            }
            #sidebar-backdrop {
                position: fixed; inset: 0;
                background: rgba(15, 23, 42, 0.4);
                z-index: 55;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease;
                backdrop-filter: blur(2px);
            }
            body.sidebar-open #sidebar-backdrop {
                opacity: 1;
                pointer-events: auto;
            }
        }

        @media (min-width: 768px) {
            #sidebar-backdrop { display: none; }
        }

        /* ปุ่ม toggle + hamburger */
        .sidebar-toggle-btn {
            transition: transform 0.2s, background-color 0.2s;
        }
        .sidebar-toggle-btn:hover {
            transform: scale(1.08);
        }

        /* ========== Theme variants (เพิ่มเติมจาก winter/night) ========== */
        [data-theme="light-mint"] {
            --p: 158 64% 42%;
            --pc: 0 0% 100%;
            --s: 190 70% 45%;
            --a: 280 60% 55%;
            --b1: 150 30% 98%;
            --b2: 150 20% 94%;
            --bc: 220 40% 12%;
        }
        [data-theme="light-rose"] {
            --p: 340 75% 55%;
            --pc: 0 0% 100%;
            --s: 20 80% 60%;
            --a: 280 70% 60%;
            --b1: 350 30% 99%;
            --b2: 350 20% 95%;
            --bc: 220 40% 12%;
        }
        [data-theme="light-sky"] {
            --p: 210 85% 52%;
            --pc: 0 0% 100%;
            --s: 250 70% 60%;
            --a: 180 70% 45%;
            --b1: 210 40% 99%;
            --b2: 210 30% 95%;
            --bc: 220 45% 12%;
        }
        [data-theme="dark-ocean"] {
            --p: 195 85% 55%;
            --pc: 220 30% 10%;
            --s: 260 70% 65%;
            --a: 160 70% 45%;
            --b1: 220 25% 12%;
            --b2: 220 20% 18%;
            --b3: 220 15% 28%;
            --bc: 210 30% 92%;
            color-scheme: dark;
        }
        [data-theme="dark-ocean"] body,
        [data-theme="dark-plum"] body,
        [data-theme="night"] body {
            background-color: hsl(var(--b1));
            color: hsl(var(--bc));
        }
        [data-theme="dark-plum"] {
            --p: 280 65% 65%;
            --pc: 280 20% 10%;
            --s: 200 70% 60%;
            --a: 340 70% 65%;
            --b1: 270 20% 14%;
            --b2: 270 18% 20%;
            --b3: 270 15% 30%;
            --bc: 280 30% 92%;
            color-scheme: dark;
        }

        /* =====================================================
           Dark theme overrides — บังคับให้ทุกหน้าอ่านได้ชัดเจน
           ใช้ :is() รวม selector เพื่อลดความซับซ้อน
           ===================================================== */

        /* Card / พื้นหลังกล่องหลัก */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-white {
            background-color: hsl(var(--b2)) !important;
            color: hsl(var(--bc)) !important;
        }

        /* ข้อความเข้ม → สว่าง */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-black, .text-gray-900, .text-gray-800, .text-gray-700) {
            color: hsl(var(--bc)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500, .text-primary-content) {
            color: hsl(var(--bc) / 0.86) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-slate-400, .text-slate-300, .text-slate-200, .text-gray-400, .text-gray-300, .text-gray-200) {
            color: hsl(var(--bc) / 0.72) !important;
        }

        /* พื้นหลังอ่อน (สำหรับ panel / badge) → พื้นหลังเข้มโทนสี */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.bg-slate-50, .bg-slate-100) {
            background-color: hsl(var(--b1)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-slate-200 {
            background-color: hsl(var(--b3)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-slate-300 {
            background-color: hsl(var(--b3) / 0.8) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-slate-800 {
            background-color: hsl(var(--b1)) !important;
        }

        /* พื้นหลัง pastel (bg-*-50) → ทินต์เข้มคงโทนสี */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-sky-50 {
            background-color: hsl(205 60% 20%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-emerald-50 {
            background-color: hsl(155 45% 18%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-rose-50 {
            background-color: hsl(350 45% 22%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-rose-100 {
            background-color: hsl(350 45% 28%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .bg-amber-50 {
            background-color: hsl(40 55% 20%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.bg-violet-50, .bg-violet-100, .bg-purple-50, .bg-purple-100) {
            background-color: hsl(270 45% 22%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100) {
            background-color: hsl(220 55% 22%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.bg-green-50, .bg-green-100) {
            background-color: hsl(145 45% 18%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.bg-red-50, .bg-red-100) {
            background-color: hsl(0 45% 22%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.bg-yellow-50, .bg-yellow-100, .bg-orange-50, .bg-orange-100) {
            background-color: hsl(34 55% 20%) !important;
        }

        /* Border pastel → เข้มขึ้น */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-slate-600) {
            border-color: hsl(var(--b3)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .border-sky-200 {
            border-color: hsl(205 60% 32%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .border-emerald-200 {
            border-color: hsl(155 45% 32%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .border-rose-200 {
            border-color: hsl(350 45% 38%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.border-amber-200, .border-amber-300) {
            border-color: hsl(40 55% 35%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.border-rose-300, .border-violet-300, .border-teal-300, .border-cyan-300) {
            border-color: hsl(var(--b3)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.border-violet-100, .border-violet-200, .border-purple-100, .border-purple-200) {
            border-color: hsl(270 45% 40%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.border-blue-100, .border-blue-200, .border-blue-300, .border-indigo-100, .border-indigo-200, .border-indigo-300) {
            border-color: hsl(220 55% 42%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.border-green-100, .border-green-200, .border-red-100, .border-red-200, .border-yellow-100, .border-yellow-200, .border-orange-100, .border-orange-200) {
            border-color: hsl(var(--b3)) !important;
        }

        /* ข้อความสีอ่อน accent (text-*-600/700/800) ยังคงไว้แต่เพิ่ม brightness */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .text-sky-600,
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .text-sky-700 {
            color: hsl(205 85% 70%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-emerald-600, .text-emerald-700) {
            color: hsl(155 65% 62%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .text-emerald-400 {
            color: hsl(155 65% 70%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900) {
            color: hsl(40 85% 68%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-rose-500, .text-rose-600, .text-rose-700, .text-rose-800, .text-rose-900) {
            color: hsl(350 80% 72%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .text-rose-400 {
            color: hsl(350 80% 78%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-violet-200, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900, .text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800) {
            color: hsl(270 85% 78%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800) {
            color: hsl(220 90% 76%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-green-500, .text-green-600, .text-green-700, .text-green-800) {
            color: hsl(145 65% 66%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-teal-700, .text-teal-800, .text-teal-900, .text-cyan-700, .text-cyan-800, .text-cyan-900) {
            color: hsl(180 70% 70%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800) {
            color: hsl(0 82% 75%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.text-yellow-500, .text-yellow-600, .text-yellow-700, .text-yellow-800, .text-orange-500, .text-orange-600, .text-orange-700, .text-orange-800) {
            color: hsl(34 90% 70%) !important;
        }

        /* Table header / row hover ในธีมมืด */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) table thead tr {
            background-color: hsl(var(--b1)) !important;
            color: hsl(var(--bc)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) table tbody tr:hover {
            background-color: hsl(var(--b3) / 0.4) !important;
        }

        /* Tailwind hover:bg-* variants → ไม่ให้กลายเป็นพื้นขาวบนธีมมืด */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover) {
            background-color: hsl(var(--b3) / 0.55) !important;
            color: hsl(var(--bc)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .hover\:bg-white:hover {
            background-color: hsl(var(--b2)) !important;
            color: hsl(var(--bc)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .hover\:bg-rose-100:hover {
            background-color: hsl(350 45% 32%) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .hover\:text-slate-800:hover {
            color: hsl(var(--bc)) !important;
        }

        /* ปุ่ม bg-white ในตาราง (เช่น att-radio-group) ให้กลืนกับธีมมืด */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .btn.bg-white {
            background-color: hsl(var(--b1)) !important;
            color: hsl(var(--bc)) !important;
            border-color: hsl(var(--b3)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) input.bg-white {
            background-color: hsl(var(--b1)) !important;
            color: hsl(var(--bc)) !important;
        }

        /* daisyUI table-zebra: even rows บังคับใช้โทนเข้ม */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        .table-zebra tbody tr:nth-child(even) {
            background-color: hsl(var(--b1) / 0.55) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        .table-zebra tbody tr:nth-child(even):hover,
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        .table-zebra tbody tr:nth-child(odd):hover {
            background-color: hsl(var(--b3) / 0.55) !important;
            color: hsl(var(--bc)) !important;
        }

        /* SweetAlert2 popup ในธีมมืด */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swal2-popup {
            background: hsl(var(--b2)) !important;
            color: hsl(var(--bc)) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(.swal2-title, .swal2-html-container) {
            color: hsl(var(--bc)) !important;
        }

        /* Modal (daisyUI) */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .modal-box {
            background-color: hsl(var(--b2)) !important;
            color: hsl(var(--bc)) !important;
        }

        /* Placeholder text */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"])
        :is(input, textarea, select)::placeholder {
            color: hsl(var(--bc) / 0.45) !important;
        }

        /* Theme swatch chips */
        .theme-swatch {
            width: 2.75rem; height: 2.75rem;
            border-radius: 9999px;
            border: 3px solid transparent;
            cursor: pointer;
            transition: transform 0.15s, border-color 0.15s;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }
        .theme-swatch:hover { transform: scale(1.1); }
        .theme-swatch.active { border-color: hsl(var(--p)); transform: scale(1.1); }

        /* Hover lift effect สำหรับ cards */
        .hover-lift {
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
        }

        /* Gradient primary — ใช้กับ header / ปุ่ม */
        .bg-primary-gradient {
            background-image: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
        }

        /* Custom scrollbar */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        nav.flex-1::-webkit-scrollbar,
        main::-webkit-scrollbar { width: 6px; height: 6px; }
        main::-webkit-scrollbar-thumb,
        nav.flex-1::-webkit-scrollbar-thumb {
            background: hsl(var(--b3) / 0.6); border-radius: 999px;
        }
        main::-webkit-scrollbar-thumb:hover,
        nav.flex-1::-webkit-scrollbar-thumb:hover {
            background: hsl(var(--p) / 0.6);
        }

        /* เมนู active highlight: เพิ่มแถบซ้าย */
        #app-sidebar .menu a.active {
            background: hsl(var(--p) / 0.12);
            color: hsl(var(--p));
            font-weight: 700;
            position: relative;
        }
        #app-sidebar .menu a.active::before {
            content: '';
            position: absolute;
            left: 0; top: 10%; bottom: 10%;
            width: 3px;
            background: hsl(var(--p));
            border-radius: 0 3px 3px 0;
        }
        body.sidebar-collapsed #app-sidebar .menu a.active::before { display: none; }

        /* Smooth transition ทุกปุ่ม */
        .btn { transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
        .btn:active { transform: scale(0.97); }

        /* Dark theme: ปรับ input / select ให้อ่านง่าย */
        [data-theme="dark-ocean"] .input,
        [data-theme="dark-ocean"] .select,
        [data-theme="dark-ocean"] .textarea,
        [data-theme="dark-plum"] .input,
        [data-theme="dark-plum"] .select,
        [data-theme="dark-plum"] .textarea,
        [data-theme="night"] .input,
        [data-theme="night"] .select,
        [data-theme="night"] .textarea {
            background-color: hsl(var(--b1)) !important;
            color: hsl(var(--bc)) !important;
            border-color: hsl(var(--b3)) !important;
        }

        /* Dark theme: main area background */
        [data-theme="dark-ocean"] main.bg-slate-50,
        [data-theme="dark-plum"] main.bg-slate-50,
        [data-theme="night"] main.bg-slate-50 {
            background-color: hsl(var(--b1)) !important;
        }

        /* Login role tabs — ไม่ให้ข้อความตกกรอบ */
        .tabs.tabs-boxed .tab {
            height: auto !important;
            min-height: 2.75rem;
            padding: 0.55rem 0.5rem !important;
            line-height: 1.15 !important;
            white-space: normal !important;
            text-align: center;
            font-size: 0.9rem;
        }
        @media (max-width: 480px) {
            .tabs.tabs-boxed .tab {
                font-size: 0.78rem;
                padding: 0.5rem 0.25rem !important;
            }
        }

        /* ======================================================
         * 🔄 Floating Refresh Button (FAB)
         * ====================================================== */
        #global-refresh-btn {
            box-shadow: 0 8px 24px -4px hsl(var(--p) / 0.55), 0 0 0 2px rgba(255,255,255,0.6) inset;
        }
        #global-refresh-btn:hover {
            box-shadow: 0 12px 32px -4px hsl(var(--p) / 0.7), 0 0 0 2px rgba(255,255,255,0.8) inset;
        }
        #global-refresh-btn:disabled {
            opacity: 0.7;
            cursor: wait;
        }
        #global-refresh-btn .fa-spin {
            animation-duration: 0.8s;
        }
        /* ซ่อน FAB ตอนอยู่หน้า login (ตรวจจาก hidden class ของ app-section) */
        #global-refresh-btn { display: none; }
        body:has(#app-section:not(.hidden)) #global-refresh-btn { display: flex; }
        /* พิมพ์: ซ่อน */
        @media print { #global-refresh-btn { display: none !important; } }

        /* Theme modal fade-in */
        #theme-switcher-modal > div.relative {
            animation: themeModalIn 0.18s ease-out;
        }
        @keyframes themeModalIn {
            from { opacity: 0; transform: translateY(10px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ======================================================
         * 🎨 SWEETALERT2 — ปรับให้ปุ่มมองเห็นเสมอ + เอฟเฟกต์สวย
         * ====================================================== */
        .swal2-popup {
            border-radius: 1.5rem !important;
            padding: 2rem 1.5rem !important;
            box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0,0,0,0.04) !important;
            background-image: radial-gradient(at top left, rgba(99,102,241,0.05), transparent 40%),
                              radial-gradient(at bottom right, rgba(236,72,153,0.05), transparent 40%),
                              linear-gradient(180deg, #ffffff 0%, #fafafe 100%) !important;
        }
        .swal2-title {
            font-weight: 800 !important;
            letter-spacing: -0.01em;
        }
        .swal2-html-container {
            line-height: 1.55 !important;
        }




        /* ปุ่มใน Swal: force ให้เติมสีเสมอ ไม่ว่า customClass จะเพิ่มอะไรเข้ามา */
        .swal2-actions {
            gap: 0.5rem !important;
            flex-wrap: wrap !important;
            margin-top: 1.25rem !important;
        }
        .swal2-actions .swal2-confirm {
            background: linear-gradient(135deg, hsl(var(--p)), hsl(var(--s))) !important;
            color: #fff !important;
            border: none !important;
            font-weight: 800 !important;
            min-width: 7rem !important;
            min-height: 2.75rem !important;
            padding: 0.6rem 1.4rem !important;
            border-radius: 0.75rem !important;
            box-shadow: 0 4px 14px -2px hsl(var(--p) / 0.4) !important;
            transition: transform 0.12s, box-shadow 0.12s, filter 0.12s !important;
        }
        .swal2-actions .swal2-confirm:hover {
            transform: translateY(-1px) !important;
            filter: brightness(1.05) !important;
            box-shadow: 0 6px 20px -4px hsl(var(--p) / 0.55) !important;
        }
        .swal2-actions .swal2-cancel {
            background: #f1f5f9 !important;
            color: #334155 !important;
            border: 2px solid #cbd5e1 !important;
            font-weight: 800 !important;
            min-width: 7rem !important;
            min-height: 2.75rem !important;
            padding: 0.55rem 1.4rem !important;
            border-radius: 0.75rem !important;
            box-shadow: 0 2px 6px -1px rgba(0,0,0,0.08) !important;
            transition: transform 0.12s, background 0.12s !important;
        }
        .swal2-actions .swal2-cancel:hover {
            background: #e2e8f0 !important;
            transform: translateY(-1px) !important;
        }
        .swal2-actions .swal2-deny {
            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
            color: #fff !important;
            border: none !important;
            font-weight: 800 !important;
            min-width: 7rem !important;
            min-height: 2.75rem !important;
            padding: 0.6rem 1.4rem !important;
            border-radius: 0.75rem !important;
            box-shadow: 0 4px 14px -2px rgba(239,68,68,0.4) !important;
        }

        /* Dark theme — Swal buttons ยังมองเห็นชัด */
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swal2-popup {
            background-image: radial-gradient(at top left, rgba(99,102,241,0.18), transparent 45%),
                              radial-gradient(at bottom right, rgba(236,72,153,0.12), transparent 45%),
                              linear-gradient(180deg, hsl(var(--b2)) 0%, hsl(var(--b1)) 100%) !important;
            box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px hsl(var(--bc) / 0.1) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swal2-actions .swal2-cancel {
            background: hsl(var(--b3)) !important;
            color: hsl(var(--bc)) !important;
            border-color: hsl(var(--bc) / 0.25) !important;
        }
        :is([data-theme="dark-ocean"], [data-theme="dark-plum"], [data-theme="night"]) .swal2-actions .swal2-cancel:hover {
            background: hsl(var(--b3) / 0.8) !important;
        }

        /* ======================================================
         * 📱 RESPONSIVE — mobile / tablet / iPad
         * ====================================================== */

        /* ขยายพื้นฐานให้ทุกหน้าใช้ดีบนมือถือ */
        @media (max-width: 640px) {
            /* ลดขนาด heading */
            h1.text-3xl, h2.text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
            h2.text-2xl { font-size: 1.25rem !important; }
            .text-5xl { font-size: 2.25rem !important; }
            .text-4xl { font-size: 1.875rem !important; }

            /* ให้ container padding แคบลง */
            main { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
            .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
                max-width: 100% !important;
            }

            /* บัตร/กรอบใหญ่ลด padding */
            .p-8 { padding: 1.25rem !important; }
            .p-6 { padding: 1rem !important; }
            .rounded-3xl { border-radius: 1.25rem !important; }
            .rounded-2xl { border-radius: 1rem !important; }

            /* ตารางแสดงเลื่อนได้ในจอเล็ก */
            .table-responsive, .overflow-x-auto { -webkit-overflow-scrolling: touch; }
            table { font-size: 0.85rem !important; }
            thead th { padding: 0.5rem 0.4rem !important; }
            tbody td { padding: 0.5rem 0.4rem !important; }

            /* ปุ่มใหญ่แตะง่าย */
            .btn { min-height: 2.5rem !important; }
            .btn-sm { min-height: 2.25rem !important; font-size: 0.8rem !important; }
            .btn-xs { min-height: 1.85rem !important; font-size: 0.72rem !important; }

            /* Input/select ให้แตะง่าย */
            .input, .select, .textarea {
                font-size: 16px !important; /* ป้องกัน iOS zoom */
                min-height: 2.75rem !important;
            }

            /* Swal popup บนมือถือเต็มความกว้าง */
            .swal2-popup {
                width: calc(100vw - 1.5rem) !important;
                padding: 1.5rem 1rem !important;
                max-width: 100% !important;
            }
            .swal2-title { font-size: 1.15rem !important; }
            .swal2-html-container { font-size: 0.92rem !important; }
            .swal2-actions { flex-direction: column !important; width: 100% !important; }
            .swal2-actions .swal2-confirm,
            .swal2-actions .swal2-cancel,
            .swal2-actions .swal2-deny {
                width: 100% !important;
                margin: 0 !important;
            }

            /* Modal/dialog ของ daisyUI */
            .modal-box {
                max-width: calc(100vw - 1.5rem) !important;
                padding: 1.25rem !important;
                border-radius: 1.25rem !important;
            }

            /* Grid ที่เป็น sm:grid-cols-X → บังคับเป็น 1 คอลัมน์บนมือถือเล็ก */
            .grid { gap: 0.75rem !important; }

            /* Hide/adjust sidebar backdrop offset */
            .mobile-hide { display: none !important; }

            /* ตาราง timetable: wrap ข้อความ */
            #timetable-body td, #student-timetable-body td, #teacher-timetable-body td, #swap-tt-body td {
                padding: 0.35rem 0.25rem !important;
                font-size: 0.72rem !important;
            }

            /* ปรับปฏิทินให้พอดีมือถือ */
            .cal-day, [class*="cal-"] {
                font-size: 0.8rem !important;
            }

            /* ลดเบอร์ FontAwesome ที่เป็นไอคอนใหญ่ */
            .fa-5x { font-size: 3rem !important; }
            .fa-4x { font-size: 2.25rem !important; }
        }

        /* Tablet / iPad portrait (641–1024px) */
        @media (min-width: 641px) and (max-width: 1024px) {
            main { padding-left: 1rem !important; padding-right: 1rem !important; }

            /* sidebar auto-collapse บน iPad portrait */
            @media (orientation: portrait) {
                body:not(.sidebar-collapsed) .sidebar-label-hide-on-collapse {
                    /* ให้ใช้ collapsed โหมดอัตโนมัติใน iPad portrait ถ้าต้องการ */
                }
            }

            .swal2-popup {
                width: auto !important;
                min-width: 380px !important;
                max-width: 520px !important;
                padding: 1.75rem 1.25rem !important;
            }

            table { font-size: 0.9rem !important; }

            /* Grid ต่างๆ ให้ใช้พื้นที่ดี */
            .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            .lg\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

            /* timetable */
            #timetable-body td, #student-timetable-body td, #teacher-timetable-body td, #swap-tt-body td {
                font-size: 0.8rem !important;
            }
        }

        /* iPad landscape + laptop เล็ก (1025–1279px) */
        @media (min-width: 1025px) and (max-width: 1279px) {
            .max-w-7xl { max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }
        }

        /* ป้องกัน overflow แนวนอนในทุกจอ */
        html, body { overflow-x: hidden !important; max-width: 100vw; }
        .page-section { overflow-x: hidden; }
        .page-section .overflow-x-auto { overflow-x: auto !important; }

        /* แถบแตะปลายนิ้ว (min touch target) */
        @media (hover: none) and (pointer: coarse) {
            button, .btn, a.menu-item, a[onclick], .cursor-pointer {
                min-height: 2.5rem;
            }
            /* ลด hover effect ที่กระพริบบน touch */
            .hover-lift:hover { transform: none; box-shadow: none; }
        }

        /* Safe area สำหรับ iPhone notch */
        @supports (padding: max(0px)) {
            body {
                padding-left: max(0px, env(safe-area-inset-left));
                padding-right: max(0px, env(safe-area-inset-right));
            }
            #mobile-bottom-nav {
                padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
            }
        }

        /* ======================================================
         * 📲 RESPONSIVE HARDENING — iPad / mobile QA pass
         * ป้องกัน UI ซ้อน ทับ และบีบจนแตะยากในหน้าที่ข้อมูลเยอะ
         * ====================================================== */

        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        img, canvas, svg, video {
            max-width: 100%;
        }

        .btn, button, .badge, .tab, .menu a {
            white-space: normal;
            line-height: 1.25;
        }

        .badge {
            height: auto;
            min-height: 1.5rem;
            word-break: keep-all;
        }

        .input, .select, .textarea {
            max-width: 100%;
        }

        .modal {
            padding: 0.75rem;
        }

        .modal-box {
            max-height: calc(100dvh - 1.5rem);
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        #subjectAttendanceModal .modal-box {
            height: min(90dvh, 760px);
            overflow: hidden;
            padding: 0 !important;
        }

        #global-search-results {
            max-height: min(70dvh, 28rem);
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        #mobile-more-menu {
            max-height: min(82dvh, 34rem);
            overflow-y: auto;
            overscroll-behavior: contain;
            padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
        }

        #mobile-bottom-nav {
            min-height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
        }

        #mobile-bottom-nav button {
            min-width: 3.25rem;
        }

        .table :where(th, td) {
            vertical-align: middle;
        }

        .overflow-x-auto > table {
            min-width: max-content;
        }

        #student-table-body td,
        #stats-student-body td,
        #stats-room-body td,
        #backup-list-body td,
        #teacher-overview-body td {
            word-break: break-word;
        }

        #history-range-table,
        #student-table-body,
        #attendance-table-body,
        #subject-dashboard-body,
        #subject-history-body {
            overflow-anchor: none;
        }

        .subject-history-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 0.75rem;
            align-items: end;
        }

        .subject-history-filter-grid > div {
            grid-column: span 3;
            min-width: 0;
        }

        .subject-history-filter-grid .subject-history-filter-actions {
            grid-column: 1 / -1;
        }

        #subj-hist-range-table {
            border-collapse: collapse;
        }

        #subj-hist-range-table th,
        #subj-hist-range-table td {
            border-color: #94a3b8;
        }

        .subject-history-date-heading {
            width: 30px;
            min-width: 30px;
            height: 124px;
            vertical-align: bottom;
        }

        .subject-history-vertical-date {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: 0.02em;
        }

        @media (max-width: 640px) {
            body {
                min-width: 0;
            }

            #app-section {
                min-height: 100dvh;
            }

            main.flex-1 {
                height: auto !important;
                min-height: 100dvh !important;
                overflow-y: visible !important;
                padding-top: calc(4.5rem + env(safe-area-inset-top, 0px)) !important;
                padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)) !important;
            }

            #mobile-top-bar {
                min-height: calc(3.75rem + env(safe-area-inset-top, 0px));
                padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
            }

            #global-search-wrap {
                margin-bottom: 0.75rem !important;
            }

            #global-student-search {
                min-height: 3rem !important;
            }

            .card-body {
                padding: 1.25rem !important;
            }

            .tabs {
                display: flex;
                flex-wrap: wrap;
                height: auto;
            }

            .tab {
                min-height: 2.5rem;
                flex: 1 1 100%;
            }

            .menu :where(li > a),
            #mobile-more-menu button,
            #mobile-bottom-nav button {
                min-height: 3rem;
            }

            .join {
                flex-wrap: wrap;
            }

            .join .btn {
                border-radius: 0.75rem !important;
                margin: 0.125rem;
            }

            .modal {
                align-items: flex-end;
                padding: 0;
            }

            .modal-box {
                width: 100vw !important;
                max-width: 100vw !important;
                max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 0.5rem) !important;
                border-radius: 1.25rem 1.25rem 0 0 !important;
            }

            #studentModal .grid,
            #teacherUserModal .grid,
            #ttStructureModal .grid {
                grid-template-columns: 1fr !important;
            }

            #subjectAttendanceModal .modal-box {
                height: calc(100dvh - env(safe-area-inset-top, 0px));
                max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
                padding: 0 !important;
            }

            #subjectAttendanceModal .p-4.border-t {
                flex-direction: column;
                align-items: stretch;
            }

            #subjectAttendanceModal .p-4.border-t .flex {
                width: 100%;
            }

            #subjectAttendanceModal .p-4.border-t .btn {
                flex: 1 1 0;
            }

            #cal-bulk-bar {
                left: 0.75rem !important;
                right: 0.75rem !important;
                bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
                transform: none !important;
                flex-wrap: wrap;
                justify-content: center;
            }

            #global-refresh-btn {
                right: 1rem !important;
                bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
                width: 3.25rem !important;
                height: 3.25rem !important;
            }

            .stats-card,
            .card,
            .rounded-3xl,
            .rounded-2xl {
                min-width: 0;
            }

            .table-fixed {
                table-layout: auto !important;
            }

            #history-export-area table,
            #student-tt-export-area table,
            #tt-export-area table,
            #teacher-tt-export-area table,
            #swap-tt-table {
                min-width: 760px;
            }

            #attendance-table-body .att-radio-group {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.375rem;
            }

            #attendance-table-body .att-radio-group .btn {
                border-radius: 0.625rem !important;
                border-right: 1px solid hsl(var(--b3)) !important;
            }

            .subject-history-filter-grid {
                grid-template-columns: 1fr;
            }

            .subject-history-filter-grid > div,
            .subject-history-filter-grid .subject-history-filter-actions {
                grid-column: auto;
            }

            .subject-history-filter-actions .btn {
                flex: 1 1 calc(50% - 0.5rem);
            }

            .teacher-subjects-modal-header,
            .teacher-subjects-modal-content {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .teacher-subjects-modal-footer {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .teacher-subjects-modal-footer .btn {
                flex: 1;
            }
        }

        @media (min-width: 641px) and (max-width: 1024px) {
            main.flex-1 {
                height: 100dvh;
            }

            .modal-box {
                max-width: min(92vw, 760px) !important;
            }

            .md\:grid-cols-4 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            .lg\:col-span-8,
            .lg\:col-span-4,
            .lg\:col-span-2,
            .lg\:col-span-1 {
                grid-column: auto / span 1 !important;
            }

            #teacher-overview-summary,
            #teacher-today-list,
            #room-progress-container {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            .subject-history-filter-grid > div {
                grid-column: span 6;
            }

            .subject-history-filter-grid .subject-history-filter-actions {
                grid-column: 1 / -1;
            }
        }

        @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
            #app-sidebar {
                width: 5.25rem !important;
            }

            #app-sidebar .sidebar-label,
            #app-sidebar .sidebar-brand,
            #app-sidebar .sidebar-user,
            #app-sidebar .menu-title,
            #app-sidebar .sidebar-btn-text,
            #maintenance-label {
                display: none !important;
            }

            #app-sidebar .menu a {
                font-size: 0 !important;
                justify-content: center !important;
                padding: 0.65rem 0.5rem !important;
            }

            #app-sidebar .menu a i {
                font-size: 1.25rem !important;
                margin: 0 auto !important;
            }

            #app-sidebar .sidebar-brand-row {
                justify-content: center !important;
                padding: 1rem 0.5rem !important;
            }
        }

        @media (hover: hover) and (pointer: fine) {
            .timetable-cell:hover,
            .swap-cell:hover {
                will-change: transform;
            }
        }

        /* Table/border hardening: ตารางต้องมีกรอบชัดทุก viewport */
        #student-tt-export-area table,
        #tt-export-area table,
        #teacher-tt-export-area table,
        #swap-tt-table {
            border-collapse: collapse !important;
            border-spacing: 0 !important;
            border: 1px solid #dbe3ef !important;
        }

        #student-tt-export-area :is(th, td),
        #tt-export-area :is(th, td),
        #teacher-tt-export-area :is(th, td),
        #swap-tt-table :is(th, td) {
            border: 1px solid #dbe3ef !important;
        }

        #student-tt-export-area thead th,
        #tt-export-area thead th,
        #teacher-tt-export-area thead th,
        #swap-tt-table thead th {
            background-color: #f1f5f9 !important;
            color: #0f172a !important;
        }

        .timetable-cell {
            background-color: #ffffff;
            color: #0f172a;
        }

        .timetable-cell:hover {
            background-color: #eff6ff !important;
            color: #0f172a !important;
        }

        .timetable-cell:hover :is(.text-primary, .text-slate-800, .text-slate-700, .text-slate-600, .text-slate-500) {
            color: #0f172a !important;
        }

        /* Button contrast hardening: กัน hover/disabled แล้วตัวอักษรกลืนพื้นหลัง */
        .btn.btn-outline:not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-error):not(.btn-warning):not(.btn-success):hover {
            background-color: #f8fafc !important;
            border-color: #94a3b8 !important;
            color: #0f172a !important;
        }

        .btn.btn-outline:hover :is(i, span) {
            color: inherit !important;
        }

        .btn:disabled,
        .btn[disabled],
        .btn.btn-disabled,
        .btn.disabled {
            opacity: 1 !important;
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #475569 !important;
            cursor: not-allowed !important;
        }

        .btn:disabled :is(i, span),
        .btn[disabled] :is(i, span),
        .btn.btn-disabled :is(i, span),
        .btn.disabled :is(i, span) {
            color: #475569 !important;
        }