/* =========================
   THEME SYSTEM (DARK/LIGHT)
   ========================= */

/* FIX #1: box-sizing agar input & padding selalu rapi */
*, *::before, *::after { box-sizing: border-box; }

/* FIX #2: kunci tinggi & hilangkan overflow aneh */
html, body { height: 100%; margin: 0; }
a{ color: inherit; }

html[data-theme="dark"]{
  --bg1:#0e8f86; --bg2:#1e2a56; --bg3:#5b3db8;
  --bgBase:#070b12;

  --card: rgba(15,23,32,.80);
  --panel: rgba(10,14,22,.55);
  --panel2: rgba(10,14,22,.45);

  --stroke: rgba(255,255,255,.10);
  --text:#e8eef7;
  --muted:#a8b3c2;
  --accent:#25d6c8;

  --inputBg:#eaf0ff;
  --inputText:#081018;

  --tableBg: rgba(10, 12, 18, 0.85);
  --rowOdd: rgba(255, 255, 255, 0.03);
  --rowEven: rgba(255, 255, 255, 0.06);
  --rowHover: rgba(255, 255, 255, 0.10);

  --dangerBg: rgba(255,90,90,.08);
  --dangerBd: rgba(255,90,90,.18);

  --shadow: 0 20px 80px rgba(0,0,0,.45);
}

html[data-theme="light"]{
  --bg1:#eef2ff; --bg2:#f1f5f9; --bg3:#ffffff;
  --bgBase:#f5f7fb;

  --card:#ffffff;
  --panel: rgba(255,255,255,.85);
  --panel2: rgba(255,255,255,.75);

  --stroke: rgba(2,6,23,.12);
  --text:#0f172a;
  --muted:#64748b;
  --accent:#2563eb;

  --inputBg:#ffffff;
  --inputText:#0f172a;

  --tableBg:#ffffff;
  --rowOdd: rgba(2, 6, 23, 0.03);
  --rowEven: rgba(2, 6, 23, 0.05);
  --rowHover: rgba(37, 99, 235, 0.08);

  --dangerBg: rgba(239,68,68,.10);
  --dangerBd: rgba(239,68,68,.22);

  --shadow: 0 16px 60px rgba(2,6,23,.10);
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  overflow-x:hidden; overflow-y:auto;

  /* background: dark = gradient, light = soft */
  background:
    radial-gradient(1200px 600px at 10% 20%, var(--bg1), transparent 60%),
    radial-gradient(1000px 700px at 60% 15%, var(--bg2), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, var(--bg3), transparent 55%),
    var(--bgBase);
  background-attachment: fixed;
}

/* ---------- LOGIN ---------- */
.auth-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card{
  width: 460px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: 22px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  background: linear-gradient(90deg, rgba(37,214,200,.18), rgba(91,61,184,.18));
  border:1px solid var(--stroke);
  border-radius:14px;
  margin-bottom:14px;
}

.logo{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, var(--accent), #7a5cff);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  color:#071018;
}

.h1{font-size:18px;font-weight:900;margin:10px 0 4px}
.sub{font-size:12px;color:var(--muted);margin:0 0 14px}

.form-label{
  font-size:12px;
  color:var(--muted);
  margin:10px 0 6px;
  display:block;
}

/* input */
.input{
  display:block;
  width:100%;
  height:44px;
  line-height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: var(--inputBg);
  outline:none;
  font-size:14px;
  color: var(--inputText);
}

.input[type="password"]{
  line-height: normal;
  padding-top: 12px;
  padding-bottom: 12px;
  height:44px;
}

.input:focus{box-shadow:0 0 0 3px rgba(37,214,200,.2)}

/* primary button */
.btn{
  width:100%;
  margin-top:14px;
  height:44px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.5px;
  background: linear-gradient(90deg, var(--accent), #6b5cff);
  color:#081018;
}

.err{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,100,100,.25);
  background: rgba(255,100,100,.08);
  color: inherit;
  font-size:13px;
}

.ok{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
  color: inherit;
  font-size:13px;
}

.footer{
  margin-top:12px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}
.footer b{color:var(--accent)}

/* ---------- APP LAYOUT ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:260px;
  padding:16px;
  border-right:1px solid var(--stroke);
  background: var(--panel);
  backdrop-filter:blur(12px);
}

.side-brand{
  display:flex;gap:12px;align-items:center;padding:12px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(255,255,255,.04);
  margin-bottom:14px;
}

.nav a, .nav .nav-btn{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  text-decoration:none;
  border:1px solid transparent;
  margin-bottom:8px;
  background: rgba(255,255,255,.03);
  color: var(--text);
}

.nav a:hover, .nav .nav-btn:hover{border-color:var(--stroke)}
.nav .nav-btn{
  cursor:pointer;
  text-align:left;
  outline:none;
  font: inherit;
}

.nav .nav-danger{
  background: var(--dangerBg);
  border-color: var(--dangerBd);
}

.content{flex:1;padding:18px 18px 30px;}
.topbar{
  display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background: var(--panel);
  margin-bottom:14px;
}

.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.card{
  border:1px solid var(--stroke);
  background: var(--panel);
  border-radius:16px;
  padding:14px;
  backdrop-filter:blur(12px);
}
.card small{color:var(--muted)}
.card .val{font-size:20px;font-weight:950;margin-top:6px}

.section{
  margin-top:14px;
  border:1px solid var(--stroke);
  border-radius:18px;
  background: var(--panel2);
  overflow:hidden;
  position: relative;
}
.section-h{
  padding:14px 16px;border-bottom:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position: relative; z-index: 2;
}
.section-b{padding:14px 16px; position: relative; z-index: 2;}

.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

details{
  border:1px solid var(--stroke);
  border-radius:14px;padding:10px 12px;
  background:rgba(255,255,255,.03);
  margin-top:10px;
}
summary{cursor:pointer;font-weight:900}
ul{margin:8px 0 0 18px}
.muted{color:var(--muted)}

@media (max-width:1100px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sidebar{display:none;}
}

/* ===== TABLE FIX + LOOK ===== */
.section-b table {
  width: 100%;
  border-collapse: collapse !important;
  display: table !important;
  position: relative;
  z-index: 3;
  background: var(--tableBg);
  border-radius: 12px;
  overflow: hidden;
}

.section-b thead { display: table-header-group !important; }
.section-b tbody { display: table-row-group !important; }
.section-b tr { display: table-row !important; }
.section-b td, .section-b th { display: table-cell !important; vertical-align: top; }

.section-b th{
  text-align:left;
  font-weight:900;
  color: var(--text);
  padding: 10px 10px;
  border-bottom: 1px solid var(--stroke);
}

.section-b td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--stroke);
  color: var(--text) !important;
}

.section-b tbody tr{ background: var(--rowOdd); }
.section-b tbody tr:nth-child(even){ background: var(--rowEven); }
.section-b tbody tr:hover{ background: var(--rowHover); }

/* MODAL BACKDROP (biar gak silau di light) */
.xmodal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,.45);
  z-index: 9999;
}
.xmodal-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
}
/* =========================
   PATCH: LIGHT THEME 
   ========================= */

/* 1) Upgrade palet light theme (lebih colorful tapi tetap clean) */
html[data-theme="light"]{
  --bg1:#e0f2fe;   /* sky */
  --bg2:#eef2ff;   /* indigo */
  --bg3:#fff7ed;   /* orange soft */
  --bgBase:#f6f7ff;

  --card:#ffffff;
  --panel: rgba(255,255,255,.92);
  --panel2: rgba(255,255,255,.88);

  --stroke: rgba(2,6,23,.10);
  --text:#0b1220;
  --muted:#5b6b84;

  /* aksen lebih “pop” */
  --accent:#2563eb;       /* biru utama */
  --accent2:#7c3aed;      /* ungu */
  --accent3:#06b6d4;      /* cyan */
  --accentText:#ffffff;

  --shadow: 0 18px 55px rgba(15,23,42,.12);
}

/* 2) Background light: tetap soft tapi ada warna */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 8% 18%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(1000px 650px at 62% 10%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(900px 700px at 92% 28%, rgba(6,182,212,.14), transparent 55%),
    var(--bgBase);
  background-attachment: fixed;
}

/* 3) Card/panel biar “naik” (lebih jelas, ga flat) */
html[data-theme="light"] .topbar,
html[data-theme="light"] .card,
html[data-theme="light"] .section,
html[data-theme="light"] .sidebar{
  box-shadow: var(--shadow);
}

/* 4) Sidebar: sedikit gradient biar ga hambar */
html[data-theme="light"] .sidebar{
  background:
    linear-gradient(180deg, rgba(37,99,235,.06), rgba(124,58,237,.04)),
    var(--panel);
}

/* 5) Nav: hover & active lebih kelihatan */
html[data-theme="light"] .nav a,
html[data-theme="light"] .nav .nav-btn{
  background: rgba(2,6,23,.02);
  border: 1px solid rgba(2,6,23,.06);
}

html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .nav .nav-btn:hover{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.18);
}

html[data-theme="light"] .nav a.active,
html[data-theme="light"] .nav .nav-btn.active{
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(124,58,237,.10));
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 10px 26px rgba(37,99,235,.14);
}

/* 6) Section: kasih “accent bar” tipis biar menarik */
html[data-theme="light"] .section{
  position: relative;
}

html[data-theme="light"] .section::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity:.85;
  z-index:1;
}

/* pastikan konten di atas accent bar */
html[data-theme="light"] .section-h,
html[data-theme="light"] .section-b{
  position: relative;
  z-index: 2;
}

/* 7) Tombol utama: teks putih, lebih “premium” */
html[data-theme="light"] .btn{
  color: var(--accentText);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 30px rgba(37,99,235,.22);
}

html[data-theme="light"] .btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* 8) Input: border & focus lebih jelas */
html[data-theme="light"] .input{
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

html[data-theme="light"] .input:focus{
  box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 12px 26px rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.30);
}

/* 9) Table hover: lebih hidup */
html[data-theme="light"] .section-b tbody tr:hover{
  background: rgba(37,99,235,.10);
}

/* 10) Nilai (angka) di card: kasih highlight */
html[data-theme="light"] .card .val{
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(124,58,237,.10));
  display: inline-block;
  padding: 6px 10px;
  border-radius: 12px;
}
/* =========================
   PATCH V2: LOOK "APLIKASI MAHAL"
   ========================= */

:root{
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

/* Typography lebih premium */
body{
  font-feature-settings: "cv02","cv03","cv04","cv11";
  letter-spacing: .1px;
}

/* Transisi halus di semua komponen utama */
.sidebar, .topbar, .card, .section, .nav a, .nav .nav-btn, .btn, .input, .pill, details{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}

/* ====== LIGHT "PRO" ====== */
html[data-theme="light"]{
  --stroke2: rgba(2,6,23,.07);
  --softGlow: 0 18px 55px rgba(15,23,42,.12);
  --softGlow2: 0 10px 30px rgba(15,23,42,.10);
  --ring: 0 0 0 4px rgba(37,99,235,.14);
}

/* Layout lebih “rapi” */
html[data-theme="light"] .content{ padding: 22px 22px 34px; }
html[data-theme="light"] .grid4{ gap: 14px; }

/* Sidebar lebih “luxury glass” */
html[data-theme="light"] .sidebar{
  border-right: 1px solid var(--stroke2);
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(800px 500px at 20% 60%, rgba(124,58,237,.08), transparent 60%),
    var(--panel);
}

/* Brand card & topbar lebih “angkat” */
html[data-theme="light"] .side-brand,
html[data-theme="light"] .topbar{
  border: 1px solid var(--stroke2);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  box-shadow: var(--softGlow2);
}

/* Topbar: highlight line tipis */
html[data-theme="light"] .topbar{
  position: relative;
  overflow: hidden;
}
html[data-theme="light"] .topbar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background: linear-gradient(90deg, rgba(37,99,235,.9), rgba(124,58,237,.85), rgba(6,182,212,.85));
  opacity:.9;
}

/* Cards: border highlight + hover naik */
html[data-theme="light"] .card{
  border: 1px solid var(--stroke2);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  box-shadow: var(--softGlow2);
}

html[data-theme="light"] .card:hover{
  transform: translateY(-2px);
  box-shadow: var(--softGlow);
  border-color: rgba(37,99,235,.18);
}

/* Nilai angka: lebih sleek (tanpa kelihatan "chip") */
html[data-theme="light"] .card .val{
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
}

/* Section: premium container */
html[data-theme="light"] .section{
  border-radius: var(--radius-xl);
  border: 1px solid var(--stroke2);
  background:
    radial-gradient(1000px 320px at 15% 0%, rgba(124,58,237,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  box-shadow: var(--softGlow2);
}

/* Header section lebih tegas */
html[data-theme="light"] .section-h{
  border-bottom: 1px solid rgba(2,6,23,.06);
}

/* Pills: lebih modern */
html[data-theme="light"] .pill{
  border: 1px solid rgba(37,99,235,.14);
  background: rgba(37,99,235,.06);
  color: rgba(15,23,42,.70);
}

/* Nav: active lebih “enterprise” */
html[data-theme="light"] .nav a,
html[data-theme="light"] .nav .nav-btn{
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.06);
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .nav .nav-btn:hover{
  transform: translateY(-1px);
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 14px 26px rgba(37,99,235,.10);
}

/* (Opsional) kalau ada class active */
html[data-theme="light"] .nav a.active,
html[data-theme="light"] .nav .nav-btn.active{
  background: linear-gradient(90deg, rgba(37,99,235,.16), rgba(124,58,237,.12));
  border-color: rgba(37,99,235,.26);
  box-shadow: 0 18px 30px rgba(37,99,235,.14);
}

/* Button: lebih premium + efek klik */
html[data-theme="light"] .btn{
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(37,99,235,.22);
}
html[data-theme="light"] .btn:active{
  transform: translateY(1px);
  filter: brightness(.98);
}

/* Input: lebih “apple-like” */
html[data-theme="light"] .input{
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
html[data-theme="light"] .input:focus{
  border-color: rgba(37,99,235,.28);
  box-shadow: var(--ring), 0 14px 30px rgba(37,99,235,.10);
}

/* Table: header sticky look + row lebih rapi */
html[data-theme="light"] .section-b table{
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
}
html[data-theme="light"] .section-b th{
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.04));
  border-bottom: 1px solid rgba(2,6,23,.07);
}
html[data-theme="light"] .section-b tbody tr:hover{
  background: rgba(37,99,235,.10);
}

/* Modal: lebih cinematic */
html[data-theme="light"] .xmodal{
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .xmodal-card{
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
}

/* =========================
   PREMIUM DASHBOARD CARDS
   untuk .dashboard-card + .card-bg-*
   Tempel di PALING BAWAH CSS
   ========================= */

/* Base card premium */
.dashboard-card{
  position: relative;
  border-radius: 22px;
  padding: 16px;
  overflow: hidden;

  /* depth */
  box-shadow:
    0 20px 60px rgba(2,6,23,.12),
    0 10px 25px rgba(2,6,23,.08);

  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
}

/* glow + highlight */
.dashboard-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(800px 240px at 20% 10%,
              rgba(255,255,255,.45), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

.dashboard-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(700px 240px at 80% 0%,
              rgba(255,255,255,.25), transparent 55%);
  opacity:.5;
  pointer-events:none;
}

/* hover feel mahal */
.dashboard-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 70px rgba(2,6,23,.16),
    0 14px 34px rgba(2,6,23,.10);
}

/* Text style di card */
.dashboard-title{
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.15;
}

.dashboard-sub{
  font-size: 12px;
  opacity: .92;
}

/* biar emoji/icon lebih tegas */
.dashboard-card .dashboard-sub:first-child{
  font-weight: 900;
}

/* =========================
   WARNA BACKGROUND PER CARD
   (8 variasi) - “rich gradient”
   ========================= */

/* DEFAULT safety (kalau class gak ketemu) */
.dashboard-card{
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,58,237,.10));
  color: #0b1220;
}

/* IMPORTANT:
   - Light: text gelap biar elegan
   - Dark: text terang biar kontras
*/

/* --- LIGHT THEME --- */
html[data-theme="light"] .dashboard-card{
  color: #0b1220;
  border-color: rgba(2,6,23,.08);
}

/* 0: Indigo → Purple */
html[data-theme="light"] .card-bg-0{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.60), transparent 55%),
    linear-gradient(135deg, #e0e7ff, #f5d0fe);
}

/* 1: Emerald → Cyan */
html[data-theme="light"] .card-bg-1{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.60), transparent 55%),
    linear-gradient(135deg, #d1fae5, #cffafe);
}

/* 2: Amber → Rose (cocok pengeluaran) */
html[data-theme="light"] .card-bg-2{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.60), transparent 55%),
    linear-gradient(135deg, #ffedd5, #ffe4e6);
}

/* 3: Sky → Indigo (cocok belum bayar) */
html[data-theme="light"] .card-bg-3{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.60), transparent 55%),
    linear-gradient(135deg, #dbeafe, #e0e7ff);
}

/* 4: Violet → Sky */
html[data-theme="light"] .card-bg-4{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.60), transparent 55%),
    linear-gradient(135deg, #ede9fe, #cffafe);
}

/* 5: Lime → Emerald */
html[data-theme="light"] .card-bg-5{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.60), transparent 55%),
    linear-gradient(135deg, #ecfccb, #d1fae5);
}

/* 6: Slate → Sky (lebih “corporate”) */
html[data-theme="light"] .card-bg-6{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(135deg, #e2e8f0, #dbeafe);
}

/* 7: Fuchsia → Orange (biar ada yang bold) */
html[data-theme="light"] .card-bg-7{
  background:
    radial-gradient(900px 260px at 15% 15%, rgba(255,255,255,.60), transparent 55%),
    linear-gradient(135deg, #fae8ff, #ffedd5);
}

/* --- DARK THEME --- */
html[data-theme="dark"] .dashboard-card{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    0 10px 28px rgba(0,0,0,.25);
}

html[data-theme="dark"] .dashboard-sub{ opacity: .85; color: rgba(255,255,255,.78); }

/* 0: Blue → Purple */
html[data-theme="dark"] .card-bg-0{
  background: linear-gradient(135deg, rgba(37,99,235,.45), rgba(124,58,237,.42));
}

/* 1: Emerald → Cyan */
html[data-theme="dark"] .card-bg-1{
  background: linear-gradient(135deg, rgba(16,185,129,.42), rgba(6,182,212,.40));
}

/* 2: Orange → Rose */
html[data-theme="dark"] .card-bg-2{
  background: linear-gradient(135deg, rgba(249,115,22,.45), rgba(244,63,94,.40));
}

/* 3: Sky → Indigo */
html[data-theme="dark"] .card-bg-3{
  background: linear-gradient(135deg, rgba(56,189,248,.38), rgba(99,102,241,.40));
}

/* 4: Violet → Sky */
html[data-theme="dark"] .card-bg-4{
  background: linear-gradient(135deg, rgba(139,92,246,.42), rgba(6,182,212,.34));
}

/* 5: Lime → Emerald */
html[data-theme="dark"] .card-bg-5{
  background: linear-gradient(135deg, rgba(163,230,53,.35), rgba(16,185,129,.38));
}

/* 6: Slate → Blue */
html[data-theme="dark"] .card-bg-6{
  background: linear-gradient(135deg, rgba(148,163,184,.30), rgba(59,130,246,.34));
}

/* 7: Fuchsia → Orange */
html[data-theme="dark"] .card-bg-7{
  background: linear-gradient(135deg, rgba(217,70,239,.40), rgba(249,115,22,.34));
}

/* =========================
   OPTIONAL: buat angka makin “mahal”
   (tanpa mengubah HTML kamu)
   ========================= */
.dashboard-card .dashboard-title,
.dashboard-card > div[style*="font-weight:950"]{
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}

/* =========================
   PREMIUM DARK (NO SILAU)
   khusus .dashboard-card di DARK
   Tempel di PALING BAWAH CSS
   ========================= */

html[data-theme="dark"]{
  /* biar semua warna ngikut lebih kalem */
  --darkCardBase: rgba(12,16,26,.78);
  --darkStroke: rgba(255,255,255,.10);
  --darkText: rgba(255,255,255,.92);
  --darkMuted: rgba(255,255,255,.72);
}

/* Base card dark: matte + glow tipis */
html[data-theme="dark"] .dashboard-card{
  background:
    radial-gradient(900px 260px at 15% 10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.78), rgba(10,12,18,.78));
  color: var(--darkText);
  border: 1px solid var(--darkStroke);

  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 10px 28px rgba(0,0,0,.30);

  backdrop-filter: blur(10px);
}

/* kurangi “silau” highlight */
html[data-theme="dark"] .dashboard-card::before,
html[data-theme="dark"] .dashboard-card::after{
  opacity: .28;
}

/* hover tetap premium, tidak neon */
html[data-theme="dark"] .dashboard-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 30px 90px rgba(0,0,0,.62),
    0 14px 36px rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.14);
}

/* teks pendukung */
html[data-theme="dark"] .dashboard-sub{
  color: var(--darkMuted);
  opacity: 1;
}

/* =========================
   8 VARIASI DARK YANG KALem
   (deep gradient, accent tipis)
   ========================= */

html[data-theme="dark"] .card-bg-0{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(99,102,241,.20), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

html[data-theme="dark"] .card-bg-1{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(16,185,129,.18), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

html[data-theme="dark"] .card-bg-2{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(244,63,94,.18), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

html[data-theme="dark"] .card-bg-3{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

html[data-theme="dark"] .card-bg-4{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

html[data-theme="dark"] .card-bg-5{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(163,230,53,.14), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

html[data-theme="dark"] .card-bg-6{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(148,163,184,.16), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

html[data-theme="dark"] .card-bg-7{
  background:
    radial-gradient(700px 250px at 20% 0%, rgba(217,70,239,.16), transparent 60%),
    linear-gradient(180deg, rgba(16,22,38,.82), rgba(10,12,18,.82));
}

/* =========================
   BONUS: accent bar mini (mahal tapi subtle)
   ========================= */
html[data-theme="dark"] .dashboard-card{
  position: relative;
}
html[data-theme="dark"] .dashboard-card .dashboard-sub:first-child{
  display:flex;
  align-items:center;
  gap:8px;
}
html[data-theme="dark"] .dashboard-card .dashboard-sub:first-child::after{
  content:"";
  height:8px;
  width:42px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  margin-left:auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  opacity:.9;
}

/* kalau mau accent bar beda per bg (opsional, tapi cakep) */
html[data-theme="dark"] .card-bg-0 .dashboard-sub:first-child::after{ background: rgba(99,102,241,.28); }
html[data-theme="dark"] .card-bg-1 .dashboard-sub:first-child::after{ background: rgba(16,185,129,.26); }
html[data-theme="dark"] .card-bg-2 .dashboard-sub:first-child::after{ background: rgba(244,63,94,.24); }
html[data-theme="dark"] .card-bg-3 .dashboard-sub:first-child::after{ background: rgba(56,189,248,.24); }
html[data-theme="dark"] .card-bg-4 .dashboard-sub:first-child::after{ background: rgba(124,58,237,.24); }
html[data-theme="dark"] .card-bg-5 .dashboard-sub:first-child::after{ background: rgba(163,230,53,.20); }
html[data-theme="dark"] .card-bg-6 .dashboard-sub:first-child::after{ background: rgba(148,163,184,.22); }
html[data-theme="dark"] .card-bg-7 .dashboard-sub:first-child::after{ background: rgba(217,70,239,.20); }


/* =========================
   TRUE PREMIUM DARK (INKY)
   No pastel • No neon • Mahal
   ========================= */

html[data-theme="dark"]{
  --ink-900:#0b0f1a;
  --ink-800:#0f1424;
  --ink-700:#141a2e;

  --stroke-dark: rgba(255,255,255,.08);
  --text-main: rgba(255,255,255,.92);
  --text-muted: rgba(255,255,255,.68);

  --accent-blue:#4f7cff;
  --accent-emerald:#2bd4a4;
  --accent-amber:#f4b740;
  --accent-rose:#f0626e;
}

/* =========================
   DASHBOARD CARD BASE
   ========================= */

html[data-theme="dark"] .dashboard-card{
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  color: var(--text-main);
  border: 1px solid var(--stroke-dark);
  border-radius: 20px;
  position: relative;
  overflow: hidden;

  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 12px 30px rgba(0,0,0,.35);

  backdrop-filter: blur(6px);
}

/* MATTE highlight (very subtle) */
html[data-theme="dark"] .dashboard-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    transparent 35%
  );
  pointer-events:none;
}

/* Hover = depth, NOT glow */
html[data-theme="dark"] .dashboard-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 38px 100px rgba(0,0,0,.75),
    0 18px 40px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.14);
}

/* =========================
   TEXT INSIDE CARD
   ========================= */

html[data-theme="dark"] .dashboard-title{
  font-weight: 950;
  letter-spacing: .3px;
}

html[data-theme="dark"] .dashboard-sub{
  color: var(--text-muted);
  font-size: 12px;
}

/* =========================
   ACCENT STRIP (MAHAL)
   ========================= */

html[data-theme="dark"] .dashboard-card::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  opacity:.85;
}

/* =========================
   COLOR VARIANTS (DARK ONLY)
   ========================= */

/* 0 — BLUE (income / default) */
html[data-theme="dark"] .card-bg-0::after{
  background: linear-gradient(90deg, var(--accent-blue), transparent);
}

/* 1 — EMERALD (saldo / positive) */
html[data-theme="dark"] .card-bg-1::after{
  background: linear-gradient(90deg, var(--accent-emerald), transparent);
}

/* 2 — AMBER (warning / keluar) */
html[data-theme="dark"] .card-bg-2::after{
  background: linear-gradient(90deg, var(--accent-amber), transparent);
}

/* 3 — ROSE (belum bayar) */
html[data-theme="dark"] .card-bg-3::after{
  background: linear-gradient(90deg, var(--accent-rose), transparent);
}

/* 4–7 — Neutral enterprise */
html[data-theme="dark"] .card-bg-4::after,
html[data-theme="dark"] .card-bg-5::after,
html[data-theme="dark"] .card-bg-6::after,
html[data-theme="dark"] .card-bg-7::after{
  background: linear-gradient(90deg, rgba(255,255,255,.25), transparent);
}

/* =========================
   PILLS DI DALAM CARD
   ========================= */

html[data-theme="dark"] .dashboard-card .pill{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-muted);
}

/* =========================
   ENTERPRISE DARK PACK
   Sidebar + Topbar + Section + Pill + Table
   Senada dengan card dark (inky, mahal)
   ========================= */

html[data-theme="dark"]{
  --ink-950:#070a12;
  --ink-900:#0b0f1a;
  --ink-850:#0e1322;
  --ink-800:#10172a;
  --ink-750:#121b31;

  --strokeD: rgba(255,255,255,.08);
  --strokeD2: rgba(255,255,255,.12);

  --textD: rgba(255,255,255,.92);
  --mutedD: rgba(255,255,255,.66);

  --shadowD1: 0 24px 80px rgba(0,0,0,.60);
  --shadowD2: 0 12px 34px rgba(0,0,0,.36);

  --blueA: #4f7cff;
  --emerA: #2bd4a4;
  --amberA:#f4b740;
  --roseA: #f0626e;
}

/* Body background dark yang “calm” */
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 10% 15%, rgba(79,124,255,.10), transparent 60%),
    radial-gradient(900px 650px at 70% 10%, rgba(43,212,164,.07), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, rgba(240,98,110,.06), transparent 55%),
    var(--ink-950);
  background-attachment: fixed;
  color: var(--textD);
}

/* =========================
   SIDEBAR (premium)
   ========================= */

html[data-theme="dark"] .sidebar{
  background:
    linear-gradient(180deg, rgba(16,23,42,.75), rgba(7,10,18,.88));
  border-right: 1px solid var(--strokeD);
  box-shadow: none;
}

html[data-theme="dark"] .side-brand{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--strokeD);
  border-radius: 18px;
  box-shadow: var(--shadowD2);
}

/* Nav item: matte, tidak glow */
html[data-theme="dark"] .nav a,
html[data-theme="dark"] .nav .nav-btn{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--textD);
  border-radius: 14px;
}

html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav .nav-btn:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

/* Kalau ada .active */
html[data-theme="dark"] .nav a.active,
html[data-theme="dark"] .nav .nav-btn.active{
  background: linear-gradient(90deg, rgba(79,124,255,.14), rgba(255,255,255,.04));
  border-color: rgba(79,124,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
}

/* Logout danger */
html[data-theme="dark"] .nav .nav-danger{
  background: rgba(240,98,110,.10);
  border-color: rgba(240,98,110,.18);
}

/* =========================
   TOPBAR (enterprise)
   ========================= */

html[data-theme="dark"] .topbar{
  background:
    linear-gradient(180deg, rgba(16,23,42,.72), rgba(11,15,26,.72));
  border: 1px solid var(--strokeD);
  border-radius: 18px;
  box-shadow: var(--shadowD2);
  position: relative;
  overflow: hidden;
}

/* accent line tipis (mahal) */
html[data-theme="dark"] .topbar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background: linear-gradient(90deg, var(--blueA), rgba(255,255,255,.15));
  opacity:.85;
}

/* =========================
   SECTION (container besar)
   ========================= */

html[data-theme="dark"] .section{
  background:
    linear-gradient(180deg, rgba(16,23,42,.62), rgba(7,10,18,.72));
  border: 1px solid var(--strokeD);
  border-radius: 22px;
  box-shadow: var(--shadowD2);
  overflow: hidden;
}

/* header section */
html[data-theme="dark"] .section-h{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* accent bar section (subtle) */
html[data-theme="dark"] .section::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background: linear-gradient(90deg, rgba(79,124,255,.55), rgba(43,212,164,.35), rgba(240,98,110,.28));
  opacity:.55;
  z-index:1;
}
html[data-theme="dark"] .section-h,
html[data-theme="dark"] .section-b{
  position: relative;
  z-index: 2;
}

/* =========================
   PILL (badge/button kecil)
   ========================= */

html[data-theme="dark"] .pill{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--mutedD);
}

html[data-theme="dark"] a.pill:hover,
html[data-theme="dark"] button.pill:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* =========================
   INPUT (dark clean)
   ========================= */

html[data-theme="dark"] .input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--textD);
}

html[data-theme="dark"] .input:focus{
  box-shadow: 0 0 0 4px rgba(79,124,255,.16);
  border-color: rgba(79,124,255,.28);
}

/* =========================
   TABLE (dark mahal)
   ========================= */

html[data-theme="dark"] .section-b table{
  background: rgba(7,10,18,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

html[data-theme="dark"] .section-b th{
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--textD);
}

html[data-theme="dark"] .section-b td{
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--textD) !important;
}

html[data-theme="dark"] .section-b tbody tr{
  background: rgba(255,255,255,.02);
}
html[data-theme="dark"] .section-b tbody tr:nth-child(even){
  background: rgba(255,255,255,.035);
}
html[data-theme="dark"] .section-b tbody tr:hover{
  background: rgba(79,124,255,.10);
}

/* =========================
   OPTIONAL: kurangi “glow” card kalau terasa terang
   ========================= */
html[data-theme="dark"] .dashboard-card::before,
html[data-theme="dark"] .dashboard-card::after{
  opacity: .18;
}

/* ===============================
   LOGIN FORM PUTIH (PREMIUM)
   =============================== */

.auth-card{
  background: #ffffff !important;
  color: #0f172a;
  box-shadow:
    0 25px 70px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.6) inset;
}

/* Brand */
.brand-title{
  color:#0f172a;
}
.brand-sub{
  color:#64748b;
}

/* Judul */
.h1{
  color:#0f172a;
}
.sub{
  color:#475569;
}

/* Label */
.form-label{
  color:#334155;
  font-weight:600;
}

/* Input */
.input{
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #e2e8f0;
}

.input::placeholder{
  color:#94a3b8;
}

.input:focus{
  background:#ffffff;
  border-color:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,.25);
  transform:none;
}

/* Button */
.btn-premium,
.btn{
  background: linear-gradient(135deg,#38bdf8,#22c55e);
  color:#ffffff;
  border:none;
  font-weight:800;
  letter-spacing:.6px;
}

.btn-premium:hover,
.btn:hover{
  filter: brightness(1.05);
}

/* Error */
.err{
  background:#fee2e2;
  color:#b91c1c;
}

/* Footer */
.footer{
  color:#64748b;
}


/* =========================
   FIX: LOGIN PUTIH JANGAN NGEGANGGU DARK THEME
   Tempel di PALING BAWAH
   ========================= */

/* 1) Batasi "LOGIN FORM PUTIH" hanya untuk LIGHT */
html[data-theme="light"] .auth-card{
  background: #ffffff !important;
  color: #0f172a;
}

html[data-theme="light"] .auth-card .h1{ color:#0f172a; }
html[data-theme="light"] .auth-card .sub{ color:#475569; }
html[data-theme="light"] .auth-card .form-label{ color:#334155; font-weight:600; }

html[data-theme="light"] .auth-card .input{
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #e2e8f0;
}
html[data-theme="light"] .auth-card .input::placeholder{ color:#94a3b8; }

html[data-theme="light"] .auth-card .input:focus{
  background:#ffffff;
  border-color:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,.25);
}

/* 2) Pastikan DARK selalu pakai variable theme (ngalahin override global .input) */
html[data-theme="dark"] .input{
  background: var(--inputBg) !important;
  color: var(--inputText) !important;
  border: 1px solid var(--stroke) !important;
}

html[data-theme="dark"] .input::placeholder{
  color: rgba(255,255,255,.55);
}

/* Optional: kalau ada autofill chrome bikin putih */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--inputText) !important;
  box-shadow: 0 0 0 1000px var(--inputBg) inset !important;
  transition: background-color 9999s ease-out 0s;
}