:root { --sb-bg: #1e293b; --sb-fg: #94a3b8; }
[data-bs-theme="dark"] { --sb-bg: #0a0f1a; }
body { font-size: .875rem; background: var(--bs-tertiary-bg); }
.card { border-color: var(--bs-border-color); }

/* Sidebar */
#sidebar { width: 260px; min-width: 260px; min-height: 100vh; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sb-bg); color: var(--sb-fg); }
#sidebar .brand { color: #fff; font-weight: 700; font-size: .95rem; }
#sidebar .brand small { color: #64748b; font-weight: 400; font-size: .7rem; padding-left: 2.2rem; }
.sidebar-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 700; padding: .9rem 1rem .25rem; }
#sidebar .nav-link { color: var(--sb-fg); padding: .5rem 1rem; border-radius: .4rem; margin-bottom: 2px; }
#sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
#sidebar .nav-link.active { color: #fff; background: #2563eb; font-weight: 600; }
@media (max-width: 991px) {
  body > .d-flex { flex-direction: column; }
  #sidebar { width: 100%; min-width: 0; min-height: 0; height: auto; position: static; }
  #sidebar nav { display: flex; gap: 4px; overflow-x: auto; }
  .sidebar-heading { display: none; }
  #sidebar .nav-link { white-space: nowrap; }
}

/* Kartu KPI & utilitas */
.kpi { border-left-width: 4px; transition: transform .15s; }
.kpi:hover { transform: translateY(-2px); }
.text-bg-orange { background: #ea580c; color: #fff; }
.table > :not(caption) > * > * { padding: .65rem .6rem; }
.table thead th { font-size: .72rem; text-transform: uppercase; color: var(--bs-secondary-color); white-space: nowrap; }
.table td { white-space: nowrap; }
.todo { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color); }
.todo small { display: block; color: var(--bs-secondary-color); }
.tile { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .5rem; }
.tile small { display: block; color: var(--bs-secondary-color); font-size: .7rem; }

/* Stepper sanksi */
.stepper { display: flex; gap: 4px; }
.stepper i { flex: 1; height: 6px; border-radius: 3px; background: var(--bs-border-color); }
.stepper i.on { background: var(--bs-danger); }

/* Timeline riwayat */
.timeline { list-style: none; margin: .75rem 0 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--bs-border-color); }
.timeline li { position: relative; padding: 0 0 1rem .9rem; }
.timeline li::before { content: ""; position: absolute; left: -1.65rem; top: .3rem; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bs-body-bg); box-sizing: content-box; background: var(--bs-primary); }
.timeline li.warning::before { background: var(--bs-warning); }
.timeline li.danger::before { background: var(--bs-danger); }
.timeline li.secondary::before { background: var(--bs-secondary); }
.timeline li small { display: block; color: var(--bs-secondary-color); }