/* =====================================================================================
   TEMA: Skeuomorphism + Modern Glassmorphism, dengan mode Terang / Gelap
   Dimuat SETELAH style.css / admin.css (lihat templates/theme_head.php), jadi hanya mengubah
   TAMPILAN (warna, bayangan, blur) — tidak mengubah ukuran/tata letak yang sudah ada.

   Ide desain:
   - Glass     : permukaan kartu/panel/modal translus + backdrop-filter blur + garis tepi tipis terang.
   - Skeuo     : tombol & ikon bertekstur (gradasi, sorot cahaya di tepi atas, bayangan bawah) yang
                 "masuk" saat ditekan; kolom isian tampak cekung (inset shadow).
   - Latar     : gradasi lembut + blob warna tetap di belakang, supaya efek kaca terlihat.
   - Mode      : atribut data-theme="light|dark" pada <html>; semua warna lewat variabel CSS.
   ===================================================================================== */

:root,
:root[data-theme="light"]{
  color-scheme: light;
  --text:#1d2c37;
  --dark:#1d2c37;
  --muted:#5f7280;
  --bg:#e4eaf0;
  --bg-blob-1:rgba(30,194,166,.38);
  --bg-blob-2:rgba(132,94,194,.30);
  --bg-blob-3:rgba(59,130,246,.22);

  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.78);
  --card-bg:var(--glass);
  --glass-border:rgba(255,255,255,.75);
  --glass-edge:rgba(20,50,70,.10);
  --surface-solid:#f3f6f9;
  --surface-2:#e8edf2;
  --border:rgba(20,50,70,.13);
  --row-line:rgba(20,50,70,.08);

  --hi:rgba(255,255,255,.85);           /* sorot cahaya tepi atas */
  --lo:rgba(10,30,45,.16);              /* bayangan tepi bawah */
  --shadow-card:0 1px 0 var(--hi) inset, 0 -1px 0 rgba(20,50,70,.05) inset, 0 14px 30px -14px rgba(20,60,80,.42), 0 3px 8px -3px rgba(20,60,80,.16);
  --shadow-pop:0 22px 50px -16px rgba(15,40,60,.55);
  --inset:inset 0 2px 5px rgba(20,50,70,.18), inset 0 -1px 0 rgba(255,255,255,.8);

  --teal-1:#0f9d8a;
  --teal-2:#25cdb0;
  --accent:#7c55c0;
  --btn-primary:linear-gradient(180deg,#38d8bb 0%,#12a894 55%,#0c8d7c 100%);
  --btn-accent:linear-gradient(180deg,#a283dc 0%,#7c55c0 55%,#6540a3 100%);
  --btn-danger:linear-gradient(180deg,#f87171 0%,#ef4444 55%,#c92f2f 100%);
  --btn-soft:linear-gradient(180deg,#ffffff 0%,#e9eef3 100%);

  --tint-teal:rgba(18,168,148,.16);
  --tint-purple:rgba(132,94,194,.17);
  --tint-orange:rgba(232,121,47,.17);
  --tint-blue:rgba(47,111,232,.16);
  --note-bg:rgba(245,158,11,.16); --note-bd:rgba(245,158,11,.38); --note-tx:#7a5300;
  --ok-bg:rgba(34,197,94,.17);  --ok-tx:#136a35;
  --err-bg:rgba(239,68,68,.15); --err-tx:#a61d1d;
  --sel-bg:rgba(132,94,194,.14);
  --hover-bg:rgba(18,168,148,.12);
  --sidebar-1:#3f6b2e; --sidebar-2:#5d8a3f;
  --bar-theme:#12a894;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --text:#e5edf2;
  --dark:#e5edf2;
  --muted:#9aabb7;
  --bg:#0b1218;
  --bg-blob-1:rgba(18,168,148,.30);
  --bg-blob-2:rgba(132,94,194,.28);
  --bg-blob-3:rgba(59,130,246,.18);

  --glass:rgba(28,40,50,.58);
  --glass-strong:rgba(34,48,60,.82);
  --card-bg:var(--glass);
  --glass-border:rgba(255,255,255,.10);
  --glass-edge:rgba(0,0,0,.45);
  --surface-solid:#16212a;
  --surface-2:#1d2a35;
  --border:rgba(255,255,255,.13);
  --row-line:rgba(255,255,255,.08);

  --hi:rgba(255,255,255,.10);
  --lo:rgba(0,0,0,.55);
  --shadow-card:0 1px 0 var(--hi) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 16px 34px -14px rgba(0,0,0,.8), 0 3px 8px -3px rgba(0,0,0,.5);
  --shadow-pop:0 24px 54px -16px rgba(0,0,0,.9);
  --inset:inset 0 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.06);

  --teal-1:#1fc2a8;
  --teal-2:#3ddcc0;
  --accent:#a58be0;
  --btn-primary:linear-gradient(180deg,#27c7ad 0%,#0f9d8a 55%,#0a7a6c 100%);
  --btn-accent:linear-gradient(180deg,#8d6fd0 0%,#6b46b0 55%,#55338f 100%);
  --btn-danger:linear-gradient(180deg,#ef5a5a 0%,#cf3535 55%,#a82424 100%);
  --btn-soft:linear-gradient(180deg,#2c3c49 0%,#1f2c37 100%);

  --tint-teal:rgba(31,194,168,.20);
  --tint-purple:rgba(165,139,224,.20);
  --tint-orange:rgba(245,146,80,.20);
  --tint-blue:rgba(96,150,250,.20);
  --note-bg:rgba(245,158,11,.14); --note-bd:rgba(245,158,11,.35); --note-tx:#f4cf86;
  --ok-bg:rgba(34,197,94,.16);  --ok-tx:#7ee2a3;
  --err-bg:rgba(239,68,68,.18); --err-tx:#ff9b9b;
  --sel-bg:rgba(165,139,224,.18);
  --hover-bg:rgba(31,194,168,.16);
  --sidebar-1:#1e3a1a; --sidebar-2:#2f5326;
  --bar-theme:#0b1a1c;
}

/* ---------- Latar: gradasi + blob warna tetap (di belakang kaca) ---------- */
html{background:var(--bg);}
body{
  background:transparent !important;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 8% -6%, var(--bg-blob-1), transparent 60%),
    radial-gradient(55vmax 55vmax at 105% 18%, var(--bg-blob-2), transparent 60%),
    radial-gradient(50vmax 50vmax at 30% 112%, var(--bg-blob-3), transparent 60%),
    var(--bg);
}
.app-frame{background:transparent;}
.text-muted{color:var(--muted);}
a{color:inherit;}

/* ---------- Glass: kartu, panel, modal, dropdown ---------- */
.access-card,.card-simple,.menu-item,.info-hero,.stat-card,.panel,.modal-box,
.autocomplete-dropdown,.qris-box,.bottom-nav,.mon-list{
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
}
.modal-box,.autocomplete-dropdown{background:var(--glass-strong);box-shadow:var(--shadow-pop);}
.bottom-nav{box-shadow:0 -1px 0 var(--hi) inset, 0 -12px 30px -14px var(--lo);border-bottom:none;}
.access-card h2,.section-title,.menu-item,.form-group label{color:var(--text);}
.access-card .label{color:var(--teal-1);}
.access-card .avatar{background:var(--surface-2);box-shadow:var(--inset);}
.menu-item{transition:transform .12s ease, box-shadow .12s ease;}
.menu-item:active{transform:translateY(1px) scale(.985);box-shadow:var(--inset);}

/* Fallback bila browser tak mendukung backdrop-filter: permukaan dibuat hampir solid agar tetap terbaca */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,:root[data-theme="light"]{--glass:rgba(255,255,255,.94);--glass-strong:#fff;}
  :root[data-theme="dark"]{--glass:rgba(28,40,50,.96);--glass-strong:#1d2a35;}
}
/* Pengguna yang meminta transparansi dikurangi: matikan blur, permukaan solid */
@media (prefers-reduced-transparency:reduce){
  :root,:root[data-theme="light"]{--glass:#f6f9fb;--glass-strong:#fff;}
  :root[data-theme="dark"]{--glass:#17222b;--glass-strong:#1d2a35;}
  .access-card,.card-simple,.menu-item,.info-hero,.stat-card,.panel,.modal-box,
  .autocomplete-dropdown,.qris-box,.bottom-nav,.mon-list,.sidebar,.menu-toggle,.theme-toggle{
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* ---------- Skeuomorphism: tombol bertekstur ---------- */
.btn{
  color:var(--text);
  background:var(--btn-soft);
  border:1px solid var(--border);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 1px 0 var(--hi) inset, 0 -2px 0 rgba(0,0,0,.10) inset, 0 6px 10px -5px var(--lo);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
:root[data-theme="dark"] .btn{text-shadow:0 1px 0 rgba(0,0,0,.45);}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:translateY(1px);box-shadow:var(--inset);filter:brightness(.97);}
.btn-primary,.btn-accent,.btn-danger{color:#fff;border-color:rgba(0,0,0,.18);text-shadow:0 -1px 0 rgba(0,0,0,.28);}
.btn-primary{background:var(--btn-primary);}
.btn-accent{background:var(--btn-accent);}
.btn-danger{background:var(--btn-danger);}
.btn-primary,.btn-accent,.btn-danger{box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 8px 14px -6px var(--lo);}
.btn-outline{background:var(--glass);color:var(--teal-1);border:2px solid var(--teal-1);text-shadow:none;}
.btn-soft{background:var(--btn-soft);color:var(--text);}
.btn:disabled,.btn[disabled]{filter:grayscale(.25);box-shadow:var(--inset);}
.btn:focus-visible,.theme-toggle:focus-visible,.menu-toggle:focus-visible,.bottom-nav a:focus-visible,.menu-item:focus-visible{
  outline:3px solid var(--teal-2);outline-offset:2px;
}

/* ---------- Skeuomorphism: kolom isian cekung ---------- */
.form-control{
  background:var(--surface-solid);color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--inset);
}
:root[data-theme="light"] .form-control{background:#fbfcfd;}
.form-control::placeholder{color:var(--muted);opacity:.75;}
.form-control:focus{outline:none;border-color:var(--teal-2);box-shadow:var(--inset), 0 0 0 3px rgba(30,194,166,.35);}
select.form-control option{background:var(--surface-solid);color:var(--text);}
input[type="date"].form-control{color-scheme:inherit;}

.radio-card{background:var(--glass);border-color:var(--border);color:var(--text);box-shadow:var(--inset);}
.radio-card.selected{border-color:var(--accent);background:var(--sel-bg);}
.note-box{background:var(--note-bg);border-color:var(--note-bd);color:var(--note-tx);}
.qris-box{background:#fff;}                       /* QR harus tetap latar putih agar terbaca pemindai */
.autocomplete-item{border-bottom-color:var(--row-line);color:var(--text);}
.autocomplete-item:hover{background:var(--hover-bg);}
.ads-banner{background:var(--glass);border:2px dashed var(--border);color:var(--muted);}

/* ---------- Header publik: logam/kaca berkilau ---------- */
.app-header{
  background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px -14px rgba(0,0,0,.5);
}
.app-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 46%);
}
.app-header .brand{position:relative;z-index:1;}
:root[data-theme="dark"] .app-header{background:linear-gradient(135deg,#0c7f70,#1aa890);}
.app-header .logo-badge{background:rgba(255,255,255,.95);box-shadow:var(--inset), 0 4px 10px -4px rgba(0,0,0,.4);}
.app-header .login-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 10px -5px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.app-header .login-btn:active{box-shadow:var(--inset);}
.app-header .brand-right{display:flex;align-items:center;gap:10px;}

/* Carousel & hero: kilau kaca di atas gradasi */
.carousel-wrap{border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 18px 32px -14px rgba(90,60,150,.6);}
.carousel-slide{position:relative;background:linear-gradient(135deg,var(--accent),#5a3a9e);}
.carousel-slide::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 50%);}
.carousel-slide > *{position:relative;}
.carousel-slide .icon{background:rgba(255,255,255,.22);box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 0 rgba(0,0,0,.12) inset;}
.info-hero-caption{background:linear-gradient(135deg,var(--teal-1),var(--teal-2));}

/* Ikon menu: "tombol kaca" timbul */
.menu-item .ic{box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 -2px 0 rgba(0,0,0,.10) inset, 0 6px 10px -5px var(--lo);border:1px solid var(--glass-border);}
.ic-teal{background:var(--tint-teal);}
.ic-purple{background:var(--tint-purple);}
.ic-orange{background:var(--tint-orange);}
.ic-blue{background:var(--tint-blue);}
.section-title .bar{background:linear-gradient(180deg,var(--teal-2),var(--teal-1));box-shadow:0 0 10px rgba(30,194,166,.6);}

/* Bottom nav */
.bottom-nav a{color:var(--muted);}
.bottom-nav a.active{
  background:var(--btn-primary);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 6px 12px -5px var(--lo);
}

/* Badge, alert */
.badge{box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,0,0,.15) inset;}
.alert-success{background:var(--ok-bg);color:var(--ok-tx);border:1px solid rgba(34,197,94,.3);}
.alert-error{background:var(--err-bg);color:var(--err-tx);border:1px solid rgba(239,68,68,.3);}
.alert-warn{background:var(--note-bg);color:var(--note-tx);border:1px solid var(--note-bd);}
.divider{height:1px;background:var(--row-line);margin:14px 0;}

/* Toast: tetap gelap & kontras di kedua mode */
.app-toast{background:#20303c;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}

/* ---------- Tombol ganti mode: saklar fisik ---------- */
.theme-toggle{
  width:44px;height:44px;min-height:44px;padding:0;flex-shrink:0;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:#7a4f00;
  background:linear-gradient(180deg,#fff 0%,#dfe6ec 100%);
  border:1px solid rgba(20,50,70,.18);
  box-shadow:0 1px 0 #fff inset, 0 -2px 0 rgba(0,0,0,.10) inset, 0 6px 12px -5px var(--lo);
  transition:transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:active{transform:translateY(1px);box-shadow:var(--inset);}
.theme-toggle .knob{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;}
.theme-toggle .ico-moon{display:none;}
:root[data-theme="dark"] .theme-toggle{color:#cfe0ff;background:linear-gradient(180deg,#34465a 0%,#1d2a37 100%);border-color:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 -2px 0 rgba(0,0,0,.35) inset, 0 6px 12px -5px var(--lo);}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:block;}
.theme-toggle-float{position:fixed;top:14px;right:14px;z-index:60;}

/* =====================================================================================
   ADMIN
   ===================================================================================== */
.sidebar{
  background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2));
  box-shadow:1px 0 0 rgba(255,255,255,.18) inset, -10px 0 30px -14px rgba(0,0,0,.5), 2px 0 0 rgba(0,0,0,.15);
}
.sidebar::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%);}
.sidebar > *{position:relative;}
.sidebar a{border:1px solid transparent;text-decoration:none;}
.sidebar a.active,.sidebar a:hover{
  background:var(--btn-primary);border-color:rgba(0,0,0,.2);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 0 rgba(0,0,0,.16) inset, 0 5px 9px -5px rgba(0,0,0,.5);
}
.sidebar-logo{box-shadow:var(--inset);}
.topbar h1{color:var(--text);}
.topbar{gap:12px;}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.menu-toggle{
  background:linear-gradient(180deg,#fff 0%,#dfe6ec 100%);
  border:1px solid rgba(20,50,70,.18);
  box-shadow:0 1px 0 #fff inset, 0 -2px 0 rgba(0,0,0,.10) inset, 0 6px 12px -5px var(--lo);
}
.menu-toggle span{background:var(--text);}
.menu-toggle:hover{background:linear-gradient(180deg,#fff 0%,#e6f4f1 100%);}
.menu-toggle:active{box-shadow:var(--inset);}
:root[data-theme="dark"] .menu-toggle{background:linear-gradient(180deg,#34465a 0%,#1d2a37 100%);border-color:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 -2px 0 rgba(0,0,0,.35) inset, 0 6px 12px -5px var(--lo);}
:root[data-theme="dark"] .menu-toggle:hover{background:linear-gradient(180deg,#3c5066 0%,#223140 100%);}

.stat-card .lbl{color:var(--muted);}
table th{color:var(--muted);border-bottom:2px solid var(--border);}
table td{border-bottom:1px solid var(--row-line);color:var(--text);}
table tbody tr:hover td{background:var(--hover-bg);}
.panel thead[style*="sticky"]{background:var(--glass-strong) !important;}
.modal-bg{background:rgba(5,12,18,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.filter-bar label{color:var(--text);}
.badge-default{background:#6b7c89;}

/* ---------- Monitor (layar TV): tetap gelap, tapi dengan kaca & timbul ---------- */
body.monitor-page::before{
  background:
    radial-gradient(60vmax 60vmax at 8% -6%, rgba(30,194,166,.30), transparent 60%),
    radial-gradient(55vmax 55vmax at 105% 18%, rgba(132,94,194,.28), transparent 60%),
    #0b1218;
}
body.monitor-page{color:#e5edf2;}
.monitor-page .call-board{
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -3px 0 rgba(0,0,0,.18) inset, 0 24px 50px -18px rgba(0,0,0,.8);
  position:relative;overflow:hidden;
}
.monitor-page .call-board::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%);}
.monitor-page .call-board > *{position:relative;}
.monitor-page .mon-list{background:rgba(28,40,50,.62);color:#e5edf2;border-color:rgba(255,255,255,.12);}
.monitor-page .mon-row{border-bottom-color:rgba(255,255,255,.09);}
.monitor-page .mon-empty{color:#9aabb7;}

/* Gerak dikurangi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation-duration:.01ms !important;}
}