/*!
 * SIPANDANG — Modern UI 2027
 * Kelurahan Medang · Design system tunggal untuk semua halaman & role.
 * File ini HANYA mengatur tampilan (warna, tipografi, radius, bayangan).
 * Tidak mengubah layout/posisi sidebar, logika PHP, maupun JavaScript.
 * Dimuat PALING AKHIR di <head> agar menimpa tema lama.
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/*@raw*/
html:root {
    --sp-ink:#031737; --sp-text:#172036; --sp-muted:#566583; --sp-faint:#64708b;
    --sp-line:#e3e8f3; --sp-line-2:#edf0f8; --sp-bg:#f4f6fb; --sp-surface:#ffffff; --sp-surface-2:#f8f9fe;
    --sp-ok:#0e7050; --sp-ok-bg:#e8f7f1; --sp-warn:#9a4a05; --sp-warn-bg:#fff4e0;
    --sp-bad:#c42f46; --sp-bad-bg:#fdecef;
    --sp-r-sm:10px; --sp-r:14px; --sp-r-lg:20px; --sp-r-pill:999px;
    --sp-sh-1:0 1px 2px rgba(15,29,64,.04),0 2px 8px rgba(15,29,64,.05);
    --sp-sh-2:0 2px 4px rgba(15,29,64,.04),0 10px 28px rgba(15,29,64,.08);
    --sp-sh-3:0 4px 8px rgba(15,29,64,.05),0 24px 56px rgba(15,29,64,.14);
    --sp-ease:cubic-bezier(.22,1,.36,1);
    --sp-font:'Plus Jakarta Sans','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Palet role bawaan (publik/warga) — dipakai juga oleh halaman tanpa kelas role */
html:root { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
/* ── Palet per ROLE: SATU sumber warna untuk seluruh halaman role tsb.
   Kontras tervalidasi: putih di atas --role >= 5.2:1, --role-ink di atas --role-soft >= 8:1,
   --role-light di atas --role-dark2 >= 9:1 ── */
html.sp-role-admin, body.sp-role-admin { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
html.sp-role-lurah, body.sp-role-lurah { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
html.sp-role-kasi, body.sp-role-kasi { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
html.sp-role-sekel, body.sp-role-sekel { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
html.sp-role-operator, body.sp-role-operator { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
html.sp-role-pkl, body.sp-role-pkl { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
html.sp-role-rtrw, body.sp-role-rtrw { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }
html.sp-role-warga, body.sp-role-warga { --role:#0b5cad; --role-2:#1a74cc; --role-ink:#08428a; --role-soft:#e8f2fd; --role-line:#c6dcf5; --role-light:#9cc8f7;
    --role-dark:#05285a; --role-dark2:#031737; --role-rgb:11,92,173; --side-1:#05285a; --side-2:#031737; }

/* ── Alias token lama -> mengikuti warna role (agar CSS lama otomatis seragam) ── */
body.sp-ui {
    --sp-brand:var(--role); --sp-brand-2:var(--role-2); --sp-brand-soft:var(--role-soft); --sp-brand-ink:var(--role-ink);
    --navy:var(--role-dark) !important; --navy-mid:var(--role-ink) !important; --navy-soft:var(--role-ink) !important;
    --navy2:var(--role-ink) !important; --ns:var(--role-ink) !important;
    --accent:var(--role) !important; --accent-lt:var(--role-soft) !important;
    --gold:var(--role) !important; --gold-lt:var(--role-soft) !important;
    --bg:#f4f6fb !important; --ui-bg:#f4f6fb !important; --white:#fff;
    --text:#172036 !important; --muted:#566583 !important; --border:#e3e8f3 !important;
    --success:#0e7050 !important; --danger:#c42f46 !important; --warning-c:#9a4a05 !important;
    --green:#0e7050; --red:#c42f46; --radius:14px !important;
    --shadow:var(--sp-sh-1) !important; --shadow-lg:var(--sp-sh-3) !important;
    --ui-panel:#fff; --ui-text:#172036; --ui-text-sub:#566583; --ui-muted:#566583;
    --ui-line:#e3e8f3; --ui-border:#e3e8f3; --ui-soft:#f8f9fe; --ui-shadow:var(--sp-sh-1);
    --ui-radius:14px; --ui-radius-sm:10px; --ui-font:var(--sp-font) !important; --sipa-dark:var(--role-dark);
    --sip-navy:var(--role-dark); --sip-navy-soft:var(--role-ink); --sip-accent:var(--role); --sip-accent-dk:var(--role-ink);
    --sip-accent-lt:var(--role-soft); --sip-bg:#f4f6fb; --sip-text:#172036; --sip-muted:#566583;
    --sip-border:#e3e8f3; --sip-font:var(--sp-font); --sip-radius:16px;
    --sp-info:var(--role); --sp-info-bg:var(--role-soft);
}
/* Mode malam Operator/PKL: tema gelap bawaan dipertahankan, hanya token permukaan disesuaikan */
body.loket-night.sp-ui { --sp-surface:#121a33; --sp-surface-2:#0f1730; --sp-text:#e8ecf8; --sp-muted:#9aa7c7;
    --sp-line:#26314f; --sp-line-2:#1d2745; --sp-bg:#0b1226; }
/*@end*/

/* ═════════ BASE ═════════ */
html{ -webkit-text-size-adjust:100%; }
body.sp-ui.sp-ui:not(.loket-night){ font-family:var(--sp-font) !important; color:var(--sp-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.sp-ui.sp-ui:not(.loket-night){ background:var(--sp-bg) !important; }
body.sp-ui.sp-ui:not(.loket-night) .wrapper,
body.sp-ui.sp-ui:not(.loket-night) .content-wrapper{ background:transparent !important; }
body.sp-ui.sp-ui:not(.loket-night)::before{ content:""; position:fixed; inset:0 0 auto 0; height:320px; z-index:-1; pointer-events:none;
    background:radial-gradient(900px 260px at 85% -40px, rgba(var(--role-rgb),.10), transparent 70%),
               radial-gradient(700px 240px at 5% -60px, rgba(var(--role-rgb),.06), transparent 70%); }
body.sp-ui.sp-ui:not(.loket-night) h1,
body.sp-ui.sp-ui:not(.loket-night) h2,
body.sp-ui.sp-ui:not(.loket-night) h3,
body.sp-ui.sp-ui:not(.loket-night) h4,
body.sp-ui.sp-ui:not(.loket-night) h5,
body.sp-ui.sp-ui:not(.loket-night) h6{ font-family:var(--sp-font) !important; letter-spacing:-.015em; color:var(--sp-ink); }
body.sp-ui.sp-ui:not(.loket-night) ::selection{ background:rgba(var(--role-rgb),.2); }
body.sp-ui.sp-ui:not(.loket-night) :focus-visible{ outline:2px solid rgba(var(--role-rgb),.55); outline-offset:2px; border-radius:6px; }
body.sp-ui.sp-ui:not(.loket-night) *{ scrollbar-width:thin; scrollbar-color:#c5cde0 transparent; }
body.sp-ui.sp-ui:not(.loket-night) ::-webkit-scrollbar{ width:10px; height:10px; }
body.sp-ui.sp-ui:not(.loket-night) ::-webkit-scrollbar-thumb{ background:#c9d1e4; border-radius:10px; border:3px solid transparent; background-clip:content-box; }
body.sp-ui.sp-ui:not(.loket-night) ::-webkit-scrollbar-thumb:hover{ background:#a9b5d1; background-clip:content-box; border:3px solid transparent; }

/* ═════════ NAVBAR ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar{ background:rgba(255,255,255,.82) !important; backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-bottom:1px solid var(--sp-line) !important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 24px rgba(15,29,64,.04) !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;
    background:linear-gradient(90deg,var(--role),var(--role-2),transparent 70%); opacity:.9; }
body.sp-ui.sp-ui:not(.loket-night) .nb-icon-btn{ width:38px; height:38px; border-radius:12px !important; background:transparent !important; border:1px solid transparent !important;
    color:var(--sp-muted) !important; display:inline-flex; align-items:center; justify-content:center; transition:all .2s var(--sp-ease); position:relative; }
body.sp-ui.sp-ui:not(.loket-night) .nb-icon-btn:hover{ background:var(--role-soft) !important; color:var(--role) !important; border-color:rgba(var(--role-rgb),.18) !important; transform:translateY(-1px); }
body.sp-ui.sp-ui:not(.loket-night) .nb-badge{ background:var(--sp-bad) !important; color:#fff !important; border:2px solid #fff; border-radius:var(--sp-r-pill) !important; font-weight:800 !important; box-shadow:0 2px 6px rgba(220,58,82,.35); }
body.sp-ui.sp-ui:not(.loket-night) .nb-badge-pg{ background:var(--role) !important; box-shadow:0 2px 6px rgba(var(--role-rgb),.35); }
body.sp-ui.sp-ui:not(.loket-night) .nb-user-chip{ background:var(--sp-surface) !important; border:1px solid var(--sp-line) !important; border-radius:var(--sp-r-pill) !important;
    padding:4px 12px 4px 4px !important; box-shadow:var(--sp-sh-1); transition:all .2s var(--sp-ease); }
body.sp-ui.sp-ui:not(.loket-night) .nb-user-chip:hover{ border-color:rgba(var(--role-rgb),.35) !important; background:var(--role-soft) !important; box-shadow:var(--sp-sh-2); }
body.sp-ui.sp-ui:not(.loket-night) .nb-user-ava{ border-radius:50% !important; overflow:hidden; box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(var(--role-rgb),.45); }
body.sp-ui.sp-ui:not(.loket-night) .nb-user-name{ color:var(--sp-ink) !important; font-weight:700 !important; }
body.sp-ui.sp-ui:not(.loket-night) .nb-user-level{ color:var(--role-ink) !important; background:var(--role-soft); border-radius:var(--sp-r-pill); padding:1px 8px; font-size:.64rem !important; font-weight:800 !important; letter-spacing:.2px; display:inline-block; margin-top:1px; }
body.sp-ui.sp-ui:not(.loket-night) .nb-dropdown,
body.sp-ui.sp-ui:not(.loket-night) .dropdown-menu{ border:1px solid var(--sp-line) !important; border-radius:var(--sp-r) !important; box-shadow:var(--sp-sh-3) !important; padding:6px !important; background:var(--sp-surface) !important; }
body.sp-ui.sp-ui:not(.loket-night) .dropdown-item{ border-radius:10px !important; font-weight:600; color:var(--sp-text) !important; padding:9px 12px !important; transition:background .15s; }
body.sp-ui.sp-ui:not(.loket-night) .dropdown-item i{ width:18px; text-align:center; color:var(--sp-faint); margin-right:6px; }
body.sp-ui.sp-ui:not(.loket-night) .dropdown-item:hover,
body.sp-ui.sp-ui:not(.loket-night) .dropdown-item:focus{ background:var(--role-soft) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .dropdown-item:hover i{ color:var(--role); }
body.sp-ui.sp-ui:not(.loket-night) .dropdown-item.dd-danger{ color:var(--sp-bad) !important; }
body.sp-ui.sp-ui:not(.loket-night) .dropdown-item.dd-danger:hover{ background:var(--sp-bad-bg) !important; }
body.sp-ui.sp-ui:not(.loket-night) .dropdown-divider{ border-color:var(--sp-line-2) !important; }

/* Navigasi atas Operator/PKL */
body.sp-ui.sp-ui:not(.loket-night) .loket-nav-brand{ color:var(--sp-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .lnt-link{ border-radius:12px !important; font-weight:600 !important; color:var(--sp-muted) !important; transition:all .2s var(--sp-ease) !important; }
body.sp-ui.sp-ui:not(.loket-night) .lnt-link:hover{ background:var(--role-soft) !important; color:var(--role-ink) !important; transform:translateY(-1px); }
body.sp-ui.sp-ui:not(.loket-night) .lnt-link.active,
body.sp-ui.sp-ui:not(.loket-night) .lnt-link.is-active{ background:linear-gradient(135deg,var(--role),var(--role-2)) !important; color:#fff !important; box-shadow:0 6px 16px rgba(var(--role-rgb),.3); }

/* ═════════ SIDEBAR (Admin · Lurah · Kasi · Sekel) ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar{ background:linear-gradient(185deg,var(--side-1) 0%,var(--side-2) 100%) !important; border-right:1px solid rgba(255,255,255,.05) !important;
    box-shadow:8px 0 40px rgba(15,29,64,.12) !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-link{ border-bottom:1px solid rgba(255,255,255,.08) !important; background:transparent !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-link img{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-text{ color:#fff !important; font-weight:800 !important; letter-spacing:.02em; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-sub{ color:rgba(255,255,255,.7) !important; font-weight:600; letter-spacing:.06em; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .user-panel{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:16px !important; margin:14px 12px 10px !important; padding:10px 12px !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .user-panel img{ box-shadow:0 0 0 2px rgba(255,255,255,.25), 0 0 0 4px rgba(var(--role-rgb),.55) !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .user-panel .info a{ color:#fff !important; font-weight:700; }
body.sp-ui.sp-ui:not(.loket-night) .up-badge{ background:linear-gradient(135deg,var(--role),var(--role-2)) !important; color:#fff !important; border:none !important; border-radius:var(--sp-r-pill) !important; padding:2px 9px !important; font-weight:800 !important; font-size:.62rem !important; box-shadow:0 4px 10px rgba(var(--role-rgb),.4); }
body.sp-ui.sp-ui:not(.loket-night) .sb-search{ background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:12px !important; transition:all .2s; }
body.sp-ui.sp-ui:not(.loket-night) .sb-search:focus-within{ background:rgba(255,255,255,.12) !important; border-color:rgba(var(--role-rgb),.7) !important; box-shadow:0 0 0 3px rgba(var(--role-rgb),.25); }
body.sp-ui.sp-ui:not(.loket-night) .sb-search input{ color:#fff !important; background:transparent !important; }
body.sp-ui.sp-ui:not(.loket-night) .sb-search input::placeholder{ color:rgba(255,255,255,.65) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sb-search i,
body.sp-ui.sp-ui:not(.loket-night) .sb-search kbd{ color:rgba(255,255,255,.7) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sb-search kbd{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:6px !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-header{ color:rgba(255,255,255,.58) !important; font-weight:800 !important; letter-spacing:.12em !important; font-size:.62rem !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link{ color:rgba(255,255,255,.86) !important; border-radius:12px !important; font-weight:600 !important; transition:background .18s var(--sp-ease), color .18s, transform .18s var(--sp-ease) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link .nav-icon{ color:rgba(255,255,255,.72) !important; transition:color .18s; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link:hover .nav-icon{ color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link.active,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item.menu-open > .nav-link{ background:linear-gradient(135deg,var(--role),var(--role-2)) !important; color:#fff !important; box-shadow:0 8px 20px rgba(var(--role-rgb),.38) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link.active .nav-icon,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .menu-open > .nav-link .nav-icon{ color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-treeview{ background:transparent !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-treeview > .nav-item > .nav-link{ color:rgba(255,255,255,.78) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-treeview > .nav-item > .nav-link.active{ background:rgba(255,255,255,.10) !important; box-shadow:inset 3px 0 0 var(--role-2) !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .badge,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .right.badge{ background:var(--role-2) !important; color:#fff !important; border-radius:var(--sp-r-pill) !important; font-weight:800; }
body.sp-ui.sp-ui:not(.loket-night) .sb-edge-toggle{ background:var(--sp-surface) !important; color:var(--role) !important; border:1px solid var(--sp-line) !important; box-shadow:var(--sp-sh-2) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sb-edge-toggle:hover{ background:var(--role) !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); background-clip:content-box; }

/* ═════════ FOOTER ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .main-footer{ background:transparent !important; border-top:1px solid var(--sp-line) !important; color:var(--sp-muted) !important; font-size:.74rem; }
body.sp-ui.sp-ui:not(.loket-night) .sp-foot-brand strong{ color:var(--sp-ink); }
body.sp-ui.sp-ui:not(.loket-night) .sp-foot-live{ color:var(--sp-ok) !important; font-weight:700; }
body.sp-ui.sp-ui:not(.loket-night) .sp-foot-ver{ background:var(--role-soft) !important; color:var(--role-ink) !important; border-radius:var(--sp-r-pill) !important; font-weight:800; padding:1px 9px; }

/* ═════════ HEADER HALAMAN (kartu judul) ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .db-header:not(.loket-home-header),
body.sp-ui.sp-ui:not(.loket-night) .pw-header,
body.sp-ui.sp-ui:not(.loket-night) .edit-header,
body.sp-ui.sp-ui:not(.loket-night) .arsip-header,
body.sp-ui.sp-ui:not(.loket-night) .siak-header,
body.sp-ui.sp-ui:not(.loket-night) .surat-header,
body.sp-ui.sp-ui:not(.loket-night) .sw-hdr,
body.sp-ui.sp-ui:not(.loket-night) .dk-hdr,
body.sp-ui.sp-ui:not(.loket-night) .dk-header,
body.sp-ui.sp-ui:not(.loket-night) .dw-hdr,
body.sp-ui.sp-ui:not(.loket-night) .pd-header,
body.sp-ui.sp-ui:not(.loket-night) .ap-hdr,
body.sp-ui.sp-ui:not(.loket-night) .ep-hdr,
body.sp-ui.sp-ui:not(.loket-night) .km-header,
body.sp-ui.sp-ui:not(.loket-night) .qr-header,
body.sp-ui.sp-ui:not(.loket-night) .kp-hdr,
body.sp-ui.sp-ui:not(.loket-night) .page-hdr,
body.sp-ui.sp-ui:not(.loket-night) .pg-hdr,
body.sp-ui.sp-ui:not(.loket-night) .pg-hdr-admin,
body.sp-ui.sp-ui:not(.loket-night) .bantuan-hero,
body.sp-ui.sp-ui:not(.loket-night) .import-hero,
body.sp-ui.sp-ui:not(.loket-night) .kontak-hero,
body.sp-ui.sp-ui:not(.loket-night) .rw-header,
body.sp-ui.sp-ui:not(.loket-night) .lb-hdr,
body.sp-ui.sp-ui:not(.loket-night) .kk-header,
body.sp-ui.sp-ui:not(.loket-night) .mono-header,
body.sp-ui.sp-ui:not(.loket-night) .rsk-header,
body.sp-ui.sp-ui:not(.loket-night) .sk-header,
body.sp-ui.sp-ui:not(.loket-night) .sk-hdr,
body.sp-ui.sp-ui:not(.loket-night) .dd-hdr,
body.sp-ui.sp-ui:not(.loket-night) .rpa-hd,
body.sp-ui.sp-ui:not(.loket-night) .pd-head,
body.sp-ui.sp-ui:not(.loket-night) .db-hdr,
body.sp-ui.sp-ui:not(.loket-night) .sm-hdr,
body.sp-ui.sp-ui:not(.loket-night) .ak-hdr,
body.sp-ui.sp-ui:not(.loket-night) .ars-hdr{
    background:linear-gradient(180deg,#fff 0%,var(--sp-surface-2) 100%) !important; border:1px solid var(--sp-line) !important; border-radius:var(--sp-r-lg) !important;
    padding:18px 22px !important; box-shadow:var(--sp-sh-2) !important; position:relative !important; overflow:hidden !important; color:var(--sp-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .db-header:not(.loket-home-header)::after,
body.sp-ui.sp-ui:not(.loket-night) .pw-header::after,
body.sp-ui.sp-ui:not(.loket-night) .edit-header::after,
body.sp-ui.sp-ui:not(.loket-night) .arsip-header::after,
body.sp-ui.sp-ui:not(.loket-night) .siak-header::after,
body.sp-ui.sp-ui:not(.loket-night) .surat-header::after,
body.sp-ui.sp-ui:not(.loket-night) .sw-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .dk-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .dk-header::after,
body.sp-ui.sp-ui:not(.loket-night) .dw-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .pd-header::after,
body.sp-ui.sp-ui:not(.loket-night) .ap-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .ep-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .km-header::after,
body.sp-ui.sp-ui:not(.loket-night) .qr-header::after,
body.sp-ui.sp-ui:not(.loket-night) .kp-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .page-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .pg-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .bantuan-hero::after,
body.sp-ui.sp-ui:not(.loket-night) .import-hero::after,
body.sp-ui.sp-ui:not(.loket-night) .kontak-hero::after,
body.sp-ui.sp-ui:not(.loket-night) .rw-header::after,
body.sp-ui.sp-ui:not(.loket-night) .lb-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .kk-header::after,
body.sp-ui.sp-ui:not(.loket-night) .mono-header::after,
body.sp-ui.sp-ui:not(.loket-night) .rsk-header::after,
body.sp-ui.sp-ui:not(.loket-night) .sk-header::after,
body.sp-ui.sp-ui:not(.loket-night) .sk-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .dd-hdr::after,
body.sp-ui.sp-ui:not(.loket-night) .db-hdr::after{
    content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,var(--role),var(--role-2)); pointer-events:none; }
body.sp-ui.sp-ui:not(.loket-night) .db-header:not(.loket-home-header) h1,
body.sp-ui.sp-ui:not(.loket-night) .pw-header h1,
body.sp-ui.sp-ui:not(.loket-night) .edit-header h1,
body.sp-ui.sp-ui:not(.loket-night) .arsip-header h1,
body.sp-ui.sp-ui:not(.loket-night) .siak-header h1,
body.sp-ui.sp-ui:not(.loket-night) .surat-header h1,
body.sp-ui.sp-ui:not(.loket-night) .sw-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .dk-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .dk-header h1,
body.sp-ui.sp-ui:not(.loket-night) .dw-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .pd-header h1,
body.sp-ui.sp-ui:not(.loket-night) .ap-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .ep-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .km-header h1,
body.sp-ui.sp-ui:not(.loket-night) .qr-header h1,
body.sp-ui.sp-ui:not(.loket-night) .kp-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .page-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .pg-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .bantuan-hero h1,
body.sp-ui.sp-ui:not(.loket-night) .import-hero h1,
body.sp-ui.sp-ui:not(.loket-night) .kontak-hero h1,
body.sp-ui.sp-ui:not(.loket-night) .rw-header h1,
body.sp-ui.sp-ui:not(.loket-night) .lb-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .kk-header h1,
body.sp-ui.sp-ui:not(.loket-night) .mono-header h1,
body.sp-ui.sp-ui:not(.loket-night) .rsk-header h1,
body.sp-ui.sp-ui:not(.loket-night) .sk-header h1,
body.sp-ui.sp-ui:not(.loket-night) .sk-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .dd-hdr h1,
body.sp-ui.sp-ui:not(.loket-night) .rpa-hd h1,
body.sp-ui.sp-ui:not(.loket-night) .pd-head h1,
body.sp-ui.sp-ui:not(.loket-night) .db-hdr h1{
    font-family:var(--sp-font) !important; font-size:1.18rem !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--sp-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .header-badge,
body.sp-ui.sp-ui:not(.loket-night) .hdr-badge,
body.sp-ui.sp-ui:not(.loket-night) .pg-badge{ background:var(--role-soft) !important; border:1px solid rgba(var(--role-rgb),.18) !important; color:var(--role-ink) !important;
    border-radius:var(--sp-r-pill) !important; padding:4px 12px !important; font-weight:800 !important; letter-spacing:.06em !important; font-size:.64rem !important; }
body.sp-ui.sp-ui:not(.loket-night) .header-badge i,
body.sp-ui.sp-ui:not(.loket-night) .hdr-badge i,
body.sp-ui.sp-ui:not(.loket-night) .pg-badge i{ color:var(--role) !important; }
body.sp-ui.sp-ui:not(.loket-night) .stat-pill,
body.sp-ui.sp-ui:not(.loket-night) .db-meta{ background:var(--sp-surface-2) !important; border:1px solid var(--sp-line) !important; color:var(--sp-muted) !important; border-radius:var(--sp-r-pill) !important; }

/* ═════════ KARTU & PANEL ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .card,
body.sp-ui.sp-ui:not(.loket-night) .s-card,
body.sp-ui.sp-ui:not(.loket-night) .info-card,
body.sp-ui.sp-ui:not(.loket-night) .tc,
body.sp-ui.sp-ui:not(.loket-night) .form-card,
body.sp-ui.sp-ui:not(.loket-night) .tbl-card,
body.sp-ui.sp-ui:not(.loket-night) .table-card,
body.sp-ui.sp-ui:not(.loket-night) .db-card,
body.sp-ui.sp-ui:not(.loket-night) .kk-card,
body.sp-ui.sp-ui:not(.loket-night) .rw-card,
body.sp-ui.sp-ui:not(.loket-night) .sc,
body.sp-ui.sp-ui:not(.loket-night) .stat-card,
body.sp-ui.sp-ui:not(.loket-night) .stat-box,
body.sp-ui.sp-ui:not(.loket-night) .mk-card{
    background:var(--sp-surface) !important; border:1px solid var(--sp-line) !important; border-radius:var(--sp-r-lg) !important; box-shadow:var(--sp-sh-1) !important; }
body.sp-ui.sp-ui:not(.loket-night) .card,
body.sp-ui.sp-ui:not(.loket-night) .s-card,
body.sp-ui.sp-ui:not(.loket-night) .tc,
body.sp-ui.sp-ui:not(.loket-night) .form-card,
body.sp-ui.sp-ui:not(.loket-night) .tbl-card,
body.sp-ui.sp-ui:not(.loket-night) .db-card{ transition:box-shadow .25s var(--sp-ease), transform .25s var(--sp-ease), border-color .25s; }
body.sp-ui.sp-ui:not(.loket-night) .card:hover,
body.sp-ui.sp-ui:not(.loket-night) .s-card:hover,
body.sp-ui.sp-ui:not(.loket-night) .db-card:hover{ box-shadow:var(--sp-sh-2) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sc,
body.sp-ui.sp-ui:not(.loket-night) .stat-card{ overflow:hidden; }
body.sp-ui.sp-ui:not(.loket-night) .sc:hover,
body.sp-ui.sp-ui:not(.loket-night) .stat-card:hover{ transform:translateY(-3px); box-shadow:var(--sp-sh-2) !important; border-color:rgba(var(--role-rgb),.3) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sc .sv,
body.sp-ui.sp-ui:not(.loket-night) .stat-card .sv,
body.sp-ui.sp-ui:not(.loket-night) .stat-num{ font-weight:800 !important; letter-spacing:-.02em; color:var(--sp-ink); font-variant-numeric:tabular-nums; }
body.sp-ui.sp-ui:not(.loket-night) .card-header,
body.sp-ui.sp-ui:not(.loket-night) .card-hdr,
body.sp-ui.sp-ui:not(.loket-night) .form-card-hdr,
body.sp-ui.sp-ui:not(.loket-night) .mk-hd,
body.sp-ui.sp-ui:not(.loket-night) .tbl-hdr,
body.sp-ui.sp-ui:not(.loket-night) .tbl-hd,
body.sp-ui.sp-ui:not(.loket-night) .tc-header,
body.sp-ui.sp-ui:not(.loket-night) .s-hd,
body.sp-ui.sp-ui:not(.loket-night) .th,
body.sp-ui.sp-ui:not(.loket-night) .table-card-header,
body.sp-ui.sp-ui:not(.loket-night) .fc-hd{
    background:transparent !important; border-bottom:1px solid var(--sp-line-2) !important; padding:14px 20px !important; }
body.sp-ui.sp-ui:not(.loket-night) .card-header h3,
body.sp-ui.sp-ui:not(.loket-night) .card-hdr h3,
body.sp-ui.sp-ui:not(.loket-night) .form-card-hdr h3,
body.sp-ui.sp-ui:not(.loket-night) .tbl-hdr h3,
body.sp-ui.sp-ui:not(.loket-night) .tbl-hd h3,
body.sp-ui.sp-ui:not(.loket-night) .tc-header h3,
body.sp-ui.sp-ui:not(.loket-night) .th h3,
body.sp-ui.sp-ui:not(.loket-night) .s-hd h3{ font-size:.95rem !important; font-weight:800 !important; color:var(--sp-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .card-body,
body.sp-ui.sp-ui:not(.loket-night) .s-body{ padding:20px !important; }
body.sp-ui.sp-ui:not(.loket-night) .info-card .info-ico,
body.sp-ui.sp-ui:not(.loket-night) .info-ico{ background:linear-gradient(135deg,var(--role),var(--role-2)) !important; color:#fff !important; box-shadow:0 10px 24px rgba(var(--role-rgb),.35); }

/* ═════════ TOMBOL ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .btn,
body.sp-ui.sp-ui:not(.loket-night) .btn-pro,
body.sp-ui.sp-ui:not(.loket-night) .btn-p,
body.sp-ui.sp-ui:not(.loket-night) .btn-s,
body.sp-ui.sp-ui:not(.loket-night) .btn-sip,
body.sp-ui.sp-ui:not(.loket-night) .bp-navy,
body.sp-ui.sp-ui:not(.loket-night) .bp-gold,
body.sp-ui.sp-ui:not(.loket-night) .bp-ghost,
body.sp-ui.sp-ui:not(.loket-night) .bp-danger,
body.sp-ui.sp-ui:not(.loket-night) .toolbar-btn,
body.sp-ui.sp-ui:not(.loket-night) .action-btn,
body.sp-ui.sp-ui:not(.loket-night) .mbtn,
body.sp-ui.sp-ui:not(.loket-night) .btn-lihat-semua{
    font-family:var(--sp-font) !important; font-weight:700 !important; border-radius:12px !important; letter-spacing:.005em; transition:transform .18s var(--sp-ease), box-shadow .18s var(--sp-ease), background .18s, border-color .18s, color .18s !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn:active,
body.sp-ui.sp-ui:not(.loket-night) .btn-pro:active,
body.sp-ui.sp-ui:not(.loket-night) .btn-p:active,
body.sp-ui.sp-ui:not(.loket-night) .bp-navy:active{ transform:translateY(0) scale(.98); }
body.sp-ui.sp-ui:not(.loket-night) .bp-navy,
body.sp-ui.sp-ui:not(.loket-night) .btn-sip,
body.sp-ui.sp-ui:not(.loket-night) .btn.bn,
body.sp-ui.sp-ui:not(.loket-night) .btn-pro.bp-navy,
body.sp-ui.sp-ui:not(.loket-night) .btn-primary,
body.sp-ui.sp-ui:not(.loket-night) .btn-lihat-semua{
    background:linear-gradient(135deg,var(--role),var(--role-2)) !important; color:#fff !important; border:none !important; box-shadow:0 6px 16px rgba(var(--role-rgb),.28) !important; }
body.sp-ui.sp-ui:not(.loket-night) .bp-navy:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-sip:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn.bn:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-primary:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-lihat-semua:hover{ background:linear-gradient(135deg,var(--role-ink),var(--role)) !important; color:#fff !important; transform:translateY(-1px); box-shadow:0 10px 24px rgba(var(--role-rgb),.38) !important; text-decoration:none !important; }
body.sp-ui.sp-ui:not(.loket-night) .bp-gold,
body.sp-ui.sp-ui:not(.loket-night) .btn.bgld,
body.sp-ui.sp-ui:not(.loket-night) .btn-secondary,
body.sp-ui.sp-ui:not(.loket-night) .btn-outline-primary{ background:var(--role-soft) !important; color:var(--role-ink) !important; border:1px solid rgba(var(--role-rgb),.22) !important; box-shadow:none !important; }
body.sp-ui.sp-ui:not(.loket-night) .bp-gold:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn.bgld:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-secondary:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-outline-primary:hover{ background:rgba(var(--role-rgb),.14) !important; color:var(--role-ink) !important; transform:translateY(-1px); text-decoration:none !important; }
body.sp-ui.sp-ui:not(.loket-night) .bp-ghost,
body.sp-ui.sp-ui:not(.loket-night) .btn-pro-ghost,
body.sp-ui.sp-ui:not(.loket-night) .btn-light,
body.sp-ui.sp-ui:not(.loket-night) .btn-default,
body.sp-ui.sp-ui:not(.loket-night) .btn-outline-secondary{ background:var(--sp-surface) !important; color:var(--sp-text) !important; border:1px solid var(--sp-line) !important; box-shadow:var(--sp-sh-1) !important; }
body.sp-ui.sp-ui:not(.loket-night) .bp-ghost:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-pro-ghost:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-light:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-default:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-outline-secondary:hover{ border-color:rgba(var(--role-rgb),.45) !important; color:var(--role-ink) !important; background:var(--sp-surface) !important; transform:translateY(-1px); text-decoration:none !important; }
body.sp-ui.sp-ui:not(.loket-night) .bp-danger,
body.sp-ui.sp-ui:not(.loket-night) .btn-danger{ background:linear-gradient(135deg,#d6344d,var(--sp-bad)) !important; color:#fff !important; border:none !important; box-shadow:0 6px 16px rgba(220,58,82,.28) !important; }
body.sp-ui.sp-ui:not(.loket-night) .bp-danger:hover,
body.sp-ui.sp-ui:not(.loket-night) .btn-danger:hover{ filter:brightness(.95); transform:translateY(-1px); color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-success{ background:linear-gradient(135deg,#0e7050,#0c6a4b) !important; border:none !important; color:#fff !important; box-shadow:0 6px 16px rgba(18,128,92,.28) !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-warning{ background:#fff4e0 !important; border:1px solid #f6dcae !important; color:#8a4a07 !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-info{ background:linear-gradient(135deg,var(--role),var(--role-ink)) !important; border:none !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-sm,
body.sp-ui.sp-ui:not(.loket-night) .bp-sm,
body.sp-ui.sp-ui:not(.loket-night) .btn-pro-sm,
body.sp-ui.sp-ui:not(.loket-night) .btn-xs{ border-radius:10px !important; }
body.sp-ui.sp-ui:not(.loket-night) .act-btn,
body.sp-ui.sp-ui:not(.loket-night) .action-btn{ border-radius:10px !important; border:1px solid var(--sp-line) !important; background:var(--sp-surface) !important; color:var(--sp-muted) !important; transition:all .18s var(--sp-ease) !important; }
body.sp-ui.sp-ui:not(.loket-night) .act-btn:hover,
body.sp-ui.sp-ui:not(.loket-night) .action-btn:hover{ background:var(--role) !important; color:#fff !important; border-color:var(--role) !important; transform:translateY(-1px); box-shadow:0 6px 14px rgba(var(--role-rgb),.3); }
body.sp-ui.sp-ui:not(.loket-night) .act-edit{ background:var(--role-soft) !important; color:var(--role-ink) !important; border-color:transparent !important; }
body.sp-ui.sp-ui:not(.loket-night) .act-del{ background:var(--sp-bad-bg) !important; color:var(--sp-bad) !important; border-color:transparent !important; }

/* ═════════ FORM ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .lbl,
body.sp-ui.sp-ui:not(.loket-night) .lbl-f,
body.sp-ui.sp-ui:not(.loket-night) .form-label-pro,
body.sp-ui.sp-ui:not(.loket-night) .dg-label{ font-weight:700; }
body.sp-ui.sp-ui:not(.loket-night) .lbl,
body.sp-ui.sp-ui:not(.loket-night) .lbl-f,
body.sp-ui.sp-ui:not(.loket-night) .form-label-pro,
body.sp-ui.sp-ui:not(.loket-night) .dg-label{ font-size:.7rem !important; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-muted) !important; }
body.sp-ui.sp-ui:not(.loket-night) .inp,
body.sp-ui.sp-ui:not(.loket-night) .inp-f,
body.sp-ui.sp-ui:not(.loket-night) .inp-sm,
body.sp-ui.sp-ui:not(.loket-night) .input-pro,
body.sp-ui.sp-ui:not(.loket-night) .sel,
body.sp-ui.sp-ui:not(.loket-night) .form-control,
body.sp-ui.sp-ui:not(.loket-night) .form-control-sm,
body.sp-ui.sp-ui:not(.loket-night) .custom-select,
body.sp-ui.sp-ui:not(.loket-night) .dk-field input,
body.sp-ui.sp-ui:not(.loket-night) .input-slim,
body.sp-ui.sp-ui:not(.loket-night) .status-select,
body.sp-ui.sp-ui:not(.loket-night) input[type=text],
body.sp-ui.sp-ui:not(.loket-night) input[type=search],
body.sp-ui.sp-ui:not(.loket-night) input[type=number],
body.sp-ui.sp-ui:not(.loket-night) input[type=date],
body.sp-ui.sp-ui:not(.loket-night) input[type=email],
body.sp-ui.sp-ui:not(.loket-night) input[type=tel],
body.sp-ui.sp-ui:not(.loket-night) input[type=password],
body.sp-ui.sp-ui:not(.loket-night) input[type=time],
body.sp-ui.sp-ui:not(.loket-night) input[type=datetime-local],
body.sp-ui.sp-ui:not(.loket-night) select,
body.sp-ui.sp-ui:not(.loket-night) textarea{
    font-family:var(--sp-font) !important; background:var(--sp-surface) !important; color:var(--sp-text) !important; border:1px solid var(--sp-line) !important;
    border-radius:12px !important; box-shadow:inset 0 1px 2px rgba(15,29,64,.03) !important; transition:border-color .18s, box-shadow .18s, background .18s !important; }
body.sp-ui.sp-ui:not(.loket-night) .inp:hover,
body.sp-ui.sp-ui:not(.loket-night) .inp-f:hover,
body.sp-ui.sp-ui:not(.loket-night) .input-pro:hover,
body.sp-ui.sp-ui:not(.loket-night) .sel:hover,
body.sp-ui.sp-ui:not(.loket-night) .form-control:hover,
body.sp-ui.sp-ui:not(.loket-night) select:hover,
body.sp-ui.sp-ui:not(.loket-night) textarea:hover{ border-color:#cbd4ea !important; }
body.sp-ui.sp-ui:not(.loket-night) .inp:focus,
body.sp-ui.sp-ui:not(.loket-night) .inp-f:focus,
body.sp-ui.sp-ui:not(.loket-night) .inp-sm:focus,
body.sp-ui.sp-ui:not(.loket-night) .input-pro:focus,
body.sp-ui.sp-ui:not(.loket-night) .sel:focus,
body.sp-ui.sp-ui:not(.loket-night) .form-control:focus,
body.sp-ui.sp-ui:not(.loket-night) .custom-select:focus,
body.sp-ui.sp-ui:not(.loket-night) .input-slim:focus,
body.sp-ui.sp-ui:not(.loket-night) input:focus,
body.sp-ui.sp-ui:not(.loket-night) select:focus,
body.sp-ui.sp-ui:not(.loket-night) textarea:focus{ border-color:var(--role) !important; box-shadow:0 0 0 4px rgba(var(--role-rgb),.14) !important; outline:none !important; background:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) ::placeholder{ color:#8190ad !important; opacity:1; }
body.sp-ui.sp-ui:not(.loket-night) input:disabled,
body.sp-ui.sp-ui:not(.loket-night) select:disabled,
body.sp-ui.sp-ui:not(.loket-night) textarea:disabled,
body.sp-ui.sp-ui:not(.loket-night) .inp[readonly],
body.sp-ui.sp-ui:not(.loket-night) .form-control[readonly]{ background:var(--sp-surface-2) !important; color:var(--sp-muted) !important; }
body.sp-ui.sp-ui:not(.loket-night) .is-invalid,
body.sp-ui.sp-ui:not(.loket-night) .inp.is-invalid{ border-color:var(--sp-bad) !important; box-shadow:0 0 0 4px rgba(220,58,82,.12) !important; }
body.sp-ui.sp-ui:not(.loket-night) .is-valid,
body.sp-ui.sp-ui:not(.loket-night) .inp.is-valid{ border-color:var(--sp-ok) !important; box-shadow:0 0 0 4px rgba(18,128,92,.12) !important; }
body.sp-ui.sp-ui:not(.loket-night) .req{ color:var(--sp-bad) !important; }
body.sp-ui.sp-ui:not(.loket-night) input[type=checkbox],
body.sp-ui.sp-ui:not(.loket-night) input[type=radio]{ accent-color:var(--role); }
body.sp-ui.sp-ui:not(.loket-night) .custom-control-input:checked ~ .custom-control-label::before{ background-color:var(--role) !important; border-color:var(--role) !important; }
/* Select2 */
body.sp-ui.sp-ui:not(.loket-night) .select2-container--bootstrap4 .select2-selection,
body.sp-ui.sp-ui:not(.loket-night) .select2-container--default .select2-selection--single{ border:1px solid var(--sp-line) !important; border-radius:12px !important; background:var(--sp-surface) !important; min-height:calc(1.5em + .75rem + 2px); }
body.sp-ui.sp-ui:not(.loket-night) .select2-container--bootstrap4.select2-container--focus .select2-selection,
body.sp-ui.sp-ui:not(.loket-night) .select2-container--bootstrap4.select2-container--open .select2-selection{ border-color:var(--role) !important; box-shadow:0 0 0 4px rgba(var(--role-rgb),.14) !important; }
body.sp-ui.sp-ui:not(.loket-night) .select2-dropdown{ border:1px solid var(--sp-line) !important; border-radius:14px !important; box-shadow:var(--sp-sh-3) !important; overflow:hidden; }
body.sp-ui.sp-ui:not(.loket-night) .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected]{ background:var(--role-soft) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .select2-container--bootstrap4 .select2-results__option[aria-selected=true]{ background:var(--role) !important; color:#fff !important; }

/* ═════════ TABEL ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .table,
body.sp-ui.sp-ui:not(.loket-night) .tbl,
body.sp-ui.sp-ui:not(.loket-night) .kk-tbl,
body.sp-ui.sp-ui:not(.loket-night) .dataTable,
body.sp-ui.sp-ui:not(.loket-night) table.dataTable{ font-size:.8rem; }
body.sp-ui.sp-ui:not(.loket-night) .table thead th,
body.sp-ui.sp-ui:not(.loket-night) .tbl th,
body.sp-ui.sp-ui:not(.loket-night) .kk-tbl thead th,
body.sp-ui.sp-ui:not(.loket-night) #tblSIAK thead th,
body.sp-ui.sp-ui:not(.loket-night) table.dataTable thead th,
body.sp-ui.sp-ui:not(.loket-night) .tbl-hd{
    background:var(--sp-surface-2) !important; color:var(--sp-muted) !important; font-size:.66rem !important; font-weight:800 !important; letter-spacing:.07em; text-transform:uppercase;
    border-top:none !important; border-bottom:1px solid var(--sp-line) !important; padding:12px 14px !important; white-space:nowrap; }
body.sp-ui.sp-ui:not(.loket-night) .table td,
body.sp-ui.sp-ui:not(.loket-night) .tbl td,
body.sp-ui.sp-ui:not(.loket-night) table.dataTable tbody td{ padding:12px 14px !important; border-top:1px solid var(--sp-line-2) !important; vertical-align:middle !important; color:var(--sp-text); }
body.sp-ui.sp-ui:not(.loket-night) .table tbody tr,
body.sp-ui.sp-ui:not(.loket-night) .tbl tbody tr,
body.sp-ui.sp-ui:not(.loket-night) table.dataTable tbody tr{ background:transparent !important; transition:background .15s; }
body.sp-ui.sp-ui:not(.loket-night) .table tbody tr:hover,
body.sp-ui.sp-ui:not(.loket-night) .tbl tbody tr:hover,
body.sp-ui.sp-ui:not(.loket-night) table.dataTable tbody tr:hover,
body.sp-ui.sp-ui:not(.loket-night) .table-hover tbody tr:hover{ background:rgba(var(--role-rgb),.045) !important; }
body.sp-ui.sp-ui:not(.loket-night) .table-striped tbody tr:nth-of-type(odd){ background:var(--sp-surface-2) !important; }
body.sp-ui.sp-ui:not(.loket-night) .table-responsive{ border-radius:var(--sp-r); }
body.sp-ui.sp-ui:not(.loket-night) .dataTables_wrapper .dataTables_filter input,
body.sp-ui.sp-ui:not(.loket-night) .dataTables_wrapper .dataTables_length select{ border-radius:10px !important; padding:6px 12px !important; }
body.sp-ui.sp-ui:not(.loket-night) .dataTables_wrapper .dataTables_info{ color:var(--sp-muted) !important; font-size:.76rem; }
body.sp-ui.sp-ui:not(.loket-night) .page-item .page-link,
body.sp-ui.sp-ui:not(.loket-night) .pg-btn{ border:1px solid var(--sp-line) !important; color:var(--sp-text) !important; border-radius:10px !important; margin:0 2px; font-weight:700; background:var(--sp-surface); }
body.sp-ui.sp-ui:not(.loket-night) .page-item.active .page-link,
body.sp-ui.sp-ui:not(.loket-night) .pg-btn.active{ background:linear-gradient(135deg,var(--role),var(--role-2)) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 6px 14px rgba(var(--role-rgb),.3); }
body.sp-ui.sp-ui:not(.loket-night) .page-item .page-link:hover,
body.sp-ui.sp-ui:not(.loket-night) .pg-btn:hover:not(:disabled){ background:var(--role-soft) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .page-item.disabled .page-link{ opacity:.45; }

/* ═════════ BADGE · ALERT · TAB · PROGRESS ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .badge{ border-radius:var(--sp-r-pill) !important; font-weight:800 !important; letter-spacing:.02em; padding:.38em .8em !important; }
body.sp-ui.sp-ui:not(.loket-night) .badge-primary,
body.sp-ui.sp-ui:not(.loket-night) .badge-info{ background:var(--role-soft) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .badge-success{ background:var(--sp-ok-bg) !important; color:var(--sp-ok) !important; }
body.sp-ui.sp-ui:not(.loket-night) .badge-warning{ background:var(--sp-warn-bg) !important; color:var(--sp-warn) !important; }
body.sp-ui.sp-ui:not(.loket-night) .badge-danger{ background:var(--sp-bad-bg) !important; color:var(--sp-bad) !important; }
body.sp-ui.sp-ui:not(.loket-night) .badge-secondary,
body.sp-ui.sp-ui:not(.loket-night) .badge-light{ background:#eef1f8 !important; color:var(--sp-muted) !important; }
body.sp-ui.sp-ui:not(.loket-night) .alert{ border-radius:var(--sp-r) !important; border:1px solid transparent !important; font-weight:500; box-shadow:var(--sp-sh-1); }
body.sp-ui.sp-ui:not(.loket-night) .alert-success{ background:var(--sp-ok-bg) !important; border-color:#bfe8d8 !important; color:#0c5f44 !important; }
body.sp-ui.sp-ui:not(.loket-night) .alert-danger{ background:var(--sp-bad-bg) !important; border-color:#f6c6ce !important; color:#a42339 !important; }
body.sp-ui.sp-ui:not(.loket-night) .alert-warning{ background:var(--sp-warn-bg) !important; border-color:#f6dcae !important; color:#8a4a07 !important; }
body.sp-ui.sp-ui:not(.loket-night) .alert-info,
body.sp-ui.sp-ui:not(.loket-night) .alert-primary{ background:var(--role-soft) !important; border-color:var(--role-line) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-tabs{ border-bottom:1px solid var(--sp-line) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-tabs .nav-link{ border:none !important; border-radius:12px 12px 0 0 !important; color:var(--sp-muted) !important; font-weight:700; }
body.sp-ui.sp-ui:not(.loket-night) .nav-tabs .nav-link.active{ color:var(--role-ink) !important; background:var(--role-soft) !important; box-shadow:inset 0 -3px 0 var(--role); }
body.sp-ui.sp-ui:not(.loket-night) .nav-pills:not(.nav-sidebar) .nav-link{ border-radius:var(--sp-r-pill) !important; font-weight:700; color:var(--sp-muted); }
body.sp-ui.sp-ui:not(.loket-night) .nav-pills:not(.nav-sidebar) .nav-link.active{ background:linear-gradient(135deg,var(--role),var(--role-2)) !important; color:#fff !important; box-shadow:0 6px 14px rgba(var(--role-rgb),.3); }
body.sp-ui.sp-ui:not(.loket-night) .progress{ background:#e9edf7 !important; border-radius:var(--sp-r-pill) !important; height:.6rem; overflow:hidden; }
body.sp-ui.sp-ui:not(.loket-night) .progress-bar{ background:linear-gradient(90deg,var(--role),var(--role-2)) !important; }

/* ═════════ MODAL ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .modal-backdrop.show{ background:#0b1430; opacity:.55; backdrop-filter:blur(3px); }
body.sp-ui.sp-ui:not(.loket-night) .modal-content{ border:none !important; border-radius:var(--sp-r-lg) !important; box-shadow:var(--sp-sh-3) !important; overflow:hidden; background:var(--sp-surface); }
body.sp-ui.sp-ui:not(.loket-night) .modal-header{ background:linear-gradient(180deg,#fff,var(--sp-surface-2)) !important; border-bottom:1px solid var(--sp-line-2) !important; padding:16px 22px !important; }
body.sp-ui.sp-ui:not(.loket-night) .modal-title{ font-weight:800 !important; color:var(--sp-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .modal-footer{ border-top:1px solid var(--sp-line-2) !important; background:var(--sp-surface-2) !important; }
body.sp-ui.sp-ui:not(.loket-night) .modal.fade .modal-dialog{ transition:transform .3s var(--sp-ease), opacity .2s; }
body.sp-ui.sp-ui:not(.loket-night) .close{ opacity:.55; text-shadow:none; }
body.sp-ui.sp-ui:not(.loket-night) .close:hover{ opacity:1; color:var(--sp-bad); }
body.sp-ui.sp-ui:not(.loket-night) .tooltip-inner{ background:var(--sp-ink) !important; border-radius:8px !important; font-weight:600; }

/* ═════════ PORTAL RT/RW (rt_*.php) ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .topbar{ background:var(--side-1) !important; box-shadow:0 10px 30px rgba(15,29,64,.22) !important; }
body.sp-ui.sp-ui:not(.loket-night) .topbar-ico{ background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.22) !important; color:#fff !important; border-radius:14px !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-logout{ background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.2) !important; color:#fff !important; border-radius:12px !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-logout:hover{ background:rgba(255,255,255,.2) !important; }
body.sp-ui.sp-ui:not(.loket-night) .stats-banner{ background:linear-gradient(180deg,var(--side-1),var(--role-ink)) !important; }
body.sp-ui.sp-ui:not(.loket-night) .stat-box{ background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:14px !important; box-shadow:none !important; backdrop-filter:blur(6px); }
body.sp-ui.sp-ui:not(.loket-night) .stat-box .stat-num{ color:#fff !important; } body.sp-ui.sp-ui:not(.loket-night) .stat-box .stat-lbl{ color:rgba(255,255,255,.85) !important; }
body.sp-ui.sp-ui:not(.loket-night) .search-wrap input{ border:1px solid var(--sp-line) !important; border-radius:16px !important; box-shadow:var(--sp-sh-2) !important; }
body.sp-ui.sp-ui:not(.loket-night) .warga-card{ border-radius:var(--sp-r) !important; border:1px solid var(--sp-line) !important; box-shadow:var(--sp-sh-1) !important; border-left:4px solid transparent !important; transition:transform .2s var(--sp-ease), box-shadow .2s; }
body.sp-ui.sp-ui:not(.loket-night) .warga-card:hover{ transform:translateY(-2px); box-shadow:var(--sp-sh-2) !important; }
body.sp-ui.sp-ui:not(.loket-night) .warga-card.is-kk{ border-left-color:var(--role) !important; }
body.sp-ui.sp-ui:not(.loket-night) .bottom-nav{ background:rgba(255,255,255,.88) !important; backdrop-filter:saturate(180%) blur(18px); border-top:1px solid var(--sp-line) !important; box-shadow:0 -10px 30px rgba(15,29,64,.08) !important; }
body.sp-ui.sp-ui:not(.loket-night) .bnav-item.active{ color:var(--role) !important; } body.sp-ui.sp-ui:not(.loket-night) .bnav-item.active .bnav-ico{ background:var(--role-soft) !important; }
body.sp-ui.sp-ui:not(.loket-night) .fab{ background:linear-gradient(135deg,var(--role),var(--role-2)) !important; color:#fff !important; box-shadow:0 14px 30px rgba(var(--role-rgb),.45) !important; }
body.sp-ui.sp-ui:not(.loket-night) .modal-sheet{ border-radius:26px 26px 0 0 !important; box-shadow:var(--sp-sh-3); }
body.sp-ui.sp-ui:not(.loket-night) .mbtn-del{ background:var(--sp-bad) !important; }
body.sp-ui.sp-ui:not(.loket-night) .toast.ok{ background:var(--sp-ok) !important; } body.sp-ui.sp-ui:not(.loket-night) .toast.err{ background:var(--sp-bad) !important; }

/* ═════════ HALAMAN PUBLIK WARGA (pendataan, antrean, persyaratan, verifikasi) ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .hero{ background:linear-gradient(135deg,var(--role-dark) 0%,var(--role-ink) 60%,var(--role) 130%) !important; border-radius:var(--sp-r-lg) !important; box-shadow:0 20px 50px rgba(var(--role-rgb),.28) !important; position:relative; overflow:hidden; }
body.sp-ui.sp-ui:not(.loket-night) .hero::after{ content:""; position:absolute; width:320px; height:320px; right:-90px; top:-140px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%); pointer-events:none; }
body.sp-ui.sp-ui:not(.loket-night) .hero .badge{ background:rgba(255,255,255,.16) !important; color:#fff !important; border:1px solid rgba(255,255,255,.25); }
body.sp-ui.sp-ui:not(.loket-night) .sip-bkn .sip-bkn-hero,
body.sp-ui.sp-ui:not(.loket-night) .sip-bkn-login .sip-bkn-card,
body.sp-ui.sp-ui:not(.loket-night) .sip-bkn-card{ border-radius:var(--sp-r-lg) !important; }
body.sp-ui.sp-ui:not(.loket-night).sip-bkn-login,
body.sp-ui.sp-ui:not(.loket-night).sip-bkn{ background:radial-gradient(1000px 520px at 85% -10%, rgba(var(--role-rgb),.16), transparent 60%), radial-gradient(900px 480px at -5% 0%, rgba(var(--role-rgb),.10), transparent 60%), var(--sp-bg) !important; }


/* ═════════ MENU LOKET (Operator/PKL): semua "tone" mengikuti warna role ═════════ */
body.sp-ui.sp-ui:not(.loket-night) .loket-group-block[class*="tone-"] .gh-ico{ background:var(--role-soft) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .loket-ws-act[class*="tone-"] i{ color:var(--role) !important; }
body.sp-ui.sp-ui:not(.loket-night) .loket-role-badge--operator,
body.sp-ui.sp-ui:not(.loket-night) .loket-role-badge--pkl{ background:var(--role-soft) !important; border:1px solid var(--role-line) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .loket-role-badge--operator i,
body.sp-ui.sp-ui:not(.loket-night) .loket-role-badge--pkl i{ color:var(--role) !important; }

/* ═════════ MOTION ═════════ */
@keyframes spFadeUp{ from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
body.sp-ui.sp-ui:not(.loket-night) .content-wrapper > .content,
body.sp-ui.sp-ui:not(.loket-night) .content-wrapper > section.content{ animation:spFadeUp .45s var(--sp-ease) both; }
@media (prefers-reduced-motion: reduce){ body.sp-ui.sp-ui:not(.loket-night) *,
body.sp-ui.sp-ui:not(.loket-night) *::before,
body.sp-ui.sp-ui:not(.loket-night) *::after{ animation:none !important; transition:none !important; } }

/* ═════════ RESPONSIF ═════════ */
@media (max-width: 767px){
    body.sp-ui.sp-ui:not(.loket-night) .card,
body.sp-ui.sp-ui:not(.loket-night) .s-card,
body.sp-ui.sp-ui:not(.loket-night) .tc,
body.sp-ui.sp-ui:not(.loket-night) .form-card{ border-radius:var(--sp-r) !important; }
    body.sp-ui.sp-ui:not(.loket-night) .db-header:not(.loket-home-header),
body.sp-ui.sp-ui:not(.loket-night) .pw-header,
body.sp-ui.sp-ui:not(.loket-night) .edit-header,
body.sp-ui.sp-ui:not(.loket-night) .arsip-header,
body.sp-ui.sp-ui:not(.loket-night) .siak-header,
body.sp-ui.sp-ui:not(.loket-night) .pg-hdr,
body.sp-ui.sp-ui:not(.loket-night) .sk-header,
body.sp-ui.sp-ui:not(.loket-night) .kk-header,
body.sp-ui.sp-ui:not(.loket-night) .mono-header{ padding:14px 16px !important; border-radius:var(--sp-r) !important; }
    body.sp-ui.sp-ui:not(.loket-night) .modal-content{ border-radius:var(--sp-r) !important; }
    body.sp-ui.sp-ui:not(.loket-night) .nb-user-chip > div{ display:none; }
}

/* ═════════ CETAK ═════════ */
@media print{
    body.sp-ui.sp-ui:not(.loket-night)::before{ display:none !important; }
    body.sp-ui.sp-ui:not(.loket-night),
body.sp-ui.sp-ui:not(.loket-night) .wrapper,
body.sp-ui.sp-ui:not(.loket-night) .content-wrapper{ background:#fff !important; }
    body.sp-ui.sp-ui:not(.loket-night) .card,
body.sp-ui.sp-ui:not(.loket-night) .s-card,
body.sp-ui.sp-ui:not(.loket-night) .tc{ box-shadow:none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   SERAGAM PER ROLE — semua aksen dekoratif (kartu statistik, ikon, header,
   tombol "gold/navy", kotak menu) memakai SATU warna role yang sama.
   Pasangan teks/latar selalu kontras: teks putih di atas --role / --role-ink,
   teks --role-ink di atas --role-soft, teks --role-light di atas --role-dark.
   (Warna status — hijau/merah/kuning — sengaja tetap semantik.)
   ═════════════════════════════════════════════════════════════════════════ */
body.sp-ui.sp-ui:not(.loket-night) .sq-navy,
body.sp-ui.sp-ui:not(.loket-night) .sq-blue,
body.sp-ui.sp-ui:not(.loket-night) .sq-teal,
body.sp-ui.sp-ui:not(.loket-night) .sq-cyan,
body.sp-ui.sp-ui:not(.loket-night) .sq-sky,
body.sp-ui.sp-ui:not(.loket-night) .sq-indigo,
body.sp-ui.sp-ui:not(.loket-night) .sq-green,
body.sp-ui.sp-ui:not(.loket-night) .sq-gold,
body.sp-ui.sp-ui:not(.loket-night) .sq-red,
body.sp-ui.sp-ui:not(.loket-night) .sq-slate,
body.sp-ui.sp-ui:not(.loket-night) .sq-purple,
body.sp-ui.sp-ui:not(.loket-night) .hero-kpi .hk1,
body.sp-ui.sp-ui:not(.loket-night) .hero-kpi .hk2,
body.sp-ui.sp-ui:not(.loket-night) .hero-kpi .hk3,
body.sp-ui.sp-ui:not(.loket-night) .ref-card.rc1,
body.sp-ui.sp-ui:not(.loket-night) .ref-card.rc2,
body.sp-ui.sp-ui:not(.loket-night) .ref-card.rc4,
body.sp-ui.sp-ui:not(.loket-night) .bg-gradient-purple{ background:linear-gradient(145deg,var(--role-2),var(--role-ink)) !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .sc-navy,
body.sp-ui.sp-ui:not(.loket-night) .sc-gold,
body.sp-ui.sp-ui:not(.loket-night) .sc-blue,
body.sp-ui.sp-ui:not(.loket-night) .sc-teal,
body.sp-ui.sp-ui:not(.loket-night) .lr-card.gold,
body.sp-ui.sp-ui:not(.loket-night) .sk-card.teal{ border-left-color:var(--role) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sc-navy .v,
body.sp-ui.sp-ui:not(.loket-night) .sc-gold .v,
body.sp-ui.sp-ui:not(.loket-night) .sc-blue .v,
body.sp-ui.sp-ui:not(.loket-night) .sc-teal .v,
body.sp-ui.sp-ui:not(.loket-night) .sc-navy .sv,
body.sp-ui.sp-ui:not(.loket-night) .sc-gold .sv,
body.sp-ui.sp-ui:not(.loket-night) .sc-blue .sv,
body.sp-ui.sp-ui:not(.loket-night) .sc-teal .sv{ color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sc-navy .sc-ico,
body.sp-ui.sp-ui:not(.loket-night) .sc-gold .sc-ico,
body.sp-ui.sp-ui:not(.loket-night) .sc-blue .sc-ico,
body.sp-ui.sp-ui:not(.loket-night) .sc-teal .sc-ico,
body.sp-ui.sp-ui:not(.loket-night) .ib .ico.gold,
body.sp-ui.sp-ui:not(.loket-night) .hl-ico.blue,
body.sp-ui.sp-ui:not(.loket-night) .opt-ico.ico-blue,
body.sp-ui.sp-ui:not(.loket-night) .opt-ico.ico-purple,
body.sp-ui.sp-ui:not(.loket-night) .opt-ico.ico-navy,
body.sp-ui.sp-ui:not(.loket-night) .stat-ico.navy,
body.sp-ui.sp-ui:not(.loket-night) .stat-ico.gold{ background:var(--role-soft) !important; color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .stat-card .ico.navy,
body.sp-ui.sp-ui:not(.loket-night) .stat-card .ico.gold,
body.sp-ui.sp-ui:not(.loket-night) .btn-gold,
body.sp-ui.sp-ui:not(.loket-night) .btn-navy{ background:var(--role) !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .s-hd.gold{ background:var(--role-soft) !important; border-bottom:2px solid var(--role) !important; }
body.sp-ui.sp-ui:not(.loket-night) .s-hd.gold h3,
body.sp-ui.sp-ui:not(.loket-night) .s-hd.gold .s-desc{ color:var(--role-ink) !important; }
body.sp-ui.sp-ui:not(.loket-night) .s-hd.navy{ background:var(--role-dark) !important; }
body.sp-ui.sp-ui:not(.loket-night) .s-hd.navy h3,
body.sp-ui.sp-ui:not(.loket-night) .s-hd.navy .s-hd-ico,
body.sp-ui.sp-ui:not(.loket-night) .s-hd.navy .s-hd-num{ color:var(--role-light) !important; }
/* Ikon kecil di dalam chip/badge berlatar terang: pakai warna role penuh agar terbaca */
body.sp-ui.sp-ui:not(.loket-night) .header-badge i,
body.sp-ui.sp-ui:not(.loket-night) .hdr-badge i,
body.sp-ui.sp-ui:not(.loket-night) .pg-badge i,
body.sp-ui.sp-ui:not(.loket-night) .qr-badge i,
body.sp-ui.sp-ui:not(.loket-night) .pill i,
body.sp-ui.sp-ui:not(.loket-night) .sk-stat i,
body.sp-ui.sp-ui:not(.loket-night) .stat-pill i{ color:var(--role) !important; }
/* Mode malam (Operator/PKL): teks/ikon aksen memakai varian terang agar kontras di latar gelap */
body.loket-night.sp-ui .lmc-icon,
body.loket-night.sp-ui .gh-ico,
body.loket-night.sp-ui .aq-hd i,
body.loket-night.sp-ui .co-doc-ico{ color:var(--role-light) !important; }
/* Teks utama/sekunder tidak pernah memakai warna role → tidak bentrok dengan latar role */
body.sp-ui.sp-ui:not(.loket-night) .text-muted{ color:var(--sp-muted) !important; }

/* ═════════ TOKEN WARNA LEGACY (dipakai dashboard.php & dashboard_kinerja.php; sebelumnya biru dari sipandang-ui.css) ═════════ */
body.sp-ui{
    --sp-primary:var(--role); --sp-primary-d:var(--role-ink); --sp-accent:var(--role-2); --sp-tint:var(--role-soft);
    --sp-primary-2:var(--role-2); --sp-primary-l:var(--role-light); --sp-primary-rgb:var(--role-rgb);
    --sp-sub:#566583; --sp-danger:#c42f46;
    --sp-shadow-1:0 1px 2px rgba(15,29,64,.04),0 2px 8px rgba(15,29,64,.05);
    --sp-shadow-2:0 2px 4px rgba(15,29,64,.04),0 10px 28px rgba(15,29,64,.08);
    --sipa-blue:var(--role);
}
/* Sidebar: kotak ikon & penanda menu aktif ikut warna role (bukan biru bawaan) */
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link.active .nav-icon,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .menu-open > .nav-link .nav-icon,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link:hover .nav-icon{ background:rgba(255,255,255,.16) !important; box-shadow:none !important; border-color:transparent !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link.active::before,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-item > .nav-link.active::before{ background:var(--role-light) !important; box-shadow:none !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .nav-link .nav-icon{ background-image:none !important; }

/* ═════════ TOMBOL "GHOST" DI HEADER HALAMAN: selalu terbaca, apa pun latar header-nya ═════════
   Dulu ada halaman yang memaksa teks putih sementara tombol tetap putih → teks hilang.
   Sekarang: latar putih + teks warna role tua (kontras ≥ 8:1), mengalahkan aturan per-halaman. */
html body.sp-ui:not(.loket-night) .content-wrapper :is(.db-header,.siak-hero,.hdr-actions,.hero,[class*="-hdr"],[class*="-header"],[class*="header-"],[class*="hero"]):not(.modal-header):not(.main-header):not(.card-header):not(#_):not(#__) :is(.bp-ghost,.btn-pro-ghost,.btn-light,.btn-default,.btn-outline-secondary),
html body.sp-ui:not(.loket-night) .content-wrapper :is(.db-header,.siak-hero,.hdr-actions,.hero,[class*="-hdr"],[class*="-header"],[class*="header-"],[class*="hero"]):not(.modal-header):not(.main-header):not(.card-header):not(#_):not(#__) .btn-pro:is(.bp-ghost,.btn-pro-ghost,.btn-light,.btn-default,.btn-outline-secondary){
    background:#fff !important; color:var(--role-ink) !important; -webkit-text-fill-color:var(--role-ink) !important;
    border:1px solid var(--role-line) !important; text-shadow:none !important; opacity:1 !important; }
html body.sp-ui:not(.loket-night) .content-wrapper :is(.db-header,.siak-hero,.hdr-actions,.hero,[class*="-hdr"],[class*="-header"],[class*="header-"],[class*="hero"]):not(.modal-header):not(.main-header):not(.card-header):not(#_):not(#__) :is(.bp-ghost,.btn-pro-ghost,.btn-light,.btn-default,.btn-outline-secondary) *,
html body.sp-ui:not(.loket-night) .content-wrapper :is(.db-header,.siak-hero,.hdr-actions,.hero,[class*="-hdr"],[class*="-header"],[class*="header-"],[class*="hero"]):not(.modal-header):not(.main-header):not(.card-header):not(#_):not(#__) :is(.bp-ghost,.btn-pro-ghost,.btn-light,.btn-default,.btn-outline-secondary) i{ color:var(--role-ink) !important; -webkit-text-fill-color:var(--role-ink) !important; }
html body.sp-ui:not(.loket-night) .content-wrapper :is(.db-header,.siak-hero,.hdr-actions,.hero,[class*="-hdr"],[class*="-header"],[class*="header-"],[class*="hero"]):not(.modal-header):not(.main-header):not(.card-header):not(#_):not(#__) :is(.bp-ghost,.btn-pro-ghost,.btn-light,.btn-default,.btn-outline-secondary):hover{
    background:var(--role-soft) !important; color:var(--role-ink) !important; -webkit-text-fill-color:var(--role-ink) !important; border-color:var(--role) !important; }

/* ═════════ KONTRAS PADA PANEL GELAP ═════════
   Judul/angka beraksen (--accent/--gold = warna role) yang duduk di atas panel gelap (--navy = --role-dark)
   dulu nyaris sama dengan latarnya. Di panel gelap pakai --role-light (kontras >= 9:1 di atas --role-dark). */
body.sp-ui.sp-ui:not(.loket-night) :is(.modal-hdr, .up-hd, .dc-hd, .sidebar-header, .ctrl-bar, .th.navy) :is(h1,h2,h3,h4,strong,b,.ctrl-title strong){ color:var(--role-light) !important; -webkit-text-fill-color:var(--role-light) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.modal-hdr, .up-hd, .dc-hd, .ctrl-bar) :is(h1,h2,h3,h4) i{ color:var(--role-light) !important; }

/* ═════════ TOMBOL "SEMUA MENU" (toolbar loket): selalu solid warna role + teks putih ═════════
   Sebelumnya bisa tampil berlatar pucat dengan teks abu (tertimpa aturan .lnt-link umum). */
body.sp-ui.sp-ui .lnt-link.lnt-menu,
body.sp-ui.sp-ui .lnt-link.lnt-menu:focus,
body.sp-ui.sp-ui .lnt-link.lnt-menu:active{ background:var(--role) !important; border-color:var(--role) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow:0 6px 16px rgba(var(--role-rgb),.28); }
body.sp-ui.sp-ui .lnt-link.lnt-menu:hover{ background:var(--role-ink) !important; border-color:var(--role-ink) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
body.sp-ui.sp-ui .lnt-link.lnt-menu i,
body.sp-ui.sp-ui .lnt-link.lnt-menu .lbl,
body.sp-ui.sp-ui .lnt-link.lnt-menu span,
body.sp-ui.sp-ui .lnt-link.lnt-menu:hover i,
body.sp-ui.sp-ui .lnt-link.lnt-menu:hover .lbl,
body.sp-ui.sp-ui .lnt-link.lnt-menu:hover span{ color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIPANDANG · UI 2027 — lapisan visual terakhir
   Satu warna biru SIPANDANG untuk SEMUA role (token --role* sudah seragam di atas).
   Aurora lembut · kaca (glass) · radius besar · bayangan berlapis · gerak halus.
   Hanya tampilan: tidak mengubah layout/posisi, PHP, maupun JavaScript.
   ═══════════════════════════════════════════════════════════════════════════ */
html:root{
    --sp-r-sm:12px; --sp-r:18px; --sp-r-lg:26px;
    --sp-sh-1:0 1px 1px rgba(14,30,66,.04),0 2px 6px rgba(14,30,66,.05),0 8px 20px -6px rgba(14,30,66,.06);
    --sp-sh-2:0 1px 2px rgba(14,30,66,.05),0 8px 20px -4px rgba(14,30,66,.09),0 22px 44px -16px rgba(11,92,173,.16);
    --sp-sh-3:0 2px 4px rgba(14,30,66,.06),0 18px 40px -8px rgba(14,30,66,.16),0 40px 80px -24px rgba(11,92,173,.22);
    --sp-bg:#f3f6fc; --sp-line:#e1e8f5; --sp-line-2:#ebf0fa;
    --sp-ease-spring:cubic-bezier(.34,1.56,.64,1);
    --sp-glass:rgba(255,255,255,.72);
}
@keyframes sp27-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes sp27-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sp27-sheen{ from{ background-position:-160% 0; } to{ background-position:260% 0; } }

/* Latar: aurora biru + butiran titik halus */
body.sp-ui.sp-ui:not(.loket-night){ background:var(--sp-bg) !important; font-feature-settings:"cv11","ss01","tnum"; }
body.sp-ui.sp-ui:not(.loket-night)::before{ height:560px;
    background:
        radial-gradient(720px 360px at 88% -80px, rgba(59,122,214,.20), transparent 70%),
        radial-gradient(640px 320px at 8% -100px, rgba(11,92,173,.14), transparent 70%),
        radial-gradient(520px 260px at 50% -140px, rgba(120,170,245,.14), transparent 70%); }
body.sp-ui.sp-ui:not(.loket-night)::after{ content:""; position:fixed; inset:0 0 auto 0; height:420px; z-index:-1; pointer-events:none; opacity:.55;
    background-image:radial-gradient(rgba(11,92,173,.16) 1px, transparent 1.2px); background-size:26px 26px;
    -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }
body.sp-ui.sp-ui:not(.loket-night) h1,
body.sp-ui.sp-ui:not(.loket-night) h2,
body.sp-ui.sp-ui:not(.loket-night) h3{ letter-spacing:-.025em; }
body.sp-ui.sp-ui:not(.loket-night) :focus-visible{ outline:3px solid rgba(11,92,173,.35); outline-offset:2px; border-radius:10px; }
body.sp-ui.sp-ui:not(.loket-night) ::selection{ background:rgba(11,92,173,.22); }
body.sp-ui.sp-ui:not(.loket-night) ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#b9cdee,#9db8e6); background-clip:content-box; }

/* Navbar kaca */
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar{ background:var(--sp-glass) !important; backdrop-filter:saturate(200%) blur(22px); -webkit-backdrop-filter:saturate(200%) blur(22px);
    border-bottom:1px solid rgba(255,255,255,.65) !important; box-shadow:0 1px 0 rgba(11,92,173,.08), 0 14px 34px -18px rgba(14,30,66,.18) !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar::after{ height:2px; background:linear-gradient(90deg,transparent,#0b5cad 18%,#6fb1f5 52%,transparent 92%); opacity:.75; }
body.sp-ui.sp-ui:not(.loket-night) .nb-user-chip{ background:rgba(255,255,255,.8) !important; backdrop-filter:blur(10px); }

/* Sidebar: biru tua berpendar + menu kaca */
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar{
    background:
        radial-gradient(420px 300px at 0% 0%, rgba(59,122,214,.34), transparent 70%),
        radial-gradient(360px 260px at 100% 100%, rgba(11,92,173,.22), transparent 70%),
        linear-gradient(185deg,#05285a 0%,#031737 100%) !important;
    border-right:1px solid rgba(255,255,255,.06) !important; box-shadow:12px 0 48px -12px rgba(8,20,48,.35) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item > .nav-link{ border-radius:14px !important; transition:background .22s var(--sp-ease), transform .22s var(--sp-ease), box-shadow .22s var(--sp-ease) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item > .nav-link:hover{ background:rgba(255,255,255,.09) !important; transform:translateX(3px); }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item.menu-open > .nav-link,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item > .nav-link.active{
    background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.07)) !important; color:#fff !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 26px -10px rgba(0,0,0,.45) !important; backdrop-filter:blur(8px); }
body.sp-ui.sp-ui:not(.loket-night) .nav-treeview > .nav-item > .nav-link{ border-radius:12px !important; }

/* Hero header halaman (.db-header): aurora + tepi kaca + kilau */
html body .content-wrapper .db-header .container-fluid{ border:0 !important; box-shadow:none !important; }
html body .content-wrapper .db-header .container-fluid::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:
        radial-gradient(420px 220px at 12% 120%, rgba(120,170,245,.35), transparent 70%),
        radial-gradient(360px 200px at 100% 0%, rgba(255,255,255,.18), transparent 65%),
        linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);
    background-size:auto,auto,260% 100%; animation:sp27-sheen 7s ease-in-out infinite; }
body.sp-ui.sp-ui:not(.loket-night) .db-header{ animation:sp27-rise .55s var(--sp-ease) both; }
body.sp-ui.sp-ui:not(.loket-night) .content-wrapper .content{ animation:sp27-rise .6s .06s var(--sp-ease) both; }

/* Kartu: radius besar, tepi rambut, bayangan berlapis, mengangkat saat disorot */
body.sp-ui.sp-ui:not(.loket-night) :is(.card,.small-box,.info-box,.stat-card,.sc,.table-card,.filter-card,.chart-card,.form-card,.info-card,.side-card,.panel-card,.ref-card,.hl-card){
    border-radius:var(--sp-r) !important; border:1px solid var(--sp-line) !important; box-shadow:var(--sp-sh-1) !important;
    background-color:#fff; transition:transform .28s var(--sp-ease), box-shadow .28s var(--sp-ease), border-color .28s var(--sp-ease) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.stat-card,.sc,.ref-card,.hl-card,.small-box,.info-box):hover{ transform:translateY(-4px); box-shadow:var(--sp-sh-2) !important; border-color:rgba(11,92,173,.28) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.table-card,.filter-card,.chart-card){ border-radius:var(--sp-r-lg) !important; }
body.sp-ui.sp-ui:not(.loket-night) .sc .v,
body.sp-ui.sp-ui:not(.loket-night) .stat-card .sc-val,
body.sp-ui.sp-ui:not(.loket-night) .stat-card .v{ letter-spacing:-.04em; font-variant-numeric:tabular-nums; }

/* Tombol: pil, gradien biru, kilap atas, tekan halus */
body.sp-ui.sp-ui:not(.loket-night) :is(.btn-pro,.btn-p,.btn-sip,.btn-std,.btn-cta-main){ border-radius:999px !important; letter-spacing:-.005em;
    transition:transform .2s var(--sp-ease), box-shadow .2s var(--sp-ease), background .2s !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.bp-navy,.btn-primary,.btn-sip,.bp-add,.bp-cari,.btn-buat,.btn-gold,.btn-navy){
    background:linear-gradient(135deg,#1a74cc,#0b5cad 55%,#08428a) !important; color:#fff !important; border:0 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px -8px rgba(11,92,173,.65) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.bp-navy,.btn-primary,.btn-sip,.bp-add,.bp-cari,.btn-buat):hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 28px -8px rgba(11,92,173,.75) !important; filter:saturate(1.08); }
body.sp-ui.sp-ui:not(.loket-night) :is(.btn-pro,.btn,.btn-p,.btn-std):active{ transform:translateY(0) scale(.97); transition-duration:.08s !important; }
body.sp-ui.sp-ui:not(.loket-night) .act,
body.sp-ui.sp-ui:not(.loket-night) .action-btn,
body.sp-ui.sp-ui:not(.loket-night) .act-btn{ border-radius:11px !important; transition:transform .2s var(--sp-ease-spring), box-shadow .2s, background .2s !important; }
body.sp-ui.sp-ui:not(.loket-night) .act:hover,
body.sp-ui.sp-ui:not(.loket-night) .act-btn:hover{ transform:translateY(-2px) scale(1.08); }

/* Form: lapang, fokus bercincin biru */
body.sp-ui.sp-ui:not(.loket-night) :is(.form-control,.inp-f,.input-slim,.inp,.sel,.ta,select.form-control,textarea.form-control){
    border-radius:13px !important; border:1.5px solid #dbe4f3 !important; background:#fbfcff !important; box-shadow:0 1px 0 rgba(14,30,66,.02) inset;
    transition:border-color .2s, box-shadow .2s, background .2s !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.form-control,.inp-f,.input-slim,.inp,.sel,.ta):hover{ border-color:#bccde9 !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.form-control,.inp-f,.input-slim,.inp,.sel,.ta):focus{
    border-color:#0b5cad !important; background:#fff !important; box-shadow:0 0 0 4px rgba(11,92,173,.16) !important; }

/* Tabel: kepala kecil kapital, baris menyorot dengan garis biru di kiri */
body.sp-ui.sp-ui:not(.loket-night) table thead th{ background:linear-gradient(180deg,#f8faff,#f1f5fc) !important; color:#4a5b7c !important;
    font-size:.66rem !important; font-weight:800 !important; letter-spacing:.09em !important; text-transform:uppercase; border-bottom:1px solid var(--sp-line) !important; }
body.sp-ui.sp-ui:not(.loket-night) table tbody tr{ transition:background .18s; }
body.sp-ui.sp-ui:not(.loket-night) table tbody tr:hover{ background:rgba(11,92,173,.055) !important; }
body.sp-ui.sp-ui:not(.loket-night) table tbody tr:hover > td:first-child{ box-shadow:inset 3px 0 0 #0b5cad; }

/* Badge, chip, modal, toast */
body.sp-ui.sp-ui:not(.loket-night) :is(.badge,.badge-pro,.bp-status,.kb-badge,.tc-count,.header-badge,.hdr-badge,.pg-badge){ border-radius:999px !important; }
body.sp-ui.sp-ui:not(.loket-night) .modal-content{ border:1px solid rgba(255,255,255,.7) !important; border-radius:var(--sp-r-lg) !important; box-shadow:var(--sp-sh-3) !important; overflow:hidden; }
body.sp-ui.sp-ui:not(.loket-night) .modal.show .modal-dialog{ animation:sp27-rise .32s var(--sp-ease) both; }
body.sp-ui.sp-ui:not(.loket-night) .modal-backdrop.show{ background:#031737 !important; opacity:.5 !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
body.sp-ui.sp-ui:not(.loket-night) :is(.nav-tabs .nav-link,.nav-pills .nav-link){ border-radius:12px !important; font-weight:700; }
body.sp-ui.sp-ui:not(.loket-night) .nav-pills .nav-link.active{ background:linear-gradient(135deg,#1a74cc,#0b5cad) !important; box-shadow:0 8px 18px -8px rgba(11,92,173,.65); }
body.sp-ui.sp-ui:not(.loket-night) .progress{ border-radius:999px !important; background:#e6edf9 !important; }
body.sp-ui.sp-ui:not(.loket-night) .progress-bar{ background:linear-gradient(90deg,#0b5cad,#6fb1f5) !important; }

@media (prefers-reduced-motion:reduce){
    body.sp-ui *, body.sp-ui *::before, body.sp-ui *::after{ animation:none !important; transition-duration:.01ms !important; }
}
@media (max-width:640px){ html:root{ --sp-r:16px; --sp-r-lg:20px; } body.sp-ui.sp-ui:not(.loket-night)::after{ display:none; } }

/* ═════════ GARIS TUNGGAL (hapus garis ganda) ═════════ */
/* Submenu sidebar: hanya satu garis penuntun (dari sipandang-shell.css); matikan sisa garis dari stylesheet lama */
body.sp-ui.sp-ui .nav-sidebar .nav-treeview{ border:0 !important; border-left:0 !important; box-shadow:none !important; background-image:none !important; }
body.sp-ui.sp-ui .nav-sidebar .nav-treeview::after,
body.sp-ui.sp-ui .nav-sidebar .nav-treeview > .nav-item::before,
body.sp-ui.sp-ui .nav-sidebar .nav-treeview > .nav-item::after,
body.sp-ui.sp-ui .nav-sidebar .has-treeview::before,
body.sp-ui.sp-ui .nav-sidebar .has-treeview::after,
body.sp-ui.sp-ui .nav-sidebar .has-treeview > .nav-treeview > .nav-item{ content:none !important; border-left:0 !important; }
body.sp-ui.sp-ui .nav-sidebar .nav-treeview > .nav-item > .nav-link{ border-left:0 !important; }
body.sp-ui.sp-ui .nav-sidebar .nav-treeview::before{ background:rgba(255,255,255,.12) !important; width:1px !important; }
/* Topbar: satu garis bawah saja (gradien), tanpa border + bayangan 1px tambahan */
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar{ border-bottom:0 !important; box-shadow:0 14px 34px -20px rgba(14,30,66,.2) !important; }
/* Header hero: tepi kaca cukup satu (hapus border ganda dari lapisan sebelumnya) */
html body .content-wrapper .db-header .container-fluid{ outline:0 !important; }
/* Sidebar: pemisah brand & panel pengguna tidak dobel */
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-link{ border-bottom:1px solid rgba(255,255,255,.07) !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .sidebar{ border-top:0 !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .user-panel{ border-bottom-width:1px !important; }

/* ══════════════════════════════════════════════════════════════════════
   JAMSOSTEK PRO LAYER — biru profesional (hanya tampilan)
   Palet: Biru Jamsostek #0b5cad · Navy #05285a · Biru terang #1a74cc
   Aksen: Cyan #14a3e0 · Hijau #6cbf3f (dipakai hemat, untuk status/aksen)
   ══════════════════════════════════════════════════════════════════════ */
html:root{
    --sp-cyan:#14a3e0; --sp-green:#6cbf3f;
    --sp-bg:#f2f6fc; --sp-line:#dce6f3; --sp-line-2:#e8eff8; --sp-surface-2:#f6f9fe;
    --sp-ink:#06224f; --sp-text:#14233f; --sp-muted:#52638a;
    --sp-grad:linear-gradient(135deg,#05285a 0%,#0b5cad 58%,#1a74cc 100%);
    --sp-grad-soft:linear-gradient(135deg,#e8f2fd 0%,#f6faff 100%);
    --sp-brandbar:linear-gradient(90deg,#0b5cad,#14a3e0 55%,#6cbf3f);
    --sp-sh-1:0 1px 2px rgba(5,40,90,.05),0 3px 10px rgba(5,40,90,.06);
    --sp-sh-2:0 2px 6px rgba(5,40,90,.05),0 14px 32px rgba(5,40,90,.10);
    --sp-sh-3:0 6px 12px rgba(5,40,90,.06),0 28px 60px rgba(5,40,90,.18);
}
body.sp-ui.sp-ui:not(.loket-night){ --bg:#f2f6fb !important; --ui-bg:#f2f6fb !important; --border:#dce6f3 !important; --ui-line:#dce6f3 !important; --ui-border:#dce6f3 !important; --sip-border:#dce6f3; --sip-bg:#f2f6fb; }
body.sp-ui.sp-ui:not(.loket-night)::before{
    background:radial-gradient(900px 300px at 88% -60px, rgba(20,163,224,.14), transparent 70%),
               radial-gradient(760px 260px at 4% -70px, rgba(11,92,173,.12), transparent 70%); }

/* Navbar: garis aksen tiga warna */
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar::after{ height:3px; background:var(--sp-brandbar); opacity:1; }
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar{ background:rgba(255,255,255,.9) !important; }

/* Sidebar: navy dalam + kilau biru */
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar{
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(26,116,204,.45), transparent 70%),
        radial-gradient(360px 300px at 100% 100%, rgba(20,163,224,.16), transparent 70%),
        linear-gradient(185deg,#06306b 0%,#031737 100%) !important;
    box-shadow:10px 0 44px rgba(3,23,55,.22) !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-link{ position:relative; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-link::after{ content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:2px; border-radius:2px; background:var(--sp-brandbar); opacity:.85; pointer-events:none; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link{ position:relative; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link.active,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item.menu-open > .nav-link{
    background:linear-gradient(135deg,#1a74cc 0%,#0b5cad 100%) !important; box-shadow:0 10px 24px rgba(0,20,60,.45), inset 0 1px 0 rgba(255,255,255,.18) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-treeview > .nav-item > .nav-link.active{ box-shadow:inset 3px 0 0 var(--sp-cyan) !important; background:rgba(255,255,255,.11) !important; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .badge,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .right.badge{ background:var(--sp-cyan) !important; }
body.sp-ui.sp-ui:not(.loket-night) .up-badge{ background:linear-gradient(135deg,#14a3e0,#0b5cad) !important; }

/* Kartu judul halaman: tinta biru lembut + bar aksen */
body.sp-ui.sp-ui:not(.loket-night) :is(.db-header:not(.loket-home-header),.pw-header,.edit-header,.arsip-header,.siak-header,.surat-header,.sw-hdr,.dk-hdr,.dk-header,.dw-hdr,.pd-header,.ap-hdr,.ep-hdr,.km-header,.qr-header,.kp-hdr,.page-hdr,.pg-hdr,.pg-hdr-admin,.bantuan-hero,.import-hero,.kontak-hero,.rw-header,.lb-hdr,.kk-header,.mono-header,.rsk-header,.sk-header,.sk-hdr,.dd-hdr,.rpa-hd,.pd-head,.db-hdr,.sm-hdr,.ak-hdr,.ars-hdr){
    background:radial-gradient(520px 160px at 100% 0%, rgba(20,163,224,.10), transparent 70%), linear-gradient(180deg,#fff 0%,#f4f8fe 100%) !important;
    border-color:var(--sp-line) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.db-header:not(.loket-home-header),.pw-header,.edit-header,.arsip-header,.siak-header,.surat-header,.sw-hdr,.dk-hdr,.dk-header,.dw-hdr,.pd-header,.ap-hdr,.ep-hdr,.km-header,.qr-header,.kp-hdr,.page-hdr,.pg-hdr,.bantuan-hero,.import-hero,.kontak-hero,.rw-header,.lb-hdr,.kk-header,.mono-header,.rsk-header,.sk-header,.sk-hdr,.dd-hdr,.db-hdr)::after{
    width:6px; background:linear-gradient(180deg,#14a3e0,#0b5cad 55%,#05285a); }

/* Kartu statistik: garis atas biru */
body.sp-ui.sp-ui:not(.loket-night) :is(.sc,.stat-card){ position:relative; }
body.sp-ui.sp-ui:not(.loket-night) :is(.sc,.stat-card)::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--sp-brandbar); opacity:.9; pointer-events:none; }
body.sp-ui.sp-ui:not(.loket-night) .card{ border-color:var(--sp-line) !important; }

/* Tombol: gradien biru Jamsostek */
body.sp-ui.sp-ui:not(.loket-night) :is(.bp-navy,.btn-sip,.btn.bn,.btn-pro.bp-navy,.btn-primary,.btn-lihat-semua){
    background:linear-gradient(135deg,#1a74cc 0%,#0b5cad 55%,#08428a 100%) !important; box-shadow:0 8px 18px -6px rgba(11,92,173,.55), inset 0 1px 0 rgba(255,255,255,.18) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.bp-navy,.btn-sip,.btn.bn,.btn-primary,.btn-lihat-semua):hover{
    background:linear-gradient(135deg,#2284e0 0%,#0b5cad 60%,#06356f 100%) !important; box-shadow:0 12px 26px -8px rgba(11,92,173,.65) !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-success{ background:linear-gradient(135deg,#4fa72a,#2f8a3a) !important; box-shadow:0 8px 18px -6px rgba(47,138,58,.5) !important; }

/* Form: fokus biru jelas */
body.sp-ui.sp-ui:not(.loket-night) :is(.form-control,.inp,.inp-f,.input-pro,.sel,select.form-control):focus{
    border-color:#0b5cad !important; box-shadow:0 0 0 4px rgba(11,92,173,.14) !important; }

/* Tabel: kepala biru-tinta, baris hover lembut */
body.sp-ui.sp-ui:not(.loket-night) table thead th{
    background:linear-gradient(180deg,#eef5fd,#e6f0fb) !important; color:#08428a !important; font-size:.7rem !important; font-weight:800 !important;
    letter-spacing:.07em; text-transform:uppercase; border-bottom:2px solid #c6dcf5 !important; border-top:0 !important; white-space:nowrap; }
body.sp-ui.sp-ui:not(.loket-night) table tbody td{ border-color:#e8eff8 !important; vertical-align:middle; }
body.sp-ui.sp-ui:not(.loket-night) table tbody tr{ transition:background .15s; }
body.sp-ui.sp-ui:not(.loket-night) table.table-hover tbody tr:hover,
body.sp-ui.sp-ui:not(.loket-night) table tbody tr:hover > td{ background-color:#f1f7fe; }

/* Badge & chip bawaan Bootstrap */
body.sp-ui.sp-ui:not(.loket-night) .badge-primary,
body.sp-ui.sp-ui:not(.loket-night) .bg-primary{ background:#0b5cad !important; color:#fff !important; }
/* Warna tautan hanya untuk <a> polos (tanpa class) supaya tidak menimpa warna tombol/menu */
body.sp-ui:not(.loket-night) a:not([class]){ color:#0b5cad; }
/* Tombol hijau (Cetak Rekap dll): teks & ikon putih */
body.sp-ui.sp-ui:not(.loket-night) .btn-pro.bp-green,
body.sp-ui.sp-ui:not(.loket-night) .btn-pro.bp-green i,
body.sp-ui.sp-ui:not(.loket-night) a.bp-green,
body.sp-ui.sp-ui:not(.loket-night) a.bp-green i{ color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-pro.bp-green{ background:#0e7050 !important; border:none !important; box-shadow:0 2px 6px rgba(14,112,80,.25) !important; }
body.sp-ui.sp-ui:not(.loket-night) .btn-pro.bp-green:hover{ background:#0a5a41 !important; }
body.sp-ui.sp-ui:not(.loket-night) .page-item.active .page-link{ background:#0b5cad !important; border-color:#0b5cad !important; color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .page-link{ color:#08428a; border-radius:10px; margin:0 2px; border-color:var(--sp-line); }

/* Halaman login & portal publik (sip-bkn-*) */
.sip-bkn-hero-band{
    background:
        radial-gradient(640px 320px at 85% -10%, rgba(20,163,224,.55), transparent 65%),
        radial-gradient(520px 300px at 8% 110%, rgba(108,191,63,.20), transparent 65%),
        linear-gradient(135deg,#05285a 0%,#0b5cad 62%,#1a74cc 100%) !important; }
.sip-bkn-hero-band::before{ opacity:.28 !important; }
.sip-bkn-hero-band h1{ text-shadow:0 2px 18px rgba(0,20,60,.35) !important; }
/* Header putih hanya untuk keadaan non-hub; saat hub (splash/terbuka) header transparan di atas latar biru — lihat blok perbaikan di akhir file */
body.sip-bkn:not(.sip-bkn-hub-closed):not(.sip-bkn-hub-charging):not(.sip-bkn-hub-exploding):not(.sip-bkn-hub-open) .sip-bkn-header{ background:rgba(255,255,255,.94) !important; box-shadow:0 1px 0 #dce6f3, 0 10px 30px -18px rgba(5,40,90,.35) !important; border-bottom:3px solid transparent !important; border-image:var(--sp-brandbar) 1 !important; }
body.sip-bkn-login{ background:#f2f6fc !important; }

/* Scrollbar */
body.sp-ui.sp-ui:not(.loket-night) *{ scrollbar-color:#b8cde8 transparent; }
body.sp-ui.sp-ui:not(.loket-night) ::-webkit-scrollbar-thumb{ background:#b8cde8; background-clip:content-box; }
body.sp-ui.sp-ui:not(.loket-night) ::-webkit-scrollbar-thumb:hover{ background:#8fb2de; background-clip:content-box; }

/* ── Anti layar kosong setelah login Operator/PKL ──
   Saat animasi masuk loket aktif, jangan menumpuk animasi fade lain pada wrapper/hero
   (animasi bertumpuk + opacity awal 0 dapat membuat halaman kosong sampai di-refresh). */
body.sp-ui.sp-ui.loket-enter-active .content-wrapper > .content,
body.sp-ui.sp-ui.loket-enter-active .content-wrapper > section.content,
body.sp-ui.sp-ui.loket-enter-active .content-wrapper .content{ animation:none !important; opacity:1 !important; }
body.sp-ui.sp-ui.loket-enter-active .db-header.loket-enter-item{ animation:loketEnterIn .32s cubic-bezier(.2,.9,.3,1) .04s both !important; }

/* ══════════ FLAT — tanpa efek kaca / kilau / glow (permintaan tampilan bersih) ══════════ */
body.sp-ui, body.sp-ui *, body.sp-ui *::before, body.sp-ui *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html body .content-wrapper .db-header .container-fluid::before{ display:none !important; animation:none !important; }
.loket-home-header::before, .loket-home-header::after{ display:none !important; }
/* Hero header: biru solid-gradasi halus tanpa lingkaran/kilau */
.loket-home-header, body.sp-ui .db-header.loket-home-header{
    background:linear-gradient(135deg,#05285a 0%,#0a4d95 100%) !important; box-shadow:0 6px 18px rgba(5,40,90,.16) !important; }
/* Latar halaman: tanpa aurora & butiran titik */
body.sp-ui.sp-ui:not(.loket-night)::before{ background:none !important; }
body.sp-ui.sp-ui:not(.loket-night)::after{ display:none !important; }
/* Navbar solid */
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar{ background:#fff !important; box-shadow:0 1px 0 var(--sp-line) !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-header.navbar::after{ height:3px; background:#0b5cad !important; opacity:1; }
body.sp-ui.sp-ui:not(.loket-night) .nb-user-chip{ background:#fff !important; }
/* Sidebar solid, menu aktif solid tanpa tepi kaca */
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar{ background:linear-gradient(180deg,#05285a 0%,#031737 100%) !important; box-shadow:none !important; }
body.sp-ui.sp-ui:not(.loket-night) .main-sidebar .brand-link::after{ background:#14a3e0 !important; opacity:.7; }
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar .nav-link.active,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item.menu-open > .nav-link,
body.sp-ui.sp-ui:not(.loket-night) .nav-sidebar > .nav-item > .nav-link.active{ background:#0b5cad !important; box-shadow:none !important; }
/* Tombol: tanpa highlight kilap di tepi atas */
body.sp-ui.sp-ui:not(.loket-night) :is(.bp-navy,.btn-sip,.btn.bn,.btn-pro.bp-navy,.btn-primary,.btn-lihat-semua,.bp-add,.bp-cari,.btn-buat){
    background:#0b5cad !important; box-shadow:0 2px 6px rgba(11,92,173,.25) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.bp-navy,.btn-sip,.btn.bn,.btn-primary,.btn-lihat-semua,.bp-add,.bp-cari,.btn-buat):hover{
    background:#08428a !important; box-shadow:0 4px 10px rgba(11,92,173,.3) !important; transform:none; }
body.sp-ui.sp-ui:not(.loket-night) .btn-success{ background:#2f8a3a !important; box-shadow:none !important; }
/* Kartu judul halaman & kartu statistik: polos */
body.sp-ui.sp-ui:not(.loket-night) :is(.db-header:not(.loket-home-header),.pw-header,.edit-header,.arsip-header,.siak-header,.surat-header,.sw-hdr,.dk-hdr,.dk-header,.dw-hdr,.pd-header,.ap-hdr,.ep-hdr,.km-header,.qr-header,.kp-hdr,.page-hdr,.pg-hdr,.bantuan-hero,.import-hero,.kontak-hero,.rw-header,.lb-hdr,.kk-header,.mono-header,.rsk-header,.sk-header,.sk-hdr,.dd-hdr,.db-hdr){
    background:#fff !important; box-shadow:var(--sp-sh-1) !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.sc,.stat-card)::before{ background:#0b5cad; opacity:1; }
/* Login hero: gradasi polos */
.sip-bkn-hero-band{ background:linear-gradient(135deg,#05285a 0%,#0b5cad 100%) !important; }
.sip-bkn-hero-band::before, .sip-bkn-hero-band::after{ display:none !important; }
body.loket-no-sidebar .loket-ant-live--in-header{ box-shadow:none !important; }
body.loket-no-sidebar .loket-home-header-intro .lhm-chip, .loket-home-meta .lhm-chip{ background:rgba(255,255,255,.10) !important; box-shadow:none !important; }

/* ══════════ ANTI "LOMPAT GAYA" — tanpa animasi muat halaman & transisi warna liar ══════════ */
body.sp-ui.sp-ui .content-wrapper > .content,
body.sp-ui.sp-ui .content-wrapper > section.content,
body.sp-ui.sp-ui .content-wrapper .content,
body.sp-ui.sp-ui .db-header,
body.sp-ui.sp-ui:not(.loket-night) .content-wrapper > section.content{ animation:none !important; }
body.sp-ui.sp-ui.loket-enter-active .db-header.loket-enter-item{ animation:loketEnterIn .32s cubic-bezier(.2,.9,.3,1) .04s both !important; }

/* ══════════ KOLOM CARI MENU (SIDEBAR) — rapi & profesional ══════════ */
body.sp-ui.sp-ui .main-sidebar .sb-search{
    display:flex !important; align-items:center; gap:10px; margin:2px 12px 14px !important; padding:0 10px 0 14px !important; height:42px;
    background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:12px !important;
    box-shadow:none !important; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; }
body.sp-ui.sp-ui .main-sidebar .sb-search:hover{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.22) !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search:focus-within{ background:rgba(255,255,255,.12) !important; border-color:#14a3e0 !important; box-shadow:0 0 0 3px rgba(20,163,224,.25) !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search > i{ color:rgba(255,255,255,.7) !important; font-size:.85rem !important; flex:0 0 auto; }
body.sp-ui.sp-ui .main-sidebar .sb-search:focus-within > i{ color:#fff !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search #sbSearch,
body.sp-ui.sp-ui .main-sidebar .sb-search input{
    -webkit-appearance:none; appearance:none; flex:1 1 auto; min-width:0; width:100%; height:100% !important; padding:0 !important; margin:0 !important;
    background:transparent !important; background-color:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0 !important;
    color:#fff !important; -webkit-text-fill-color:#fff; caret-color:#fff; font-family:var(--sp-font) !important; font-size:.84rem !important; font-weight:500 !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search input::placeholder{ color:rgba(255,255,255,.62) !important; -webkit-text-fill-color:rgba(255,255,255,.62); opacity:1; }
body.sp-ui.sp-ui .main-sidebar .sb-search input::-webkit-search-decoration,
body.sp-ui.sp-ui .main-sidebar .sb-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
body.sp-ui.sp-ui .main-sidebar .sb-search kbd{
    flex:0 0 auto; background:rgba(255,255,255,.10) !important; color:rgba(255,255,255,.72) !important; border:1px solid rgba(255,255,255,.16) !important;
    border-radius:6px !important; font-family:var(--sp-font) !important; font-size:.62rem !important; font-weight:700 !important; letter-spacing:.02em; padding:2px 6px !important; box-shadow:none !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search:focus-within kbd{ display:none; }

/* Cari menu: matikan posisi absolut warisan sipandang-ui.css (penyebab ikon dobel/tumpang tindih) */
body.sp-ui.sp-ui .main-sidebar .sb-search{ position:relative !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search > i,
body.sp-ui.sp-ui .main-sidebar .sb-search > kbd{ position:static !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search > i::before{ position:static !important; }
body.sp-ui.sp-ui .main-sidebar .sb-search #sbSearch:focus,
body.sp-ui.sp-ui .main-sidebar .sb-search input:focus{ background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; }

/* ══════════ SUBMENU SIDEBAR — garis penuntun tidak menimpa pilihan menu ══════════ */
/* Garis berada di lajur kiri (di luar kotak menu), menu mulai setelah lajur itu */
body.sp-ui.sp-ui .nav-sidebar .nav-treeview{ padding-left:30px !important; margin:4px 0 8px !important; }
body.sp-ui.sp-ui .nav-sidebar .nav-treeview::before{ left:19px !important; top:6px !important; bottom:6px !important; width:1px !important; background:rgba(255,255,255,.16) !important; }
/* Menu aktif: latar lembut saja, tanpa bar tepi yang bertabrakan dengan garis */
body.sp-ui.sp-ui:not(.loket-night) .nav-treeview > .nav-item > .nav-link.active{ box-shadow:none !important; background:rgba(255,255,255,.14) !important; color:#fff !important; font-weight:700 !important; }
/* Penanda kecil di garis untuk item aktif (di lajur garis, bukan di dalam kotak menu) */
body.sp-ui.sp-ui .nav-sidebar .nav-treeview > .nav-item{ position:relative; }
body.sp-ui.sp-ui .nav-sidebar .nav-treeview > .nav-item > .nav-link.active::before{ content:"" !important; position:absolute; left:-11px; top:50%; width:3px; height:18px; transform:translateY(-50%); border-radius:3px; background:#14a3e0; }
body.sp-ui.sp-ui .nav-sidebar .nav-treeview > .nav-item > .nav-link{ position:relative; }

/* ══════════ SIDEBAR CIUT (collapse) — rapi, ikon tengah ══════════ */
@media (min-width:992px){
    /* Elemen teks/pencarian tetap tersembunyi (menang atas gaya kolom pencarian & panel user) */
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .sb-search,
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .user-panel .info,
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .brand-text,
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .nav-header,
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .sb-divider,
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar .nav-link p,
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar .nav-treeview,
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar .nav-link .right,
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar .nav-link .badge{ display:none !important; }

    /* Logo */
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .brand-link{ justify-content:center !important; padding:14px 0 !important; }
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .brand-link::after{ left:20px; right:20px; }

    /* Avatar pengguna: lingkaran polos di tengah, tanpa kotak/pil */
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .user-panel{
        display:flex !important; justify-content:center !important; align-items:center; width:auto !important; margin:14px 0 10px !important; padding:0 !important;
        background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .user-panel .image{ margin:0 !important; padding:0 !important; display:flex; }
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .user-panel img{ width:38px !important; height:38px !important; border-radius:50% !important;
        box-shadow:0 0 0 2px rgba(255,255,255,.22) !important; }

    /* Daftar ikon menu: kotak 44px rata tengah */
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .sidebar{ padding:4px 0 20px !important; overflow-x:hidden !important; scrollbar-width:none; }
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .sidebar::-webkit-scrollbar{ display:none; width:0; height:0; }
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar{ align-items:center; }
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar > .nav-item{ width:100%; display:flex; justify-content:center; }
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar > .nav-item > .nav-link{
        width:44px !important; height:44px; margin:3px auto !important; padding:0 !important; display:flex !important; align-items:center; justify-content:center !important;
        border-radius:12px !important; transform:none !important; }
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar > .nav-item > .nav-link .nav-icon{
        margin:0 !important; width:auto !important; height:auto !important; flex:0 0 auto !important; background:transparent !important; box-shadow:none !important; font-size:1.02rem !important; }
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar > .nav-item > .nav-link:hover{ background:rgba(255,255,255,.10) !important; }
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar > .nav-item > .nav-link.active,
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar > .nav-item.menu-open > .nav-link{ background:#0b5cad !important; box-shadow:none !important; }
    body.sp-ui.sp-ui.sidebar-collapse .nav-sidebar > .nav-item > .nav-link.active::before{ display:none !important; }
}

/* ══════════ SELARASKAN UKURAN SIDEBAR / HEADER (satu sumber nilai) ══════════
   sipandang-ui.css memakai --sb-cur/--hd-h, sipandang-shell.css memakai --sb-w/--tb-h dengan angka berbeda
   (64 vs 68 px, 78 vs 84 px) sehingga garis header & sidebar tidak sejajar. Di sini disamakan. */
@media (min-width:992px){
    body.sp-ui.sp-ui:not(.loket-no-sidebar){ --sb-w:272px; --sb-cur:272px; --tb-h:64px; --hd-h:64px; }
    body.sp-ui.sp-ui.sidebar-collapse:not(.loket-no-sidebar){ --sb-w:80px; --sb-cur:80px; --sb-w-rail:80px; --sb-wc:80px; }

    /* Tinggi baris header = tinggi baris logo */
    body.sp-ui.sp-ui:not(.loket-no-sidebar) .main-header.navbar{ height:64px !important; min-height:64px !important; box-sizing:border-box; border-bottom:0 !important; }
    body.sp-ui.sp-ui:not(.loket-no-sidebar) .main-sidebar .brand-link{ height:64px !important; min-height:64px !important; box-sizing:border-box; padding:0 20px !important; border-bottom:0 !important; }
    /* Garis aksen: sama tebal, sama posisi (tepat di dasar baris 64px), warna sama */
    body.sp-ui.sp-ui:not(.loket-night):not(.loket-no-sidebar) .main-header.navbar::after{ left:0 !important; right:0 !important; bottom:0 !important; height:3px !important; background:#1a74cc !important; opacity:1 !important; }
    body.sp-ui.sp-ui:not(.loket-night):not(.loket-no-sidebar) .main-sidebar .brand-link::after{ left:0 !important; right:0 !important; bottom:0 !important; height:3px !important; border-radius:0 !important; background:#1a74cc !important; opacity:1 !important; }
    body.sp-ui.sp-ui.sidebar-collapse:not(.loket-no-sidebar) .main-sidebar .brand-link{ padding:0 !important; justify-content:center !important; }
    body.sp-ui.sp-ui.sidebar-collapse:not(.loket-no-sidebar) .main-sidebar .brand-link::after{ left:0 !important; right:0 !important; }

    /* Panah ciut: di tepi sidebar, sejajar vertikal dengan logo */
    body.sp-ui.sp-ui:not(.loket-no-sidebar) .sb-edge-toggle{
        top:19px !important; left:calc(var(--sb-w) - 13px) !important; width:26px !important; height:26px !important; z-index:1060; }
    body.sp-ui.sp-ui:not(.loket-no-sidebar) .sb-edge-toggle i{ font-size:.62rem !important; }

    /* Avatar: lingkaran penuh, cincin pakai border (tidak terpotong overflow) */
    body.sp-ui.sp-ui .main-sidebar .user-panel{ overflow:visible !important; }
    body.sp-ui.sp-ui .main-sidebar .user-panel .image{ overflow:visible !important; line-height:0; }
    body.sp-ui.sp-ui .main-sidebar .user-panel .image img,
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .user-panel img{
        width:40px !important; height:40px !important; min-width:40px; border-radius:50% !important; object-fit:cover; display:block;
        border:2px solid rgba(255,255,255,.35) !important; box-shadow:none !important; box-sizing:border-box; }
    body.sp-ui.sp-ui.sidebar-collapse .main-sidebar .sidebar{ overflow-y:auto !important; overflow-x:hidden !important; padding-top:6px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERBAIKAN WARNA — Beranda (index.php) & Portal Petugas (login_portal.php)
   Halaman hub memakai latar biru penuh (.sip-bkn-scene-bg), jadi teks/ikon di
   atasnya harus putih. Aturan global di atas (judul h1–h6 = tinta gelap, tautan
   polos = biru, header putih) sebelumnya menimpa warna itu → biru-di-atas-biru,
   putih-di-atas-putih. Blok ini mengembalikan pasangan warna yang kontras.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Latar body ikut biru scene (tidak ada kilatan terang saat overscroll) */
body.sp-ui.sp-ui:not(.loket-night).sip-bkn:not(.sip-bkn-login){ background:var(--role) !important; }

/* 2. Header: transparan di atas biru, tanpa garis tiga warna (biru-cyan-hijau) */
body.sip-bkn.sip-bkn-hub-closed .sip-bkn-header,
body.sip-bkn.sip-bkn-hub-charging .sip-bkn-header,
body.sip-bkn.sip-bkn-hub-exploding .sip-bkn-header,
body.sip-bkn.sip-bkn-hub-open .sip-bkn-header{
    background:transparent !important; box-shadow:none !important;
    border-bottom:1px solid rgba(255,255,255,.14) !important; border-image:none !important; }
body.sip-bkn.sip-bkn-hub-closed .sip-bkn-header{ border-bottom-color:transparent !important; }

/* 3. Judul "Pilih Layanan / Pilih Role" & judul hero: putih di atas biru */
body.sp-ui.sp-ui:not(.loket-night).sip-bkn.sip-bkn-hub-open:not(.sip-bkn-lite) .sip-bkn-services-title,
body.sp-ui.sp-ui:not(.loket-night).sip-bkn .sip-bkn-hero-band h1{ color:#fff !important; }
/* Mode ringan (sheet putih di ponsel): judul tetap navy di atas putih */
body.sp-ui.sp-ui:not(.loket-night).sip-bkn.sip-bkn-lite .sip-bkn-hub-stage .sip-bkn-services-title{ color:var(--role-dark) !important; }

/* 4. Tautan "Lanjutkan sebagai …": putih (sebelumnya biru #0b5cad di atas biru) */
body.sp-ui.sp-ui:not(.loket-night) .sip-bkn-remember a,
body.sp-ui.sp-ui:not(.loket-night) .sip-bkn-remember a:hover{ color:#fff !important; text-decoration:none; }
body.sp-ui.sp-ui:not(.loket-night) .sip-bkn-remember a{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }
body.sip-bkn.sip-bkn-lite.sip-bkn-sheet-open .sip-bkn-hub-stage .sip-bkn-remember a{ color:var(--role-ink) !important; background:var(--role-soft); border-color:var(--role-line); }

/* 5. Notifikasi di atas biru: kartu solid + bilah aksen agar tidak "mengambang" kuning-di-biru */
body.sip-bkn-hub-open .sip-bkn-panel-alert.warn{ background:#fff !important; color:#7a3e05 !important; border:1px solid #f3d9a4 !important; border-left:4px solid #d98a0b !important; }
body.sip-bkn-hub-open .sip-bkn-panel-alert.ok{ background:#fff !important; color:#0b5a40 !important; border:1px solid #bfe6d6 !important; border-left:4px solid var(--sp-ok) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PERBAIKAN — Sidebar Edit SIAK (edit_siak.php) & Opsi Cetak (cetak_opsi.php)
   1) Judul di header biru sidebar Edit SIAK dulu kena aturan global h1–h6 = tinta
      gelap (gelap di atas biru, tak terbaca) → paksa putih khusus panel biru ini.
   2) Kotak ikon "Informasi Permohonan": dulu kotak gradasi biru + bayangan besar.
      Sekarang lingkaran rapi, rata, tint lembut; terisi warna role saat disorot.
   ═══════════════════════════════════════════════════════════════════════════ */
body.sp-ui.sp-ui:not(.loket-night) .edit-sidebar .sidebar-hd h2,
body.sp-ui.sp-ui:not(.loket-night) .edit-sidebar .sidebar-hd h2 i{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
body.sp-ui.sp-ui:not(.loket-night) .edit-sidebar .sidebar-hd p{ color:rgba(255,255,255,.88) !important; }

body.sp-ui.sp-ui:not(.loket-night) :is(.edit-sidebar, .cetak-sidebar) .info-row{
    align-items:center; gap:12px; margin-bottom:14px; }
body.sp-ui.sp-ui:not(.loket-night) :is(.edit-sidebar, .cetak-sidebar) .info-ico{
    width:36px !important; height:36px !important; flex:0 0 36px; border-radius:50% !important;
    display:grid !important; place-items:center; font-size:.8rem !important; line-height:1;
    background:var(--role-soft) !important; color:var(--role) !important;
    border:1px solid var(--role-line); box-shadow:none !important;
    transition:background .2s, color .2s, border-color .2s !important; transform:none !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.edit-sidebar, .cetak-sidebar) .info-ico i{ color:inherit !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.edit-sidebar, .cetak-sidebar) .info-row:hover .info-ico{
    background:var(--role) !important; color:#fff !important; border-color:var(--role) !important; transform:none !important; }
body.sp-ui.sp-ui:not(.loket-night) :is(.edit-sidebar, .cetak-sidebar) .info-lbl{ margin-bottom:2px; }
body.sp-ui.sp-ui:not(.loket-night) :is(.edit-sidebar, .cetak-sidebar) .info-val{ line-height:1.3; }