/* ==========================================================================
   BPBD Admin — Design tokens (mirror mobile "Polished Orange Government")
   ========================================================================== */
:root {
  --bpbd-primary: #EA580C;
  --bpbd-primary-deep: #C2410C;
  --bpbd-primary-soft: #FFF7ED;
  --bpbd-primary-tint: #FFEDD5;
  --bpbd-ink: #0F172A;
  --bpbd-ink-soft: #1E293B;
  --bpbd-surface: #FFFFFF;
  --bpbd-canvas: #F4F6FB;
  --bpbd-border: #E5E7EB;
  --bpbd-border-strong: #CBD5E1;
  --bpbd-text: #0F172A;
  --bpbd-text-secondary: #334155;
  --bpbd-muted: #64748B;
  --bpbd-success: #16A34A;
  --bpbd-warning: #F59E0B;
  --bpbd-danger: #DC2626;
  --bpbd-info: #2563EB;
  --bpbd-radius: 16px;
  --bpbd-radius-sm: 10px;
  --bpbd-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --bpbd-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
  --bpbd-shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.12);
}

* { -webkit-font-smoothing: antialiased; }

body {
  background: var(--bpbd-canvas);
  color: var(--bpbd-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Navbar (putih bersih + brand mark) ---- */
.bpbd-navbar {
  background: var(--bpbd-surface);
  border-bottom: 1px solid var(--bpbd-border);
  box-shadow: var(--bpbd-shadow-sm);
}
.bpbd-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: var(--bpbd-ink) !important;
}
.bpbd-brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bpbd-primary);
  display: inline-block;
}
.bpbd-navbar .nav-link {
  color: var(--bpbd-text-secondary);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.4rem 0.85rem !important;
  transition: background .15s, color .15s;
}
.bpbd-navbar .nav-link:hover { background: var(--bpbd-primary-soft); color: var(--bpbd-primary-deep); }
.bpbd-navbar .nav-link.active {
  color: var(--bpbd-primary-deep);
  background: var(--bpbd-primary-tint);
}
.bpbd-accent-strip { height: 3px; background: var(--bpbd-primary); }

/* ---- Cards ---- */
.card {
  background: var(--bpbd-surface);
  border: 1px solid var(--bpbd-border) !important;
  border-radius: var(--bpbd-radius);
  box-shadow: var(--bpbd-shadow-sm);
}
.card-shadow { box-shadow: var(--bpbd-shadow-md); }
.card-header {
  background: var(--bpbd-surface);
  border-bottom: 1px solid var(--bpbd-border);
  font-weight: 700;
  color: var(--bpbd-ink);
  border-top-left-radius: var(--bpbd-radius) !important;
  border-top-right-radius: var(--bpbd-radius) !important;
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--bpbd-primary);
  border-color: var(--bpbd-primary);
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--bpbd-primary-deep);
  border-color: var(--bpbd-primary-deep);
}
.btn-outline-primary {
  color: var(--bpbd-primary-deep);
  border-color: var(--bpbd-primary);
  font-weight: 700;
}
.btn-outline-primary:hover { background: var(--bpbd-primary); border-color: var(--bpbd-primary); }
.text-orange { color: var(--bpbd-primary-deep) !important; }

/* ---- Headings / page intro ---- */
.bpbd-page-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--bpbd-ink);
  letter-spacing: -0.2px;
  margin: 0;
}
.bpbd-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--bpbd-primary-deep);
}

/* ---- Hero banner (dark, mirror mobile) ---- */
.bpbd-hero {
  position: relative;
  overflow: hidden;
  background: var(--bpbd-ink);
  border-radius: var(--bpbd-radius);
  color: #F8FAFC;
  padding: 1.5rem;
}
.bpbd-hero::after {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--bpbd-primary);
  opacity: 0.18;
}
.bpbd-hero .bpbd-eyebrow { color: #FB923C; }
.bpbd-hero h1, .bpbd-hero h2 { color: #fff; font-weight: 900; }

/* ---- Stat cards ---- */
.bpbd-stat {
  background: var(--bpbd-surface);
  border: 1px solid var(--bpbd-border);
  border-top: 3px solid var(--bpbd-primary);
  border-radius: var(--bpbd-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--bpbd-shadow-sm);
  height: 100%;
}
.bpbd-stat .bpbd-stat-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--bpbd-muted);
}
.bpbd-stat .bpbd-stat-value {
  font-size: 2rem; font-weight: 900; letter-spacing: -1px;
  color: var(--bpbd-primary-deep); line-height: 1.1;
}
.bpbd-stat .bpbd-stat-hint { font-size: 0.72rem; color: var(--bpbd-text-secondary); margin-top: 2px; }

/* ---- Module badge ---- */
.bpbd-module-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2px;
  white-space: nowrap;
}
.bpbd-module-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ---- Filter chips ---- */
.bpbd-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bpbd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--bpbd-border-strong);
  background: var(--bpbd-surface);
  color: var(--bpbd-text-secondary);
  font-size: 0.78rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: all .15s;
}
.bpbd-chip:hover { border-color: var(--bpbd-primary); color: var(--bpbd-primary-deep); }
.bpbd-chip.active {
  background: var(--bpbd-primary);
  border-color: var(--bpbd-primary);
  color: #fff;
}

/* ---- Tables ---- */
.table-wrap { max-height: 540px; overflow: auto; border-radius: var(--bpbd-radius-sm); }
.table thead th {
  background: var(--bpbd-ink);
  color: #fff;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  border: none;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #F8FAFC; }
.table tbody td { vertical-align: middle; color: var(--bpbd-text-secondary); }

/* ---- Badges ---- */
.badge.text-bg-secondary { background: #E2E8F0 !important; color: #334155 !important; }
.badge.text-bg-warning { background: #FEF3C7 !important; color: #B45309 !important; }
.badge.text-bg-success { background: #DCFCE7 !important; color: #15803D !important; }

/* ---- Detail page ---- */
.bpbd-detail-label { font-size: 0.72rem; color: var(--bpbd-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
.bpbd-detail-value { color: var(--bpbd-ink); font-weight: 600; margin-bottom: 0.75rem; }
.bpbd-demografi-cell {
  background: var(--bpbd-primary-soft);
  border: 1px solid var(--bpbd-primary-tint);
  border-radius: var(--bpbd-radius-sm);
  padding: 8px 10px; text-align: center;
}
.bpbd-demografi-cell .lbl { font-size: 0.68rem; font-weight: 800; color: var(--bpbd-muted); text-transform: uppercase; }
.bpbd-demografi-cell .val { font-size: 1.15rem; font-weight: 900; color: var(--bpbd-primary-deep); }
.text-prewrap { white-space: pre-wrap; }
.mono-small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
}

/* ---- Chart wrappers ---- */
.bpbd-chart-box { position: relative; width: 100%; }

/* ---- Count-up number ---- */
.bpbd-countup { font-variant-numeric: tabular-nums; }

/* ---- Doc thumbnail ---- */
.bpbd-doc-thumb {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--bpbd-radius-sm);
  border: 1px solid var(--bpbd-border);
  background: var(--bpbd-canvas);
}
.bpbd-doc-broken::after {
  content: "Foto tidak dapat dimuat";
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4/3;
  border: 1px dashed var(--bpbd-border-strong);
  border-radius: var(--bpbd-radius-sm);
  color: var(--bpbd-muted); font-size: 0.72rem; text-align: center; padding: 8px;
}