/**
 * ============================================================================
 * THEME SYSTEM, PT Orion Tech Indonesia [v12 LUMINA-CUSTOMIZER 2026-05-09]
 * ============================================================================
 * Filename "darkmode.css" demi kompatibilitas init.php injector.
 *
 * v12, LUMINA UPGRADE:
 * FIX:
 * - body { background-color: ... } (bukan shorthand) -> bg-image login tetap ada
 * - menu-item .menu-badge-new tidak terpotong (shrink-0 + ellipsis on text)
 * - tc-gear-btn auto offset saat .wa-float ada di landing
 * - Hardcoded gradient #0a2540→#1a4a7a di-override pakai primary
 *
 * NEW:
 * - Default theme = Light (bukan System)
 * - Navbar Orientation: Vertical / Horizontal (default Vertical)
 * - 20 Gradient Themes (multi-color)
 * - User Profile Dropdown (3 items: ganti foto / pengaturan / keluar)
 * - Search Bar di header dashboard (shortcut menu)
 * - Mobile App-like layout (bottom-tab on small screens)
 * - Skin: Default / Bordered
 * - Semi Dark
 * - Menu: Expanded / Collapsed
 * - Navbar Type: Sticky / Static / Hidden
 * - Content: Wide / Compact
 *
 * Storage keys (localStorage):
 * lms_theme = light | dark | system (DEFAULT: light)
 * lms_primary = #hex (DEFAULT: #7367f0)
 * lms_primary_rgb = R, G, B (DEFAULT: 115, 103, 240)
 * lms_grad = 0 atau 1..20 (gradient theme #) (DEFAULT: 0 = off)
 * lms_skin = default | bordered (DEFAULT: default)
 * lms_semi_dark = 0 | 1 (DEFAULT: 0)
 * lms_menu = expanded | collapsed (DEFAULT: expanded)
 * lms_nav_orient = vertical | horizontal (DEFAULT: vertical)
 * lms_navbar = sticky | static | hidden (DEFAULT: sticky)
 * lms_content = wide | compact (DEFAULT: wide)
 *
 * NO filter:invert. CSS Custom Properties + data-* attributes only.
 * ============================================================================ */

/* ============================================================================
 * 1. LIGHT THEME (DEFAULT)
 * ============================================================================ */
:root {
 --app-primary: #1a4a7a;
 --app-primary-rgb: 26, 74, 122;
 --app-primary-hover: #143c66;
 --app-primary-dark: #0a2540;
 --app-primary-soft: rgba(26, 74, 122, 0.18);
 --app-primary-soft-2: rgba(26, 74, 122, 0.28);
 --app-primary-text: #ffffff;

 --app-bg: #eef2f7;
 --app-bg-2: #e6ecf4;
 --app-surface: #ffffff;
 --app-surface-2: #f6f9fc;
 --app-surface-3: #eef3f9;
 --app-elevated: #ffffff;

 --app-border: #d8e1ec;
 --app-border-soft: #e6ecf4;
 --app-border-strong:#c4d2e2;

 --app-text: #22364d;
 --app-text-strong: #14253a;
 --app-text-muted: #5b7088;
 --app-text-dim: #8ea1b4;

 --app-success: #28c76f;
 --app-success-rgb: 40, 199, 111;
 --app-success-soft: rgba(40, 199, 111, 0.12);
 --app-info: #00cfe8;
 --app-info-rgb: 0, 207, 232;
 --app-info-soft: rgba(0, 207, 232, 0.12);
 --app-warning: #ff9f43;
 --app-warning-rgb: 255, 159, 67;
 --app-warning-soft: rgba(255, 159, 67, 0.12);
 --app-danger: #ea5455;
 --app-danger-rgb: 234, 84, 85;
 --app-danger-soft: rgba(234, 84, 85, 0.12);
 --app-accent: #f5a623;
 --app-accent-soft: rgba(245, 166, 35, 0.15);

 /* Sidebar gradient (default = solid primary; bisa di-override JS lewat --app-grad-main) */
 --app-grad-main: linear-gradient(135deg, #0a2540 0%, #1a4a7a 45%, #2b6da8 100%);
 --app-sidebar-bg: var(--app-grad-main);
 /* [v10 KONTRAS 2026-05-10] Naikkan kontras teks sidebar, sebelumnya
 heading cuma 55% putih (UTAMA / PENDAFTARAN dst remang banget),
 text item 85%. Sekarang heading pakai gold cerah biar pop dari
 background navy, item near-white. Mata gampang fokus tanpa harus
 dipaksa baca. */
 --app-sidebar-text: rgba(255, 255, 255, 0.96);
 --app-sidebar-text-active:#ffffff;
 --app-sidebar-active-bg: rgba(255, 255, 255, 0.18);
 --app-sidebar-hover-bg: rgba(255, 255, 255, 0.10);
 --app-sidebar-heading: #fdc858;

 --app-topbar-bg: #ffffff;
 --app-topbar-border: #d8e1ec;
 --app-topbar-text: #2c3e50;

 --app-card-bg: #ffffff;
 --app-card-border: #d8e1ec;
 --app-card-shadow: 0 3px 12px rgba(20, 37, 58, 0.08);
 --app-card-radius: 14px;

 --app-input-bg: #ffffff;
 --app-input-border: #d8dde8;
 --app-input-text: #2c3e50;
 --app-input-placeholder:#a0a8b5;
 --app-input-focus-shadow: rgba(var(--app-primary-rgb), 0.18);

 --app-shadow-sm: 0 2px 6px rgba(75, 70, 92, 0.05);
 --app-shadow: 0 4px 18px rgba(75, 70, 92, 0.08);
 --app-shadow-lg: 0 12px 32px rgba(75, 70, 92, 0.14);
 --app-shadow-xl: 0 20px 48px rgba(75, 70, 92, 0.18);

 --app-radius-xs: 6px;
 --app-radius-sm: 10px;
 --app-radius: 12px;
 --app-radius-lg: 16px;

 --app-trans-fast: 150ms ease;
 --app-trans: 300ms ease;

 color-scheme: light;
}

/* ============================================================================
 * 2. MAP LEGACY VARS (backward compat untuk Orion main CSS + PKBM-style)
 * Customizer = source of truth. Semua var Orion ikut customizer pilihan.
 * ============================================================================ */
:root {
 --orion-navy: var(--app-primary);
 --orion-navy-dark: var(--app-primary);
 --orion-blue: var(--app-primary);
 --orion-gold: var(--app-accent);
 --orion-primary: var(--app-accent);
 --orion-primary-hover: var(--app-accent);
 --orion-primary-dark: var(--app-accent);
 --orion-green: var(--app-success);
 --orion-red: var(--app-danger);
 --orion-success: var(--app-success);
 --orion-danger: var(--app-danger);
 --orion-warning: #f59e0b;
 --orion-info: var(--app-info);
 --orion-light: var(--app-surface-2);
 --orion-bg: var(--app-bg);
 --orion-text: var(--app-text);
 --orion-text-soft: var(--app-text-muted);
 --orion-text-mute: var(--app-text-dim);
 --orion-card: var(--app-card-bg);
 --orion-border: var(--app-border);
 --orion-grad: var(--app-grad-main);
 --orion-grad-main: var(--app-grad-main);
 --orion-grad-card: linear-gradient(135deg, rgba(var(--app-primary-rgb),.05), rgba(245,166,35,.05));
 --orion-gold-grad: linear-gradient(135deg, var(--app-accent) 0%, #f39c12 100%);
 --orion-shadow: var(--app-shadow);
 --orion-shadow-lg: var(--app-shadow-lg);

 --bs-primary: var(--app-primary);
 --bs-primary-rgb: var(--app-primary-rgb);
 --bs-link-color: var(--app-primary);
 --bs-link-hover-color: var(--app-primary-hover);
}

/* DARK MODE: pastikan text yg semula pakai navy berubah jadi LIGHT supaya readable */
html[data-theme="dark"] {
 --orion-navy: var(--app-text-strong);
 --orion-navy-dark: var(--app-text-strong);
 --orion-blue: #93c5fd;
 --orion-primary: #fbbf24;
 --orion-primary-hover: #fcd34d;
 --orion-primary-dark: #f59e0b;
 --orion-gold: #fbbf24;
}

/* ============================================================================
 * 3. DARK THEME
 * ============================================================================ */
html[data-theme="dark"] {
 --app-bg: #161d31;
 --app-bg-2: #10172a;
 --app-surface: #283046;
 --app-surface-2: #1d2842;
 --app-surface-3: #232b41;
 --app-elevated: #2f3a59;

 --app-border: #3b4253;
 --app-border-soft: #2f364a;
 --app-border-strong:#475066;

 --app-text: #d0d2d6;
 --app-text-strong: #e8e9ed;
 --app-text-muted: #8b91a4;
 --app-text-dim: #676d7d;

 --app-primary-soft: rgba(var(--app-primary-rgb), 0.22);
 --app-primary-soft-2: rgba(var(--app-primary-rgb), 0.32);
 --app-success-soft: rgba(var(--app-success-rgb), 0.22);
 --app-info-soft: rgba(var(--app-info-rgb), 0.22);
 --app-warning-soft: rgba(var(--app-warning-rgb), 0.22);
 --app-danger-soft: rgba(var(--app-danger-rgb), 0.22);
 --app-accent-soft: rgba(245, 166, 35, 0.22);

 --app-topbar-bg: #283046;
 --app-topbar-border: #3b4253;
 --app-topbar-text: #d0d2d6;

 --app-card-bg: #283046;
 --app-card-border: #3b4253;
 --app-card-shadow: 0 4px 18px rgba(0, 0, 0, 0.30);

 --app-input-bg: #1d2842;
 --app-input-border: #3b4253;
 --app-input-text: #d0d2d6;
 --app-input-placeholder:#676d7d;
 --app-input-focus-shadow: rgba(var(--app-primary-rgb), 0.30);

 --app-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
 --app-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
 --app-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
 --app-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.55);

 --orion-light: var(--app-bg);

 color-scheme: dark;
}

/* ============================================================================
 * 4. TRANSITIONS
 * ============================================================================ */
html, body, .card, .card-orion, .modal-content, .topbar, .ss-topbar,
.sidebar, .ss-sidebar, .dropdown-menu, .form-control, .form-select,
.btn, .alert, .table, .navbar, .breadcrumb, .list-group-item,
.menu-item, .ss-menu a, .stats-card, .stat-card, .data-card,
.page-header, .filter-bar, .info-card, .panel, footer {
 transition:
 background-color var(--app-trans),
 background-image var(--app-trans),
 border-color var(--app-trans),
 color var(--app-trans),
 box-shadow var(--app-trans);
}
html.no-theme-transition,
html.no-theme-transition * { transition: none !important; }

/* ============================================================================
 * 5. BASE
 * PENTING: pakai background-color (bukan shorthand) supaya inline body
 * background:linear-gradient(...),url(...) di login.php tetap menampilkan
 * bg-image yg di-set admin di Pengaturan.
 * ============================================================================ */
body {
 background-color: var(--app-bg);
 color: var(--app-text);
}
a { color: var(--app-primary); }
a:hover { color: var(--app-primary-hover); }
hr { border-color: var(--app-border); opacity: 1; }
::selection { background: var(--app-primary-soft); color: var(--app-primary); }

* { scrollbar-width: thin; scrollbar-color: var(--app-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--app-text-dim); }

/* ============================================================================
 * 6. CARDS
 * ============================================================================ */
.card, .card-orion, .panel {
 background: var(--app-card-bg);
 border: 1px solid var(--app-card-border);
 box-shadow: var(--app-card-shadow);
 border-radius: var(--app-card-radius);
 color: var(--app-text);
}
.card-header, .card-footer {
 background: var(--app-surface-2);
 border-color: var(--app-card-border);
 color: var(--app-text);
}
.card-title, .card-subtitle { color: var(--app-text-strong); }
.stats-card:hover, .stat-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--app-shadow-lg);
}

/* ========== Dashboard Staff, hero & kartu statistik gradasi (LUMINA) ========== */
.dash-hero-lumina {
 background: var(--app-grad-main);
 color: #fff;
 padding: 26px 30px;
 border-radius: 20px;
 position: relative;
 overflow: hidden;
 box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}
.dash-hero-lumina-decoration {
 position: absolute;
 top: -52px;
 right: -36px;
 width: 260px;
 height: 260px;
 background: radial-gradient(circle, rgba(245, 166, 35, 0.28), transparent 68%);
 border-radius: 50%;
 pointer-events: none;
}
.dash-stat-vivid-link {
 text-decoration: none !important;
 color: inherit !important;
 display: block;
}
.dash-stat-vivid-link:hover .dash-stat-vivid {
 transform: translateY(-4px);
 box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.dash-stat-vivid {
 position: relative;
 overflow: hidden;
 border-radius: 18px;
 padding: 20px 18px;
 min-height: 128px;
 color: #fff;
 box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
 transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dash-stat-vivid--tall {
 min-height: 140px;
}
.dash-stat-vivid-deco {
 position: absolute;
 bottom: -40px;
 right: -30px;
 width: 140px;
 height: 140px;
 background: rgba(255, 255, 255, 0.12);
 border-radius: 50%;
 pointer-events: none;
}
.dash-stat-vivid-icon {
 width: 46px;
 height: 46px;
 border-radius: 14px;
 background: rgba(255, 255, 255, 0.22);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.25rem;
 margin-bottom: 12px;
 position: relative;
 z-index: 1;
}
.dash-stat-vivid-val {
 font-size: 1.85rem;
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 position: relative;
 z-index: 1;
}
.dash-stat-vivid-label {
 margin-top: 6px;
 font-size: 0.82rem;
 font-weight: 600;
 opacity: 0.92;
 position: relative;
 z-index: 1;
}

/* ============================================================================
 * 7. PAGE HEADER
 * ============================================================================ */
.page-header { border-left-color: var(--app-primary) !important; }
.page-header h1 { color: var(--app-text-strong) !important; }
.page-header h1 i { color: var(--app-primary) !important; }

/* ============================================================================
 * 8. BUTTONS
 * ============================================================================ */
.btn-primary, .btn-orion-primary {
 background: var(--app-grad-main) !important;
 border-color: var(--app-primary) !important;
 color: var(--app-primary-text) !important;
}
.btn-primary:hover, .btn-orion-primary:hover {
 background: var(--app-primary-hover) !important;
 border-color: var(--app-primary-hover) !important;
 color: var(--app-primary-text) !important;
}
.btn-outline-primary {
 color: var(--app-primary) !important;
 border-color: var(--app-primary) !important;
}
.btn-outline-primary:hover {
 background: var(--app-primary) !important;
 color: var(--app-primary-text) !important;
}
.btn-orion-outline {
 border-color: var(--app-primary) !important;
 color: var(--app-primary) !important;
}
.btn-orion-outline:hover {
 background: var(--app-primary) !important;
 color: var(--app-primary-text) !important;
}
.btn-orion-gold { background: var(--app-accent) !important; color: #1a2332 !important; }
.btn-orion-gold:hover { background: #e09418 !important; color: #1a2332 !important; }
.btn-orion-success { background: var(--app-success) !important; color: #fff !important; }
.btn-orion-success:hover { background: #1f9e54 !important; color: #fff !important; }
.btn-orion-danger { background: var(--app-danger) !important; color: #fff !important; }
.btn-orion-danger:hover { background: #c0392b !important; color: #fff !important; }

/* ============================================================================
 * 9. FORMS
 * ============================================================================ */
.form-control, .form-select, textarea, select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="datetime-local"],
input[type="time"] {
 background: var(--app-input-bg);
 border-color: var(--app-input-border);
 color: var(--app-input-text);
}
.form-control:focus, .form-select:focus, textarea:focus, input:focus {
 background: var(--app-input-bg) !important;
 border-color: var(--app-primary) !important;
 color: var(--app-input-text) !important;
 box-shadow: 0 0 0 .2rem var(--app-input-focus-shadow) !important;
}
.form-control::placeholder, textarea::placeholder, input::placeholder {
 color: var(--app-input-placeholder); opacity: 1;
}
.form-label, label { color: var(--app-text); }
.form-text, small.form-text { color: var(--app-text-muted); }
.input-group-text {
 background: var(--app-surface-2);
 border-color: var(--app-input-border);
 color: var(--app-text);
}

/* ============================================================================
 * 10. TOPBAR, selaras Template Customizer (warna primer + gradasi halus)
 * ============================================================================ */
.topbar, .ss-topbar {
 background: var(--app-topbar-bg) !important;
 border-color: var(--app-topbar-border) !important;
 color: var(--app-topbar-text);
 /* Bayangan diwarnai primer supaya terasa satu tema dengan sidebar & hero */
 box-shadow: 0 2px 18px rgba(var(--app-primary-rgb), 0.10) !important;
}
@supports (color: color-mix(in srgb, white 50%, black)) {
 .topbar, .ss-topbar {
 background-image: linear-gradient(
 180deg,
 var(--app-topbar-bg) 0%,
 color-mix(in srgb, var(--app-topbar-bg) 90%, var(--app-primary) 10%) 100%
 ) !important;
 border-bottom-color: color-mix(in srgb, var(--app-topbar-border) 72%, var(--app-primary) 28%) !important;
 }
}
.breadcrumb-orion strong { color: var(--app-text-strong); }
.topbar-icon { color: var(--app-text-muted); }
.topbar-icon:hover { background: var(--app-surface-2); color: var(--app-primary); }
.user-menu { background: var(--app-surface-2); color: var(--app-text); }
.user-menu:hover { background: var(--app-primary); color: var(--app-primary-text); }

/* portal_siswa.php punya .ss-topbar / .user-menu hardcoded, pakai variabel tema */
.ss-topbar .user-menu,
.ss-topbar .user-menu-trigger {
 background: var(--app-surface-2) !important;
 color: var(--app-text) !important;
}
.ss-topbar .user-menu:hover,
.ss-topbar .user-menu-trigger:hover {
 background: var(--app-primary) !important;
 color: var(--app-primary-text) !important;
}
.ss-topbar .greet h5 {
 color: var(--app-text-strong) !important;
}
.ss-topbar .greet small {
 color: var(--app-text-muted) !important;
}

/* ============================================================================
 * 11. SIDEBAR (vertical default)
 * ============================================================================ */
.sidebar, .ss-sidebar {
 background: var(--app-sidebar-bg) !important;
 color: var(--app-sidebar-text);
}
.sidebar-footer, .ss-footer { background: var(--app-sidebar-bg) !important; }
.menu-heading, .ss-menu .ss-section-title {
 color: var(--app-sidebar-heading) !important;
 /* [v10 KONTRAS 2026-05-10] Bolder + sedikit text-shadow biar text gold
 crisp di atas gradient navy. Letter-spacing rapih, bukan jadi blur. */
 font-weight: 800 !important;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 opacity: 1 !important;
}

.menu-item { color: var(--app-sidebar-text) !important; font-weight: 500; }
.menu-item:hover {
 background: var(--app-sidebar-hover-bg) !important;
 color: var(--app-sidebar-text-active) !important;
 border-left-color: rgba(255,255,255,.5) !important;
}
.menu-item.active {
 background: var(--app-sidebar-active-bg) !important;
 color: var(--app-sidebar-text-active) !important;
 border-left-color: #fff !important;
 font-weight: 600;
}

.ss-menu a { color: var(--app-sidebar-text) !important; }
.ss-menu a:hover {
 background: var(--app-sidebar-hover-bg) !important;
 color: var(--app-sidebar-text-active) !important;
}
.ss-menu a.active {
 background: var(--app-sidebar-active-bg) !important;
 color: var(--app-sidebar-text-active) !important;
 border-left-color: #fff !important;
}

.menu-item .menu-badge-new, .ss-menu .badge-new {
 background: var(--app-accent) !important;
 color: #1a2332 !important;
}
.sidebar-brand .logo-ph, .ss-brand .logo-ph { background: var(--app-accent) !important; }
.sb-avatar, .sb-avatar-ph,
.ss-avatar, .ss-avatar-ph { border-color: var(--app-accent) !important; }
.sb-avatar-ph { background: rgba(245,166,35,.2) !important; color: var(--app-accent) !important; }
.sb-role { background: var(--app-accent) !important; color: #1a2332 !important; }
.btn-logout-sb {
 background: rgba(234, 84, 85, 0.15);
 color: #ffb4b5;
 border-color: rgba(234, 84, 85, 0.3);
}
.btn-logout-sb:hover { background: var(--app-danger); color: #fff; }

/* === FIX: menu-item badge tidak terpotong === */
.menu-item, .ss-menu a {
 overflow: hidden;
 padding-right: 14px !important;
}
.menu-item i, .ss-menu a i { flex-shrink: 0; }
.menu-item .menu-badge,
.menu-item .menu-badge-new,
.ss-menu a .badge-new,
.ss-menu a .menu-badge,
.ss-menu a .menu-badge-new {
 flex-shrink: 0 !important;
 margin-left: auto !important;
 white-space: nowrap;
 line-height: 1.1;
}
/* Dynamic .mi-text wrapper from JS */
.menu-item .mi-text,
.ss-menu a .mi-text {
 flex: 1 1 auto;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* Grup sidebar (judul + submenu), dipakai navbar horizontal droplist + struktur vertikal */
.sidebar-nav-group {
 display: flex;
 flex-direction: column;
 align-items: stretch;
}
.sidebar-nav-group > .sidebar-nav-group-items {
 display: flex;
 flex-direction: column;
}

/* ============================================================================
 * 12. ALERTS
 * ============================================================================ */
.alert {
 border-radius: var(--app-radius-sm);
 border: none;
 border-left: 4px solid transparent;
}
.alert-success { background: var(--app-success-soft); color: #128e54; border-left-color: var(--app-success); }
.alert-danger { background: var(--app-danger-soft); color: #b8313d; border-left-color: var(--app-danger); }
.alert-warning { background: var(--app-warning-soft); color: #b56611; border-left-color: var(--app-warning); }
.alert-info { background: var(--app-info-soft); color: #008f9c; border-left-color: var(--app-info); }
html[data-theme="dark"] .alert-success { color: #56d987; }
html[data-theme="dark"] .alert-danger { color: #ff9092; }
html[data-theme="dark"] .alert-warning { color: #ffb872; }
html[data-theme="dark"] .alert-info { color: #5fdaee; }

/* ============================================================================
 * 13. CUSTOMIZER OPTION, SKINS (Default / Bordered)
 * ============================================================================ */
html[data-skin="bordered"] .card,
html[data-skin="bordered"] .card-orion,
html[data-skin="bordered"] .panel {
 box-shadow: none !important;
 border: 1px solid var(--app-border-strong) !important;
}
html[data-skin="bordered"] .topbar,
html[data-skin="bordered"] .ss-topbar {
 box-shadow: none !important;
 border-bottom: 1px solid var(--app-border-strong) !important;
}
html[data-skin="bordered"] .sidebar,
html[data-skin="bordered"] .ss-sidebar { box-shadow: none !important; }
html[data-skin="bordered"] .modal-content {
 box-shadow: none !important;
 border: 1px solid var(--app-border-strong) !important;
}
html[data-skin="bordered"] .dropdown-menu {
 box-shadow: 0 0 0 1px var(--app-border-strong) !important;
}
html[data-theme="dark"][data-skin="bordered"] .card,
html[data-theme="dark"][data-skin="bordered"] .card-orion,
html[data-theme="dark"][data-skin="bordered"] .panel {
 box-shadow: none !important;
 border-color: var(--app-border-strong) !important;
}

/* ============================================================================
 * 14. CUSTOMIZER OPTION, SEMI DARK
 * ============================================================================ */
html[data-theme="light"][data-semi-dark="1"] .sidebar,
html[data-theme="light"][data-semi-dark="1"] .ss-sidebar {
 background: linear-gradient(180deg, #283046 0%, #1d2842 100%) !important;
 color: rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="light"][data-semi-dark="1"] .sidebar-footer,
html[data-theme="light"][data-semi-dark="1"] .ss-footer {
 background: linear-gradient(180deg, #283046 0%, #1d2842 100%) !important;
}
html[data-theme="light"][data-semi-dark="1"] .menu-heading,
html[data-theme="light"][data-semi-dark="1"] .ss-menu .ss-section-title {
 /* [v10 KONTRAS 2026-05-10] Sebelumnya 0.4 (40% putih) → tidak terbaca.
 Pakai gold cerah supaya jelas pop dari background gelap. */
 color: #fdc858 !important;
 font-weight: 800 !important;
}
html[data-theme="light"][data-semi-dark="1"] .menu-item.active,
html[data-theme="light"][data-semi-dark="1"] .ss-menu a.active {
 background: var(--app-primary) !important;
 color: #fff !important;
 border-left-color: var(--app-primary) !important;
}
html[data-theme="light"][data-semi-dark="1"] .menu-item.active i,
html[data-theme="light"][data-semi-dark="1"] .ss-menu a.active i {
 color: #fff !important;
}

/* ============================================================================
 * 15. CUSTOMIZER OPTION, NAVBAR TYPE (Sticky/Static/Hidden) & ORIENTATION (Vert/Horiz)
 * data-navbar: "sticky" (default) | "static" | "hidden"
 * data-nav-orient: "vertical" (default) | "horizontal"
 * ============================================================================ */
html[data-navbar="static"] .topbar,
html[data-navbar="static"] .ss-topbar {
 position: static !important;
 top: auto !important;
}
html[data-navbar="hidden"] .topbar,
html[data-navbar="hidden"] .ss-topbar {
 display: none !important;
}

/* HORIZONTAL navbar, strip navigasi modern (desktop); JS menempatkan sidebar di bawah topbar */
@media (min-width: 993px) {
 /* [v15.3 HORIZONTAL FIT-CONTENT 2026-05-10]
 Aside.sidebar pakai height: auto + min-height: 56px supaya:
 - Compact 56px kalau menu muat 1 baris
 - Auto-expand kalau menu wrap ke 2-3 baris
 - DROPDOWN ABSOLUTE NOT CLIPPED (overflow visible) */
 html[data-nav-orient="horizontal"] .sidebar,
 html[data-nav-orient="horizontal"] .ss-sidebar {
 position: relative !important;
 width: 100% !important;
 height: auto !important; /* Auto fit content */
 min-height: 56px !important; /* Minimum 56px */
 max-height: none !important; /* No upper limit (untuk wrap & dropdown) */
 flex-shrink: 0 !important;
 flex-direction: row !important; /* Row layout */
 align-items: center !important;
 overflow: visible !important; /* WAJIB: dropdown tidak terpotong */
 /* Di atas konten; di bawah header topbar (10510), modal foto (10600), Template Customizer (~10700) */
 z-index: 10480 !important;
 /* Samakan dengan sidebar vertikal: pakai gradien / warna Template Customizer (--app-grad-main) */
 background: var(--app-sidebar-bg) !important;
 color: var(--app-sidebar-text) !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
 box-shadow: 0 10px 32px rgba(var(--app-primary-rgb), 0.28) !important;
 }
 html[data-theme="dark"][data-nav-orient="horizontal"] .sidebar,
 html[data-theme="dark"][data-nav-orient="horizontal"] .ss-sidebar {
 background: var(--app-sidebar-bg) !important;
 color: var(--app-sidebar-text) !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
 }
 /* Semi-dark horizontal = sama seperti vertikal (gelap + teks terang) */
 html[data-theme="light"][data-semi-dark="1"][data-nav-orient="horizontal"] .sidebar,
 html[data-theme="light"][data-semi-dark="1"][data-nav-orient="horizontal"] .ss-sidebar {
 background: linear-gradient(180deg, #283046 0%, #1d2842 100%) !important;
 color: rgba(255, 255, 255, 0.85) !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
 }
 html[data-nav-orient="horizontal"][data-navbar="sticky"] .sidebar,
 html[data-nav-orient="horizontal"][data-navbar="sticky"] .ss-sidebar {
 position: sticky !important;
 top: var(--header-h, 64px);
 }
 html[data-nav-orient="horizontal"][data-navbar="hidden"] .sidebar,
 html[data-nav-orient="horizontal"][data-navbar="hidden"] .ss-sidebar {
 top: 0 !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-brand,
 html[data-nav-orient="horizontal"] .ss-brand {
 display: none !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-user,
 html[data-nav-orient="horizontal"] .ss-user {
 display: none !important;
 }
 /* [v15.3 DROPDOWN FIX 2026-05-10]
 Penting: overflow HARUS visible supaya dropdown (.sidebar-nav-group-items
 yang position:absolute top:calc(100%+8px)) tidak terpotong saat klik menu.
 Kalau ada terlalu banyak menu group, items wrap ke baris berikutnya. */
 html[data-nav-orient="horizontal"] .sidebar-menu,
 html[data-nav-orient="horizontal"] .ss-menu {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap !important; /* wrap ke baris baru kalau perlu */
 align-items: center !important;
 align-content: center !important;
 justify-content: flex-start !important;
 gap: 4px !important;
 width: 100% !important;
 max-width: min(1680px, 100%) !important;
 margin: 0 auto !important;
 padding: 6px clamp(12px, 2vw, 24px) !important;
 overflow: visible !important; /* WAJIB visible untuk dropdown */
 }
 /* Compact pill padding di horizontal mode */
 html[data-nav-orient="horizontal"] .sidebar-nav-group > .menu-heading,
 html[data-nav-orient="horizontal"] .sidebar-nav-group > div[class*="section-title"],
 html[data-nav-orient="horizontal"] .ss-menu .ss-section-title,
 html[data-nav-orient="horizontal"] .ss-menu > a {
 padding: 7px 12px !important;
 font-size: 0.82rem !important;
 white-space: nowrap !important;
 flex-shrink: 0 !important;
 line-height: 1.2 !important;
 }
 /* Hide sidebar-footer di horizontal mode (kalau ada) */
 html[data-nav-orient="horizontal"] .sidebar-footer,
 html[data-nav-orient="horizontal"] .ss-footer {
 display: none !important;
 }
 /* Judul "Utama" (admin) saja disembunyikan; submenu utama via grup siswa */
 html[data-nav-orient="horizontal"] .sidebar-menu > .menu-heading-fixed {
 display: none !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group {
 position: relative;
 display: inline-flex;
 flex-direction: column;
 align-items: stretch;
 flex: 0 0 auto;
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 z-index: 2;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group.horiz-dd-open {
 z-index: 50;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group > .menu-heading,
 html[data-nav-orient="horizontal"] .sidebar-nav-group > div[class*="section-title"] {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin: 0 !important;
 padding: 10px 14px !important;
 border-radius: 11px !important;
 white-space: nowrap;
 font-size: 0.86rem !important;
 font-weight: 700 !important;
 letter-spacing: 0.02em;
 text-transform: none !important;
 color: var(--app-sidebar-heading) !important;
 background: transparent !important;
 border: 1px solid transparent !important;
 cursor: pointer;
 line-height: 1.2 !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group > .menu-heading .caret,
 html[data-nav-orient="horizontal"] .sidebar-nav-group > div[class*="section-title"] .caret {
 font-size: 0.65rem !important;
 opacity: 0.75;
 margin-left: 2px;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group > .menu-heading:hover,
 html[data-nav-orient="horizontal"] .sidebar-nav-group > div[class*="section-title"]:hover {
 color: var(--app-sidebar-text-active) !important;
 background: var(--app-sidebar-hover-bg) !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group.horiz-dd-open > .menu-heading,
 html[data-nav-orient="horizontal"] .sidebar-nav-group.horiz-dd-open > div[class*="section-title"] {
 color: var(--app-sidebar-text-active) !important;
 background: var(--app-sidebar-active-bg) !important;
 border-color: rgba(255, 255, 255, 0.28) !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items {
 display: none !important;
 position: absolute !important;
 left: 0 !important;
 top: calc(100% + 8px) !important;
 min-width: 276px !important;
 max-width: min(92vw, 380px) !important;
 max-height: min(72vh, 460px) !important;
 overflow-x: hidden !important;
 overflow-y: auto !important;
 flex-direction: column !important;
 gap: 4px !important;
 padding: 10px !important;
 margin: 0 !important;
 background: var(--app-card-bg) !important;
 border: 1px solid var(--app-border) !important;
 border-radius: 14px !important;
 box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
 z-index: 10495 !important;
 scrollbar-width: thin;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group.horiz-dd-open .sidebar-nav-group-items {
 display: flex !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items .menu-item,
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items a {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 width: 100% !important;
 flex: 0 0 auto !important;
 white-space: nowrap !important;
 padding: 10px 12px !important;
 margin: 0 !important;
 border-radius: 10px !important;
 font-size: 0.88rem !important;
 font-weight: 500 !important;
 border-left: 0 !important;
 color: var(--app-text-muted) !important;
 background: transparent !important;
 transition: background 0.18s ease, color 0.18s ease;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items .menu-item:hover,
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items a:hover {
 background: color-mix(in srgb, var(--app-primary) 12%, transparent) !important;
 color: var(--app-primary) !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items .menu-item.active,
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items a.active {
 background: color-mix(in srgb, var(--app-primary) 18%, var(--app-surface)) !important;
 color: var(--app-primary) !important;
 font-weight: 600 !important;
 border: 1px solid rgba(var(--app-primary-rgb), 0.28) !important;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 2px 8px rgba(var(--app-primary-rgb), 0.1);
 }
 html[data-theme="dark"][data-nav-orient="horizontal"] .sidebar-nav-group-items .menu-item.active,
 html[data-theme="dark"][data-nav-orient="horizontal"] .sidebar-nav-group-items a.active {
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 10px rgba(0, 0, 0, 0.35);
 }
 /* Dashboard admin (satu pill di luar grup) */
 html[data-nav-orient="horizontal"] .sidebar-menu > .menu-item {
 display: inline-flex !important;
 align-items: center !important;
 gap: 9px !important;
 padding: 10px 16px !important;
 border-radius: 11px !important;
 white-space: nowrap;
 font-size: 0.9rem !important;
 font-weight: 500 !important;
 letter-spacing: 0.01em;
 flex: 0 0 auto;
 color: var(--app-sidebar-text) !important;
 background: transparent !important;
 border-left: 0 !important;
 transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 }
 html[data-nav-orient="horizontal"] .sidebar-menu > .menu-item i {
 font-size: 0.95rem !important;
 opacity: 0.92;
 width: 1.1em !important;
 text-align: center;
 color: inherit !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-menu > .menu-item:hover {
 background: var(--app-sidebar-hover-bg) !important;
 color: var(--app-sidebar-text-active) !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-menu > .menu-item.active {
 background: var(--app-sidebar-active-bg) !important;
 color: var(--app-sidebar-text-active) !important;
 font-weight: 600 !important;
 border: 1px solid rgba(255, 255, 255, 0.22) !important;
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
 }
 html[data-theme="dark"][data-nav-orient="horizontal"] .sidebar-menu > .menu-item.active {
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 10px rgba(0, 0, 0, 0.35);
 }
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items .menu-item .menu-badge,
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items .menu-item .menu-badge-new,
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items a .badge-new,
 html[data-nav-orient="horizontal"] .sidebar-nav-group-items a .menu-badge {
 margin-left: auto !important;
 font-size: 0.62rem !important;
 padding: 2px 7px !important;
 border-radius: 999px !important;
 font-weight: 700 !important;
 line-height: 1.15 !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-menu > .menu-item .menu-badge,
 html[data-nav-orient="horizontal"] .sidebar-menu > .menu-item .menu-badge-new {
 margin-left: 6px !important;
 font-size: 0.62rem !important;
 padding: 2px 7px !important;
 border-radius: 999px !important;
 font-weight: 700 !important;
 line-height: 1.15 !important;
 }
 html[data-nav-orient="horizontal"] .sidebar-footer,
 html[data-nav-orient="horizontal"] .ss-footer {
 display: none !important;
 }
 html[data-nav-orient="horizontal"] .main-wrapper,
 html[data-nav-orient="horizontal"] .ss-content {
 margin-left: 0 !important;
 }
 html[data-nav-orient="horizontal"] .topbar,
 html[data-nav-orient="horizontal"] .ss-topbar {
 margin-left: 0 !important;
 /* Strip nav horizontal z-index ~10480; topbar harus di atas agar .um-dropdown & isi header tidak ketutup */
 z-index: 10510 !important;
 position: sticky;
 }
 html[data-nav-orient="horizontal"] .notif-dropdown {
 z-index: 10520 !important;
 }
 html[data-nav-orient="horizontal"] .menu-search-wrap .menu-search-results {
 z-index: 10520 !important;
 }
 html[data-nav-orient="horizontal"] .btn-toggle-sb {
 display: none !important;
 }
 html[data-nav-orient="horizontal"] .btn-burger {
 display: none !important;
 }
 /* Konten halaman di bawah strip nav (bukan header topbar) */
 html[data-nav-orient="horizontal"] .main-wrapper > main.content-area {
 position: relative;
 z-index: 0;
 }
 html[data-nav-orient="horizontal"] .ss-main > .ss-content {
 position: relative;
 z-index: 0;
 }
}
/* Safari / browser tanpa color-mix: fallback halus */
@supports not (color: color-mix(in srgb, white 50%, black)) {
 @media (min-width: 993px) {
 html[data-nav-orient="horizontal"] .sidebar,
 html[data-nav-orient="horizontal"] .ss-sidebar {
 background: var(--app-sidebar-bg) !important;
 color: var(--app-sidebar-text) !important;
 }
 html[data-nav-orient="horizontal"] .menu-item:hover,
 html[data-nav-orient="horizontal"] .ss-menu a:hover {
 background: var(--app-primary-soft) !important;
 }
 html[data-nav-orient="horizontal"] .menu-item.active,
 html[data-nav-orient="horizontal"] .ss-menu a.active {
 background: var(--app-primary-soft) !important;
 border: 1px solid rgba(var(--app-primary-rgb), 0.28) !important;
 }
 }
}

/* Horizontal nav: sidebar dipindah ke dalam main-wrapper, hilangkan margin sisanya */
@media (min-width: 993px) {
 body.nav-horizontal-layout .main-wrapper,
 body.nav-horizontal-layout .ss-main {
 margin-left: 0 !important;
 }
}

/* ============================================================================
 * 16. CUSTOMIZER OPTION, CONTENT WIDTH (Wide / Compact)
 * ============================================================================ */
html[data-content="compact"] .content-area,
html[data-content="compact"] .ss-content {
 max-width: 1440px;
 margin-left: auto !important;
 margin-right: auto !important;
}

/* ============================================================================
 * 17. OVERRIDE HARDCODED GREEN/NAVY → primary
 *
 * admin_layout.php pakai background:linear-gradient(135deg,#0a2540...) inline.
 * landing.php pakai background-color:#10b981 untuk green CTA section.
 * Override pakai attribute selector supaya ikut primary color.
 * ============================================================================ */

/* Welcome banner di dashboard.php (line 652), gradient navy */
[style*="linear-gradient(135deg,#0a2540"],
[style*="linear-gradient(135deg, #0a2540"],
[style*="linear-gradient(180deg,#0a2540"],
[style*="linear-gradient(180deg, #0a2540"] {
 background: var(--app-grad-main) !important;
}

/* Hero/CTA gradient hijau di landing.php (variants), ikut primary gradient */
[style*="linear-gradient(135deg, rgba(10,37,64"],
[style*="linear-gradient(135deg,rgba(10,37,64"] {
 background: var(--app-grad-main) !important;
}

/* Solid #0a2540 backgrounds → primary-dark */
[style*="background:#0a2540"],
[style*="background: #0a2540"],
[style*="background-color:#0a2540"],
[style*="background-color: #0a2540"] {
 background: var(--app-primary-dark) !important;
}

/* Hardcoded text color #0a2540 → primary-dark text */
[style*="color:#0a2540"],
[style*="color: #0a2540"] {
 color: var(--app-primary-dark) !important;
}

/* ============================================================================
 * 18. DARK MODE OVERRIDES (Bootstrap utilities + custom)
 * ============================================================================ */
html[data-theme="dark"] body { background-color: var(--app-bg) !important; color: var(--app-text) !important; }

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-body-secondary {
 background-color: var(--app-surface) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] .bg-secondary { background-color: #4b5563 !important; }
html[data-theme="dark"] .bg-dark { background-color: #0d1228 !important; }

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black { color: var(--app-text) !important; }
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .small { color: var(--app-text-muted) !important; }

html[data-theme="dark"] .border,
html[data-theme="dark"] [class*="border-"] { border-color: var(--app-border) !important; }
html[data-theme="dark"] hr { border-color: var(--app-border); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-orion,
html[data-theme="dark"] .panel {
 background: var(--app-card-bg) !important;
 border-color: var(--app-card-border) !important;
 color: var(--app-text) !important;
 box-shadow: var(--app-card-shadow);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
 background: var(--app-surface-3) !important;
 border-color: var(--app-card-border) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-subtitle { color: var(--app-text-strong) !important; }

/* Tables (dark) */
html[data-theme="dark"] .table,
html[data-theme="dark"] table {
 color: var(--app-text) !important;
 border-color: var(--app-border) !important;
}
html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
 background-color: transparent;
 color: var(--app-text);
 border-color: var(--app-border-soft) !important;
}
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table thead.table-light,
html[data-theme="dark"] .table thead { background: var(--app-surface-3) !important; }
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td,
html[data-theme="dark"] .table thead.table-light th,
html[data-theme="dark"] .table thead th {
 background: var(--app-surface-3) !important;
 color: var(--app-text-strong) !important;
 border-color: var(--app-border) !important;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
 background-color: rgba(255,255,255,.03) !important;
 color: var(--app-text);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
 background-color: rgba(255,255,255,.02);
 color: var(--app-text);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > :not(caption) > * > * {
 border-color: var(--app-border) !important;
}

/* Forms (dark) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] select {
 background: var(--app-input-bg) !important;
 border-color: var(--app-input-border) !important;
 color: var(--app-input-text) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
 background: rgba(255,255,255,.04) !important;
 color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .input-group-text {
 background: var(--app-surface-3) !important;
 border-color: var(--app-input-border) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
 filter: invert(1);
}

/* Buttons (dark) */
html[data-theme="dark"] .btn-light {
 background: var(--app-surface-3) !important;
 border-color: var(--app-border) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] .btn-light:hover {
 background: var(--app-elevated) !important;
 color: var(--app-text-strong) !important;
}
html[data-theme="dark"] .btn-secondary {
 background: #475066 !important;
 border-color: #475066 !important;
 color: #fff !important;
}
html[data-theme="dark"] .btn-outline-secondary {
 color: var(--app-text-muted) !important;
 border-color: var(--app-border) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
 background: var(--app-surface-3) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] .btn-close {
 filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modals, Dropdowns, Popovers (dark) */
html[data-theme="dark"] .modal-content {
 background: var(--app-surface) !important;
 border-color: var(--app-border) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--app-border) !important; }
html[data-theme="dark"] .modal-backdrop.show { opacity: .7; }
html[data-theme="dark"] .dropdown-menu {
 background: var(--app-elevated) !important;
 border-color: var(--app-border) !important;
 color: var(--app-text);
 box-shadow: var(--app-shadow);
}
html[data-theme="dark"] .dropdown-item { color: var(--app-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
 background: rgba(255,255,255,.06) !important;
 color: var(--app-text-strong);
}
html[data-theme="dark"] .dropdown-divider { border-color: var(--app-border); }
html[data-theme="dark"] .popover {
 background: var(--app-elevated) !important;
 border-color: var(--app-border) !important;
 color: var(--app-text);
}
html[data-theme="dark"] .popover-header {
 background: var(--app-surface);
 border-color: var(--app-border);
 color: var(--app-text);
}
html[data-theme="dark"] .tooltip-inner {
 background: var(--app-elevated);
 color: var(--app-text);
}
html[data-theme="dark"] .offcanvas {
 background: var(--app-surface) !important;
 color: var(--app-text) !important;
}

/* Tabs/pills/badges/progress/list (dark) */
html[data-theme="dark"] .nav-tabs { border-color: var(--app-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--app-text-muted); border-color: transparent; }
html[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--app-text); border-color: var(--app-border) var(--app-border) transparent; }
html[data-theme="dark"] .nav-tabs .nav-link.active {
 background: var(--app-surface) !important;
 color: var(--app-text-strong) !important;
 border-color: var(--app-border) var(--app-border) var(--app-surface) !important;
}
html[data-theme="dark"] .nav-pills .nav-link { color: var(--app-text-muted); }
html[data-theme="dark"] .nav-pills .nav-link.active { background: var(--app-primary) !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.bg-white {
 background: var(--app-elevated) !important; color: var(--app-text) !important;
}
html[data-theme="dark"] .badge.bg-secondary { background: #5a6477 !important; }
html[data-theme="dark"] .progress { background: var(--app-border-soft) !important; }
html[data-theme="dark"] .list-group-item {
 background: var(--app-surface) !important;
 border-color: var(--app-border) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] .list-group-item.active {
 background: var(--app-primary) !important;
 border-color: var(--app-primary) !important;
 color: #fff !important;
}
html[data-theme="dark"] .breadcrumb { background: transparent; }
html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--app-text-muted); }
html[data-theme="dark"] .pagination .page-link {
 background: var(--app-surface);
 border-color: var(--app-border);
 color: var(--app-text);
}
html[data-theme="dark"] .pagination .page-link:hover { background: var(--app-elevated); }
html[data-theme="dark"] .pagination .page-item.active .page-link {
 background: var(--app-primary);
 border-color: var(--app-primary);
 color: #fff;
}
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.bg-light,
html[data-theme="dark"] .top-header,
html[data-theme="dark"] .navbar-light {
 background: var(--app-surface) !important;
 border-color: var(--app-border) !important;
}
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar .nav-link { color: var(--app-text) !important; }
html[data-theme="dark"] .navbar-toggler { border-color: var(--app-border); }

/* DataTables (dark) */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dataTables_paginate { color: var(--app-text-muted) !important; }
html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select {
 background: var(--app-input-bg) !important;
 border-color: var(--app-input-border) !important;
 color: var(--app-text) !important;
}
html[data-theme="dark"] .paginate_button {
 background: var(--app-surface) !important;
 color: var(--app-text) !important;
 border-color: var(--app-border) !important;
}
html[data-theme="dark"] .paginate_button.current {
 background: var(--app-primary) !important;
 color: #fff !important;
 border-color: var(--app-primary) !important;
}

/* Custom UI elements (dark) */
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .upload-mode-tabs,
html[data-theme="dark"] .upload-mode-pane,
html[data-theme="dark"] .umt-btn,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .stats-row,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .data-card,
html[data-theme="dark"] .panel-light,
html[data-theme="dark"] .light-panel {
 background: var(--app-surface) !important;
 color: var(--app-text) !important;
 border-color: var(--app-border) !important;
}

/* Inline-style overrides (dark), pakai background-color (bukan shorthand)
 supaya bg-image inline TIDAK ikut hilang */
html[data-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff8"]):not([style*="background:#ffe"]):not([style*="background:#ffd"]):not([style*="url"]),
html[data-theme="dark"] [style*="background: #fff"]:not([style*="background: #fff8"]):not([style*="background: #ffe"]):not([style*="background: #ffd"]):not([style*="url"]),
html[data-theme="dark"] [style*="background:#ffffff"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #ffffff"]:not([style*="url"]),
html[data-theme="dark"] [style*="background:white"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: white"]:not([style*="url"]),
html[data-theme="dark"] [style*="background-color:#fff"]:not([style*="background-color:#fff8"]):not([style*="background-color:#ffe"]):not([style*="background-color:#ffd"]),
html[data-theme="dark"] [style*="background-color: #fff"]:not([style*="background-color: #fff8"]):not([style*="background-color: #ffe"]):not([style*="background-color: #ffd"]),
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background:rgb(255"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: rgb(255"]:not([style*="url"]),
html[data-theme="dark"] [style*="background-color:rgb(255"],
html[data-theme="dark"] [style*="background-color: rgb(255"] {
 background-color: var(--app-surface) !important;
}
html[data-theme="dark"] [style*="background:#f8f"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #f8f"]:not([style*="url"]),
html[data-theme="dark"] [style*="background:#f9f"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #f9f"]:not([style*="url"]),
html[data-theme="dark"] [style*="background:#fafa"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #fafa"]:not([style*="url"]),
html[data-theme="dark"] [style*="background:#fafb"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #fafb"]:not([style*="url"]),
html[data-theme="dark"] [style*="background-color:#f8f"],
html[data-theme="dark"] [style*="background-color: #f8f"],
html[data-theme="dark"] [style*="background-color:#f9f"],
html[data-theme="dark"] [style*="background-color: #f9f"] {
 background-color: var(--app-surface) !important;
}
html[data-theme="dark"] [style*="background:#f0"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #f0"]:not([style*="url"]),
html[data-theme="dark"] [style*="background:#f1"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #f1"]:not([style*="url"]),
html[data-theme="dark"] [style*="background:#f3"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #f3"]:not([style*="url"]),
html[data-theme="dark"] [style*="background:#f5"]:not([style*="url"]),
html[data-theme="dark"] [style*="background: #f5"]:not([style*="url"]),
html[data-theme="dark"] [style*="background-color:#f0"],
html[data-theme="dark"] [style*="background-color: #f0"],
html[data-theme="dark"] [style*="background-color:#f1"],
html[data-theme="dark"] [style*="background-color: #f1"],
html[data-theme="dark"] [style*="background-color:#f5"],
html[data-theme="dark"] [style*="background-color: #f5"] {
 background-color: var(--app-surface-3) !important;
}

/* Universal Kalender (dark) */
html[data-theme="dark"] .kal-card,
html[data-theme="dark"] .kal-summary-card,
html[data-theme="dark"] .kal-modal,
html[data-theme="dark"] .kal-cell,
html[data-theme="dark"] .kal-day-head { background: var(--app-surface) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kal-grid { background: var(--app-bg) !important; }
html[data-theme="dark"] .kal-cell.muted { background: var(--app-bg) !important; opacity: .45; }
html[data-theme="dark"] .kal-cell.today {
 background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)) !important;
 color: #fff !important;
}
html[data-theme="dark"] .kal-date-num { color: var(--app-text) !important; }
html[data-theme="dark"] .kal-cell.today .kal-date-num { color: #fff !important; }
html[data-theme="dark"] .kal-event-detail { background: var(--app-elevated) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kal-jadwal-item { background: rgba(40, 199, 111, 0.15) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kal-nav-btn,
html[data-theme="dark"] .kal-modal-close { background: var(--app-elevated) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kal-nav-btn:hover { background: var(--app-primary-soft) !important; color: var(--app-primary) !important; }

html[data-theme="dark"] .kalmg-day-h,
html[data-theme="dark"] .kalmg-cell,
html[data-theme="dark"] .kalmg-modal { background: var(--app-surface) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kalmg-grid { background: var(--app-bg) !important; }
html[data-theme="dark"] .kalmg-cell.muted { background: var(--app-bg) !important; opacity: .45; }
html[data-theme="dark"] .kalmg-cell.today {
 background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)) !important;
 color: #fff !important;
}
html[data-theme="dark"] .kalmg-num { color: var(--app-text) !important; }
html[data-theme="dark"] .kalmg-cell.today .kalmg-num { color: #fff !important; }
html[data-theme="dark"] .kalmg-nav-btn,
html[data-theme="dark"] .kalmg-modal-x { background: var(--app-elevated) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kalmg-nav-btn:hover { background: var(--app-primary-soft) !important; color: var(--app-primary) !important; }
html[data-theme="dark"] .kalmg-evd { background: var(--app-elevated) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kalmg-jd { background: rgba(40, 199, 111, 0.15) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kalmg-link a { background: var(--app-elevated) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kalmg-link a:hover { background: var(--app-primary-soft) !important; color: var(--app-primary) !important; }

html[data-theme="dark"] .kts-controls { background: var(--app-surface) !important; color: var(--app-text) !important; }
html[data-theme="dark"] .kts-controls h3 { color: var(--app-text-strong) !important; }
html[data-theme="dark"] .kts-controls[style*="background:#e0f2fe"] {
 background: rgba(0, 207, 232, 0.15) !important;
 color: #5fdaee !important;
 border-left-color: var(--app-info) !important;
}

/* ============================================================================
 * 19. CUSTOMIZER PANEL & GEAR BUTTON
 * ============================================================================ */
.tc-gear-btn {
 position: fixed;
 bottom: 24px;
 right: 24px;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: var(--app-primary);
 color: var(--app-primary-text);
 border: 0;
 cursor: pointer;
 box-shadow: 0 8px 22px rgba(var(--app-primary-rgb), 0.45);
 z-index: 10700;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.15rem;
 transition: transform var(--app-trans), box-shadow var(--app-trans), background var(--app-trans), bottom var(--app-trans), right var(--app-trans);
 user-select: none;
 -webkit-tap-highlight-color: transparent;
}
.tc-gear-btn:hover {
 transform: scale(1.08) rotate(45deg);
 box-shadow: 0 12px 30px rgba(var(--app-primary-rgb), 0.6);
}
.tc-gear-btn:active { transform: scale(.95); }
.tc-gear-btn .fa-cog { animation: tc-rotate 6s linear infinite; }
@keyframes tc-rotate { to { transform: rotate(360deg); } }

/* === FIX: Saat ada .wa-float di landing → gear button geser ke kiri WA */
body:has(.wa-float) .tc-gear-btn {
 right: 100px; /* WA-float lebar 60px + 25px right + 15px gap */
}
@media (max-width: 480px) {
 .tc-gear-btn { width: 44px; height: 44px; bottom: 18px; right: 18px; font-size: 1rem; }
 body:has(.wa-float) .tc-gear-btn { right: 75px; }
}

@supports (padding: max(0px)) {
 .tc-gear-btn {
 bottom: max(24px, env(safe-area-inset-bottom));
 right: max(24px, env(safe-area-inset-right));
 }
 body:has(.wa-float) .tc-gear-btn {
 right: max(100px, calc(env(safe-area-inset-right) + 90px));
 }
}

/* Browser tanpa :has(), fallback class via JS */
.tc-gear-btn.tc-gear-with-wa { right: 100px; }
@media (max-width: 480px) {
 .tc-gear-btn.tc-gear-with-wa { right: 75px; }
}

/* === Drawer === */
.tc-overlay {
 position: fixed; inset: 0;
 background: rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(2px);
 -webkit-backdrop-filter: blur(2px);
 z-index: 10690;
 opacity: 0;
 pointer-events: none;
 transition: opacity var(--app-trans);
}
/* [v13 SCROLL FIX 2026-05-10] pointer-events:none -> overlay click-through,
 user bisa scroll & klik landing page di belakang customizer.
 Click-outside-to-close di-handle via document listener di darkmode.js */
.tc-overlay.tc-open { opacity: 1; pointer-events: none; }

.tc-panel {
 position: fixed;
 top: 0; right: 0;
 width: 400px;
 max-width: 92vw;
 height: 100%;
 background: var(--app-surface);
 color: var(--app-text);
 box-shadow: var(--app-shadow-xl);
 z-index: 10700;
 display: flex;
 flex-direction: column;
 transform: translateX(100%);
 transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
 overflow: hidden;
}
.tc-panel.tc-open { transform: translateX(0); }

.tc-head {
 padding: 18px 20px;
 border-bottom: 1px solid var(--app-border);
 display: flex; align-items: center; justify-content: space-between;
 flex-shrink: 0;
 background: var(--app-surface);
}
.tc-head .tc-title { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--app-text-strong); }
.tc-head .tc-subtitle { margin: 2px 0 0; font-size: .78rem; color: var(--app-text-muted); }
.tc-head-actions { display: flex; gap: 4px; }
.tc-icon-btn {
 width: 34px; height: 34px;
 border-radius: 8px;
 background: transparent;
 border: 0;
 color: var(--app-text-muted);
 cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 font-size: 1rem;
 transition: background var(--app-trans-fast), color var(--app-trans-fast);
}
.tc-icon-btn:hover { background: var(--app-surface-2); color: var(--app-text-strong); }

.tc-body {
 flex: 1;
 overflow-y: auto;
 padding: 4px 0 16px;
 -webkit-overflow-scrolling: touch;
}

.tc-section { padding: 18px 20px 4px; }
.tc-section + .tc-section { border-top: 1px solid var(--app-border-soft); margin-top: 6px; }
.tc-section-label {
 display: inline-block;
 background: var(--app-primary-soft);
 color: var(--app-primary);
 font-size: .68rem;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: 30px;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-bottom: 14px;
}
.tc-sub { margin-bottom: 16px; }
.tc-sub-title {
 margin: 0 0 10px;
 font-size: .82rem;
 font-weight: 600;
 color: var(--app-text-strong);
}

.tc-cards {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
}
.tc-cards.tc-cards-2 { grid-template-columns: repeat(2, 1fr); }
.tc-card {
 border: 2px solid var(--app-border);
 border-radius: var(--app-radius-sm);
 background: var(--app-surface);
 padding: 10px 6px 8px;
 cursor: pointer;
 text-align: center;
 transition: border-color var(--app-trans-fast), background var(--app-trans-fast), transform var(--app-trans-fast);
 -webkit-tap-highlight-color: transparent;
}
.tc-card:hover { border-color: var(--app-primary); }
.tc-card.tc-active {
 border-color: var(--app-primary);
 background: var(--app-primary-soft);
}
.tc-card-icon {
 width: 34px; height: 34px;
 margin: 0 auto 5px;
 display: flex; align-items: center; justify-content: center;
 border-radius: 50%;
 background: var(--app-surface-2);
 color: var(--app-text);
 font-size: .9rem;
 transition: background var(--app-trans-fast), color var(--app-trans-fast);
}
.tc-card.tc-active .tc-card-icon {
 background: var(--app-primary);
 color: var(--app-primary-text);
}
.tc-card-name {
 font-size: .78rem;
 font-weight: 600;
 color: var(--app-text);
}
.tc-card.tc-active .tc-card-name { color: var(--app-primary); }

/* === Color swatches === */
.tc-color-row {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 align-items: center;
}
.tc-color-swatch {
 width: 38px; height: 38px;
 border-radius: 50%;
 cursor: pointer;
 border: 3px solid transparent;
 box-shadow: 0 0 0 2px var(--app-border);
 transition: transform var(--app-trans-fast), box-shadow var(--app-trans-fast);
 position: relative;
 -webkit-tap-highlight-color: transparent;
}
.tc-color-swatch:hover { transform: scale(1.08); }
.tc-color-swatch.tc-active {
 box-shadow: 0 0 0 3px var(--app-primary);
 border-color: var(--app-surface);
 transform: scale(1.05);
}
.tc-color-swatch.tc-active::after {
 content: '\f00c';
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
 color: #fff;
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .9rem;
 text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.tc-color-custom {
 width: 38px; height: 38px;
 border-radius: 50%;
 background: linear-gradient(135deg, #ff0080, #7367f0, #00cfe8, #28c76f, #ff9f43);
 cursor: pointer;
 border: 3px solid var(--app-surface);
 box-shadow: 0 0 0 2px var(--app-border);
 position: relative;
 overflow: hidden;
 transition: transform var(--app-trans-fast);
 -webkit-tap-highlight-color: transparent;
}
.tc-color-custom:hover { transform: scale(1.08); }
.tc-color-custom::after {
 content: '\f1fb';
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
 color: #fff;
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .85rem;
 text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.tc-color-custom input[type="color"] {
 position: absolute;
 inset: 0;
 width: 100%; height: 100%;
 opacity: 0;
 cursor: pointer;
 border: 0;
 padding: 0;
}

/* === GRADIENT THEME GRID (20 themes) === */
.tc-grad-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 8px;
}
.tc-grad-card {
 border: 2px solid var(--app-border);
 border-radius: var(--app-radius-sm);
 background: var(--app-surface);
 padding: 8px;
 cursor: pointer;
 transition: border-color var(--app-trans-fast), transform var(--app-trans-fast);
 -webkit-tap-highlight-color: transparent;
 display: flex;
 align-items: center;
 gap: 8px;
 overflow: hidden;
 position: relative;
}
.tc-grad-card:hover { border-color: var(--app-primary); }
.tc-grad-card.tc-active {
 border-color: var(--app-primary);
 background: var(--app-primary-soft);
}
.tc-grad-card.tc-active::after {
 content: '\f00c';
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
 position: absolute;
 top: 4px;
 right: 4px;
 color: var(--app-primary);
 font-size: .7rem;
}
.tc-grad-strip {
 width: 64px;
 height: 26px;
 border-radius: 6px;
 flex-shrink: 0;
 box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.tc-grad-name {
 font-size: .72rem;
 font-weight: 600;
 color: var(--app-text);
 line-height: 1.2;
 flex: 1;
 min-width: 0;
}

/* === Toggle switch === */
.tc-toggle-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}
.tc-toggle-label {
 flex: 1;
 font-size: .85rem;
 color: var(--app-text);
}
.tc-toggle-label small {
 display: block;
 font-size: .72rem;
 color: var(--app-text-muted);
 margin-top: 2px;
 line-height: 1.4;
}
.tc-switch {
 position: relative;
 display: inline-block;
 width: 44px;
 height: 24px;
 flex-shrink: 0;
}
.tc-switch input { opacity: 0; width: 0; height: 0; pointer-events: none; }
.tc-switch-slider {
 position: absolute;
 cursor: pointer;
 inset: 0;
 background: var(--app-border-strong);
 border-radius: 24px;
 transition: background var(--app-trans-fast);
}
.tc-switch-slider::before {
 content: '';
 position: absolute;
 height: 18px;
 width: 18px;
 left: 3px;
 bottom: 3px;
 background: #fff;
 border-radius: 50%;
 transition: transform var(--app-trans-fast);
 box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.tc-switch input:checked + .tc-switch-slider { background: var(--app-primary); }
.tc-switch input:checked + .tc-switch-slider::before { transform: translateX(20px); }
.tc-switch input:disabled + .tc-switch-slider { opacity: .5; cursor: not-allowed; }

.tc-foot {
 padding: 14px 20px;
 border-top: 1px solid var(--app-border);
 background: var(--app-surface);
 flex-shrink: 0;
}
.tc-reset-btn {
 width: 100%;
 background: var(--app-danger-soft);
 color: var(--app-danger);
 border: 1px solid transparent;
 padding: 10px;
 border-radius: var(--app-radius-sm);
 cursor: pointer;
 font-weight: 600;
 font-size: .85rem;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 transition: background var(--app-trans-fast), color var(--app-trans-fast);
}
.tc-reset-btn:hover { background: var(--app-danger); color: #fff; }

@media (max-width: 480px) {
 .tc-panel { width: 100vw; max-width: 100vw; }
 .tc-head { padding: 14px 16px; }
 .tc-section { padding: 14px 16px 2px; }
 .tc-foot { padding: 12px 16px; }
 .tc-card { padding: 8px 4px 6px; }
 .tc-card-icon { width: 30px; height: 30px; font-size: .82rem; }
 .tc-card-name { font-size: .72rem; }
 .tc-color-swatch, .tc-color-custom { width: 34px; height: 34px; }
}

/* ============================================================================
 * 20. USER PROFILE DROPDOWN (di topbar, admin & siswa)
 * ============================================================================ */
.user-menu-wrap {
 position: relative;
 display: inline-block;
}
.user-menu-trigger {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 5px 12px;
 border-radius: 30px;
 background: var(--app-surface-2);
 cursor: pointer;
 text-decoration: none;
 color: var(--app-text);
 border: 0;
 transition: background var(--app-trans-fast), color var(--app-trans-fast);
}
.user-menu-trigger:hover {
 background: var(--app-primary);
 color: #fff;
}
.user-menu-trigger .avatar {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 object-fit: cover;
 background: #ddd;
 flex-shrink: 0;
}
.user-menu-trigger .avatar-ph {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--app-accent);
 color: #1a2332;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: .85rem;
 flex-shrink: 0;
}
.user-menu-trigger .info {
 font-size: .82rem;
 line-height: 1.2;
}
.user-menu-trigger .info strong {
 display: block;
 font-weight: 600;
}
.user-menu-trigger .info small {
 opacity: .8;
}
.user-menu-trigger .um-caret {
 font-size: .7rem;
 margin-left: 4px;
 transition: transform var(--app-trans-fast);
}
.user-menu-wrap.um-open .um-caret { transform: rotate(180deg); }

.um-dropdown {
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 min-width: 230px;
 background: var(--app-surface);
 border: 1px solid var(--app-border);
 border-radius: var(--app-radius);
 box-shadow: var(--app-shadow-lg);
 padding: 6px;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-8px);
 transition: opacity var(--app-trans-fast), transform var(--app-trans-fast), visibility var(--app-trans-fast);
 /* Di atas konten; mode horizontal topbar memakai z-index lebih tinggi dari strip nav */
 z-index: 20;
}
.user-menu-wrap.um-open .um-dropdown {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

.um-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 border-radius: var(--app-radius-sm);
 color: var(--app-text);
 text-decoration: none;
 cursor: pointer;
 border: 0;
 background: transparent;
 width: 100%;
 text-align: left;
 font-size: .87rem;
 transition: background var(--app-trans-fast), color var(--app-trans-fast);
}
.um-item:hover {
 background: var(--app-primary-soft);
 color: var(--app-primary);
}
.um-item i {
 width: 18px;
 text-align: center;
 color: var(--app-text-muted);
 flex-shrink: 0;
}
.um-item:hover i { color: var(--app-primary); }
.um-item.um-danger:hover { background: var(--app-danger-soft); color: var(--app-danger); }
.um-item.um-danger:hover i { color: var(--app-danger); }
.um-divider {
 height: 1px;
 background: var(--app-border);
 margin: 4px 8px;
}
.um-header {
 padding: 12px 12px 8px;
 border-bottom: 1px solid var(--app-border-soft);
 margin-bottom: 4px;
}
.um-header strong {
 display: block;
 color: var(--app-text-strong);
 font-size: .92rem;
}
.um-header small {
 display: block;
 color: var(--app-text-muted);
 font-size: .75rem;
 text-transform: capitalize;
 margin-top: 2px;
}

/* ============================================================================
 * 21. PHOTO UPLOAD MODAL
 * ============================================================================ */
.foto-modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.55);
 backdrop-filter: blur(3px);
 z-index: 10600;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
 opacity: 0;
 pointer-events: none;
 transition: opacity var(--app-trans);
}
.foto-modal-overlay.fm-open {
 opacity: 1;
 pointer-events: auto;
}
.foto-modal {
 background: var(--app-surface);
 color: var(--app-text);
 border-radius: var(--app-radius);
 box-shadow: var(--app-shadow-xl);
 padding: 24px;
 max-width: 420px;
 width: 100%;
 transform: scale(.96);
 transition: transform var(--app-trans);
}
.foto-modal-overlay.fm-open .foto-modal { transform: scale(1); }
.foto-modal h5 {
 margin: 0 0 6px;
 font-size: 1.08rem;
 color: var(--app-text-strong);
 display: flex;
 align-items: center;
 gap: 8px;
}
.foto-modal h5 i { color: var(--app-primary); }
.foto-modal p {
 margin: 0 0 18px;
 color: var(--app-text-muted);
 font-size: .85rem;
}
.foto-modal-options {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 margin-bottom: 14px;
}
.foto-modal-opt {
 background: var(--app-surface-2);
 border: 1px solid var(--app-border);
 border-radius: var(--app-radius-sm);
 padding: 18px 12px;
 cursor: pointer;
 text-align: center;
 color: var(--app-text);
 text-decoration: none;
 font-size: .82rem;
 font-weight: 600;
 transition: all var(--app-trans-fast);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
}
.foto-modal-opt:hover {
 background: var(--app-primary-soft);
 border-color: var(--app-primary);
 color: var(--app-primary);
 transform: translateY(-2px);
}
.foto-modal-opt i {
 font-size: 1.5rem;
}
.foto-modal-cancel {
 width: 100%;
 background: transparent;
 color: var(--app-text-muted);
 border: 1px solid var(--app-border);
 padding: 9px;
 border-radius: var(--app-radius-sm);
 cursor: pointer;
 font-size: .85rem;
 font-weight: 600;
 transition: all var(--app-trans-fast);
}
.foto-modal-cancel:hover {
 background: var(--app-surface-2);
 color: var(--app-text-strong);
}

/* ============================================================================
 * 22. SEARCH BAR (di topbar, shortcut menu)
 * ============================================================================ */
.menu-search-wrap {
 position: relative;
 flex: 1;
 max-width: 360px;
 margin: 0 16px;
}
.menu-search-input {
 width: 100%;
 background: var(--app-surface-2);
 border: 1px solid var(--app-border);
 border-radius: 30px;
 padding: 8px 16px 8px 38px;
 font-size: .85rem;
 color: var(--app-text);
 outline: 0;
 transition: all var(--app-trans-fast);
}
.menu-search-input:focus {
 border-color: var(--app-primary);
 background: var(--app-surface);
 box-shadow: 0 0 0 .2rem var(--app-input-focus-shadow);
}
.menu-search-input::placeholder { color: var(--app-text-dim); }
.menu-search-icon {
 position: absolute;
 left: 14px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--app-text-muted);
 font-size: .9rem;
 pointer-events: none;
}
.menu-search-clear {
 position: absolute;
 right: 12px;
 top: 50%;
 transform: translateY(-50%);
 background: transparent;
 border: 0;
 color: var(--app-text-muted);
 cursor: pointer;
 padding: 2px 6px;
 border-radius: 50%;
 font-size: .85rem;
 display: none;
}
.menu-search-clear:hover { color: var(--app-text-strong); }
.menu-search-wrap.has-value .menu-search-clear { display: block; }

.menu-search-results {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 right: 0;
 background: var(--app-surface);
 border: 1px solid var(--app-border);
 border-radius: var(--app-radius);
 box-shadow: var(--app-shadow-lg);
 max-height: 400px;
 overflow-y: auto;
 padding: 6px;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-6px);
 transition: opacity var(--app-trans-fast), transform var(--app-trans-fast), visibility var(--app-trans-fast);
 z-index: 1090;
}
.menu-search-wrap.ms-open .menu-search-results {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.ms-result {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 9px 10px;
 border-radius: var(--app-radius-sm);
 color: var(--app-text);
 text-decoration: none;
 cursor: pointer;
 font-size: .85rem;
 transition: background var(--app-trans-fast);
}
.ms-result:hover, .ms-result.ms-focused {
 background: var(--app-primary-soft);
 color: var(--app-primary);
}
.ms-result i {
 width: 18px;
 text-align: center;
 color: var(--app-text-muted);
 flex-shrink: 0;
}
.ms-result:hover i, .ms-result.ms-focused i { color: var(--app-primary); }
.ms-result-section {
 font-size: .68rem;
 color: var(--app-text-dim);
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-left: auto;
 flex-shrink: 0;
}
.ms-empty {
 padding: 24px 10px;
 text-align: center;
 color: var(--app-text-muted);
 font-size: .85rem;
}
.ms-empty i {
 display: block;
 margin: 0 auto 8px;
 font-size: 1.5rem;
 opacity: .5;
}

@media (max-width: 768px) {
 .menu-search-wrap {
 margin: 0 8px;
 max-width: none;
 }
 .menu-search-input {
 padding: 7px 14px 7px 34px;
 font-size: .82rem;
 }
}
@media (max-width: 480px) {
 .menu-search-wrap { display: none; } /* sembunyikan di hp kecil; user pakai sidebar */
}

/* ============================================================================
 * 23. MOBILE APP-LIKE LAYOUT
 * Pada layar < 768px, tambahkan polish supaya berasa app native:
 * - Header rounded bottom
 * - Cards smoother
 * - Bottom-tab bar (opsional, dimunculkan via JS jika perlu)
 * - Sidebar drawer with overlay
 * ============================================================================ */
@media (max-width: 768px) {
 body {
 padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 .topbar, .ss-topbar {
 border-bottom: 0 !important;
 box-shadow: 0 2px 12px rgba(0,0,0,.06);
 position: sticky;
 top: 0;
 z-index: 1020;
 }
 .card, .card-Orion Tech {
 border-radius: 16px;
 }
 .stats-card, .stat-card {
 border-radius: 14px;
 }
 .btn, .btn-orion-primary, .btn-orion-outline, .btn-orion-gold,
 .btn-orion-success, .btn-orion-danger {
 border-radius: 12px;
 min-height: 42px;
 }
 .form-control, .form-select, .form-input {
 border-radius: 12px;
 min-height: 44px;
 font-size: 15px; /* prevent iOS auto-zoom on focus */
 }
 .menu-search-wrap {
 margin: 0 8px;
 }
}

/* iOS-style bottom inset for content */
@media (max-width: 480px) {
 .main-wrapper, .ss-content {
 padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
 }
}

/* ============================================================================
 * 24. PRINT
 * ============================================================================ */
@media print {
 .tc-gear-btn, .tc-panel, .tc-overlay,
 .foto-modal-overlay, .menu-search-results,
 .um-dropdown { display: none !important; }
 html[data-theme="dark"] {
 background: #fff !important;
 color: #000 !important;
 }
 html[data-theme="dark"] * {
 background: transparent !important;
 color: #000 !important;
 border-color: #ccc !important;
 }
}

/* ============================================================================
 * 25. REDUCED MOTION
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 transition: none !important;
 animation: none !important;
 }
}

/* ============================================================================
 * END darkmode.css v12 (LUMINA-CUSTOMIZER)
 * ============================================================================ */

/* ============================================================================
 * 26. AGGRESSIVE OVERRIDE, hardcoded colors di banyak file PHP [v12-PATCH]
 *
 * File yang punya hardcoded colors:
 * #0a2540 / #1a4a7a (navy), admin_layout, dashboard, login, landing, dst
 * #10b981 / #059669 / #27ae60 (green), gdrive_picker, kelola_galeri,
 * kalender, profil_siswa, dashboard, ajukan_skl, hasil_ujian, dst
 * #2980b9 (blue), chat_pribadi, beasiswa_admin, dst
 * ============================================================================ */

/* Welcome banner di dashboard.php, gradient navy */
[style*="background:linear-gradient(135deg,#0a2540"]:not([style*="url"]),
[style*="background: linear-gradient(135deg,#0a2540"]:not([style*="url"]),
[style*="background:linear-gradient(135deg,#0a2540"]:not([data-keep-color]),
[style*="background:linear-gradient(180deg,#0a2540"]:not([style*="url"]) {
 background: var(--app-grad-main) !important;
}

/* Solid #0a2540 / #1a4a7a backgrounds (navy single) */
[style*="background:#0a2540"],
[style*="background: #0a2540"],
[style*="background-color:#0a2540"],
[style*="background-color: #0a2540"],
[style*="background:#1a4a7a"],
[style*="background: #1a4a7a"] {
 background: var(--app-primary-dark) !important;
}

/* Hardcoded text color #0a2540 (navy text) → primary text color */
[style*="color:#0a2540"]:not([style*="background"]),
[style*="color: #0a2540"]:not([style*="background"]) {
 color: var(--app-primary-dark) !important;
}

/* Green CTA gradients di gdrive_picker_helper, kelola_galeri */
[style*="linear-gradient(135deg,#10b981"]:not([style*="url"]),
[style*="linear-gradient(135deg, #10b981"]:not([style*="url"]),
[style*="linear-gradient(90deg,#10b981"]:not([style*="url"]),
[style*="linear-gradient(90deg, #10b981"]:not([style*="url"]) {
 background: var(--app-grad-main) !important;
}

/* Solid #10b981, #059669, #27ae60 (greens used for "active/success/done") */
/* Hanya yang DI INLINE STYLE, kita TIDAK override .text-success class */
[style*="background:#10b981"]:not([style*="url"]),
[style*="background: #10b981"]:not([style*="url"]),
[style*="background-color:#10b981"],
[style*="background-color: #10b981"] {
 background-color: var(--app-success) !important;
}
[style*="background:#059669"]:not([style*="url"]),
[style*="background: #059669"]:not([style*="url"]) {
 background-color: var(--app-success) !important;
 filter: brightness(0.9);
}
[style*="background:#27ae60"]:not([style*="url"]),
[style*="background: #27ae60"]:not([style*="url"]) {
 background-color: var(--app-success) !important;
}

/* Blue solid #2980b9 → primary */
[style*="background:#2980b9"]:not([style*="url"]),
[style*="background: #2980b9"]:not([style*="url"]),
[style*="background-color:#2980b9"],
[style*="background-color: #2980b9"] {
 background-color: var(--app-primary) !important;
}

/* Border-color #10b981 / #27ae60 → success var */
[style*="border-left-color:#10b981"],
[style*="border-left-color: #10b981"],
[style*="border-color:#10b981"],
[style*="border-color: #10b981"],
[style*="border-left-color:#27ae60"],
[style*="border-left-color: #27ae60"] {
 border-color: var(--app-success) !important;
}

/* Border-left navy #0a2540 → primary */
[style*="border-left-color:#0a2540"],
[style*="border-left-color: #0a2540"],
[style*="border-bottom-color:#0a2540"],
[style*="border-bottom-color: #0a2540"] {
 border-color: var(--app-primary) !important;
}

/* Login page card brand gradient (login.php line 166: .login-brand) */
.login-brand {
 background: var(--app-grad-main) !important;
}
.login-brand h1, .brand-title { color: #fff !important; }

/* btn-login gradient (login.php) */
.btn-login {
 background: var(--app-grad-main) !important;
 color: #fff !important;
}

/* Landing page accents (JANGAN override hero-section agar bg image setting tetap tampil) */
.stats-section,
.sambutan-box,
.cta-section,
.modal-status .modal-header,
.main-header {
 background: var(--app-grad-main) !important;
 color: #fff !important;
}

/* Notifikasi droplist, bg-light/bg-white di dropdown */
.dropdown-menu .dropdown-item:hover {
 background: var(--app-primary-soft) !important;
 color: var(--app-primary) !important;
}

/* ============================================================================
 * 27. MOBILE APP-LIKE POLISH (lebih dalam) [v12-PATCH]
 * ============================================================================ */
@media (max-width: 768px) {
 /* Topbar lebih app-like */
 .topbar, .ss-topbar {
 height: 56px !important;
 padding: 0 12px !important;
 }
 .topbar .btn-toggle-sb,
 .ss-topbar .btn-toggle-sb {
 width: 40px;
 height: 40px;
 border-radius: 12px;
 }
 /* User-menu lebih ringkas di mobile */
 .user-menu-trigger { padding: 4px 8px !important; gap: 6px !important; }
 .user-menu-trigger .info { display: none !important; }
 .user-menu-trigger .um-caret { display: none !important; }
 /* Card lebih rounded */
 .card, .card-orion, .panel, .stats-card, .stat-card {
 border-radius: 16px !important;
 }
 /* Dashboard stat-card lebih app-style */
 .stat-card, .stats-card {
 padding: 16px 14px !important;
 margin-bottom: 12px !important;
 }
 /* Welcome banner lebih ringkas */
 [style*="linear-gradient(135deg,#0a2540"]:not([style*="url"]) {
 padding: 18px 20px !important;
 border-radius: 18px !important;
 }
 /* Tables horizontal scroll */
 .table-responsive {
 margin: 0 -8px;
 padding: 0 8px;
 border-radius: 14px;
 }
 /* Better tap target buttons */
 .btn, .btn-sm, .btn-orion-primary, .btn-orion-outline,
 .btn-orion-gold, .btn-orion-success, .btn-orion-danger {
 min-height: 44px !important;
 font-size: 14px !important;
 }
 /* Stack form columns */
 .row > [class*="col-"] {
 margin-bottom: 10px;
 }
 /* [v41 2026-05-13] Modal styling pindah ke mobile-app-shell.css.
 margin:12px di modal-content bikin konflik dengan centering. */
 /* Footer compact */
 .footer { padding: 30px 0 0 !important; }
 .footer-bottom { padding: 14px 0 !important; font-size: .8rem !important; }
}

/* iOS app-like inertia scroll */
@media (max-width: 768px) {
 body, .main-wrapper, .ss-content, .modal-body, .dropdown-menu {
 -webkit-overflow-scrolling: touch;
 }
}

/* Larger phones, extra space optimization */
@media (max-width: 480px) {
 .topbar, .ss-topbar {
 padding: 0 8px !important;
 }
 .breadcrumb-orion {
 font-size: .78rem !important;
 }
 .breadcrumb-orion > *:not(:last-child):not(strong) {
 display: none !important; /* hide breadcrumb middle items */
 }
 .topbar-icon {
 width: 38px;
 height: 38px;
 padding: 0 !important;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 }
 .topbar-right {
 gap: 4px !important;
 }
 /* Sidebar lebih wide saat open */
 body.sb-open .sidebar { width: min(85vw, 320px) !important; }
 body.sb-open .ss-sidebar { width: min(85vw, 320px) !important; }
 /* Container padding tighter */
 .container, .container-fluid {
 padding-left: 12px !important;
 padding-right: 12px !important;
 }
 /* Stat values lebih fit */
 .stat-card h3, .stats-card h3,
 .stat-card .stat-value {
 font-size: 1.5rem !important;
 }
}

/* App-style page transitions */
@media (max-width: 768px) {
 .main-wrapper > *,
 .ss-content > * {
 animation: fadeInUp .3s ease;
 }
}
@keyframes fadeInUp {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
 * 28. FIX user-menu-trigger di sidebar siswa (jika ada)
 * ============================================================================ */
.ss-topbar .user-menu-wrap {
 margin-left: auto;
}

/* Search bar di siswa topbar */
.ss-topbar .menu-search-wrap {
 flex: 1;
 max-width: 320px;
}

/* ============================================================================
 * END darkmode.css v12-PATCH
 * ============================================================================ */


/* ============================================================================
 * 99. DARK MODE BULLETPROOF, FORCE override semua text yang pakai --orion-navy/primary
 * dengan high-specificity + !important. Inline style color:var(--orion-navy)
 * pun ikut. Diletakkan di paling akhir biar menang cascade.
 * ============================================================================ */
html[data-theme="dark"] {
 --orion-navy: #f5f7fa !important;
 --orion-navy-dark: #f5f7fa !important;
 --orion-blue: #93c5fd !important;
 --orion-primary: #fbbf24 !important;
 --orion-primary-hover: #fcd34d !important;
 --orion-primary-dark: #f59e0b !important;
 --orion-gold: #fbbf24 !important;
 --orion-text: #e8e9ed !important;
 --orion-text-soft: #b9bcc6 !important;
 --orion-text-mute: #8b91a4 !important;
 --orion-bg: #0a0e1a !important;
 --orion-card: #131726 !important;
 --orion-border: #2a3242 !important;
 --orion-light: #1a1f2e !important;
}

/* Direct selector overrides untuk inline-style yang umum dipakai di Orion */
html[data-theme="dark"] [style*="color:var(--orion-navy)"],
html[data-theme="dark"] [style*="color: var(--orion-navy)"] { color: #f5f7fa !important; }

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
 color: #f5f7fa;
}

html[data-theme="dark"] body,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] label,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
 color: var(--orion-text);
}

/* Section dengan background light → di dark mode jadi dark surface */
html[data-theme="dark"] section[style*="background:var(--orion-light)"],
html[data-theme="dark"] section[style*="background: var(--orion-light)"],
html[data-theme="dark"] [style*="background:var(--orion-light)"],
html[data-theme="dark"] [style*="background: var(--orion-light)"] {
 background: #131726 !important;
}

html[data-theme="dark"] .orion-trust-item,
html[data-theme="dark"] .orion-card,
html[data-theme="dark"] .testimoni-card {
 background: #1a2138 !important;
 border-color: #2a3242 !important;
}

/* Force-readable subtle text */
html[data-theme="dark"] [style*="color:var(--orion-text-mute)"],
html[data-theme="dark"] [style*="color: var(--orion-text-mute)"],
html[data-theme="dark"] [style*="color:var(--orion-text-soft)"],
html[data-theme="dark"] [style*="color: var(--orion-text-soft)"],
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small {
 color: #b9bcc6 !important;
}

/* ============================================================================
 * 100. DARK MODE, EXTRA SAFETY untuk inline color/background dengan
 * --orion-primary, --orion-blue, --orion-navy-dark variants
 * ============================================================================ */
html[data-theme="dark"] [style*="color:var(--orion-primary)"],
html[data-theme="dark"] [style*="color: var(--orion-primary)"] { color: #fbbf24 !important; }

html[data-theme="dark"] [style*="color:var(--orion-blue)"],
html[data-theme="dark"] [style*="color: var(--orion-blue)"] { color: #93c5fd !important; }

html[data-theme="dark"] [style*="color:var(--orion-navy-dark)"],
html[data-theme="dark"] [style*="color: var(--orion-navy-dark)"] { color: #f5f7fa !important; }

html[data-theme="dark"] [style*="color:var(--orion-text)"],
html[data-theme="dark"] [style*="color: var(--orion-text)"] { color: #e8e9ed !important; }

/* Section dengan background pakai brand color (navy heading box, dll), invert agar tetap kontras */
html[data-theme="dark"] [style*="background:var(--orion-navy)"],
html[data-theme="dark"] [style*="background: var(--orion-navy)"],
html[data-theme="dark"] [style*="background:var(--orion-navy-dark)"],
html[data-theme="dark"] [style*="background: var(--orion-navy-dark)"] {
 background: #0a1020 !important;
 color: #f5f7fa !important;
}

html[data-theme="dark"] [style*="background:var(--orion-light)"],
html[data-theme="dark"] [style*="background: var(--orion-light)"] {
 background: #1a1f2e !important;
}

html[data-theme="dark"] [style*="background:var(--orion-bg)"],
html[data-theme="dark"] [style*="background: var(--orion-bg)"] {
 background: #0a0e1a !important;
}

html[data-theme="dark"] [style*="background:var(--orion-card)"],
html[data-theme="dark"] [style*="background: var(--orion-card)"] {
 background: #131726 !important;
}

/* Border with brand color */
html[data-theme="dark"] [style*="border:1px solid var(--orion-border)"],
html[data-theme="dark"] [style*="border-color:var(--orion-border)"] {
 border-color: #2a3242 !important;
}

/* Form elements */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
 background: #1d2842 !important;
 color: #e8e9ed !important;
 border-color: #3b4253 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
 color: #8b91a4 !important;
}

/* Card-like containers default */
html[data-theme="dark"] .container > div[style*="background:#fff"],
html[data-theme="dark"] .container [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background:#ffffff;"] {
 background: #131726 !important;
 color: #e8e9ed !important;
}

/* Anchors / links in dark */
html[data-theme="dark"] a:not(.btn):not(.btn-orion):not(.nav-link-orion) {
 color: #93c5fd;
}
html[data-theme="dark"] a:not(.btn):hover { color: #fbbf24; }

/* ============================================================================
 * 101. FORCE-CASCADE, !important pada legacy map supaya menang di SEMUA halaman
 * (terutama admin dashboard.php / pengaturan.php yang punya inline style).
 * Berlaku untuk light mode default. Dark mode override sudah di section 99.
 * ============================================================================ */
:root {
 --orion-navy: var(--app-primary) !important;
 --orion-navy-dark: var(--app-primary) !important;
 --orion-blue: var(--app-primary) !important;
 --orion-primary: var(--app-accent) !important;
 --orion-primary-hover: var(--app-accent) !important;
 --orion-primary-dark: var(--app-accent) !important;
 --orion-gold: var(--app-accent) !important;
 --orion-grad-main: var(--app-grad-main) !important;
 --orion-grad: var(--app-grad-main) !important;
 --orion-success: var(--app-success) !important;
 --orion-danger: var(--app-danger) !important;
 --orion-info: var(--app-info) !important;
 --orion-card: var(--app-card-bg) !important;
 --orion-bg: var(--app-bg) !important;
 --orion-text: var(--app-text) !important;
 --orion-text-soft: var(--app-text-muted) !important;
 --orion-text-mute: var(--app-text-dim) !important;
 --orion-border: var(--app-border) !important;
 --orion-light: var(--app-surface-2) !important;
 --orion-shadow: var(--app-shadow) !important;
}

/* ================================================================
 [TEXTVIS FINAL OVERRIDE 2026-05-21] DI AKHIR FILE, GUARANTEED WIN
 ================================================================
 Catatan: orion-customizer.css di-load TERAKHIR via init.php.
 Block ini sengaja diletakkan di akhir file untuk override
 semua rules dark-mode/form-control di file ini sendiri
 (lihat baris 1136-1162, 1295-1299, 2625-2635) yang kalo
 nggak di-counter bikin text input invisible:
 - background:#1d2842 + color:#e8e9ed → dark text on dark bg
 - color: var(--app-input-text) → bisa resolve transparan
 Pastikan SEMUA <input>, <textarea>, <select> punya text navy
 visible di white background, regardless of theme. */
html .form-input, html .form-textarea, html .form-select, html .form-control,
html input[type="text"], html input[type="email"], html input[type="password"],
html input[type="tel"], html input[type="number"], html input[type="url"],
html input[type="search"], html input[type="date"], html input[type="time"],
html input[type="datetime-local"], html input[type="month"], html input[type="week"],
html input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not([type="range"]),
html textarea, html select,
html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not([type="range"]),
html[data-theme="dark"] textarea, html[data-theme="dark"] select {
 color: #1a2332 !important;
 background-color: #ffffff !important;
 background: #ffffff !important;
 -webkit-text-fill-color: #1a2332 !important;
 caret-color: #f5a623 !important;
 opacity: 1 !important;
 border-color: #cbd5e1 !important;
}
html input::placeholder, html textarea::placeholder,
html .form-control::placeholder, html .form-input::placeholder,
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder {
 color: #94a3b8 !important;
 -webkit-text-fill-color: #94a3b8 !important;
 opacity: 1 !important;
}
html input:focus, html textarea:focus, html select:focus,
html .form-control:focus, html .form-input:focus,
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus, html[data-theme="dark"] .form-control:focus {
 color: #0a2540 !important;
 background-color: #ffffff !important;
 background: #ffffff !important;
 border-color: #f5a623 !important;
 -webkit-text-fill-color: #0a2540 !important;
}
html input:disabled, html textarea:disabled, html select:disabled,
html .form-control:disabled, html .form-control[readonly],
html[data-theme="dark"] input:disabled, html[data-theme="dark"] textarea:disabled {
 color: #64748b !important;
 background-color: #f1f5f9 !important;
 background: #f1f5f9 !important;
 -webkit-text-fill-color: #64748b !important;
}
html input:-webkit-autofill, html input:-webkit-autofill:hover,
html input:-webkit-autofill:focus, html textarea:-webkit-autofill,
html select:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
 -webkit-text-fill-color: #1a2332 !important;
 caret-color: #f5a623 !important;
}
html select option {
 color: #1a2332 !important;
 background-color: #ffffff !important;
}
/* Pengecualian: header search di public_header.php sengaja text putih di
 rgba(255,255,255,.15) bg dalam navbar dark. Override balik untuk ID itu. */
html #orionSearchInput, html[data-theme="dark"] #orionSearchInput {
 color: #ffffff !important;
 background-color: rgba(255,255,255,.15) !important;
 background: rgba(255,255,255,.15) !important;
 -webkit-text-fill-color: #ffffff !important;
}
html #orionSearchInput::placeholder, html[data-theme="dark"] #orionSearchInput::placeholder {
 color: rgba(255,255,255,.65) !important;
 -webkit-text-fill-color: rgba(255,255,255,.65) !important;
}

/* ================================================================
 [MOBILE-RAPI FIX 2026-05-22] Anti horizontal scroll di mobile
 ================================================================
 User report: "Waktu buka di hp tampilan login gak rapih, mesti
 geser kanan baru kelihatan box captcha". Fix: pastikan tidak ada
 element yang overflow viewport width di mobile.
*/
@media (max-width: 768px) {
 html, body {
 overflow-x: hidden !important;
 max-width: 100vw !important;
 }
 .container, .container-narrow, .container-fluid,
 .section, .row, .grid-cards, main, section, article {
 max-width: 100% !important;
 overflow-x: hidden;
 }
 /* Form fields full width di mobile */
 .form-input, .form-textarea, .form-select, .form-control,
 input[type="text"], input[type="email"], input[type="password"],
 input[type="tel"], input[type="number"], input[type="search"],
 textarea, select {
 max-width: 100% !important;
 box-sizing: border-box !important;
 }
 /* Grid otomatis stack 1 kolom kalau awalnya 2+ kolom */
 .row.row-cols-md-2 > *, .row.row-cols-md-3 > *, .row.row-cols-md-4 > * {
 flex: 0 0 100% !important;
 max-width: 100% !important;
 }
 /* Tombol & badge tidak overflow */
 .btn-orion, .btn, .badge {
 max-width: 100%;
 word-wrap: break-word;
 }
 /* Card padding lebih kecil di mobile */
 .orion-card, .card-orion {
 padding: 16px !important;
 }
 /* Table responsive */
 .table-responsive, table {
 max-width: 100% !important;
 overflow-x: auto !important;
 display: block !important;
 }
 /* Image responsive */
 img, video, iframe {
 max-width: 100% !important;
 height: auto;
 }
}
@media (max-width: 480px) {
 .orion-card, .card-orion {
 padding: 12px !important;
 border-radius: 12px !important;
 }
 h1, .h1 { font-size: 1.6rem !important; }
 h2, .h2 { font-size: 1.35rem !important; }
 h3, .h3 { font-size: 1.15rem !important; }
}