:root{
  --hijau:#0369a1;--hijau-tua:#075985;--hijau-muda:#e0f2fe;--kuning:#f2b705;
  --teks:#1f2933;--abu:#5b6670;--garis:#dbe6ee;--bg:#f3f8fb;--card:#fff;
  --merah:#d23b3b;--biru:#0891b2;--radius:14px;--shadow:0 4px 18px rgba(7,89,133,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--teks);background:var(--bg);line-height:1.55}
a{color:var(--hijau);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* topbar */
.topbar{background:var(--hijau);color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:1.1rem}
.brand img{width:36px;height:36px;border-radius:50%;background:#fff;padding:2px}
.brand b{color:var(--kuning)}
.mainnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mainnav a{color:#eaf6fd;padding:8px 12px;border-radius:8px;font-weight:600;font-size:.9rem}
.mainnav a:hover{background:rgba(255,255,255,.14)}
.mainnav a.on{background:rgba(255,255,255,.22);color:#fff}
.mainnav a.logout{background:var(--kuning);color:#3a2c00;margin-left:6px}
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
@media(max-width:820px){
  .navtoggle{display:block}
  .mainnav{position:absolute;top:60px;right:0;left:0;background:var(--hijau-tua);flex-direction:column;align-items:stretch;padding:8px;gap:2px;display:none}
  body.navopen .mainnav{display:flex}
}

/* page */
.page{padding:22px 16px 60px}
.userbar{color:var(--abu);font-size:.9rem;margin-bottom:14px}
.role{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.role-admin{background:var(--hijau)}.role-petugas{background:var(--biru)}.role-pelanggan{background:var(--kuning);color:#3a2c00}

h1{font-size:1.5rem;margin-bottom:4px}
h2{font-size:1.15rem;margin:18px 0 10px}
.muted{color:var(--abu)}
.lead{color:var(--abu);margin-bottom:16px}

/* cards & grid */
.card{background:var(--card);border:1px solid var(--garis);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* stat */
.stat{background:var(--card);border:1px solid var(--garis);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.stat .lbl{font-size:.8rem;color:var(--abu);text-transform:uppercase;letter-spacing:.04em}
.stat .num{font-size:1.7rem;font-weight:800;color:var(--hijau-tua);margin-top:4px}
.stat.warn .num{color:var(--merah)} .stat.gold .num{color:#b8860b}

/* buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:9px;font-weight:700;font-size:.93rem;border:0;cursor:pointer;transition:.15s;text-align:center}
.btn-primary{background:var(--hijau);color:#fff}.btn-primary:hover{background:var(--hijau-tua)}
.btn-gold{background:var(--kuning);color:#3a2c00}.btn-gold:hover{filter:brightness(.96)}
.btn-ghost{background:#fff;color:var(--hijau);border:1px solid var(--hijau)}
.btn-danger{background:var(--merah);color:#fff}
.btn-sm{padding:6px 12px;font-size:.85rem}
.btn-block{display:block;width:100%}

/* forms */
label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--garis);border-radius:9px;font-size:1rem;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--hijau-muda);border-color:var(--hijau)}
textarea{min-height:90px;resize:vertical}
.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.hint{font-size:.82rem;color:var(--abu);margin-top:4px}

/* table */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--garis);font-size:.92rem}
th{background:var(--hijau-muda);color:var(--hijau-tua);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--radius);box-shadow:var(--shadow)}

/* badges */
.badge{display:inline-block;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px}
.badge-lunas{background:#dcf5e6;color:#127a3e}
.badge-belum{background:#fde8e8;color:#c0392b}
.badge-pending{background:#fff4d6;color:#9a6b00}
.badge-ditolak{background:#eee;color:#666}
.badge-baru{background:#e0f2fe;color:#075985}
.badge-proses{background:#fff4d6;color:#9a6b00}
.badge-selesai{background:#dcf5e6;color:#127a3e}

/* alert */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.93rem}
.alert-success{background:#dcf5e6;color:#0f6b37;border:1px solid #aee3c4}
.alert-error,.alert-danger{background:#fde8e8;color:#b02525;border:1px solid #f5b8b8}
.alert-warning{background:#fff4d6;color:#8a6100;border:1px solid #f3d98a}
.alert-info{background:#e0f2fe;color:#075985;border:1px solid #b9e0fb}

/* auth */
.auth{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:30px 16px}
.auth-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:30px;max-width:420px;width:100%;border:1px solid var(--garis)}
.auth-logo{width:74px;height:74px;border-radius:50%;background:#fff;padding:4px;box-shadow:var(--shadow);display:block;margin:0 auto 12px;border:1px solid var(--garis)}
.center{text-align:center}

/* map */
#map{height:420px;border-radius:var(--radius);border:1px solid var(--garis);z-index:1}
.map-pick{height:300px;border-radius:var(--radius);border:1px solid var(--garis)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;margin:10px 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}

/* misc */
.hero-ksm{background:linear-gradient(160deg,var(--hijau),var(--hijau-tua));color:#fff;border-radius:18px;padding:34px;margin-bottom:20px}
.hero-ksm h1{font-size:1.8rem}.hero-ksm p{opacity:.92;margin-top:6px}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.foot{padding:22px 16px;text-align:center;color:var(--abu);font-size:.85rem;border-top:1px solid var(--garis);background:#fff}
.flexbetween{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}