.statistik-dashboard { padding:28px clamp(16px,2.5vw,48px) 48px; background:#f5f7f6; color:#1f2937; }
.statistik-toolbar,.statistik-report-heading,.statistik-card-heading,.statistik-total { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.statistik-toolbar { margin-bottom:24px; flex-direction:column; align-items:stretch; gap:18px; }
.statistik-toolbar h2 { font-size:20px; margin:0 0 4px; }
.statistik-toolbar small,.statistik-description,.statistik-report-heading span { color:#68756f; font-size:13px; }
.statistik-filters { display:grid; grid-template-columns:repeat(2,minmax(0,320px)); gap:16px; padding:16px; background:#fff; border:1px solid #dce5de; border-radius:10px; }
.statistik-filter { display:flex; flex-direction:column; min-width:0; gap:7px; }
.statistik-filter[hidden] { display:none; }
.statistik-filter > span { color:#526459; font-size:12px; font-weight:600; line-height:1.5; }
.statistik-multiselect { position:relative; width:100%; min-width:0; }
.statistik-multiselect summary { position:relative; display:block; min-height:44px; padding:11px 38px 11px 13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#f8faf9; border:1px solid #d8e1db; border-radius:7px; cursor:pointer; font-size:13px; line-height:20px; color:#243d2d; list-style:none; }
.statistik-multiselect summary::-webkit-details-marker { display:none; }
.statistik-multiselect summary::after { content:''; position:absolute; right:16px; top:17px; width:7px; height:7px; border-right:1.5px solid #68756f; border-bottom:1.5px solid #68756f; transform:rotate(45deg); }
.statistik-multiselect[open] summary { border-color:#62a578; background:#fff; box-shadow:0 0 0 3px #edf6ef; }
.statistik-multiselect[open] summary::after { top:20px; transform:rotate(225deg); }
.statistik-options { position:absolute; top:calc(100% + 8px); left:0; z-index:20; width:100%; max-height:min(360px,55vh); overflow-y:auto; overflow-x:hidden; padding:6px; background:#fff; border:1px solid #dce5de; border-radius:8px; box-shadow:0 10px 28px #193b241a; }
.statistik-options label { display:flex; align-items:flex-start; gap:9px; padding:10px; margin:2px 0; border-radius:5px; font-size:12px; line-height:1.6; cursor:pointer; }
.statistik-options label span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.statistik-options label:hover { background:#f2f7f3; }
.statistik-options label:has(input:checked) { background:#eaf5ed; color:#176534; }
.statistik-options input { width:15px; height:15px; margin-top:2px; flex-shrink:0; accent-color:#16823b; }
.statistik-options small { display:block; padding:10px; line-height:1.6; }
.statistik-option-heading { padding:12px 10px 6px; color:#68756f; font-size:11px; font-weight:600; line-height:1.6; overflow-wrap:anywhere; border-top:1px solid #edf0ee; margin-top:6px; }
.statistik-report { padding:18px; margin-bottom:20px; background:#eaf0ec; border:1px solid #dce5de; border-radius:6px; }
.statistik-report-heading { justify-content:flex-start; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.statistik-report-heading h2 { font-size:16px; font-weight:600; margin:0; }
.statistik-grid { display:grid; gap:18px; }
.statistik-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.statistik-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.statistik-card { position:relative; min-width:0; padding:18px; border:1px solid #dde5df; border-radius:4px; background:#fff; }
.statistik-card-heading { margin-bottom:12px; }
.statistik-card-heading h3 { font-size:15px; font-weight:600; margin:0; }
.statistik-card-heading button { flex-shrink:0; }
.statistik-description { margin-bottom:16px; line-height:1.6; min-height:42px; }
.statistik-chart { width:100%; min-width:0; height:280px; }
.statistik-total { border-bottom:1px solid #e5e7eb; padding-bottom:12px; margin-bottom:12px; }
.statistik-total strong { font-size:32px; line-height:1.2; }
.statistik-dashboard .kpi-table { max-width:300px; margin:0 auto; }
.statistik-wide-card { grid-column:1 / -1; }
.statistik-loadable { position:relative; }
.statistik-loading { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; background:rgba(255,255,255,.94); border-radius:inherit; color:#476352; text-align:center; font-size:14px; }
.statistik-loading[hidden] { display:none; }
.statistik-spinner { width:30px; height:30px; border:3px solid #dcebe1; border-top-color:#16a34a; border-radius:50%; animation:statistik-spin .8s linear infinite; }
.has-load-error > .statistik-loading { color:#a32929; }
.has-load-error > .statistik-loading .statistik-spinner { display:none; }
@keyframes statistik-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .statistik-spinner { animation:none; } }
.statistik-golongan-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.statistik-card-heading:has(.statistik-golongan-actions) { flex-wrap:wrap; }
.statistik-status-select { display:block !important; width:150px; max-width:100%; min-height:34px; padding:5px 8px; border:1px solid #d8e1db; border-radius:5px; background:#f8faf9; color:#243d2d; font:inherit; font-size:12px; }
.statistik-golongan-actions .nice-select { display:none; }
.statistik-golongan-scroll,.statistik-satker-scroll,.statistik-education-scroll,.statistik-comparison-scroll { height:280px; overflow-y:auto; overflow-x:hidden; }
.statistik-golongan-scroll,.statistik-satker-scroll,.statistik-education-scroll,.statistik-comparison-scroll,.statistik-options { scrollbar-width:thin; scrollbar-color:#8b9c91 #eef2ef; overscroll-behavior:contain; touch-action:pan-y; }
#modalChartWrapper .statistik-golongan-scroll,#modalChartWrapper .statistik-satker-scroll,#modalChartWrapper .statistik-education-scroll,#modalChartWrapper .statistik-comparison-scroll { height:min(65vh,600px); }
.statistik-dashboard :is(summary,input,select,[role="region"]):focus-visible { outline:2px solid #16823b; outline-offset:2px; }
.statistik-comparison-empty { padding:70px 12px; text-align:center; color:#68756f; font-size:13px; }
.statistik-summary-card { padding:0; display:flex; flex-direction:column; }
.statistik-summary-total { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 22px; border-bottom:1px solid #dde5df; }
.statistik-summary-total h3 { font-size:16px; margin:0; font-weight:600; }
.statistik-summary-total i,.statistik-status-item i { margin-right:10px; color:#68756f; }
.statistik-summary-total > strong { font-size:38px; line-height:1.2; }
.statistik-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; }
.statistik-status-item { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:24px 20px; min-width:0; }
.statistik-status-item:nth-child(odd) { border-right:1px solid #dde5df; }
.statistik-status-item:nth-child(-n+2) { border-bottom:1px solid #dde5df; }
.statistik-status-item > span { font-size:14px; line-height:1.6; }
.statistik-status-item > div { text-align:right; flex-shrink:0; }
.statistik-status-item strong { display:block; font-size:27px; line-height:1.3; }
.statistik-status-item small { display:block; color:#68756f; font-size:13px; margin-top:6px; }
.statistik-other-status { margin:0; padding:10px 20px; font-size:12px; border-top:1px solid #dde5df; }
.statistik-projection-note { margin:10px 0 0; color:#68756f; font-size:12px; line-height:1.6; }
.statistik-map-status { margin:0 0 12px; font-size:13px; line-height:1.6; color:#526459; }
.statistik-dashboard #map { height:600px; max-height:none; container-type:inline-size; container-name:office-map; }
.statistik-office-marker { min-width:34px; height:34px; padding:0 8px; border:2px solid #fff; border-radius:20px; background:#16823b; color:#fff; font-size:12px; font-weight:700; box-shadow:0 2px 8px #0005; cursor:pointer; }
.statistik-office-marker:focus-visible { outline:3px solid #f5cf3b; outline-offset:3px; }
#map:fullscreen,#map.maplibregl-pseudo-fullscreen { width:100vw !important; height:100vh !important; max-height:none !important; border-radius:0; }
#map .statistik-data-popup { top:12px; left:12px; transform:none !important; width:min(340px,calc(100% - 72px)); max-width:none !important; z-index:4; }
#map .statistik-data-popup .maplibregl-popup-tip { display:none; }
#map .statistik-data-popup .maplibregl-popup-content { width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; padding:26px 14px 14px; border-radius:10px; }
#map .statistik-office-popup { max-height:min(620px,calc(var(--office-map-height,600px) - 72px)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; padding:4px; color:#243d2d; font-size:12px; line-height:1.6; }
#map .statistik-data-popup .maplibregl-popup-close-button { width:28px; height:28px; font-size:20px; z-index:1; background:#fff; border-radius:6px; }
.statistik-office-popup > strong { display:block; font-size:17px; padding-right:14px; }
.statistik-office-popup section { border-top:1px solid #e5e7eb; margin-top:10px; padding-top:10px; }
.statistik-office-popup p { margin:0 0 4px; font-size:inherit; line-height:inherit; overflow-wrap:anywhere; }
.statistik-popup-unit { font-size:13px; line-height:1.5; font-weight:600; color:#16823b; margin:0 0 5px; overflow-wrap:anywhere; }
.statistik-popup-chart h4 { font-size:13px; margin:0 0 10px; color:#526459; }
.statistik-popup-bar-row { margin-bottom:10px; }
.statistik-popup-bar-label { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; font-size:11px; }
.statistik-popup-bar-label strong { white-space:nowrap; font-size:11px; }
.statistik-popup-bar-track { height:9px; border-radius:5px; background:#edf2ee; overflow:hidden; }
.statistik-popup-bar { height:100%; border-radius:inherit; }
.statistik-popup-offices { margin-top:12px; padding-top:10px; border-top:1px solid #e5e7eb; }
.office-map-summary { position:absolute; top:12px; left:12px; bottom:28px; width:300px; z-index:3; display:flex; flex-direction:column; overflow:hidden; background:#fffffff5; border-radius:10px; box-shadow:0 3px 16px #0002; color:#243d2d; }
.office-map-summary.is-collapsed { bottom:auto; }
.office-summary-toolbar { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border-bottom:1px solid #dce5de; font-size:13px; }
.office-summary-toolbar button { border:1px solid #ccdcd0; border-radius:5px; padding:5px 9px; background:#eff7f1; color:#176534; font-size:11px; cursor:pointer; }
.office-summary-lists { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; padding:0 12px 12px; }
.office-summary-card { border:1px solid #dce5de; border-radius:6px; overflow:hidden; margin-top:12px; background:#fff; }
.office-summary-card h4 { display:flex; justify-content:space-between; gap:10px; margin:0; padding:10px; background:#e8f3eb; color:#176534; font-size:12px; line-height:1.5; }
.office-summary-row { display:flex; width:100%; justify-content:space-between; align-items:center; gap:8px; padding:9px 10px; border:0; border-bottom:1px solid #edf0ee; background:transparent; color:#243d2d; text-align:left; cursor:pointer; }
.office-summary-row:hover { background:#f2f7f3; }
.office-summary-row > span { min-width:0; }
.office-summary-row strong { display:block; font-size:11px; }
.office-summary-row small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:10px; line-height:1.5; color:#68756f; }
.office-summary-row b { font-size:12px; flex-shrink:0; }
.office-summary-row:focus-visible,.office-summary-toolbar button:focus-visible { outline:2px solid #16823b; outline-offset:-2px; }
.office-map-summary[hidden],.office-summary-lists[hidden] { display:none !important; }
@container office-map (max-width:699px) {
  .office-map-summary { top:auto; bottom:28px; right:12px; width:auto; max-height:215px; }
  .office-summary-toolbar { flex-direction:row; align-items:center; justify-content:space-between; padding:10px; font-size:12px; }
  .office-summary-toolbar button { max-width:120px; }
  .office-map-summary.is-collapsed { bottom:28px; }
}
@media (max-width:1199px) { .statistik-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:991px) { .statistik-status-item { flex-direction:column; gap:8px; padding:16px; } .statistik-status-item > div { text-align:left; } }
@media (max-width:767px) {
  .statistik-grid-2,.statistik-grid-3 { grid-template-columns:minmax(0,1fr); }
  .statistik-report { padding:12px; } .statistik-card { padding:14px; } .statistik-summary-card { padding:0; }
  .statistik-filters { grid-template-columns:minmax(0,1fr); padding:12px; gap:14px; }
  .statistik-options { position:static; margin-top:8px; box-shadow:none; max-height:280px; }
}