:root{
  --bg1:#0e8f86; --bg2:#1e2a56; --bg3:#5b3db8;
  --card:#0f1720cc; --stroke:#ffffff1a;
  --text:#e8eef7; --muted:#a8b3c2; --accent:#25d6c8;
}

/* 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; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  overflow-x:hidden; overflow-y:auto;

  /* FIX #3: background tidak bikin strip saat scroll */
  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%),
    #070b12;
  background-attachment: fixed;
}

/* ---------- LOGIN ---------- */
.auth-wrap{
  /* FIX #4: benar-benar center dan tidak bikin space bawah */
  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: 0 20px 80px rgba(0,0,0,.45);
  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;
}

/* FIX #5: input selalu sejajar, tinggi konsisten, no “miring” */
.input{
  display:block;
  width:100%;
  height:44px;
  line-height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#eaf0ff;
  outline:none;
  font-size:14px;
  color:#081018;
}

/* Password biasanya “keliatan turun” karena line-height.
   Kita override agar text sejajar. */
.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)}

.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:#ffd2d2;
  font-size:13px;
}

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

/* ---------- DASHBOARD (tetap ada, nanti dipakai) ---------- */
a{color:inherit}
.app{display:flex;min-height:100vh;}
.sidebar{
  width:260px;padding:16px;border-right:1px solid var(--stroke);
  background:rgba(10,14,22,.55);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{
  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);
}
.nav a:hover{border-color:var(--stroke)}
.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:rgba(10,14,22,.55);
  margin-bottom:14px;
}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.card{
  border:1px solid var(--stroke);background:rgba(10,14,22,.55);
  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:rgba(10,14,22,.45);overflow:hidden;
}
.section-h{
  padding:14px 16px;border-bottom:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.section-b{padding:14px 16px}
.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;}
}

/* FIX: tabel list kadang "hilang" karena layer/backdrop-filter */
.section { position: relative; }
.section-h, .section-b { position: relative; z-index: 2; }

/* pastikan tabel & isi selalu tampil di atas layer */
.section-b table { position: relative; z-index: 3; width: 100%; }

/* paksa warna teks & baris ada background tipis biar pasti kelihatan */
.section-b tbody td { color: var(--text) !important; }
.section-b tbody tr { background: rgba(255,255,255,.02); }
.section-b tbody tr:hover { background: rgba(255,255,255,.04); }

/* kadang row tinggi 0 karena style browser/line-height: paksa */
.section-b td, .section-b th { vertical-align: top; }

/* ===== FIX TABEL HILANG (GLASS + GRADIENT ISSUE) ===== */

/* pastikan section jadi anchor layer */
.section,
.section-b {
  position: relative;
  z-index: 1;
}

/* tabel wajib punya background sendiri */
.section-b table {
  position: relative;
  z-index: 3;
  background: rgba(10, 12, 18, 0.85);
  border-radius: 12px;
  overflow: hidden;
}

/* pastikan isi tbody benar-benar kelihatan */
.section-b tbody tr {
  background: rgba(255, 255, 255, 0.03);
}

.section-b tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.06);
}

.section-b tbody tr:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* paksa teks tampil */
.section-b td,
.section-b th {
  color: #e8eaf0 !important;
  position: relative;
  z-index: 4;
}
/* ===== FORCE TABLE RENDERING (tbody kadang jadi 0 / block) ===== */
.section-b table { 
  display: table !important;
  border-collapse: collapse !important;
}

.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; 
}
.tbl{
  width:100%;
  border-collapse:collapse;
  background:rgba(10,12,18,.85);
  border-radius:14px;
  overflow:hidden;
}
.tbl th, .tbl td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--text);
  vertical-align:top;
}
.tbl th{
  color:#cfd7e6;
  font-weight:900;
  background:rgba(255,255,255,.03);
}
.tbl tr:hover td{
  background:rgba(255,255,255,.04);
}
/* ===============================
   DASHBOARD COLOR CARDS (FIX)
   =============================== */

.dashboard-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* background warna PASTI KELIHATAN */
.dashboard-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: var(--card-bg);
  opacity: 1 !important;
}

/* isi card */
.dashboard-card > *{
  position: relative;
  z-index: 1;
}

/* teks biar kontras */
.dashboard-card.has-color{
  color:#0f172a !important;
}
.dashboard-card.has-color .muted{
  color: rgba(15,23,42,.75) !important;
}
.dashboard-card.has-color .pill{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.12);
  color:#0f172a;
}

/* ===== WARNA PER JENIS KAS ===== */
.card-kas-umum   { --card-bg: linear-gradient(135deg,#e3f2fd,#90caf9); }
.card-kas-sosial { --card-bg: linear-gradient(135deg,#e8f5e9,#81c784); }
.card-kas-jkap   { --card-bg: linear-gradient(135deg,#fff3e0,#ffb74d); }
.card-kas-sampah { --card-bg: linear-gradient(135deg,#fce4ec,#f06292); }
.card-kas-wajib  { --card-bg: linear-gradient(135deg,#ede7f6,#9575cd); }