/* ============================================================
   Tampilan mengikuti demo fungsional AUF
   ============================================================ */
*{box-sizing:border-box}
:root{--navy:#14263e;--primary:#1d4ed8;--bg:#f3f5f9;--line:#dbe1ea;--muted:#64748b}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:#0f172a}
a{color:var(--primary)}

/* ---------- login ---------- */
#login{min-height:100vh;background:linear-gradient(140deg,#14263e,#1d3a5f 60%,#1d4ed8 130%);display:flex;align-items:center;justify-content:center;padding:16px}
.lbox{background:#fff;border-radius:16px;padding:30px 32px;width:400px;max-width:100%;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.logo{font-size:20px;font-weight:800;color:var(--navy)}
.logo span{color:var(--primary)}
.lsub{font-size:12px;color:var(--muted);margin:3px 0 18px}
.fld{margin-bottom:11px}
.fld label{font-size:12px;font-weight:600;display:block;margin-bottom:4px}
.fld input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:14px}
/* kotak sandi + tombol Lihat: tombolnya menempel di dalam kotak, bukan di
   sebelahnya, supaya lebarnya tetap penuh dan enak ditekan dari HP */
.sandi{position:relative}
.sandi input{padding-right:66px}
.sandi button{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  background:#f1f5f9;color:var(--muted);border:1px solid var(--line);border-radius:7px;
  padding:5px 9px;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1}
.sandi button:hover{background:#e2e8f0;color:var(--navy)}
.btnL{width:100%;background:var(--primary);color:#fff;border:0;border-radius:9px;padding:11px;font-size:14px;font-weight:600;cursor:pointer}
.lerr{color:#dc2626;font-size:12px;margin-top:8px}
.akun{font-size:11px;color:var(--muted);margin-top:13px;background:#f8fafc;border:1px dashed var(--line);border-radius:8px;padding:8px 10px;line-height:1.7}

/* ---------- kerangka ---------- */
.topbar{background:var(--navy);color:#fff;padding:9px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-weight:700;font-size:13.5px}
.brand small{display:block;font-weight:400;color:#b6c2d6;font-size:10px}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{color:#cdd8e8;padding:6px 9px;border-radius:7px;font-size:12px;text-decoration:none}
nav a.on{background:var(--primary);color:#fff}
nav a:hover{background:#20395c;color:#fff}
.user{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px}
.chip{background:#20395c;border-radius:999px;padding:4px 10px;color:#cdd8e8}
.chip b{color:#7fb0ff}
.keluar{background:#dc2626;color:#fff;border-radius:7px;padding:5px 10px;font-size:11.5px;cursor:pointer;border:0;text-decoration:none}
.wrap{max-width:1240px;margin:16px auto;padding:0 14px}
h1{font-size:18px;margin:0 0 3px}
.sub{color:var(--muted);font-size:12px;margin-bottom:12px}

/* ---------- kartu & KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.kpi .v{font-size:18px;font-weight:700}
.kpi .l{font-size:10.5px;color:var(--muted)}
.kpi.b{border-left:4px solid var(--primary)}
.kpi.g{border-left:4px solid #059669}
.kpi.a{border-left:4px solid #d97706}
.kpi.r{border-left:4px solid #dc2626}
.card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:11px}
.card h2{font-size:13px;margin:0 0 9px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:900px){.g2{grid-template-columns:1fr}}

/* ---------- tabel ---------- */
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-size:10px;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:2px solid var(--line);padding:5px 6px;white-space:nowrap}
td{border-bottom:1px solid #eef1f6;padding:6px;vertical-align:top}
tr:hover td{background:#fafbfd}

/* ---------- label status ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;white-space:nowrap}
.bOK{background:#d1fae5;color:#065f46}
.bKR{background:#fef3c7;color:#92400e}
.bRT{background:#ffedd5;color:#9a3412}
.bRS{background:#fee2e2;color:#991b1b}
.bGD{background:#dbeafe;color:#1e40af}
.bBR{background:#e2e8f0;color:#334155}

/* ---------- tombol & input ---------- */
.btn{background:var(--primary);color:#fff;border:0;border-radius:7px;padding:7px 12px;font-size:12px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.sec{background:#fff;color:#1e293b;border:1px solid var(--line)}
.btn.g{background:#059669}
.btn.a{background:#d97706}
.btn.r{background:#dc2626}
.btn.sm{padding:4px 9px;font-size:11px}
.btn:disabled{opacity:.5;cursor:not-allowed}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:12.5px;background:#fff;font-family:inherit}
label{font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.right{text-align:right}
.muted{color:var(--muted)}

/* ---------- pesan ---------- */
.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:9px 12px;border-radius:8px;font-size:12px;margin-bottom:11px}
.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:9px 12px;border-radius:8px;font-size:12px;margin-bottom:11px}
.blok{background:#fff;border:1px solid #fecaca;border-radius:11px;padding:26px;text-align:center;color:#991b1b}
.upload{border:2px dashed var(--line);border-radius:10px;padding:16px;text-align:center;background:#f8fafc;cursor:pointer}
.upload:hover{border-color:var(--primary)}
.upload.hot{border-color:var(--primary);background:#eff6ff}

/* ---------- cetak ---------- */
@media print{
  .topbar,.noprint{display:none!important}
  .wrap{max-width:none;margin:0;padding:0}
  .card{border:0;box-shadow:none;padding:0;margin-bottom:8px}
  body{background:#fff}
  .pagebreak{page-break-after:always}
}
.kop{border-bottom:2px solid #0f172a;padding-bottom:6px;margin-bottom:10px}
.kop b{font-size:15px}
.kop small{display:block;color:#475569}
.ttd{margin-top:26px;display:flex;gap:40px;font-size:11.5px}
.ttd div{flex:1;text-align:center}
.ttd .garis{margin-top:44px;border-top:1px solid #0f172a;padding-top:3px}