body { font-family: 'Prompt', sans-serif; background-color: #f3f4f6; } 
        
        /* Table Styling */
        .table-container { overflow-x: auto; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border: 1px solid #e2e8f0; background: white;}
        table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; }
        
        th { background-color: #f8fafc; color: #475569; font-weight: 600; font-size: 0.8rem; padding: 1rem; border-bottom: 2px solid #e2e8f0; white-space: nowrap; text-align: left; position: sticky; top: 0; z-index: 10; }
        td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; color: #334155; white-space: nowrap; vertical-align: middle; }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background-color: #f1f5f9; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* Buttons */
        .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.2s; cursor: pointer; gap: 0.5rem; white-space: nowrap; outline: none; }
        .btn:active { transform: translateY(1px); }
        .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
        
        .btn-primary { background-color: #0ea5e9; color: white; border: 1px solid #0ea5e9; } .btn-primary:hover { background-color: #0284c7; }
        .btn-secondary { background-color: #fff; color: #475569; border: 1px solid #cbd5e1; } .btn-secondary:hover { background-color: #f8fafc; border-color: #94a3b8; color: #1e293b; }
        .btn-success { background-color: #10b981; color: white; border: 1px solid #10b981; } .btn-success:hover { background-color: #059669; }
        .btn-danger { background-color: #ef4444; color: white; border: 1px solid #ef4444; } .btn-danger:hover { background-color: #dc2626; }
        .btn-warning { background-color: #f59e0b; color: white; border: 1px solid #f59e0b; } .btn-warning:hover { background-color: #d97706; }
        .btn-info { background-color: #3b82f6; color: white; border: 1px solid #3b82f6; } .btn-info:hover { background-color: #2563eb; }
        .btn-purple { background-color: #8b5cf6; color: white; border: 1px solid #8b5cf6; } .btn-purple:hover { background-color: #7c3aed; }

        /* Cards & Inputs */
        .card { background: white; padding: 1.25rem; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; margin-bottom: 1.5rem; }
        .input-field { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.375rem; font-size: 0.875rem; transition: all 0.2s; background-color: #fff; color: #334155; }
        .input-field:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); }
        label { display: block; font-size: 0.85rem; font-weight: 500; color: #64748b; margin-bottom: 0.35rem; }

        /* Modals & Popups */
        .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; visibility: hidden; transition: all 0.2s ease; }
        .modal-overlay.is-visible { opacity: 1; visibility: visible; }
        .modal-content { background: white; padding: 2rem; border-radius: 1rem; width: 95%; max-width: 650px; max-height: 90vh; overflow-y: auto; transform: scale(0.98) translateY(10px); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
        .modal-overlay.is-visible .modal-content { transform: scale(1) translateY(0); }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 1rem; }
        .modal-title { font-size: 1.25rem; font-weight: 600; color: #1e293b; }
        
        /* Selection Toolbar */
        .selection-bar { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background-color: #1e293b; color: white; padding: 0.75rem 1.25rem; border-radius: 9999px; display: flex; align-items: center; gap: 1.5rem; z-index: 40; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .selection-bar.is-visible { transform: translateX(-50%) translateY(0); }
        .selection-bar .btn-tool { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px; padding: 0.4rem 1rem; font-size: 0.85rem; transition: background 0.2s; }
        .selection-bar .btn-tool:hover { background: rgba(255,255,255,0.1); }

        #loadingMessage { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(15,23,42,0.85); color: white; padding: 1.5rem 2.5rem; border-radius: 0.75rem; z-index: 10000; display: none; font-size: 1rem; font-weight: 500; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        
        /* Login Overlay Styling */
        #loginOverlay { position: fixed; inset: 0; background-color: #f8fafc; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .hidden-app { display: none !important; }
        
        /* สั่งให้ SweetAlert อยู่หน้าสุดเสมอ (ทะลุกำแพง Login) */
        .swal2-container { z-index: 99999 !important; }

        /* ============================================================
           Dark Mode
           Tailwind (CDN) วาง utility classes ใน @layer ซึ่งมีความสำคัญต่ำกว่า
           CSS ปกตินอก layer เสมอ กฎด้านล่างนี้จึงชนะโดยอัตโนมัติ
           ============================================================ */
        .dark body { background-color: #0f172a; }
        .dark .table-container { background: #1e293b; border-color: #334155; }
        .dark table { background: #1e293b; }
        .dark th { background-color: #1e293b; color: #94a3b8; border-bottom-color: #334155; }
        .dark td { color: #cbd5e1; border-bottom-color: #293548; }
        .dark tr:hover td { background-color: #24324a; }
        .dark .card { background: #1e293b; border-color: #334155; }
        .dark .input-field { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
        .dark .input-field:focus { border-color: #0ea5e9; }
        .dark label { color: #94a3b8; }
        .dark .modal-content { background: #1e293b; color: #e2e8f0; }
        .dark .modal-header { border-bottom-color: #334155; }
        .dark .modal-title { color: #f1f5f9; }
        .dark .btn-secondary { background-color: #1e293b; color: #cbd5e1; border-color: #334155; }
        .dark .btn-secondary:hover { background-color: #273449; border-color: #475569; color: #f1f5f9; }
        .dark #loginOverlay { background-color: #0f172a; }
        .dark ::-webkit-scrollbar-track { background: #1e293b; }
        .dark ::-webkit-scrollbar-thumb { background: #475569; }
        .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

        /* ปรับสี Utility classes ของ Tailwind ที่ใช้ตรงๆ ในหน้าเว็บ/สร้างจาก JS ให้เข้ากับโหมดมืด */
        .dark .bg-white { background-color: #1e293b !important; }
        .dark .bg-slate-50 { background-color: #17223a !important; }
        .dark .bg-slate-100 { background-color: #1e293b !important; }
        .dark .border-slate-100, .dark .border-slate-200 { border-color: #334155 !important; }
        .dark .text-slate-800, .dark .text-slate-900 { color: #e2e8f0 !important; }
        .dark .text-slate-700 { color: #cbd5e1 !important; }
        .dark .text-slate-600, .dark .text-slate-500 { color: #94a3b8 !important; }
        .dark .text-slate-400 { color: #64748b !important; }
        .dark .bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; }
        .dark .bg-orange-50 { background-color: rgba(249,115,22,0.12) !important; }
        .dark .bg-purple-50 { background-color: rgba(139,92,246,0.12) !important; }
        .dark .bg-red-50 { background-color: rgba(239,68,68,0.12) !important; }
        .dark .bg-yellow-50 { background-color: rgba(234,179,8,0.12) !important; }
        .dark .bg-green-50 { background-color: rgba(16,185,129,0.12) !important; }
        .dark .text-blue-800, .dark .text-blue-700, .dark .text-blue-600 { color: #93c5fd !important; }
        .dark .text-orange-800, .dark .text-orange-700 { color: #fdba74 !important; }
        .dark .text-purple-700 { color: #d8b4fe !important; }
        .dark .text-red-800, .dark .text-red-700, .dark .text-red-600 { color: #fca5a5 !important; }
        .dark .text-yellow-800 { color: #fde68a !important; }
        .dark .text-green-700, .dark .text-green-600 { color: #6ee7b7 !important; }
        .dark .border-blue-100, .dark .border-blue-200 { border-color: rgba(59,130,246,0.3) !important; }
        .dark .border-orange-100 { border-color: rgba(249,115,22,0.3) !important; }
        .dark .border-red-100, .dark .border-red-200 { border-color: rgba(239,68,68,0.3) !important; }
        .dark .border-purple-100 { border-color: rgba(139,92,246,0.3) !important; }
        .dark .border-yellow-100 { border-color: rgba(234,179,8,0.3) !important; }
        .dark .border-green-200 { border-color: rgba(16,185,129,0.3) !important; }

        .dark .swal2-popup { background: #1e293b !important; color: #e2e8f0 !important; }
        .dark .swal2-input, .dark .swal2-select, .dark .swal2-textarea { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; }

        /* ============================================================
           มุมมองการ์ดบนมือถือ (Responsive Table -> Cards)
           ============================================================ */
        @media (max-width: 768px) {
            .responsive-table thead { display: none; }
            .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
            .responsive-table tbody tr {
                margin-bottom: 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.75rem;
                padding: 0.75rem; position: relative; background: white; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            }
            .dark .responsive-table tbody tr { background: #1e293b; border-color: #334155; }
            .responsive-table td {
                border-bottom: none !important; padding: 0.35rem 0.25rem; white-space: normal;
                display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; text-align: right;
            }
            .responsive-table td::before {
                content: attr(data-label); font-weight: 600; font-size: 0.75rem; color: #94a3b8;
                flex-shrink: 0; text-align: left;
            }
            .responsive-table td.rt-checkbox-cell { display: flex; justify-content: flex-end; padding: 0 0 0.5rem 0; border-bottom: 1px dashed #e2e8f0 !important; margin-bottom: 0.35rem; }
            .dark .responsive-table td.rt-checkbox-cell { border-bottom-color: #334155 !important; }
            .responsive-table td.rt-checkbox-cell::before { content: none; }
        }

        /* ============================================================
           Inline Validation
           ============================================================ */
        .input-field.field-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important; }
        .field-error-msg { color: #ef4444; font-size: 0.75rem; margin-top: 0.3rem; display: none; }
        .field-error-msg.is-visible { display: block; }

        /* ============================================================
           ระบบจัดการผู้ใช้งาน (User Management)
           ============================================================ */
        .user-avatar {
            width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 0.85rem; color: white; flex-shrink: 0; text-transform: uppercase;
        }
        .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
        .badge-admin { background: #ede9fe; color: #6d28d9; }
        .badge-teacher { background: #dbeafe; color: #1d4ed8; }
        .badge-active { background: #d1fae5; color: #047857; }
        .badge-suspended { background: #f1f5f9; color: #64748b; }
        .badge-locked { background: #fee2e2; color: #b91c1c; }
        .dark .badge-admin { background: rgba(139,92,246,0.18); color: #d8b4fe; }
        .dark .badge-teacher { background: rgba(59,130,246,0.18); color: #93c5fd; }
        .dark .badge-active { background: rgba(16,185,129,0.18); color: #6ee7b7; }
        .dark .badge-suspended { background: rgba(100,116,139,0.25); color: #cbd5e1; }
        .dark .badge-locked { background: rgba(239,68,68,0.18); color: #fca5a5; }

        .toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: #cbd5e1; transition: 0.2s; border-radius: 9999px; }
        .toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.2s; border-radius: 50%; }
        .toggle-switch input:checked + .toggle-slider { background-color: #10b981; }
        .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
        .dark .toggle-slider { background-color: #475569; }

        .class-scope-box { border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.6rem; max-height: 11rem; overflow-y: auto; background: #f8fafc; }
        .dark .class-scope-box { background: #0f172a; border-color: #334155; }