/* SIDEBAR-SPA-v1 — rangka sidebar tetap untuk halaman klien.
   Murni presentasi: tidak menyentuh form, field, atau logika halaman. */
:root { --spk-w: 248px; }

#spk-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--spk-w);
  background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
  color: #e5e7eb; z-index: 1040; display: flex; flex-direction: column;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  box-shadow: 2px 0 12px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.spk-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .2px;
}
.spk-brand i { color: #f59e0b; font-size: 20px; }
.spk-brand em {
  display: block; font-style: normal; font-size: 11px; font-weight: 500;
  color: #94a3b8; letter-spacing: .4px; text-transform: uppercase;
}
.spk-menu { flex: 1; overflow-y: auto; padding: 12px 0; }
.spk-menu::-webkit-scrollbar { width: 6px; }
.spk-menu::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.spk-item {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 10px; padding: 10px 12px; border-radius: 8px;
  color: #cbd5e1; text-decoration: none; font-size: 14.5px; line-height: 1.25;
}
.spk-item i { width: 20px; text-align: center; font-size: 15px; flex: none; }
.spk-item:hover { background: #1f2937; color: #fff; text-decoration: none; }
.spk-item.active { background: #2563eb; color: #fff; }
.spk-logout {
  border-top: 1px solid rgba(255,255,255,.08); border-radius: 0;
  margin: 0; padding: 14px 22px; color: #fca5a5;
}
.spk-logout:hover { background: #1f2937; color: #fecaca; }

#spk-content { min-height: 100vh; }
@media (min-width: 992px) {
  #spk-content { margin-left: var(--spk-w); }
}
.spk-oldnav { display: none !important; }

#spk-burger {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 1045;
  width: 42px; height: 42px; border: 0; border-radius: 8px;
  background: #111827; color: #fff; font-size: 17px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
#spk-overlay {
  display: none; position: fixed; inset: 0; z-index: 1035;
  background: rgba(0,0,0,.5);
}
#spk-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000;
  background: #2563eb; opacity: 0; pointer-events: none;
  transition: width .3s ease, opacity .3s ease;
}
body.spk-loading #spk-content { opacity: .55; pointer-events: none; }

@media (max-width: 991.98px) {
  #spk-sidebar { transform: translateX(-105%); }
  body.spk-open #spk-sidebar { transform: none; }
  body.spk-open #spk-overlay { display: block; }
  #spk-burger { display: block; }
  #spk-content { padding-top: 60px; }
}

@media print {
  #spk-sidebar, #spk-burger, #spk-overlay, #spk-progress { display: none !important; }
  #spk-content { margin-left: 0 !important; padding-top: 0 !important; }
}