/* SATRIA V20.3 - final contrast and responsive layer. Loaded last. */
:root{
  --s23-navy:#061a33;
  --s23-blue:#1677e8;
  --s23-blue-dark:#0755b2;
  --s23-cyan:#35c9e8;
  --s23-ink:#0c2541;
  --s23-muted:#617a94;
  --s23-line:#d7e4f0;
  --s23-soft:#f4f8fd;
  --s23-surface:#fff;
}

html,body{max-width:100%;overflow-x:hidden}
body:not([data-ui-page="edit-map"]){background:#edf4fb;color:var(--s23-ink)}
body,button,input,select,textarea{font-family:Inter,"Segoe UI",Arial,sans-serif}

/* Light working surfaces must always use dark readable text. */
.surface,.hero-card,.kpi-card,.chart-card,.map-card,.priority-card,.table-card,
.iksi-hero,.decision-card,.kpi,.quality-card,.component-card,.priority-list-card,
.impact-card,.notification-card,.report-card,.page-card,.content-card{
  color:var(--s23-ink)!important;
  background:var(--s23-surface)!important;
  border-color:var(--s23-line)!important;
  box-shadow:0 10px 28px rgba(24,69,111,.08)!important;
}
.surface h1,.surface h2,.surface h3,.surface h4,.hero-card h1,.hero-card h2,.hero-card h3,
.kpi strong,.kpi-card strong,.card-heading h3,.page-heading h2,.score-ring strong,
.priority-item strong,.table-card td strong,.drawer h2{color:var(--s23-ink)!important}
.surface p,.surface small,.surface .metric-note,.surface .map-caption,.surface .empty-state,
.hero-card p,.hero-card small,.kpi span,.kpi small,.kpi-card span,.kpi-card small,
.card-heading .metric-note,.table-footer,.priority-item small,.row-title span,
.quality-item span,.page-heading p{color:var(--s23-muted)!important}
.eyebrow,.text-link,.text-button{color:var(--s23-blue-dark)!important}

/* Dark navigation and map controls must always use light text. */
.topbar,.sidebar,.app-sidebar,.satria-rail,.map-panel,.peta-panel,
.workspace-panel,.maplibregl-ctrl-group,.maplibregl-popup-content{
  --text:#f4f8fc;
  --muted:#a9bed1;
}
.topbar,.topbar *,.sidebar,.sidebar *,.app-sidebar,.app-sidebar *,.satria-rail,.satria-rail *{
  color:#f3f8fc;
}
.topbar span,.sidebar small,.sidebar .eyebrow,.app-sidebar small,.satria-rail small{color:#9fb6ca!important}
.nav-item,.side-links a,.rail-item{color:#d4e2ee!important}
.nav-item.active,.nav-item.active *, .rail-item.active,.rail-item.active *{color:#fff!important}

/* Buttons: prevent labels blending into backgrounds. */
.button,.action-button,.top-button,.table-action,.decision-buttons button,.decision-buttons a,
.heading-actions .button,.drawer-actions .button,.modal-actions .button{
  color:var(--s23-ink)!important;
  background:#fff!important;
  border-color:#bfd3e5!important;
  font-weight:700;
}
.button.primary,.action-button.primary,.top-button.primary,.top-button.accent,
.decision-buttons .primary,.heading-actions .primary,.modal-actions .primary{
  color:#fff!important;
  background:linear-gradient(135deg,var(--s23-blue),#0b63c9)!important;
  border-color:#0c65ca!important;
}
.button.primary *,.action-button.primary *,.top-button.primary *,.top-button.accent *{color:#fff!important}
.button.secondary,.action-button:not(.primary){color:#174669!important;background:#eef6ff!important}
.button:disabled,.action-button:disabled{opacity:.55;cursor:not-allowed}

/* Pills and badges get explicit foreground/background pairs. */
.status-pill.neutral,.status.neutral{color:#405a73!important;background:#e8f0f7!important}
.status-pill.good,.status.good{color:#0c6846!important;background:#dff6ec!important}
.status-pill.warn,.status.warn{color:#84520b!important;background:#fff0d0!important}
.status-pill.bad,.status.bad{color:#9d2934!important;background:#ffe2e5!important}
.decision-chips span{color:#174669!important;background:#eaf4ff!important;border:1px solid #c8def2!important}

/* KPI cards are calm and readable, not dark blocks with dark text. */
.kpi-grid{gap:12px}
.kpi,.kpi-card{background:#fff!important;border:1px solid var(--s23-line)!important}
.kpi i,.kpi-icon{flex:0 0 auto}
.kpi strong,.kpi-card strong{font-variant-numeric:tabular-nums}

/* Area summary added back in V20.3. */
.area-summary{margin:14px 0;padding:18px;border-radius:18px}
.area-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.area-summary-head h3{margin:5px 0 0;color:var(--s23-ink);font-size:18px}
.area-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.area-kpi{min-width:0;padding:15px;border:1px solid var(--s23-line);border-radius:14px;background:#f8fbff}
.area-kpi.featured{background:#eaf4ff;border-color:#b9d8f6}
.area-kpi.coverage{background:#eef9f6;border-color:#c8e9df}
.area-kpi span,.area-kpi small{display:block;color:var(--s23-muted);font-size:10px}
.area-kpi strong{display:block;margin:7px 0 4px;color:var(--s23-ink);font-size:22px;line-height:1.15;overflow-wrap:anywhere}
.kpi.area{border-top:3px solid #7ab8ef!important}

/* Form controls. */
.select-shell,.search-shell,.table-tools select,.form-grid input,.form-grid select,.form-grid textarea,
.component-input-grid input,input,select,textarea{
  color:var(--s23-ink)!important;
}
.select-shell,.search-shell,.table-tools select,.form-grid input,.form-grid select,.form-grid textarea,
.component-input-grid input{
  background:#fff!important;border-color:#c9dae8!important;
}
select option{color:var(--s23-ink)!important;background:#fff!important}
::placeholder{color:#8398ab!important;opacity:1}

/* Tables. */
th{color:#31506d!important;background:#edf4fa!important}
td{color:#213d58!important;background:#fff!important}
tbody tr:hover td{background:#f5f9fd!important}
.table-action{color:#0755b2!important;background:#eaf4ff!important;border-color:#bcd8f3!important}

/* Charts use light cards; canvas labels are handled in JS, center labels here. */
.chart-center strong{color:var(--s23-ink)!important}
.chart-center span,.legend-item{color:var(--s23-muted)!important}

/* Peta 3D retains its dark control panel, with forced contrast. */
body:has(#map) .map-panel,body:has(#map3d) .map-panel,
body:has(#map) .control-panel,body:has(#map3d) .control-panel{
  color:#f5f9fc!important;background:rgba(6,26,51,.95)!important
}
body:has(#map) .map-panel *,body:has(#map3d) .map-panel *,
body:has(#map) .control-panel *,body:has(#map3d) .control-panel *{color:inherit}
.maplibregl-popup-content{color:#eef6fc!important;background:#071b31!important}
.maplibregl-popup-content strong{color:#fff!important}
.maplibregl-popup-content small{color:#a8bfd2!important}

/* Desktop layout. */
@media (min-width:1181px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-shell,.content-shell{max-width:none}
}

/* Developer tablet layout. */
@media (max-width:1180px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .area-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid,.analytics-grid,.content-grid,.iksi-layout,.priority-layout,.notifications-layout{grid-template-columns:1fr!important}
  .topbar{padding-inline:12px}
  .content-shell,.dashboard-shell{padding:16px!important}
}

/* Mobile developer layout: deliberate reflow, no crushed desktop grid. */
@media (max-width:720px){
  body{font-size:14px}
  .topbar{min-height:58px;height:auto;padding:9px 10px;gap:8px}
  .topbar .brand-wrap>div:last-child span,.top-actions .connection-pill,.top-actions .live-status,
  .top-button span{display:none!important}
  .top-actions{gap:6px}
  .top-button,.icon-button{width:38px!important;min-width:38px;padding:0!important;justify-content:center}
  .dashboard-shell,.content-shell{padding:10px!important}
  .dashboard-toolbar,.page-heading{align-items:flex-start!important;flex-direction:column!important;gap:12px}
  .filter-group,.filter-group .select-shell,.heading-actions{width:100%}
  .heading-actions .button{flex:1 1 calc(50% - 6px);min-width:0}
  .hero-grid,.analytics-grid,.content-grid,.iksi-layout,.priority-layout,.notifications-layout{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:10px}
  .hero-card,.iksi-hero,.decision-card,.surface,.chart-card,.map-card,.priority-card,.table-card{border-radius:15px!important;padding:14px!important}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .kpi,.kpi-card{min-height:112px!important;padding:12px!important;align-items:flex-start!important;overflow:hidden}
  .kpi strong,.kpi-card strong{font-size:18px!important;white-space:normal!important;overflow-wrap:anywhere}
  .area-summary{padding:14px;margin:10px 0}
  .area-summary-head{display:block}
  .area-summary-head .metric-note{display:block;margin-top:8px}
  .area-kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .area-kpi{padding:12px}
  .area-kpi strong{font-size:18px}
  .score-layout{grid-template-columns:92px minmax(0,1fr)!important;gap:12px!important}
  .score-ring{width:92px!important;height:92px!important}
  .score-summary p{font-size:11px!important}
  .chart-wrap{min-height:240px}
  .table-tools{width:100%;align-items:stretch!important;flex-direction:column!important}
  .table-tools .search-shell,.table-tools select{width:100%!important}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
  table{min-width:720px}
  .table-footer{align-items:flex-start;flex-direction:column}
  #dashboardMap{min-height:360px!important}
  .page-heading h2{font-size:22px!important}
  .drawer{width:100vw!important;max-width:none!important;padding:14px!important}
  .drawer-meta,.form-grid,.component-input-grid,.impact-summary{grid-template-columns:1fr!important}
  .modal{width:calc(100vw - 18px)!important;max-height:94vh!important;border-radius:16px!important}
}

@media (max-width:420px){
  .kpi-grid,.area-kpi-grid{grid-template-columns:1fr!important}
  .score-layout{grid-template-columns:1fr!important;text-align:center}
  .score-ring{margin-inline:auto}
  .decision-buttons,.mini-actions{display:grid!important;grid-template-columns:1fr;width:100%}
  .decision-buttons .button,.mini-actions .button{width:100%}
}

/* Pusat Data D.I mobile navigation becomes a horizontal task switcher. */
@media (max-width:720px){
  body[data-ui-page="data-center"] .app-shell{display:block!important;min-height:0}
  body[data-ui-page="data-center"] .sidebar{
    position:sticky!important;top:58px!important;left:auto!important;z-index:45!important;
    width:100%!important;height:auto!important;max-height:none!important;transform:none!important;
    padding:8px 10px!important;border-right:0!important;border-bottom:1px solid var(--s23-line)!important;
    background:#fff!important;overflow-x:auto!important;overflow-y:hidden!important;display:block!important;
  }
  body[data-ui-page="data-center"] .di-selector,
  body[data-ui-page="data-center"] .side-quality,
  body[data-ui-page="data-center"] .side-links{display:none!important}
  body[data-ui-page="data-center"] .side-nav{display:flex!important;gap:7px!important;width:max-content}
  body[data-ui-page="data-center"] .nav-item{
    flex:0 0 auto!important;width:auto!important;min-width:126px!important;height:38px!important;
    padding:0 11px!important;border:1px solid #c9dbea!important;background:#f7fbff!important;color:#31506d!important;
  }
  body[data-ui-page="data-center"] .nav-item i{color:#1677e8!important}
  body[data-ui-page="data-center"] .nav-item.active{background:#1677e8!important;border-color:#1677e8!important;color:#fff!important}
  body[data-ui-page="data-center"] .nav-item.active i{color:#fff!important}
  body[data-ui-page="data-center"] .content-shell{padding-top:10px!important}
}

/* SATRIA V20.4 contrast total hotfix */
:root{
  --s24-ink:#0c2541;
  --s24-muted:#5f7b96;
  --s24-line:#d7e4f0;
  --s24-bg:#ffffff;
  --s24-soft:#f6faff;
  --s24-primary:#1677e8;
  --s24-primary-dark:#0755b2;
  --s24-success:#0c8b69;
}

/* Make the working UI consistently light with dark text. */
body, body[data-ui-page="data-center"], body[data-ui-page="dashboard-di"]{color:var(--s24-ink)!important;background:#edf4fb!important}
.topbar,
.dashboard-toolbar,.surface,.hero-card,.kpi-card,.chart-card,.map-card,.priority-card,.table-card,
.sidebar,.side-quality,.select-shell,.search-shell,.filter-group .select-shell,
.top-button,.button,.action-button,.context-button,.nav-item,.year-pill,.metric-note,
.area-kpi,.table-wrap,table,.table-tools select,.side-links a,.di-selector,.hero-card .status-pill,
.page-card,.content-card,.report-card,.quality-card,.component-card,.impact-card,.notification-card{
  background:var(--s24-bg)!important;
  color:var(--s24-ink)!important;
  border-color:var(--s24-line)!important;
}

.topbar{box-shadow:0 8px 28px rgba(20,52,88,.08)!important}
.brand-wrap strong,.brand-wrap b,.topbar strong,h1,h2,h3,h4,h5,strong,label,th,td,.di-title-row h1,.card-head h3,.hero-heading h2,.decision-hero h2,.page-heading h2,.score-ring strong,.kpi-card strong,.area-kpi strong,.table-card strong{
  color:var(--s24-ink)!important;
}
.brand-wrap span,.dashboard-toolbar p,.page-heading p,p small,small,.metric-note,.year-pill,.kpi-card span,.kpi-card small,.score-summary p,.score-summary small,.decision-hero>p,.priority-item small,.table-footer,.table-footer *,td small,.legend-item,.chart-center span,.side-quality span,.side-quality small,.side-links a,.live-status,.connection-pill,.top-actions .live-status,.top-actions .connection-pill,.filter-group label,.di-selector label{
  color:var(--s24-muted)!important;
}
.eyebrow,.text-link,.text-button,.select-shell i,.search-shell i,.nav-item i,.side-links a i,.brand-mark,.table-action,.top-button i,.button i,.action-button i{color:var(--s24-primary)!important}

/* Navigation / tabs must never blend into light bars. */
.nav-item{
  background:var(--s24-soft)!important;
  color:var(--s24-ink)!important;
  border:1px solid var(--s24-line)!important;
}
.nav-item span{color:inherit!important}
.nav-item b{background:#ffe7eb!important;color:#a52436!important}
.nav-item.active{
  background:linear-gradient(135deg,var(--s24-primary),#0e66cd)!important;
  border-color:var(--s24-primary)!important;
  color:#fff!important;
}
.nav-item.active *{color:#fff!important}
.nav-item.active b{background:rgba(255,255,255,.18)!important;color:#fff!important}

/* Buttons */
.top-button,.button,.action-button,.context-button{
  background:var(--s24-soft)!important;
  color:var(--s24-ink)!important;
  border:1px solid #bfd3e5!important;
  font-weight:700!important;
}
.top-button span,.button span,.action-button span,.context-button span{color:inherit!important}
.top-button.primary,.button.primary,.action-button.primary,
.decision-buttons .button.primary,.decision-actions .action-button.primary{
  background:linear-gradient(135deg,var(--s24-primary),#0f65ca)!important;
  color:#fff!important;
  border-color:var(--s24-primary)!important;
}
.top-button.primary *,.button.primary *,.action-button.primary *,.decision-buttons .button.primary *,.decision-actions .action-button.primary *{color:#fff!important}
.top-button.accent{background:linear-gradient(135deg,var(--s24-success),#0b7559)!important;border-color:var(--s24-success)!important;color:#fff!important}
.top-button.accent *{color:#fff!important}
.button.secondary,.action-button.secondary,.decision-buttons .button.secondary{background:#eef6ff!important;color:var(--s24-primary-dark)!important}
.text-button{color:var(--s24-primary-dark)!important}

/* Inputs and tables */
.select-shell select,.search-shell input,.table-tools select,input,select,textarea{color:var(--s24-ink)!important;background:transparent!important}
::placeholder{color:#8097ac!important;opacity:1}
th{background:#edf4fa!important;color:#35516d!important}
td{background:#fff!important;color:#213d58!important}
tbody tr:hover td{background:#f5f9fd!important}
.table-action{background:#eaf4ff!important;border-color:#bcd8f3!important;color:var(--s24-primary-dark)!important}
.table-action *{color:inherit!important}

/* Pills and status */
.status-pill.neutral,.status.neutral{background:#eaf4ff!important;color:#274e74!important}
.status-pill.good,.status.good{background:#dff6ec!important;color:#0c6846!important}
.status-pill.warn,.status.warn{background:#fff0d0!important;color:#84520b!important}
.status-pill.bad,.status.bad{background:#ffe2e5!important;color:#9d2934!important}
.hero-card .status-pill,.decision-hero .status-pill{border:1px solid var(--s24-line)!important}

/* KPI and helpers */
.kpi-card,.surface,.hero-card,.chart-card,.map-card,.priority-card,.table-card,.side-quality,.dashboard-toolbar{box-shadow:0 10px 28px rgba(24,69,111,.08)!important}
.kpi-icon.blue{background:#eaf4ff!important;color:#3d88ea!important}
.kpi-icon.cyan{background:#ebfbff!important;color:#0e98b5!important}
.kpi-icon.purple{background:#f2edff!important;color:#7c5ce0!important}
.kpi-icon.green{background:#e8f8f1!important;color:#1f9d75!important}
.kpi-icon.amber{background:#fff6e8!important;color:#c98b1e!important}
.kpi-icon.red{background:#fff0f2!important;color:#d8485a!important}
.priority-item{background:#fbfdff!important;border-color:var(--s24-line)!important}
.priority-rank{background:#eaf4ff!important;color:var(--s24-primary-dark)!important}
.quality-track{background:#e6eef5!important}
.quality-track i{background:linear-gradient(90deg,var(--s24-primary),#39c6e6)!important}
.progress-line{background:#e7eef5!important}
.progress-line span{background:linear-gradient(90deg,var(--s24-primary),#39c6e6)!important}

/* Keep dedicated map dark widgets readable where needed. */
.maplibregl-popup-content{background:#071b31!important;color:#eef6fc!important}
.maplibregl-popup-content *{color:inherit!important}
.maplibregl-popup-content strong{color:#fff!important}
.maplibregl-popup-content small{color:#a8bfd2!important}
body:has(#map) .map-panel,body:has(#map3d) .map-panel,
body:has(#map) .control-panel,body:has(#map3d) .control-panel{
  background:rgba(6,26,51,.95)!important;color:#f5f9fc!important;border-color:rgba(148,184,216,.18)!important;
}
body:has(#map) .map-panel *,body:has(#map3d) .map-panel *,body:has(#map) .control-panel *,body:has(#map3d) .control-panel *{color:inherit!important}

/* Desktop + mobile stability */
@media (max-width: 720px){
  .topbar{padding:10px!important;gap:8px!important}
  .top-actions{gap:6px!important}
  .top-button,.icon-button{min-width:38px!important}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-toolbar,.page-heading{flex-direction:column!important;align-items:flex-start!important}
  .hero-grid,.analytics-grid,.content-grid,.iksi-layout,.priority-layout,.notifications-layout{grid-template-columns:1fr!important;display:grid!important}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .sidebar{background:#fff!important}
}
@media (max-width: 420px){
  .kpi-grid,.area-kpi-grid{grid-template-columns:1fr!important}
}