/* ============================================================
   SIKUNJUNG - Gaya kustom (warna diambil dari database)
   Variabel --sk-primary / --sk-secondary / --sk-accent
   disuntikkan di layout dari tabel master_upt.
   ============================================================ */
:root {
  --sk-primary: #123a6d;
  --sk-secondary: #0b2447;
  --sk-accent: #d4a017;
  --sk-bg: #f2f4f8;
  --sk-surface: #ffffff;
  --sk-text: #1c2431;
  --sk-muted: #68748a;
  --sk-border: #dde3ec;
  --sk-sidebar-w: 264px;
}
[data-bs-theme="dark"] {
  --sk-bg: #10141c;
  --sk-surface: #1a2230;
  --sk-text: #e8ecf3;
  --sk-muted: #8b98ad;
  --sk-border: #2a3446;
}
html, body { height: 100%; }
body {
  background: var(--sk-bg);
  color: var(--sk-text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color: var(--sk-primary); }

/* ---------- Sidebar ---------- */
.sk-sidebar {
  width: var(--sk-sidebar-w);
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sk-secondary) 0%, var(--sk-primary) 140%);
  color: #eef2f8;
  position: fixed; top: 0; left: 0; z-index: 1040;
  display: flex; flex-direction: column;
  transition: transform .25s ease;
}
.sk-sidebar .brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sk-sidebar .brand img { width: 42px; height: 42px; }
.sk-sidebar .brand .t1 { font-weight: 700; letter-spacing: .06em; font-size: 1.05rem; }
.sk-sidebar .brand .t2 { font-size: .72rem; opacity: .8; }
.sk-sidebar .nav { padding: .75rem .75rem 1.5rem; overflow-y: auto; }
.sk-sidebar .nav-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.5); padding: .9rem .75rem .35rem;
}
.sk-sidebar .nav-link {
  color: rgba(255,255,255,.85); border-radius: .5rem;
  padding: .55rem .75rem; display: flex; align-items: center; gap: .65rem;
  font-size: .92rem;
}
.sk-sidebar .nav-link i { width: 1.2rem; text-align: center; }
.sk-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sk-sidebar .nav-link.active {
  background: var(--sk-accent); color: var(--sk-secondary); font-weight: 600;
}
.sk-content { margin-left: var(--sk-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
@media (max-width: 991.98px) {
  .sk-sidebar { transform: translateX(-100%); }
  body.sidebar-open .sk-sidebar { transform: translateX(0); }
  .sk-content { margin-left: 0; }
  body.sidebar-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035;
  }
}

/* ---------- Topbar ---------- */
.sk-topbar {
  background: var(--sk-surface); border-bottom: 1px solid var(--sk-border);
  padding: .6rem 1.25rem; display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 1030;
}
.sk-topbar .page-title { font-weight: 600; font-size: 1.05rem; margin: 0; }

/* ---------- Kartu & tabel ---------- */
.card { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: .75rem; }
.card-header { background: transparent; border-bottom: 1px solid var(--sk-border); font-weight: 600; }
.table { --bs-table-bg: transparent; }
.stat-card { border-left: 4px solid var(--sk-primary); }
.stat-card .num { font-size: 1.8rem; font-weight: 700; }
.stat-card .lbl { color: var(--sk-muted); font-size: .85rem; }
.stat-card.accent { border-left-color: var(--sk-accent); }
.stat-card.success { border-left-color: #198754; }
.stat-card.danger { border-left-color: #dc3545; }

.btn-primary {
  --bs-btn-bg: var(--sk-primary); --bs-btn-border-color: var(--sk-primary);
  --bs-btn-hover-bg: var(--sk-secondary); --bs-btn-hover-border-color: var(--sk-secondary);
  --bs-btn-active-bg: var(--sk-secondary); --bs-btn-active-border-color: var(--sk-secondary);
}
.text-primary { color: var(--sk-primary) !important; }

/* ---------- Login ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(212,160,23,.25), transparent 60%),
    linear-gradient(160deg, var(--sk-secondary), var(--sk-primary));
  padding: 1.5rem;
}
.auth-card { max-width: 440px; width: 100%; border-radius: 1rem; overflow: hidden; }
.auth-card .head { background: var(--sk-surface); text-align: center; padding: 2rem 2rem 0; }
.auth-card .head img { width: 76px; height: 76px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.15rem 1.6rem; border-left: 2px solid var(--sk-border); margin-left: .5rem; }
.timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--sk-accent); border: 2px solid var(--sk-surface);
}

/* ---------- Loading overlay ---------- */
#sk-loading {
  position: fixed; inset: 0; background: rgba(255,255,255,.65); z-index: 2000;
  display: none; place-items: center;
}
[data-bs-theme="dark"] #sk-loading { background: rgba(0,0,0,.55); }
#sk-loading.show { display: grid; }

/* ---------- Toast ---------- */
.toast-container { z-index: 2100; }

/* ---------- Cetak izin ---------- */
@media print {
  .sk-sidebar, .sk-topbar, .no-print, #sk-loading { display: none !important; }
  .sk-content { margin: 0; }
  body { background: #fff; }
}
.izin-print { max-width: 720px; margin: 0 auto; }
.izin-print .kop { display: flex; gap: 1rem; align-items: center; border-bottom: 3px double #000; padding-bottom: .75rem; }