:root{
  --sidebar-1:#242c6b;
  --sidebar-2:#3c4bb8;
  --bg:#f2f4fa;
  --card:#ffffff;
  --text:#1c2140;
  --muted:#767c9e;
  --border:#e7e9f5;
  --accent:#4a5fd4;
  --accent-dark:#2f3d9b;
  --teal:#0f9e8f;
  --teal-bg:#e3f7f4;
  --success:#1a9c5c;
  --success-bg:#e5f7ec;
  --warning:#c47f0a;
  --warning-bg:#fdf1de;
  --danger:#d6483f;
  --danger-bg:#fbe8e6;
  --radius:14px;
  --shadow:0 2px 10px rgba(28,33,64,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.d-none{display:none !important;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--accent);color:#fff;}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#c7cbe6;border-radius:8px;}

/* ---------- badges / pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:99px;font-size:12px;font-weight:600;
  white-space:nowrap;
}
.pill-success{background:var(--success-bg);color:var(--success);}
.pill-warning{background:var(--warning-bg);color:var(--warning);}
.pill-danger{background:var(--danger-bg);color:var(--danger);}
.pill-neutral{background:#eef0fa;color:#565c85;}
.pill-teal{background:var(--teal-bg);color:var(--teal);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:10px;border:1px solid transparent;
  font-size:13.5px;font-weight:600;transition:.15s;
}
.btn-primary{background:var(--accent-dark);color:#fff;}
.btn-primary:hover{background:#25306f;}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-dark);}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{background:#157c48;}
.btn-danger-outline{background:#fff;border-color:var(--danger-bg);color:var(--danger);}
.btn-danger-outline:hover{background:var(--danger-bg);}
.btn-teal{background:var(--teal);color:#fff;}
.btn-teal:hover{background:#0b8377;}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.btn-block{width:100%;justify-content:center;}

/* ---------- card ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{padding:20px 22px;}

/* ---------- typography helpers ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;}
.page-title{font-size:22px;color:var(--accent-dark);}
.page-sub{color:var(--muted);font-size:13.5px;margin-top:3px;}
.section-title{font-size:15px;font-weight:700;color:var(--text);}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{
  text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 14px 10px;border-bottom:1px solid var(--border);
}
td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#f8f9fd;}
.cell-name{font-weight:600;}
.cell-sub{color:var(--muted);font-size:12px;margin-top:1px;}

/* ---------- inputs ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.field input, .field select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  font-size:13.5px;background:#fbfbfe;color:var(--text);
}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;background:#fff;}
.pwd-toggle-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--muted);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:14px;
}
.pwd-toggle-btn:hover{background:#f2f4fa;color:var(--text);}
.search-input{
  display:flex;align-items:center;gap:8px;background:#f4f5fb;border:1px solid var(--border);
  border-radius:10px;padding:8px 12px;color:var(--muted);font-size:13px;
}
.search-input input{border:none;background:transparent;outline:none;width:100%;font-size:13px;color:var(--text);}

/* ---------- misc ---------- */
.flex{display:flex;}
.between{justify-content:space-between;}
.center-y{align-items:center;}
.gap8{gap:8px;}.gap10{gap:10px;}.gap14{gap:14px;}.gap20{gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}

.stat-card{padding:18px 20px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.stat-card .eyebrow{margin-bottom:8px;}
.stat-card .value{font-size:23px;font-weight:800;color:var(--text);}
.stat-card .stat-note{font-size:12px;color:var(--muted);margin-top:4px;}
.stat-card.accent-left{border-left:4px solid var(--accent);}
.stat-card.accent-teal{border-left:4px solid var(--teal);}
.stat-card.accent-warn{border-left:4px solid var(--warning);}
.stat-card.accent-danger{border-left:4px solid var(--danger);}

/* ================= LOGIN ================= */
#login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 15% 15%, #37469c 0%, #232a63 45%, #171b42 100%);
  padding:30px;
}
.login-wrap{
  width:100%;max-width:920px;display:grid;grid-template-columns:1.05fr 1fr;
  background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(10,12,40,.35);
}
.login-hero{
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.10) 0%, transparent 45%),
    linear-gradient(155deg, var(--sidebar-1), var(--sidebar-2));
  color:#fff;padding:44px 38px;display:flex;flex-direction:column;justify-content:space-between;position:relative;
}
.login-hero::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}
.brand{display:flex;align-items:center;gap:11px;}
.brand-mark{
  width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid rgba(255,255,255,.25);
}
.brand-name{font-size:16px;font-weight:800;letter-spacing:.02em;}
.brand-sub{font-size:11px;color:rgba(255,255,255,.65);letter-spacing:.04em;}
.login-hero h2{font-size:26px;line-height:1.3;margin-top:34px;font-weight:800;}
.login-hero p{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.6;margin-top:12px;max-width:340px;}
.hero-quote{
  margin-top:34px;font-size:12.5px;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.15);
  padding-top:16px;
}
.login-panel{padding:44px 40px;}
.login-panel h3{font-size:19px;}
.login-panel .page-sub{margin-bottom:22px;}
.role-list{display:flex;flex-direction:column;gap:10px;}
.role-btn{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--border);
  border-radius:12px;background:#fbfbfe;text-align:left;width:100%;transition:.15s;
}
.role-btn:hover{border-color:var(--accent);background:#f2f4ff;transform:translateY(-1px);}
.role-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
}
.role-name{font-size:13.5px;font-weight:700;color:var(--text);}
.role-desc{font-size:11.5px;color:var(--muted);margin-top:1px;}
.role-arrow{margin-left:auto;color:var(--muted);font-size:12px;}
.login-foot{margin-top:22px;font-size:11.5px;color:var(--muted);text-align:center;}

/* ================= APP SHELL ================= */
#app-shell{display:flex;min-height:100vh;}
#sidebar{
  width:242px;flex-shrink:0;
  background:linear-gradient(190deg, var(--sidebar-1), var(--sidebar-2));
  color:#fff;padding:0 0 20px;position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:width .18s;
}
#sidebar.collapsed{width:76px;}
#sidebar.collapsed .side-label,#sidebar.collapsed .side-group-title,#sidebar.collapsed .brand-text{display:none;}
#sidebar.collapsed .nav-item{justify-content:center;}
.side-top{display:flex;align-items:center;gap:11px;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.12);}
.side-group{margin-top:18px;padding:0 14px;}
.side-group-title{font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;padding:0 10px 8px;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10.5px 12px;border-radius:10px;
  font-size:13.5px;color:rgba(255,255,255,.8);margin-bottom:2px;font-weight:500;
}
.nav-item i{width:18px;text-align:center;font-size:14px;}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-item.active{background:rgba(255,255,255,.16);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #fff;}
.side-bottom{padding:16px 20px 0;margin-top:8px;}
.collapse-btn{
  display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.55);font-size:12px;background:transparent;
  border:none;padding:8px 0;
}
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.sidebar-toggle-btn{
  display:none;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;border-radius:9px;border:1px solid var(--border);
  background:#fff;color:var(--text);font-size:15px;
}
.sidebar-toggle-btn:hover{background:#f4f5fb;}
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(15,18,40,.45);z-index:45;
}
.sidebar-overlay.open{display:block;}
.topbar{
  background:#fff;border-bottom:1px solid var(--border);padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;
}
.topbar .search-input{width:320px;}
.topbar-right{display:flex;align-items:center;gap:18px;}
.bell{position:relative;color:var(--muted);font-size:16px;}
.bell .dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid #fff;}
.user-chip{display:flex;align-items:center;gap:10px;position:relative;}
.avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--sidebar-1));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;
}
.user-meta .u-name{font-size:13px;font-weight:700;}
.user-meta .u-role{font-size:11px;color:var(--muted);}
.user-menu{
  position:absolute;top:46px;right:0;background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 30px rgba(20,24,60,.14);width:190px;padding:8px;display:none;z-index:20;
}
.user-menu.open{display:block;}
.user-menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--text);}
.user-menu a:hover{background:#f4f5fb;}
.user-menu a.danger{color:var(--danger);}
.content{padding:26px 28px 60px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;flex-wrap:wrap;gap:12px;}

/* progress bar (capaian SPP) */
.progress-track{background:#eef0fa;height:8px;border-radius:99px;overflow:hidden;margin-top:8px;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--sidebar-1));border-radius:99px;}

/* simple bars for cashflow */
.bars{display:flex;align-items:flex-end;gap:22px;height:190px;padding:10px 6px 0;}
.bar-group{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;}
.bar-pair{display:flex;align-items:flex-end;gap:5px;height:150px;}
.bar{width:16px;border-radius:5px 5px 0 0;}
.bar-in{background:var(--accent);}
.bar-out{background:#f2a49c;}
.bar-lbl{font-size:11.5px;color:var(--muted);font-weight:600;}

/* modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,23,50,.5);display:none;align-items:center;justify-content:center;
  z-index:100;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 30px 60px rgba(0,0,0,.3);}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-body{padding:20px 22px;}
.modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}
.close-x{color:var(--muted);font-size:16px;background:none;border:none;}
.kv-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border);font-size:13.5px;}
.kv-row:last-child{border-bottom:none;}
.kv-row .k{color:var(--muted);}
.kv-row .v{font-weight:700;}
.kv-row.total .v{color:var(--accent-dark);font-size:15px;}

/* ================= WALI PORTAL (no sidebar) ================= */
#wali-shell{min-height:100vh;background:var(--bg);}
.wali-topbar{
  background:#fff;border-bottom:1px solid var(--border);padding:14px 32px;
  display:flex;justify-content:space-between;align-items:center;
}
.wali-content{max-width:1180px;margin:0 auto;padding:26px 24px 60px;}

/* responsive */
@media(max-width:900px){
  #sidebar{position:fixed;left:-260px;z-index:50;transition:left .2s;}
  #sidebar.mobile-open{left:0;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .topbar .search-input{display:none;}
  .sidebar-toggle-btn{display:flex;}
}

/* ---- Login: mobile ---- */
@media(max-width:900px){
  #login-screen{
    padding:calc(env(safe-area-inset-top,0px) + 24px) 18px calc(env(safe-area-inset-bottom,0px) + 24px);
    align-items:center;
    min-height:100vh;
    min-height:100dvh;
  }
  .login-wrap{
    grid-template-columns:1fr;
    max-width:420px;
    margin:auto;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(10,12,40,.3);
  }
  .login-hero{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:22px 22px 20px;
    flex-shrink:0;
  }
  .login-hero h2,.login-hero p,.hero-quote{display:none;}
  .login-hero::after{display:none;}
  .brand-mark{width:36px;height:36px;font-size:16px;}
  .brand-name{font-size:15px;}
  .login-panel{
    padding:26px 22px 30px;
  }
  .login-panel h3{font-size:20px;}
  .field input,.field select{
    font-size:16px; /* mencegah auto-zoom Safari iOS saat fokus */
    padding:13px 14px;
    border-radius:10px;
  }
  .pwd-toggle-btn{width:40px;height:40px;right:2px;font-size:15px;}
  .field{margin-bottom:18px;}
  .btn-primary.btn-block{
    padding:14px 16px;
    font-size:15px;
    border-radius:10px;
  }
  .login-foot{margin-top:26px;font-size:12.5px;}
}

@media(max-width:420px){
  .login-hero{padding-left:18px;padding-right:18px;}
  .login-panel{padding-left:18px;padding-right:18px;}
}