/* ============================================================
   FST Finance — Tema UI terpusat
   Semua gaya kustom aplikasi ditempatkan di sini (bukan inline).
   ============================================================ */
:root{
  --fst-primary:#1e40af;
  --fst-primary-2:#3b82f6;
  --fst-accent:#0ea5e9;
  --fst-sidebar-bg:#0f172a;
  --fst-sidebar-bg-2:#1e293b;
  --fst-sidebar-w:264px;
  --fst-topbar-h:64px;
  --fst-bg:#eef2f9;
  --fst-card-shadow:0 .25rem 1.25rem rgba(15,23,42,.08);
  --fst-radius:16px;
}

*{scrollbar-width:thin;scrollbar-color:#94a3b8 transparent}
body{
  background:var(--fst-bg);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:#1e293b;
}

/* ---------- Shell layout ---------- */
.fst-shell{display:flex;min-height:100vh}
.fst-main{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:var(--fst-sidebar-w);transition:margin .25s ease}

/* ---------- Sidebar ---------- */
.fst-sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--fst-sidebar-w);
  background:linear-gradient(180deg,var(--fst-sidebar-bg),var(--fst-sidebar-bg-2));
  color:#cbd5e1;display:flex;flex-direction:column;z-index:1040;
  box-shadow:2px 0 24px rgba(15,23,42,.18);transition:transform .25s ease;
}
.fst-brand{display:flex;align-items:center;gap:.75rem;padding:1.15rem 1.25rem;border-bottom:1px solid rgba(148,163,184,.15)}
.fst-brand-logo{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;color:#fff;
  background:linear-gradient(135deg,var(--fst-primary-2),var(--fst-accent));box-shadow:0 6px 16px rgba(14,165,233,.4);
}
.fst-brand-text{display:flex;flex-direction:column;line-height:1.1}
.fst-brand-text strong{color:#fff;font-size:1.05rem;letter-spacing:.2px}
.fst-brand-text small{color:#94a3b8;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}

.fst-nav{flex:1;overflow-y:auto;padding:.75rem .75rem 1rem}
.fst-nav-group{padding:.9rem .75rem .35rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
.fst-nav-link{
  display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;margin:.1rem 0;border-radius:10px;
  color:#cbd5e1;text-decoration:none;font-size:.9rem;font-weight:500;transition:all .15s ease;position:relative;
}
.fst-nav-link i{font-size:1.05rem;width:1.4rem;text-align:center;flex:none}
.fst-nav-link:hover{background:rgba(148,163,184,.12);color:#fff}
.fst-nav-link.active{
  background:linear-gradient(135deg,var(--fst-primary-2),var(--fst-primary));color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.35);
}
.fst-nav-link.active::before{content:"";position:absolute;left:-.75rem;top:50%;transform:translateY(-50%);width:4px;height:60%;border-radius:0 4px 4px 0;background:var(--fst-accent)}
.fst-sidebar-foot{padding:.75rem;border-top:1px solid rgba(148,163,184,.15)}
.fst-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1035}

/* ---------- Topbar ---------- */
.fst-topbar{
  position:sticky;top:0;z-index:1030;height:var(--fst-topbar-h);
  display:flex;align-items:center;gap:1rem;padding:0 1.25rem;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(15,23,42,.06);
}
.fst-topbar-title{flex:1;min-width:0}
.fst-topbar-title h1{font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fst-topbar-sub{font-size:.76rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fst-burger{display:none;border:1px solid #e2e8f0;border-radius:10px}
.fst-user-btn{display:flex;align-items:center;gap:.6rem;border:1px solid #e2e8f0;border-radius:12px;padding:.35rem .6rem;background:#fff}
.fst-avatar{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--fst-primary-2),var(--fst-accent));
}

/* ---------- Content ---------- */
.fst-content{padding:1.5rem 1.25rem 3rem;flex:1}
@media(min-width:992px){.fst-content{padding:1.75rem 2rem 3rem}}

/* ---------- Cards & components ---------- */
.card{border:0;border-radius:var(--fst-radius);box-shadow:var(--fst-card-shadow)}
.card .card,.card.p-3{border-radius:var(--fst-radius)}
.stat{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.badge-role{text-transform:capitalize}
.form-label{font-weight:600;font-size:.86rem;color:#334155}
.money{font-variant-numeric:tabular-nums}
.small-muted{font-size:.82rem;color:#6c757d}
.sticky-actions{position:sticky;top:calc(var(--fst-topbar-h) + .5rem);z-index:5}
.table>:not(caption)>*>*{vertical-align:middle}
.table-responsive{min-height:120px}
.table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;border-bottom-width:1px}
.btn{border-radius:10px;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--fst-primary-2),var(--fst-primary));border:0}
.btn-primary:hover{filter:brightness(1.05)}
.form-control,.form-select{border-radius:10px;border-color:#e2e8f0}
.form-control:focus,.form-select:focus{border-color:var(--fst-primary-2);box-shadow:0 0 0 .2rem rgba(59,130,246,.15)}
.alert{border:0;border-radius:12px}
.badge{font-weight:600}

/* Kartu statistik dengan aksen kiri */
.stat-card{position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;background:rgba(59,130,246,.08)}

/* ---------- Responsif: sidebar jadi off-canvas ---------- */
@media(max-width:991.98px){
  .fst-main{margin-left:0}
  .fst-sidebar{transform:translateX(-100%)}
  .fst-burger{display:inline-flex}
  body.fst-sidebar-open .fst-sidebar{transform:translateX(0)}
  body.fst-sidebar-open .fst-sidebar-backdrop{display:block}
}

/* ---------- Halaman login ---------- */
.fst-login-page{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#0ea5e9 100%);position:relative;overflow:hidden}
.fst-login-page::before,.fst-login-page::after{content:"";position:absolute;border-radius:50%;filter:blur(10px)}
.fst-login-page::before{width:320px;height:320px;background:rgba(14,165,233,.25);top:-80px;right:-60px}
.fst-login-page::after{width:260px;height:260px;background:rgba(59,130,246,.25);bottom:-70px;left:-50px}
.fst-login-card{position:relative;z-index:1;width:100%;max-width:420px;border-radius:22px;
  background:rgba(255,255,255,.97);box-shadow:0 30px 60px rgba(2,6,23,.45);padding:2.4rem 2.2rem}
.fst-login-logo{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:2rem;color:#fff;margin:0 auto 1rem;
  background:linear-gradient(135deg,var(--fst-primary-2),var(--fst-accent));box-shadow:0 12px 26px rgba(14,165,233,.45)}
.fst-login-card .form-control{padding:.7rem .9rem}
.fst-login-title{font-weight:800;letter-spacing:-.02em}

/* ---------- Utility lebar kolom aksi tabel ---------- */
.col-action-sm{min-width:360px}
.col-action-md{min-width:420px}
.input-inline-file{max-width:330px}