/* SERBUNIB V17: unify visible backgrounds, preserve existing data/chart colors. */
:root,html[data-serbunib-theme="biru-sedang"]{
 --sb-bg-a:#6faed9;--sb-bg-b:#a0cbe6;--sb-bg-c:#82b0da;--sb-ink:#173b5c;
 --sb-nav:#dceef9;--sb-intro-a:#0b3d6b;--sb-intro-b:#1475ae;
}
html[data-serbunib-theme="biru-malam"]{
 --sb-bg-a:#296e9e;--sb-bg-b:#5d9aca;--sb-bg-c:#356fa7;--sb-ink:#103251;
 --sb-nav:#c4dfef;--sb-intro-a:#092b50;--sb-intro-b:#075f94;
}
html[data-serbunib-theme="biru-cerah"]{
 --sb-bg-a:#bad9ef;--sb-bg-b:#d4e9f7;--sb-bg-c:#b1d2ee;--sb-ink:#244765;
 --sb-nav:#ebf6fe;--sb-intro-a:#175489;--sb-intro-b:#2887b7;
}
html[data-serbunib-theme] body{
 background-color:var(--sb-bg-b)!important;
 background-image:radial-gradient(circle at 93% 10%,rgba(255,255,255,.20),transparent 28%),radial-gradient(circle at 8% 85%,rgba(10,54,115,.11),transparent 30%),linear-gradient(125deg,var(--sb-bg-a),var(--sb-bg-b) 52%,var(--sb-bg-c))!important;
 background-attachment:fixed!important;color:var(--sb-ink);min-height:100vh;
}
/* Home/frontend wrapper: translucent overlays should no longer hide the selected palette. */
html[data-serbunib-theme] body > main,
html[data-serbunib-theme] body > .container,
html[data-serbunib-theme] body > .p-3,
html[data-serbunib-theme] body > .container-fluid{
 background-color:transparent!important;background-image:none!important;
}
html[data-serbunib-theme] body nav.navbar,
html[data-serbunib-theme] body > nav.position-fixed{
 background:var(--sb-nav)!important;box-shadow:0 3px 13px rgba(9,53,99,.13);
}
html[data-serbunib-theme] body .navbar-brand,
html[data-serbunib-theme] body .app-title,
html[data-serbunib-theme] body > nav.position-fixed > a{color:#123d67!important;}
/* Home: spacing under fixed navbar, without altering grid or filters. */
html[data-serbunib-theme] body main.container:has(#filterForm){padding-top:105px!important;}
html[data-serbunib-theme] body main.container:has(#filterForm) .main{padding-top:0!important;}
html[data-serbunib-theme] body .stats-card{box-shadow:0 8px 23px rgba(8,49,88,.10);}
/* Auth maintains 50:50 and accessible white typography. */
html[data-serbunib-theme] .auth-layout .intro{
 position:relative;isolation:isolate;overflow:hidden;
 background:linear-gradient(135deg,var(--sb-intro-a),var(--sb-intro-b))!important;color:#fff!important;
}
html[data-serbunib-theme] .auth-layout .intro h1,
html[data-serbunib-theme] .auth-layout .intro .crest{color:#fff!important;text-shadow:0 2px 12px rgba(0,19,38,.2);}
html[data-serbunib-theme] .auth-layout .intro p{color:#edf7ff!important;}
html[data-serbunib-theme] .auth-layout .intro::before,
html[data-serbunib-theme] .auth-layout .intro::after{
 content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.19);
}
html[data-serbunib-theme] .auth-layout .intro::before{width:340px;height:340px;top:-110px;right:-110px;}
html[data-serbunib-theme] .auth-layout .intro::after{width:230px;height:230px;bottom:-110px;left:-95px;}
html[data-serbunib-theme] .auth-layout .panel{background:rgba(240,248,255,.18)!important;}
/* Draggable theme control. Only this widget is affected. */
.sb-theme-root{position:fixed!important;z-index:2140;right:72px;bottom:80px;left:auto;top:auto;max-width:calc(100vw - 16px);font:13px system-ui,-apple-system,'Segoe UI',sans-serif;touch-action:none;}
.sb-theme-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;border-radius:25px;padding:10px 14px;cursor:grab;touch-action:none;user-select:none;color:#174b7b;background:#f4faff;border:1px solid #a6cbe7;box-shadow:0 6px 20px rgba(0,28,70,.22);font-size:13px;font-weight:700;}
.sb-theme-dragging .sb-theme-toggle{cursor:grabbing;}
.sb-theme-toggle:focus-visible,.sb-theme-choice:focus-visible{outline:3px solid #f0b945;outline-offset:2px;}
.sb-theme-menu{position:absolute;right:0;bottom:calc(100% + 9px);width:228px;max-width:calc(100vw - 16px);max-height:min(280px,70vh);overflow-y:auto;background:#f7fbff;color:#163c61;border:1px solid #b0d2e9;border-radius:14px;padding:12px;box-shadow:0 13px 35px rgba(0,32,75,.27);touch-action:auto;}
.sb-theme-root[style*="top:"] .sb-theme-menu{bottom:auto;top:calc(100% + 9px);}
.sb-theme-menu[hidden]{display:none!important;}.sb-theme-menu strong{display:block;margin:0 4px 5px;font-size:13px;}.sb-theme-help{display:block;color:#54718a;margin:0 4px 8px;font-size:11px;}
.sb-theme-choice{display:flex;align-items:center;gap:10px;width:100%;border:1px solid transparent;border-radius:9px;background:transparent;color:#153c64;text-align:left;font-size:13px;padding:10px;cursor:pointer;}.sb-theme-choice[aria-pressed="true"]{background:#d9ebfc;border-color:#9bc4e8;font-weight:700;}.sb-theme-swatch{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid rgba(0,0,0,.12);}
@media(max-width:700px){html[data-serbunib-theme] body{background-attachment:scroll!important;}html[data-serbunib-theme] body main.container:has(#filterForm){padding-top:88px!important;}.sb-theme-root{right:65px;bottom:75px;}.sb-theme-toggle{padding:10px;}.sb-theme-toggle>span:last-child{display:none;}}
@media(prefers-reduced-motion:reduce){.sb-theme-toggle,.sb-theme-choice{transition:none!important;}}

/* V18 RESPONSIVE GUARD: stabilize layout after Chart.js, map and dynamic tables load. */
html[data-serbunib-theme] { overflow-x: clip; }
html[data-serbunib-theme] body { min-width: 0; width: 100%; overflow-x: clip; }
html[data-serbunib-theme] body main,
html[data-serbunib-theme] body main.container,
html[data-serbunib-theme] body .main,
html[data-serbunib-theme] body .row,
html[data-serbunib-theme] body .row > *,
html[data-serbunib-theme] body .card,
html[data-serbunib-theme] body .card-body,
html[data-serbunib-theme] body #statsContainer,
html[data-serbunib-theme] body .stats-card { min-width: 0; max-width: 100%; }
html[data-serbunib-theme] body .stats-card,
html[data-serbunib-theme] body .card-body { overflow-wrap: break-word; }
html[data-serbunib-theme] body canvas[id^="chart"] {
 display: block; max-width: 100% !important;
 height: clamp(270px, 34vw, 460px) !important;
 max-height: 460px !important;
}
html[data-serbunib-theme] body .table-responsive,
html[data-serbunib-theme] body .serbunib-chart-table-scroll {
 width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
}
html[data-serbunib-theme] body .serbunib-chart-table-grid { min-width: 100%; width: max-content; }
html[data-serbunib-theme] body #map,
html[data-serbunib-theme] body .map-container,
html[data-serbunib-theme] body .map-card { max-width: 100%; min-width: 0; }
@media (max-width: 767.98px) {
 html[data-serbunib-theme] body .container,
 html[data-serbunib-theme] body main.container { width: 100%; }
 html[data-serbunib-theme] body canvas[id^="chart"] {
  height: clamp(255px, 73vw, 350px) !important;
  max-height: 350px !important;
 }
 html[data-serbunib-theme] body #filterForm > * { min-width: 0; }
}