/* STC XXI Technical Report - tema halaman dalam (lapisan terakhir), tiga mode:
   1. "glass" (data-theme="glass"): gaya video referensi - panel kaca buram di atas foto interior hangat.
   2. "light" (data-theme="light"): terang dengan latar putih.
   3. "dark"  (data-theme="dark"):  gelap hijau lumut, seperti bawaan aplikasi.
   Bentuk sidebar dan navigasi bawah tidak diubah; hanya warna, latar, dan gaya kaca.
   Hanya menyentuh elemen di dalam #app, #modal, #nsheet, #npanel, dan #toast; halaman login tidak diubah.
   Hapus baris <link> style-harmoni.css di index.html untuk kembali ke tampilan sebelumnya. */

/* ---------- 1. Token per mode ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060c09; --card:#0d1612; --card2:#111d17; --bd:#1b2b22; --bd2:#2a3f33;
  --ink:#eef4f0; --txt:#cfdcd4; --mut:#8a9f94; --ph:#5f7569; --lbl:#b2c5ba;
  --g50:#101c16; --g100:#16261d; --g200:#2a4a39; --row2:#0f1a14; --dis:#121f18;
  --gt:#b5e0c9; --gt2:#6fd0a0;
  --gold:#b8913f; --gold-hi:#e1c476; --gold-lo:#e1c476; --gold-50:#221d0d; --gold-100:#5e4b1b;
  --red:#ff8a80; --red-bg:#361512; --ok:#6fd0a0; --ok-bg:#10291c; --warn:#f0c15c; --warn-bg:#2f2406;
  --info:#8ab8f0; --info-bg:#10243c;
  --sh1:0 1px 2px #000a; --sh2:0 24px 60px #000c; --rd-shadow:0 1px 2px #0000,0 14px 36px -16px #000c;
  --card-blur:none;
  --side-bg:linear-gradient(180deg,#0b1f1a 0%,#06140f 100%); --side-bd:#1b2b22; --side-fg:#eef4f0; --side-mut:#8a9f94;
  --side-input:rgba(255,255,255,.06); --side-act:linear-gradient(90deg,rgba(237,203,122,.16),rgba(237,203,122,.04));
  --head-bg:rgba(6,12,9,.94); --head-fg:#eef4f0; --head-bd:#1b2b22; --head-btn:rgba(255,255,255,.06);
  --tabs-bg:rgba(6,12,9,.96); --tabs-bd:#1b2b22; --tabs-fg:#8a9f94; --tabs-on:#edcb7a;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff; --card:#ffffff; --card2:#f7f9f8; --bd:#e3eae6; --bd2:#cfd9d3;
  --ink:#0b1c14; --txt:#1b2d24; --mut:#5b6d63; --ph:#93a39a; --lbl:#2c4137;
  --g50:#f4f7f5; --g100:#e7eee9; --g200:#cfe0d6; --row2:#f8faf9; --dis:#f1f4f2;
  --gt:#0b1c14; --gt2:#9c7430;
  --gold:#9c7430; --gold-hi:#e8c77a; --gold-lo:#6e4f16; --gold-50:#fbf6e8; --gold-100:#efdfae;
  --red:#b3261e; --red-bg:#fdeceb; --ok:#17703f; --ok-bg:#e1f2e7; --warn:#8a5a00; --warn-bg:#fdf0cf;
  --info:#1a5aa5; --info-bg:#e3edfa;
  --sh1:0 1px 2px #0b1c1410; --sh2:0 22px 50px #0b1c1426; --rd-shadow:0 1px 2px #0b1c140d,0 10px 26px -16px #0b1c1426;
  --card-blur:none;
  --side-bg:#ffffff; --side-bd:#e3eae6; --side-fg:#0b1c14; --side-mut:#5b6d63;
  --side-input:#f4f7f5; --side-act:linear-gradient(90deg,#fbf1d6,#fdf9ee);
  --head-bg:#ffffff; --head-fg:#0b1c14; --head-bd:#e3eae6; --head-btn:#f4f7f5;
  --tabs-bg:#ffffff; --tabs-bd:#e3eae6; --tabs-fg:#5b6d63; --tabs-on:#9c7430;
}
:root[data-theme="glass"]{
  color-scheme:dark;
  --bg:rgba(18,14,10,.30); --card:rgba(255,255,255,.14); --card2:rgba(255,255,255,.10);
  --bd:rgba(255,255,255,.26); --bd2:rgba(255,255,255,.20);
  --ink:#ffffff; --txt:rgba(255,255,255,.92); --mut:rgba(255,255,255,.70); --ph:rgba(255,255,255,.50); --lbl:rgba(255,255,255,.88);
  --g50:rgba(255,255,255,.08); --g100:rgba(255,255,255,.14); --g200:rgba(255,255,255,.22); --row2:rgba(255,255,255,.05); --dis:rgba(255,255,255,.04);
  --gt:#1b1408; --gt2:#edcb7a;
  --gold:#edcb7a; --gold-hi:#f6dd98; --gold-lo:#f0d28a; --gold-50:rgba(237,203,122,.14); --gold-100:rgba(237,203,122,.32);
  --red:#ffb3ab; --red-bg:rgba(255,120,110,.18); --ok:#9fe6bd; --ok-bg:rgba(111,208,160,.18); --warn:#ffd98a; --warn-bg:rgba(240,193,92,.18);
  --info:#b5d6ff; --info-bg:rgba(138,184,240,.18);
  --sh1:0 1px 2px rgba(0,0,0,.2); --sh2:0 24px 60px rgba(0,0,0,.30);
  --rd-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 18px 40px -18px rgba(0,0,0,.45);
  --card-blur:blur(18px) saturate(1.25);
  --side-bg:rgba(18,14,10,.40); --side-bd:rgba(255,255,255,.16); --side-fg:#f6f1e8; --side-mut:rgba(246,241,232,.66);
  --side-input:rgba(255,255,255,.08); --side-act:linear-gradient(90deg,rgba(237,203,122,.24),rgba(237,203,122,.06));
  --head-bg:rgba(18,14,10,.34); --head-fg:#f6f1e8; --head-bd:rgba(255,255,255,.16); --head-btn:rgba(255,255,255,.10);
  --tabs-bg:rgba(18,14,10,.52); --tabs-bd:rgba(255,255,255,.16); --tabs-fg:rgba(246,241,232,.72); --tabs-on:#edcb7a;
}

/* ---------- 2. Latar halaman ---------- */
:root[data-theme="dark"] body:has(#app:not(.hidden)){
  background:radial-gradient(1200px 520px at 80% -10%,#0f2a1d 0,transparent 60%),var(--bg);
  background-attachment:fixed;
}
:root[data-theme="light"] body:has(#app:not(.hidden)){background:#ffffff}
html[data-theme="glass"]{background:#120e0a}
:root[data-theme="glass"] body:has(#app:not(.hidden)){background:transparent}
:root[data-theme="glass"] body:has(#app:not(.hidden))::before{
  content:"";position:fixed;inset:-24px;z-index:-1;pointer-events:none;
  background:url("img/lobby-xxi.webp") center/cover no-repeat;
  filter:blur(10px) brightness(.78) saturate(1.05);transform:scale(1.02);
}

/* ---------- 3. Tipografi ---------- */
:root[data-theme] #app h1,:root[data-theme] #app h2,:root[data-theme] #app h3,
:root[data-theme] #modal h2,:root[data-theme] #modal h3,:root[data-theme] #nsheet h2,
:root[data-theme] #ptitle{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
:root[data-theme] #app #view{color:var(--txt)}

/* ---------- 4. Sidebar, navigasi, dan header (bentuk tetap, warna per mode) ---------- */
:root[data-theme] #app #side{background:var(--side-bg) !important;border-right:1px solid var(--side-bd) !important;color:var(--side-fg)}
:root[data-theme="glass"] #app #side,:root[data-theme="glass"] #app #main>header{-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
:root[data-theme] #app #side .brand b{color:var(--side-fg)}
:root[data-theme] #app #side .brand small{color:var(--side-mut)}
:root[data-theme] #app #side .ssrch{background:var(--side-input) !important;border:1px solid var(--side-bd) !important;border-radius:14px !important}
:root[data-theme] #app #side .ssrch input{background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--side-fg) !important;outline:none}
:root[data-theme] #app #side .ssrch input::placeholder,:root[data-theme] #app #side .ssrch svg{color:var(--side-mut) !important;stroke:var(--side-mut)}
:root[data-theme] #app #nav a,:root[data-theme] #app #nav button{color:var(--side-fg);text-decoration:none;border-radius:12px}
:root[data-theme] #app #nav a:hover,:root[data-theme] #app #nav button:hover{background:var(--g100) !important;color:var(--side-fg)}
:root[data-theme] #app #nav .active,:root[data-theme] #app #nav a.on,:root[data-theme] #app #nav [aria-current=page]{
  background:var(--side-act) !important;color:var(--side-fg) !important;box-shadow:inset 3px 0 0 var(--gold-hi);
}
:root[data-theme] #app #nav h6,:root[data-theme] #app #nav .nsec,:root[data-theme] #app #nav .gh{color:var(--gold-lo) !important;letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700}
:root[data-theme] #app #main>header{background:var(--head-bg) !important;color:var(--head-fg);border-bottom:1px solid var(--head-bd) !important}
:root[data-theme] #app #main>header #ptitle{color:var(--head-fg) !important;font-size:22px}
:root[data-theme] #app #main>header #psub,:root[data-theme] #app #main>header #clock,:root[data-theme] #app #main>header #conn{color:var(--side-mut) !important}
:root[data-theme] #app #main>header .thm,:root[data-theme] #app #main>header .bell,:root[data-theme] #app #main>header #uhtg{
  background:var(--head-btn) !important;color:var(--head-fg) !important;border:1px solid var(--head-bd) !important;
}
:root[data-theme] #app #main>header .uh-who b{color:var(--head-fg)}
:root[data-theme] #app #main>header .badge{background:var(--gold-50);color:var(--gold-lo)}

/* ---------- 5. Konten: kartu, tombol, input, tabel ---------- */
:root[data-theme] #app .dx-top small,:root[data-theme] #app .dx-date{
  color:var(--gold-lo);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
:root[data-theme="light"] #app .dx-top small,:root[data-theme="light"] #app .dx-date{color:var(--gold)}
:root[data-theme] #app .dx-top h1{font-size:clamp(28px,3.4vw,44px);line-height:1.08}
:root[data-theme] #app .sh h2{font-size:clamp(20px,2.2vw,26px)}

:root[data-theme] #app .card,:root[data-theme] #app .dq,:root[data-theme] #app .dx-panel,
:root[data-theme] #app .dx-studio,:root[data-theme] #app .dx-q,:root[data-theme] #app .dx-k,
:root[data-theme] #app .dact,:root[data-theme] #app .dc-b,:root[data-theme] #app .ds-list{
  background:var(--card) !important;border:1px solid var(--bd) !important;border-radius:18px !important;
  box-shadow:var(--rd-shadow) !important;color:var(--txt);
  -webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme] #app .card:hover,:root[data-theme] #app .dx-q:hover,:root[data-theme] #app .dx-k:hover{border-color:var(--gold) !important}
:root[data-theme] #app .dx-q,:root[data-theme] #app .dx-k{transition:border-color .2s ease,transform .2s ease}
:root[data-theme] #app .dx-q:hover,:root[data-theme] #app .dx-k:hover{transform:translateY(-1px)}
:root[data-theme] #app .dx-q > i{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--gold-50) !important;color:var(--gt) !important;border:1px solid var(--gold-100) !important;
}
:root[data-theme="dark"] #app .dx-q > i{color:#e1c476 !important}
:root[data-theme] #app .dx-q > i .ic,:root[data-theme] #app .dx-q > i svg{stroke:currentColor !important;color:inherit !important}
:root[data-theme] #app .dx-ki{background:var(--gold-50);color:var(--gold-lo);border-radius:12px;border:1px solid var(--gold-100)}

:root[data-theme] #app .btn:not(.sec),:root[data-theme] #modal .btn:not(.sec),:root[data-theme] #nsheet .btn:not(.sec){
  background:linear-gradient(135deg,#edcb7a,#c89b48) !important;color:#03110e !important;border:0 !important;
  border-radius:14px !important;font-weight:700;box-shadow:0 8px 20px rgba(200,155,72,.28);
}
:root[data-theme] #app .btn:not(.sec):not(:disabled):hover,:root[data-theme] #modal .btn:not(.sec):hover{
  background:linear-gradient(135deg,#f3d88f,#d4a85a) !important;transform:translateY(-1px);
}
:root[data-theme] #app .btn.sec,:root[data-theme] #modal .btn.sec,:root[data-theme] #nsheet .btn.sec{
  background:var(--card2) !important;color:var(--ink) !important;border:1px solid var(--bd2) !important;border-radius:14px !important;font-weight:600;
}
:root[data-theme] #app .btn.sec:hover,:root[data-theme] #modal .btn.sec:hover{border-color:var(--gold) !important;color:var(--gold-hi) !important}
:root[data-theme="light"] #app .btn.sec:hover,:root[data-theme="light"] #modal .btn.sec:hover{color:var(--gold-lo) !important}
:root[data-theme] #app .btn:disabled{opacity:.5;box-shadow:none}

:root[data-theme] #app input:not([type=checkbox]):not([type=radio]):not([type=search]),
:root[data-theme] #app select,:root[data-theme] #app textarea,
:root[data-theme] #modal input:not([type=checkbox]):not([type=radio]),
:root[data-theme] #modal select,:root[data-theme] #modal textarea{
  background:var(--card2) !important;color:var(--ink) !important;border:1px solid var(--bd2) !important;border-radius:12px !important;
}
:root[data-theme] #app input:focus,:root[data-theme] #app select:focus,:root[data-theme] #app textarea:focus,
:root[data-theme] #modal input:focus,:root[data-theme] #modal select:focus,:root[data-theme] #modal textarea:focus{
  outline:2px solid var(--gold-hi);outline-offset:1px;border-color:var(--gold) !important;
}
:root[data-theme] #app label,:root[data-theme] #modal label{color:var(--lbl)}

:root[data-theme] #app .dsl-tabs button,:root[data-theme] #app .dsr-tabs button,:root[data-theme] #app .chips button{
  border-radius:999px;border:1px solid var(--bd2);background:var(--card);color:var(--txt);font-weight:600;
}
:root[data-theme] #app .dsl-tabs button.on,:root[data-theme] #app .dsr-tabs button.on,:root[data-theme] #app .chips button.on{
  background:linear-gradient(135deg,#edcb7a,#c89b48) !important;color:#03110e !important;border-color:transparent !important;
}
:root[data-theme] #app .dsl-tabs button.on *,:root[data-theme] #app .dsr-tabs button.on *{color:#03110e !important}
:root[data-theme] #app .badge{border-radius:999px;font-weight:700}
:root[data-theme] #app .badge:not([class*="st-"]){background:var(--gold-50);color:var(--gold-lo);border:1px solid var(--gold-100)}

:root[data-theme] #app table{border-collapse:separate;border-spacing:0}
:root[data-theme] #app th{background:var(--g50);color:var(--mut);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
:root[data-theme] #app td,:root[data-theme] #app th{border-bottom:1px solid var(--bd)}
:root[data-theme] #app tbody tr:hover td{background:var(--row2)}

/* ---------- 6. Pencarian & status beranda ---------- */
:root[data-theme] #app .dsr-b{
  background:var(--card) !important;border:1px solid var(--bd2) !important;border-radius:18px !important;box-shadow:var(--rd-shadow);
  -webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme] #app .dsr-b:focus-within{border-color:var(--gold) !important}
:root[data-theme] #app .dsr-b input:not([type=checkbox]):not([type=radio]):not([type=search]):not([type=button]){
  background:transparent !important;border:0 !important;box-shadow:none !important;outline:none !important;color:var(--ink) !important;
}
:root[data-theme] #app .dsr-b input::placeholder{color:var(--ph) !important}
:root[data-theme] #app .dx-top .badge,:root[data-theme] #app .dx-top [class*=status]{
  background:var(--card) !important;color:var(--txt) !important;border:1px solid var(--bd2) !important;border-radius:999px !important;
  box-shadow:var(--sh1);font-weight:600;
}

/* ---------- 7. Modal, panel notifikasi, sheet buat laporan, toast ---------- */
:root[data-theme] #modal .mbox,:root[data-theme] #npanel,:root[data-theme] #nsheet .nsh-box{
  background:var(--card) !important;border:1px solid var(--bd) !important;border-radius:22px !important;box-shadow:var(--sh2) !important;color:var(--txt);
  -webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme] #modal .mbox h2,:root[data-theme] #nsheet .nsh-box h2{font-size:24px}
:root[data-theme] #toast{
  background:var(--card) !important;color:var(--ink) !important;border:1px solid var(--gold-100) !important;border-radius:14px !important;
  box-shadow:var(--sh2);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme="dark"] #toast{background:#060c09 !important;color:#eef4f0 !important}

/* ---------- 8. Navigasi bawah (HP) - bentuk tetap ---------- */
@media (max-width:768px){
  :root[data-theme] #app #tabs{background:var(--tabs-bg) !important;border-top:1px solid var(--tabs-bd) !important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  :root[data-theme] #app #tabs button:not(.pl),:root[data-theme] #app #tabs a:not(.pl){color:var(--tabs-fg)}
  :root[data-theme] #app #tabs .on:not(.pl),:root[data-theme] #app #tabs [aria-current=page]:not(.pl),:root[data-theme] #app #tabs .active:not(.pl){color:var(--tabs-on) !important}
}

/* ---------- 8b. Slide sorotan (beranda): kecil, minimalis, tanpa teks terpotong ---------- */
:root[data-theme] #app .dsl-w .sh{margin-bottom:10px}
:root[data-theme] #app .dsl-s::after{content:none !important;display:none !important}
:root[data-theme] #app .dsl-s{
  height:auto !important;min-height:116px !important;padding:16px 50px 30px 50px !important;gap:0;align-items:center;
  background:var(--card) !important;border:1px solid var(--bd);border-radius:16px;box-shadow:var(--rd-shadow);overflow:hidden;
}
:root[data-theme="dark"] #app .dsl-s{background:linear-gradient(180deg,#0e1d16,#0a1511) !important}
:root[data-theme] #app .dsl-s:hover{border-color:var(--gold)}
/* Slide utama (sc-a): latar foto auditorium dengan gradasi gelap di kiri agar teks terbaca */
:root[data-theme] #app .dsl-s.sc-a::before{
  content:"" !important;display:block !important;position:absolute !important;inset:0 !important;width:auto !important;height:auto !important;
  background:
    linear-gradient(90deg,rgba(6,12,9,.94) 0%,rgba(6,12,9,.78) 42%,rgba(6,12,9,.28) 80%,rgba(6,12,9,.10) 100%),
    url("img/auditorium.jpg") center 92%/cover no-repeat !important;
  z-index:0 !important;pointer-events:none;border-radius:inherit;
}
:root[data-theme] #app .dsl-s.sc-a .dsl-im{display:none !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x{padding-right:0 !important;max-width:min(62%,560px) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>small{color:#edcb7a !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>b{color:#ffffff !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>span{color:rgba(255,255,255,.84) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x{text-shadow:0 1px 10px rgba(0,0,0,.45)}
:root[data-theme] #app .dsl-s.sc-a .dsl-x{padding-right:0}
/* Teks: tidak dipotong, tidak ada elipsis */
:root[data-theme] #app .dsl-x{order:1;padding:0;min-width:0;flex:1;position:relative;z-index:1;max-width:none !important}
:root[data-theme] #app .dsl-x>small{display:block;font-size:10.5px !important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lo) !important;margin:0 0 6px;text-shadow:none !important;line-height:1.3}
:root[data-theme] #app .dsl-x>b{display:block;font-family:var(--serif) !important;font-size:20px !important;font-weight:600 !important;line-height:1.25 !important;color:var(--ink) !important;text-shadow:none !important;max-width:none !important;-webkit-line-clamp:unset !important;overflow:visible !important;display:block !important}
:root[data-theme] #app .dsl-x>span{display:block;margin-top:6px;font-size:12.5px !important;line-height:1.5 !important;color:var(--mut) !important;text-shadow:none !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;max-width:none !important;-webkit-line-clamp:unset !important;-webkit-box-orient:horizontal !important;display:block !important}
:root[data-theme] #app .dsl-s .kbl{font-size:12.5px !important;color:var(--mut) !important}
:root[data-theme] #app .dsl-s .kbh{font-size:10.5px !important}
:root[data-theme] #app .dsl-s.kb .kbg{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 14px;margin-top:4px}
:root[data-theme] #app .dsl-s.kb .kbc{padding:0 !important;margin:0 !important}
:root[data-theme] #app .dsl-s.kb .kbc em{display:block;font-style:normal;font-size:11px !important;font-weight:700;color:var(--gold-lo);letter-spacing:.04em}
:root[data-theme] #app .dsl-s.kb .kbc p{margin:2px 0 0 !important;font-size:12px !important;line-height:1.45 !important;color:var(--mut) !important;display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important}
:root[data-theme] #app .dsl-s.kb .kbh{display:none !important}
:root[data-theme] #app .dsl-s.kb .kbl{display:block;margin-top:2px}
:root[data-theme] #app .dsl-art{display:none}
:root[data-theme] #app .dsl-b{width:28px;height:28px;min-height:28px;font-size:16px;background:rgba(6,12,9,.55);border:1px solid rgba(237,203,122,.35);color:#fff;z-index:2}
:root[data-theme] #app .dsl-b.p{left:10px}
:root[data-theme] #app .dsl-b.n{right:10px}
:root[data-theme] #app .dsl-d{bottom:9px;padding:0 60px;gap:5px}
:root[data-theme] #app .dsl-d button{width:6px;height:6px;background:rgba(255,255,255,.35)}
:root[data-theme] #app .dsl-d button.on{width:16px;background:#edcb7a}
@media (max-width:600px){
  :root[data-theme] #app .dsl-s{min-height:0 !important;padding:14px 40px 28px 40px !important}
  :root[data-theme] #app .dsl-x>b{font-size:17px !important}
  :root[data-theme] #app .dsl-x>span{font-size:12px !important}
  :root[data-theme] #app .dsl-s.sc-a .dsl-x{max-width:none !important}
  :root[data-theme] #app .dsl-b.p{left:6px}
  :root[data-theme] #app .dsl-b.n{right:6px}
}

/* ---------- 9. Fokus & gerak ---------- */
:root[data-theme] #app :focus-visible,:root[data-theme] #modal :focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  :root[data-theme] #app *{transition:none !important;animation:none !important}
}