/* ==========================================================================
   webnyaabi — gaya "neumorphism" (timbul-lembut) untuk portal & semua aplikasi.
   Dimuat PALING AKHIR di setiap halaman (setelah CSS aplikasi), jadi cukup mengganti
   warna dasar + bayangan komponen umum: kartu, tombol, kolom isian, tab, dialog.
   ========================================================================== */
:root:root {
  --neu-bg: #e3e7ee; --neu-in: #dde2ea; --neu-hi: rgba(255, 255, 255, .92); --neu-lo: rgba(150, 162, 184, .55);
  --bg: var(--neu-bg); --surface: var(--neu-bg); --surface-2: var(--neu-in);
  --line: rgba(140, 152, 175, .28);
  --shadow: 7px 7px 16px var(--neu-lo), -7px -7px 16px var(--neu-hi);
  --neu-raise: 6px 6px 14px var(--neu-lo), -6px -6px 14px var(--neu-hi);
  --neu-raise-sm: 3px 3px 7px var(--neu-lo), -3px -3px 7px var(--neu-hi);
  --neu-inset: inset 4px 4px 9px var(--neu-lo), inset -4px -4px 9px var(--neu-hi);
  --neu-inset-sm: inset 2px 2px 5px var(--neu-lo), inset -2px -2px 5px var(--neu-hi);
}
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    --neu-bg: #252a32; --neu-in: #20242b; --neu-hi: rgba(255, 255, 255, .05); --neu-lo: rgba(0, 0, 0, .48);
    --line: rgba(255, 255, 255, .07);
  }
}
:root:root[data-theme="dark"] {
  --neu-bg: #252a32; --neu-in: #20242b; --neu-hi: rgba(255, 255, 255, .05); --neu-lo: rgba(0, 0, 0, .48);
  --line: rgba(255, 255, 255, .07);
}
html, body { background: var(--neu-bg); }

/* ---------- bilah atas & tab ---------- */
.topbar { background: color-mix(in srgb, var(--neu-bg) 92%, transparent); border-bottom: 0; box-shadow: 0 6px 14px -8px var(--neu-lo); }
.tabs a.active, .app-top .tabs a.active, .tabs button[aria-selected="true"], .tabs [aria-current="page"] { background: var(--neu-bg); box-shadow: var(--neu-inset-sm); }

/* ---------- kartu (timbul) ---------- */
.card:not(.hero), .kpi:not(.hero), .app-card, .act-btn, .panel, .prod, .wh-chips span {
  background-color: var(--neu-bg); border-color: transparent; box-shadow: var(--neu-raise);
}
.card.hero, .hero.card { border-color: transparent; box-shadow: var(--neu-raise); }
.card { border-radius: 20px; }
.kpi { border-radius: 18px; }
.kpi.hero { background: var(--app, var(--brand)); box-shadow: var(--neu-raise); }
.card .card, .card .kpi, dialog .card, dialog .kpi { box-shadow: var(--neu-raise-sm); }
.app-card { border-radius: 22px; }
.app-card:hover { border-color: transparent; transform: translateY(-2px); box-shadow: 9px 9px 20px var(--neu-lo), -9px -9px 20px var(--neu-hi); }
.app-card.soon { box-shadow: var(--neu-inset-sm); background: transparent; }
.app-tile { box-shadow: var(--neu-raise-sm); }
.act-btn:hover { border-color: transparent; }
.act-btn:active { box-shadow: var(--neu-inset); }

/* ---------- dialog & menu melayang ---------- */
dialog { background: var(--neu-bg); box-shadow: 14px 14px 34px var(--neu-lo), -10px -10px 30px var(--neu-hi), 0 30px 60px -20px rgba(0, 0, 0, .35); }
.sk-list, .menu, .combo-list { background: var(--neu-bg); border-color: transparent; box-shadow: var(--neu-raise); }

/* ---------- tombol (timbul, ditekan jadi cekung) ---------- */
.btn, .icon-btn, .chip, .new-btn, .menu-btn, .theme-btn {
  border-color: transparent; box-shadow: var(--neu-raise-sm); transition: box-shadow .15s, transform .05s, filter .15s;
}
.btn:not(.primary):not(.app):not(.ghost):not(.demo-go):not(.solid-danger):not(.accent):not(.neu-off), .icon-btn:not(.neu-off), .theme-btn, .menu-btn { background: var(--neu-bg); }
.btn:not(.ghost):hover { filter: brightness(1.02); }
.btn:active, .icon-btn:active, .chip:active, .theme-btn:active { transform: none; box-shadow: var(--neu-inset-sm); }
.btn.primary, .btn.app { box-shadow: var(--neu-raise-sm); }
.btn.ghost { box-shadow: none; }
.btn.ghost:hover { background: var(--neu-in); }
.btn.danger { background: var(--neu-bg); }
.icon-btn, .theme-btn { border-radius: 50%; }
/* tombol di atas bilah gelap (mis. bilah upload Berkasku): tetap transparan, tanpa latar & bayangan timbul */
.btn.neu-off, .icon-btn.neu-off, .btn.neu-off:active, .icon-btn.neu-off:active { box-shadow: none; }
.theme-btn { width: 40px; height: 40px; }

/* ---------- segmen pilihan ---------- */
.seg { background: var(--neu-bg); border-color: transparent; box-shadow: var(--neu-inset-sm); padding: 4px; }
.seg button.active, .seg button[aria-pressed="true"], .seg button.on { background: var(--neu-bg); box-shadow: var(--neu-raise-sm); }

/* ---------- kolom isian (cekung) ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea {
  background-color: var(--neu-bg); border-color: transparent; box-shadow: var(--neu-inset);
}
input[type=file] { background: var(--neu-bg); border-color: transparent; box-shadow: var(--neu-inset-sm); border-radius: 12px; }
input:focus, select:focus, textarea:focus {
  border-color: transparent; outline: 2px solid color-mix(in srgb, var(--app, var(--brand, #2563c4)) 40%, transparent); outline-offset: 1px;
}

/* ---------- tabel & daftar tetap rapi ---------- */
.tbl-wrap { border-radius: 14px; }
.tbl th { background: transparent; }
.list li { border-top-color: var(--line); }
.sd-card { border-color: color-mix(in srgb, var(--neu-lo) 70%, transparent); background: var(--neu-bg); box-shadow: var(--neu-inset-sm); border-style: solid; border-width: 0; }

/* ---------- bilah bawah HP (tab bawah) ---------- */
@media (max-width: 760px) {
  .app-top .tabs, .bottom-nav, nav.tabs { background: color-mix(in srgb, var(--neu-bg) 96%, transparent); box-shadow: 0 -6px 14px -8px var(--neu-lo); border-top-color: transparent; }
}

/* cetak: kembali polos */
@media print {
  :root:root { --shadow: none; }
  * { box-shadow: none !important; }
  html, body { background: #fff; }
}