/* ===================== Tema hijau · mode terang & gelap ===================== */
:root{
  --bg:#f3f7f4; --surface:#ffffff; --surface-2:#f6faf7; --border:#e2ebe5;
  --text:#1f2d26; --text-2:#4b5a52; --muted:#7c8a83;
  --accent:#059669; --accent-hover:#047857; --accent-soft:#e6f6ee; --accent-text:#047857;
  --sidebar:#ffffff; --nav-text:#4b5a52; --nav-icon:#9aa5a0; --nav-hover:#f2f7f4;
  --input:#ffffff; --input-border:#cfdcd4;
}
html.dark{
  --bg:#0f1713; --surface:#16211b; --surface-2:#1a2620; --border:#25342c;
  --text:#e3ebe6; --text-2:#bcc8c1; --muted:#8a9890;
  --accent:#10b981; --accent-hover:#34d399; --accent-soft:rgba(16,185,129,.14); --accent-text:#6ee7b7;
  --sidebar:#131d18; --nav-text:#c3cec8; --nav-icon:#7f8c85; --nav-hover:#1b2821;
  --input:#111a15; --input-border:#2d3d34;
  color-scheme: dark;
}
body{background:var(--bg);color:var(--text)}
.muted{color:var(--muted)}

/* ---------- sidebar ---------- */
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);color:var(--text)}
.sidebar-foot{border-top:1px solid var(--border)}
.brand-name{font-weight:700;font-size:1.02rem;color:var(--text)}
.brand-sub{font-size:.72rem;color:var(--muted)}
.nav-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.35rem .75rem .4rem}
.nav-link{display:flex;gap:.7rem;align-items:center;padding:.55rem .75rem;border-radius:.6rem;color:var(--nav-text);font-weight:450;transition:background .15s,color .15s;text-align:left}
.nav-link .nav-icon{width:1.15rem;height:1.15rem;color:var(--nav-icon);flex-shrink:0;transition:color .15s}
.nav-link:hover{background:var(--nav-hover);color:var(--text)}
.nav-link:hover .nav-icon{color:var(--text-2)}
.nav-link.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.nav-link.active .nav-icon{color:var(--accent)}

/* ---------- header ---------- */
.topbar{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:.6rem;color:var(--muted);border:1px solid var(--border);background:var(--surface)}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.theme-dark{display:none} html.dark .theme-dark{display:inline} html.dark .theme-light{display:none}

/* ---------- komponen ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.25rem}
.card-title{font-weight:600;font-size:1.02rem;margin-bottom:.9rem}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1rem 1.1rem}
.stat .v{font-size:1.75rem;font-weight:700}.stat .l{font-size:.78rem;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border-radius:.6rem;font-size:.875rem;font-weight:500;background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent-text)}
.btn-primary,.btn-accent,.btn-green{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover,.btn-accent:hover,.btn-green:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-red{background:#dc2626;border-color:#dc2626;color:#fff}.btn-red:hover{background:#b91c1c;color:#fff}
.btn-sm{padding:.3rem .6rem;font-size:.78rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.input{width:100%;border:1px solid var(--input-border);border-radius:.6rem;padding:.5rem .7rem;font-size:.9rem;background:var(--input);color:var(--text)}
.input:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent)}
.label{display:block;font-size:.8rem;font-weight:500;color:var(--text-2);margin-bottom:.25rem}
.tbl{width:100%;font-size:.85rem;border-collapse:collapse}
.tbl th{background:var(--surface-2);text-align:left;padding:.6rem .7rem;font-weight:600;color:var(--text-2);white-space:nowrap}
.tbl td{padding:.55rem .7rem;border-top:1px solid var(--border);vertical-align:top}
.tbl tr:hover td{background:var(--surface-2)}
.badge{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.b-green{background:#dcfce7;color:#166534}.b-red{background:#fee2e2;color:#991b1b}
.b-amber{background:#fef3c7;color:#92400e}.b-blue{background:#dbeafe;color:#1e40af}
.b-gray{background:#e5ebe7;color:#3f4b45}.b-purple{background:#ede9fe;color:#5b21b6}
html.dark .b-green{background:rgba(34,197,94,.15);color:#86efac}html.dark .b-red{background:rgba(239,68,68,.15);color:#fca5a5}
html.dark .b-amber{background:rgba(245,158,11,.15);color:#fcd34d}html.dark .b-blue{background:rgba(59,130,246,.15);color:#93c5fd}
html.dark .b-gray{background:#25342c;color:#c3cec8}html.dark .b-purple{background:rgba(139,92,246,.18);color:#c4b5fd}
.flash{padding:.75rem 1rem;border-radius:.7rem;font-size:.9rem;border:1px solid transparent}
.flash-success{background:#dcfce7;color:#166534}.flash-error{background:#fee2e2;color:#991b1b}.flash-warning{background:#fef3c7;color:#92400e}
html.dark .flash-success{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}
html.dark .flash-error{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.25)}
html.dark .flash-warning{background:rgba(245,158,11,.12);color:#fcd34d;border-color:rgba(245,158,11,.25)}
.qr-wrap{position:relative;display:inline-block}
.qr-wrap img{background:#fff}
.qr-wrap.expired img{filter:blur(6px) grayscale(1);opacity:.35}

/* ---------- penyesuaian utilitas Tailwind di template untuk mode gelap ---------- */
html.dark .bg-white{background:var(--surface)!important}
html.dark .bg-slate-50,html.dark .bg-slate-100{background:var(--surface-2)!important}
html.dark .bg-green-50{background:rgba(16,185,129,.12)!important}
html.dark .bg-emerald-50,html.dark .bg-emerald-100{background:var(--accent-soft)!important}
html.dark .border,html.dark .border-b,html.dark .border-t{border-color:var(--border)!important}
html.dark .text-slate-800,html.dark .text-slate-700{color:var(--text)!important}
html.dark .text-slate-600{color:var(--text-2)!important}
html.dark .text-slate-500,html.dark .text-slate-400{color:var(--muted)!important}
html.dark .text-green-700,html.dark .text-green-600,html.dark .text-emerald-700,html.dark .text-emerald-600{color:#6ee7b7!important}
html.dark .text-red-600{color:#f87171!important}html.dark .text-blue-600{color:#60a5fa!important}
html.dark .text-amber-600{color:#fbbf24!important}

/* ---------- halaman login ---------- */
.login-bg{background:radial-gradient(1200px 600px at 10% 0%,#bbf7d0 0%,transparent 60%),radial-gradient(900px 600px at 100% 100%,#6ee7b7 0%,transparent 55%),linear-gradient(135deg,#ecfdf3,#d1fae5)}
html.dark .login-bg{background:radial-gradient(1200px 600px at 10% 0%,rgba(16,185,129,.25) 0%,transparent 60%),radial-gradient(900px 600px at 100% 100%,rgba(5,150,105,.25) 0%,transparent 55%),linear-gradient(135deg,#0c1511,#10201a)}
@media (min-width:1024px){.menu-btn{display:none}}