:root{
  --hijau:#3FB2A0;          /* warna 1: teal-green lembut */
  --hijau-tua:#2E9587;
  --hijau-muda:#E7F6F3;
  --biru:#6FB1E4;           /* warna 2: soft-blue */
  --biru-muda:#EAF3FB;
  --teks:#37474F;
  --teks-lembut:#6b7c85;
  --bg:#F6FBFA;
  --kartu:#ffffff;
  --garis:#e6efee;
  --radius:16px;
  --shadow:0 6px 22px rgba(63,178,160,.10);
}
*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--teks);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
a{color:var(--hijau-tua)}

/* ===== Sidebar ===== */
.app{display:flex;min-height:100vh}
.sidebar{
  width:260px;flex:0 0 260px;
  background:linear-gradient(170deg,var(--hijau) 0%,var(--hijau-tua) 100%);
  color:#fff;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{padding:22px 20px 16px;display:flex;align-items:center;gap:12px}
.sidebar .brand .logo{width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--hijau);font-size:22px;overflow:hidden}
.sidebar .brand .logo img{width:100%;height:100%;object-fit:cover}
.sidebar .brand b{font-size:1.05rem;line-height:1.1}
.sidebar .brand small{opacity:.85;font-size:.72rem}
.sidebar .nav-label{padding:14px 20px 6px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.sidebar a.item{
  display:flex;align-items:center;gap:12px;color:#eafaf7;text-decoration:none;
  padding:11px 20px;font-size:.93rem;border-left:4px solid transparent;transition:.15s;
}
.sidebar a.item i{font-size:1.15rem;width:22px;text-align:center}
.sidebar a.item:hover{background:rgba(255,255,255,.12)}
.sidebar a.item.active{background:rgba(255,255,255,.18);border-left-color:#fff;font-weight:600}

/* ===== Konten ===== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:#fff;border-bottom:1px solid var(--garis);padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:1.15rem;margin:0;font-weight:700}
.content{padding:24px;flex:1}

/* ===== Kartu ===== */
.card{border:none;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--kartu)}
.card .card-header{background:transparent;border-bottom:1px solid var(--garis);font-weight:700;padding:16px 20px}
.stat-card{border-radius:var(--radius);padding:20px;color:#fff;box-shadow:var(--shadow)}
.stat-card .ikon{font-size:1.8rem;opacity:.85}
.stat-card .nilai{font-size:1.5rem;font-weight:800;margin-top:4px}
.stat-card small{opacity:.9}
.bg-hijau{background:linear-gradient(140deg,var(--hijau),var(--hijau-tua))}
.bg-biru{background:linear-gradient(140deg,var(--biru),#4f97cf)}
.bg-hijau-soft{background:var(--hijau-muda);color:var(--hijau-tua)}
.bg-biru-soft{background:var(--biru-muda);color:#2c6ea3}

/* ===== Tombol ===== */
.btn-primary{background:var(--hijau);border-color:var(--hijau)}
.btn-primary:hover{background:var(--hijau-tua);border-color:var(--hijau-tua)}
.btn-outline-primary{color:var(--hijau-tua);border-color:var(--hijau)}
.btn-outline-primary:hover{background:var(--hijau);border-color:var(--hijau)}
.btn-info{background:var(--biru);border-color:var(--biru);color:#fff}
.btn-info:hover{background:#4f97cf;border-color:#4f97cf;color:#fff}
.text-hijau{color:var(--hijau-tua)!important}
.text-biru{color:#2c6ea3!important}
.badge-lunas{background:var(--hijau-muda);color:var(--hijau-tua)}
.badge-belum{background:#fdecea;color:#d9534f}

/* ===== Tabel ===== */
.table{--bs-table-hover-bg:var(--hijau-muda)}
.table thead th{background:var(--hijau-muda);color:var(--hijau-tua);border-bottom:none;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.table td,.table th{vertical-align:middle}

.form-control:focus,.form-select:focus{border-color:var(--hijau);box-shadow:0 0 0 .2rem rgba(63,178,160,.18)}
.form-label{font-weight:600;font-size:.88rem;color:var(--teks)}
.rounded-soft{border-radius:var(--radius)}

/* ===== Login & Portal ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--hijau-muda),var(--biru-muda));padding:20px}
.auth-card{max-width:420px;width:100%}
.auth-hero{width:70px;height:70px;border-radius:20px;background:linear-gradient(140deg,var(--hijau),var(--hijau-tua));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 14px;box-shadow:var(--shadow)}

@media(max-width:820px){
  .sidebar{position:fixed;left:-280px;z-index:1050;transition:.25s}
  .sidebar.open{left:0}
  .content{padding:16px}
}
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main,.content{padding:0}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd}
}