/* =====================================================================
 * xen-theme.css — Tema GELAP + MERAH untuk semua page yang guna sidebar.php.
 * Aktif bila <html data-theme="dark"> (lalai). Tukar tema: butang ☀️/🌙 dalam sidebar.
 * Warna tegar yang tertinggal dibetulkan oleh xen-theme.js.
 * ===================================================================== */
html[data-theme=dark]{
    color-scheme:dark;
    --x-bg:#09090b; --x-s1:#131316; --x-s2:#1a1a1f; --x-s3:#232329;
    --x-line:rgba(255,255,255,.07); --x-line2:rgba(255,255,255,.12);
    --x-text:#f4f4f5; --x-muted:#a1a1aa; --x-dim:#71717a;
    --x-red:#ef4444; --x-red2:#dc2626; --x-red3:#991b1b; --x-redbg:rgba(239,68,68,.12);
    --x-grad:linear-gradient(135deg,#ef4444 0%,#b91c1c 55%,#7f1d1d 100%);
    /* pemboleh ubah yang digunakan oleh page-page sedia ada */
    --bg:var(--x-bg); --bg-body:var(--x-bg); --page:var(--x-bg); --bg-light:var(--x-s2);
    --card:var(--x-s1); --bg-card:var(--x-s1); --white:var(--x-s1); --surface:var(--x-s1);
    --text:var(--x-text); --text-main:var(--x-text); --text-muted:var(--x-muted); --muted:var(--x-muted);
    --border:var(--x-line); --line:var(--x-line);
    --primary:#ef4444; --primary-dark:#b91c1c; --primary-light:rgba(239,68,68,.14);
    --teal:#ef4444; --teal-dark:#fca5a5; --teal-soft:rgba(239,68,68,.12);
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.45);
    --sidebar-bg:#0c0c0f; --sidebar-hover:rgba(255,255,255,.06); --sidebar-active:#ef4444;
    --sidebar-text:#e4e4e7; --sidebar-text-muted:#71717a;
}
html[data-theme=dark] body{
    background:radial-gradient(1200px 520px at 70% -120px, rgba(153,27,27,.45), transparent 70%), var(--x-bg) !important;
    background-attachment:fixed !important;
    color:var(--x-text);
}
html[data-theme=dark] ::selection{background:rgba(239,68,68,.35)}
html[data-theme=dark] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#2a2a31;border-radius:9px;border:2px solid var(--x-bg)}
html[data-theme=dark] ::-webkit-scrollbar-track{background:transparent}

/* ---------- kerangka ---------- */
html[data-theme=dark] :is(.main-wrapper, .main-content, .page-content, .content, main, .main, .wrapper, .app, .layout){background:transparent !important}
html[data-theme=dark] :is(header.topbar, .topbar, .um-top, .settings-topbar){
    background:rgba(9,9,11,.72) !important; backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--x-line) !important; box-shadow:none !important; color:var(--x-text)}
html[data-theme=dark] .topbar .breadcrumb, html[data-theme=dark] .topbar-date{color:var(--x-muted) !important}
html[data-theme=dark] .topbar .breadcrumb a{color:#fca5a5 !important}
html[data-theme=dark] :is(h1,h2,h3,h4,h5,h6){color:#fff}
html[data-theme=dark] :is(.page-header, .page-title, .head) :is(h1,h2) > i:first-child{color:var(--x-red) !important}
html[data-theme=dark] :is(.page-header, .page-title, .head) p, html[data-theme=dark] .page-subtitle{color:var(--x-muted) !important}
html[data-theme=dark] a{color:#fca5a5}
html[data-theme=dark] hr{border-color:var(--x-line)}

/* ---------- kad ---------- */
html[data-theme=dark] :is(.card, .stat-card, .chart-card, .form-card, .table-card, .action-card, .filter-card, .user-card, .cm-card, .panel, .box, .stat, .day, .item, .empty-state){
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--x-s1) !important;
    border:1px solid var(--x-line) !important; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35) !important; color:var(--x-text)}
html[data-theme=dark] :is(.card, .stat-card){border-radius:20px !important}
html[data-theme=dark] :is(.card-header, .card-footer, .modal-header, .modal-footer){background:transparent !important; border-color:var(--x-line) !important}
html[data-theme=dark] :is(.card-title, .card-header h2, .card-header h3){color:#fff !important}
html[data-theme=dark] :is(.card-title, .card-header h2, .card-header h3) > i:first-child{background:var(--x-redbg) !important; color:#f87171 !important; border-radius:10px}
html[data-theme=dark] .stat-card .stat-icon{background:var(--x-redbg) !important; color:#f87171 !important}
html[data-theme=dark] :is(.stat-card .value, .stat-card .stat-value){color:#fff !important}
html[data-theme=dark] :is(.stat-card .label, .stat-card .stat-label, .stat-card .sub, .stat-card small){color:var(--x-muted) !important}
html[data-theme=dark] .stat-card:hover{border-color:rgba(239,68,68,.35) !important}

/* ---------- butang (pil merah) ---------- */
html[data-theme=dark] .btn{border-radius:999px !important}
html[data-theme=dark] :is(.btn-primary, .btn.primary, button[type=submit].btn, .btn-login){
    background:var(--x-grad) !important; border:0 !important; color:#fff !important; box-shadow:0 6px 18px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.18) !important}
html[data-theme=dark] :is(.btn-primary, .btn.primary):hover{filter:brightness(1.08)}
html[data-theme=dark] :is(.btn-outline, .btn-secondary, .btn-light, .btn-default, .btn:not([class*=btn-]):not(.primary):not(.ok):not(.no)){
    background:var(--x-s2) !important; border:1px solid var(--x-line2) !important; color:var(--x-text) !important}
html[data-theme=dark] :is(.btn-outline, .btn-secondary):hover{border-color:rgba(239,68,68,.55) !important; color:#fff !important}
html[data-theme=dark] :is(.btn-danger, .btn.no){background:rgba(239,68,68,.12) !important; border:1px solid rgba(239,68,68,.35) !important; color:#fca5a5 !important}
html[data-theme=dark] :is(.btn-success, .btn.ok){background:linear-gradient(135deg,#22c55e,#15803d) !important; border:0 !important; color:#fff !important}

/* ---------- borang ---------- */
html[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea, .form-control){
    background-color:var(--x-s2) !important; border:1px solid var(--x-line2) !important; color:var(--x-text) !important; border-radius:14px !important}
html[data-theme=dark] :is(input, select, textarea, .form-control):focus{border-color:rgba(239,68,68,.7) !important; box-shadow:0 0 0 4px rgba(239,68,68,.16) !important; background-color:#1e1e24 !important}
html[data-theme=dark] :is(input, textarea)::placeholder{color:var(--x-dim) !important}
html[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; -webkit-appearance:none; appearance:none; padding-right:36px !important}
html[data-theme=dark] select option{background:var(--x-s2); color:var(--x-text)}
html[data-theme=dark] input[type=checkbox], html[data-theme=dark] input[type=radio]{accent-color:#ef4444}
html[data-theme=dark] :is(.form-field > label, .form-group > label, .form-label, label){color:#d4d4d8}
html[data-theme=dark] :is(.form-field > label i, .form-group > label i){color:#f87171 !important}
html[data-theme=dark] input[type=date]::-webkit-calendar-picker-indicator, html[data-theme=dark] input[type=month]::-webkit-calendar-picker-indicator{filter:invert(.8)}
/* iPhone: ruangan tarikh/masa ikut lebar kotak (Safari beri lebar minimum sendiri & teks di tengah → terkeluar dari form) */
input:is([type=date],[type=month],[type=time],[type=datetime-local]){-webkit-appearance:none;appearance:none;box-sizing:border-box;display:block;width:100%;max-width:100%;min-width:0;min-height:2.6rem}
input:is([type=date],[type=month],[type=time],[type=datetime-local])::-webkit-date-and-time-value{text-align:left;margin:0}
.form-field,.form-group{min-width:0}

/* ---------- jadual ---------- */
html[data-theme=dark] table{color:var(--x-text); border-color:var(--x-line) !important}
html[data-theme=dark] :is(table, .table-wrap, .table-container, .table-responsive){background:transparent !important}
html[data-theme=dark] table :is(th, td){border-color:var(--x-line) !important}
html[data-theme=dark] table thead th, html[data-theme=dark] table tr.xm-hrow th{background:var(--x-s2) !important; color:var(--x-muted) !important}
html[data-theme=dark] table tbody tr{background:transparent !important}
html[data-theme=dark] table tbody tr:hover{background:rgba(255,255,255,.03) !important}
html[data-theme=dark] table tfoot :is(td, th){background:var(--x-s2) !important}

/* ---------- lencana, notis, modal ---------- */
html[data-theme=dark] :is(.alert, .notice, .info-box, .alert-box, .cm-notice){background:var(--x-s2) !important; color:#e4e4e7 !important; border:1px solid var(--x-line) !important}
html[data-theme=dark] :is(.alert-danger, .alert-error, .cm-error, .notice.err){background:rgba(239,68,68,.1) !important; color:#fca5a5 !important; box-shadow:inset 3px 0 0 #ef4444 !important}
html[data-theme=dark] .alert-success{background:rgba(34,197,94,.1) !important; color:#86efac !important; box-shadow:inset 3px 0 0 #22c55e !important}
html[data-theme=dark] .alert-warning{background:rgba(245,158,11,.1) !important; color:#fcd34d !important; box-shadow:inset 3px 0 0 #f59e0b !important}
html[data-theme=dark] .alert-info{background:rgba(59,130,246,.1) !important; color:#93c5fd !important; box-shadow:inset 3px 0 0 #3b82f6 !important}
html[data-theme=dark] :is(.modal-content, .modal-container, .modal-box, .modal-dialog){background:var(--x-s1) !important; border:1px solid var(--x-line2) !important; color:var(--x-text); box-shadow:0 30px 80px rgba(0,0,0,.6) !important; border-radius:22px !important}
html[data-theme=dark] .modal{background:rgba(0,0,0,.65) !important; backdrop-filter:blur(4px)}
html[data-theme=dark] :is(.modal-close, .close){color:var(--x-muted) !important}
html[data-theme=dark] code{background:var(--x-s3); color:#fca5a5}

/* ---------- sidebar ---------- */
html[data-theme=dark] .sidebar{background:linear-gradient(180deg,#0f0f12 0%,#0b0b0d 100%) !important; border-right:1px solid var(--x-line); box-shadow:none !important}
html[data-theme=dark] .sidebar-brand{border-bottom-color:var(--x-line) !important}
html[data-theme=dark] .sidebar-menu a{color:#d4d4d8}
html[data-theme=dark] .sidebar-menu a i{color:#71717a}
html[data-theme=dark] .sidebar-menu a:hover{background:rgba(255,255,255,.05)}
html[data-theme=dark] .sidebar-menu a.active{background:var(--x-grad) !important; color:#fff !important; box-shadow:0 8px 20px rgba(220,38,38,.35) !important}
html[data-theme=dark] .sidebar-menu a.active i{color:#fff}
html[data-theme=dark] .sidebar-footer{border-top-color:var(--x-line) !important}

/* ---------- nav bawah & menu mobile ---------- */
html[data-theme=dark] .mnav{background:rgba(14,14,17,.92) !important; backdrop-filter:blur(16px); border-top:1px solid var(--x-line) !important; box-shadow:0 -10px 30px rgba(0,0,0,.5) !important}
html[data-theme=dark] .mnav-i{color:#71717a}
html[data-theme=dark] .mnav-i.on{color:#f87171}
html[data-theme=dark] .mnav-menu{background:var(--x-grad) !important; border-color:#0e0e11 !important; box-shadow:0 8px 22px rgba(220,38,38,.5) !important}
html[data-theme=dark] .xm-sh{background:#0e0e11 !important; color:var(--x-text) !important}
html[data-theme=dark] .xm-grab{background:#3f3f46}
html[data-theme=dark] .xm-me{background:var(--x-grad) !important}
html[data-theme=dark] .xm-h{color:#71717a}
html[data-theme=dark] .xm-g a{background:var(--x-s1) !important; border-color:var(--x-line) !important; color:#e4e4e7 !important}
html[data-theme=dark] .xm-g a.on{background:var(--x-grad) !important; border-color:transparent !important; color:#fff !important}
html[data-theme=dark] table.xm-cards tr{background:var(--x-s1) !important; border-color:var(--x-line) !important; box-shadow:0 8px 24px rgba(0,0,0,.35) !important}
html[data-theme=dark] table.xm-cards td, html[data-theme=dark] table.xm-cards tbody th{border-bottom-color:var(--x-line) !important}
html[data-theme=dark] table.xm-cards td::before{color:var(--x-dim) !important}
html[data-theme=dark] table.xm-cards td.xm-title{color:#fff !important}

/* ---------- elemen boleh klik yang dibetulkan oleh xen-theme.js (cip, tab, label) ---------- */
html[data-theme=dark] .xt-s1{background-color:#17171b !important}
html[data-theme=dark] .xt-s2{background-color:#1f1f25 !important}
html[data-theme=dark] .xt-tx{color:#e4e4e7 !important}
html[data-theme=dark] .xt-bd{border-color:rgba(255,255,255,.13) !important}
html[data-theme=dark] .xt-rb{border-color:#ef4444 !important}
html[data-theme=dark] :is(a, button, label).xt-s1:hover, html[data-theme=dark] :is(a, button, label).xt-s2:hover{background-color:#26262d !important}
html[data-theme=dark] :is(input:checked + :is(.xt-s1, .xt-s2, .xt-tx), :is(.xt-s1, .xt-s2, .xt-tx):has(> input:checked), :is(.xt-s1, .xt-s2, .xt-tx):is(.active, .on, .selected, .is-active, [aria-selected=true], [aria-pressed=true])){
    background:var(--x-grad) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 4px 14px rgba(220,38,38,.3) !important}
/* cip pilihan yang biasa dalam page */
html[data-theme=dark] .weekly-off-option span{background:var(--x-s2) !important; border-color:var(--x-line2) !important; color:#d4d4d8 !important}
html[data-theme=dark] .weekly-off-option input:checked + span{background:var(--x-grad) !important; border-color:transparent !important; color:#fff !important}
html[data-theme=dark] .role-check{background:var(--x-s2) !important; border-color:var(--x-line2) !important; color:#d4d4d8 !important}
html[data-theme=dark] .role-check::before{background:transparent; border-color:#52525b}
html[data-theme=dark] .role-check:has(input:checked){background:var(--x-grad) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 4px 14px rgba(220,38,38,.3) !important}

/* ---------- butang tukar tema ---------- */
.xt-toggle{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);color:inherit;font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer;justify-content:center}
.xt-toggle:hover{background:rgba(255,255,255,.08)}
.xt-ic::before{content:"🌙  Tukar ke tema gelap"}
html[data-theme=dark] .xt-ic::before{content:"☀️  Tukar ke tema cerah"}
.xm-sh .xt-toggle{background:#fff;border-color:#e2e8f0;padding:11px 12px;font-size:13px}
html[data-theme=dark] .xm-sh .xt-toggle{background:#17171b;border-color:rgba(255,255,255,.1)}

/* =====================================================================
 * GAYA KACA (glassmorphism) — panel lutsinar + blur atas cahaya merah.
 * Sidebar desktop jadi panel terapung bersudut bulat.
 * Telefon: blur dimatikan pada kad (ringan untuk iPhone lama), kekal pada bar atas/bawah.
 * ===================================================================== */
html[data-theme=dark]{
    --x-glass:rgba(255,255,255,.045); --x-glass2:rgba(255,255,255,.07);
    --x-glass-line:rgba(255,255,255,.09); --x-glass-hi:rgba(255,255,255,.14);
    --x-blur:saturate(1.5) blur(22px);
}
html[data-theme=dark] body{
    background:
        radial-gradient(900px 600px at 85% -10%, rgba(220,38,38,.38), transparent 65%),
        radial-gradient(700px 520px at -5% 35%, rgba(153,27,27,.32), transparent 70%),
        radial-gradient(800px 500px at 60% 115%, rgba(127,29,29,.30), transparent 70%),
        #0a0709 !important;
    background-attachment:fixed !important;
}
html[data-theme=dark] :is(.card, .stat-card, .chart-card, .form-card, .table-card, .action-card, .filter-card, .user-card, .cm-card, .panel, .box){
    background:linear-gradient(160deg, var(--x-glass2), var(--x-glass) 45%, rgba(255,255,255,.02)) !important;
    -webkit-backdrop-filter:var(--x-blur); backdrop-filter:var(--x-blur);
    border:1px solid var(--x-glass-line) !important;
    box-shadow:inset 0 1px 0 var(--x-glass-hi), 0 20px 50px rgba(0,0,0,.35) !important;
    border-radius:24px !important;
}
html[data-theme=dark] :is(.modal-content, .modal-container, .modal-box, .modal-dialog){
    background:rgba(24,18,20,.82) !important; -webkit-backdrop-filter:var(--x-blur); backdrop-filter:var(--x-blur); border-radius:26px !important}
html[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea, .form-control){
    background-color:rgba(255,255,255,.05) !important; border-color:var(--x-glass-line) !important}
html[data-theme=dark] select option{background:#1a1416}
html[data-theme=dark] :is(.btn-outline, .btn-secondary, .btn-light, .btn-default){background:rgba(255,255,255,.06) !important; border-color:var(--x-glass-line) !important}
html[data-theme=dark] table thead th, html[data-theme=dark] table tr.xm-hrow th{background:rgba(255,255,255,.04) !important}
html[data-theme=dark] :is(header.topbar, .topbar, .um-top, .settings-topbar){background:rgba(12,8,10,.45) !important; -webkit-backdrop-filter:var(--x-blur); backdrop-filter:var(--x-blur)}

/* sidebar: panel kaca terapung (desktop) */
html[data-theme=dark] .sidebar{
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) , rgba(14,10,12,.55) !important;
    -webkit-backdrop-filter:var(--x-blur); backdrop-filter:var(--x-blur);
    border:1px solid var(--x-glass-line) !important;
    box-shadow:inset 0 1px 0 var(--x-glass-hi), 0 20px 50px rgba(0,0,0,.45) !important}
@media(min-width:1025px){
    html[data-theme=dark] .sidebar{top:14px; bottom:14px; left:14px; width:232px; min-width:232px; max-width:232px; border-radius:26px}
    html[data-theme=dark] .sidebar-menu{scrollbar-width:none}
    html[data-theme=dark] .sidebar-menu::-webkit-scrollbar{display:none}
}
html[data-theme=dark] .sidebar-brand, html[data-theme=dark] .sidebar-footer{border-color:var(--x-glass-line) !important}
html[data-theme=dark] .sidebar-menu a{border-radius:14px}
html[data-theme=dark] .sidebar-menu a:hover{background:rgba(255,255,255,.07)}
html[data-theme=dark] .sidebar-menu .submenu{background:rgba(0,0,0,.2) !important; border-radius:14px}
html[data-theme=dark] .mnav{background:rgba(14,10,12,.6) !important; -webkit-backdrop-filter:var(--x-blur); backdrop-filter:var(--x-blur)}
html[data-theme=dark] .xm-sh{background:rgba(16,11,13,.88) !important; -webkit-backdrop-filter:var(--x-blur); backdrop-filter:var(--x-blur)}
html[data-theme=dark] :is(.xm-g a, table.xm-cards tr){background:rgba(255,255,255,.05) !important}

/* telefon: tiada blur pada kad (jimat bateri & lancar), latar sedikit lebih pekat */
@media(max-width:768px){
    html[data-theme=dark] :is(.card, .stat-card, .chart-card, .form-card, .table-card, .action-card, .filter-card, .user-card, .cm-card, .panel, .box){
        -webkit-backdrop-filter:none; backdrop-filter:none;
        background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.035)), rgba(18,12,14,.6) !important;
        border-radius:20px !important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    html[data-theme=dark] :is(.card, .stat-card, .chart-card, .sidebar){background-color:rgba(22,16,18,.92) !important}
}

@media print{
    html[data-theme=dark] body{background:#fff !important;color:#000}
}