:root{
  --brand:#0a72fa;        /* warna utama biru */
  --brand-dark:#085cd4;   /* sedikit lebih gelap buat hover */
  --soft:#f6f8fb;
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--soft);
}

.navbar-brand img{
  width: 34px;
  border-radius: 10px;
  background:#fff;
  padding:3px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.card{
  border:0;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15, 23, 42, .06);
}

/* BUTTON BRAND */
.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  font-weight:800;
  color:#fff;
}
.btn-brand:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color:#fff;
}

/* BADGE LEMBUT NUANSA BIRU */
.badge-soft{
  background:#e6f1ff;
  color:#0a72fa;
  border:1px solid #c2deff;
  font-weight:700;
}

/* ICON DI KPI / INFO BOX */
.kpi-icon{
  width:48px;height:48px;
  border-radius:14px;
  background:#e6f1ff;
  border:1px solid #c2deff;
  display:flex;align-items:center;justify-content:center;
  color:#0a72fa;
}

/* TABLE */
.table > :not(caption) > * > *{
  padding: .9rem .9rem;
}

/* PIL FILE JUGA IKUT WARNA BRAND */
.file-pill{
  display:inline-flex;
  gap:.45rem;
  align-items:center;
  padding:.35rem .6rem;
  border:1px solid rgba(10,114,250,.25); /* var(--brand) versi transparan */
  border-radius:999px;
  font-size:.85rem;
  text-decoration:none;
  color:#0a72fa;
}

/* DROPZONE */
.dropzone{
  border:2px dashed #d9e2ef;
  background:#fff;
  border-radius:16px;
  padding:18px;
}

/* ====== LAYOUT DASHBOARD DENGAN SIDEBAR ====== */
.dashboard-wrap{
  display:flex;
  min-height:100vh;
}

/* SIDEBAR */
.sidebar{
  width:260px;
  background:#ffffff;
  border-right:1px solid #e5e7eb;
  padding:20px 18px;
  position:sticky;
  top:80px;
  align-self:flex-start;
}

.sidebar-logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.5rem;
}

.sidebar-logo img{
  width:32px;
  height:auto;
  border-radius:10px;
  background:#fff;
  padding:3px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.sidebar-title{
  font-weight:800;
  font-size:1rem;
}

.sidebar-sub{
  font-size:.8rem;
  color:#6b7280;
}

.sidebar-menu{
  list-style:none;
  padding:0;
  margin:0 0 1.5rem 0;
}

.sidebar-menu li + li{
  margin-top:.25rem;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .75rem;
  border-radius:999px;
  font-size:.9rem;
  color:#4b5563;
  text-decoration:none;
}

.sidebar-link i{
  font-size:.9rem;
}

.sidebar-link.active,
.sidebar-link:hover{
  background:rgba(10,114,250,.1); /* var(--brand) transparan */
  color:#0a72fa;
}

.sidebar-footer{
  font-size:.75rem;
  color:#9ca3af;
  margin-top:80px;
}

/* KONTEN */
.dashboard-main{
  flex:1;
  padding:16px 18px 24px;
}

/* Filter bar */
.filter-bar{
  background:#f9fafb;
  border-bottom:1px solid #e5e7eb;
}