/*
 * SATRIA V20.5 - CONTRAST LOCK
 * File ini WAJIB dimuat paling akhir.
 * Prinsip: surface terang = teks gelap, surface gelap/biru = teks putih.
 */
:root{
  color-scheme: light;
  --c-bg:#edf4fb;
  --c-surface:#ffffff;
  --c-surface-soft:#f5f9fd;
  --c-text:#0b243f;
  --c-text-2:#526f89;
  --c-border:#d3e1ed;
  --c-blue:#1677e8;
  --c-blue-dark:#0755b2;
  --c-navy:#061a33;
  --c-navy-2:#0b2948;
  --c-white:#ffffff;
  --c-green:#0b7b58;
  --c-amber:#84520b;
  --c-red:#9d2934;
}

html,body{background:var(--c-bg)!important;color:var(--c-text)!important}
body,button,input,select,textarea,table{font-family:Inter,"Segoe UI",Arial,sans-serif!important}
body *{text-shadow:none!important}

/* Jangan redupkan teks navigasi/menu. */
.nav-item,.context-tab,.rail-item,.side-links a,.top-button,.button,.action-button,.table-action,
.status,.status-pill,.year-pill,.metric-note,.kpi-card,.kpi,.surface,.hero-card,.chart-card,.table-card,
.area-kpi,.page-card,.content-card{opacity:1!important}

/* SURFACE TERANG: selalu teks gelap. */
.surface,.hero-card,.kpi-card,.kpi,.chart-card,.map-card,.priority-card,.table-card,
.page-card,.content-card,.quality-card,.component-card,.impact-card,.notification-card,.report-card,
.area-summary,.area-kpi,.dashboard-toolbar,.page-heading,.select-shell,.search-shell,.table-wrap,
.modal,.drawer,.decision-card,.iksi-hero,.decision-hero,.side-quality{
  background:var(--c-surface)!important;
  color:var(--c-text)!important;
  border-color:var(--c-border)!important;
}
.surface *,.hero-card *,.kpi-card *,.kpi *,.chart-card *,.map-card *,.priority-card *,.table-card *,
.page-card *,.content-card *,.quality-card *,.component-card *,.impact-card *,.notification-card *,
.report-card *,.area-summary *,.area-kpi *,.dashboard-toolbar *,.page-heading *,.decision-card *,
.iksi-hero *,.decision-hero *,.side-quality *{color:inherit}

/* Heading, angka, judul, label pada surface terang. */
h1,h2,h3,h4,h5,h6,strong,b,label,.score-ring strong,.kpi-card strong,.kpi strong,.area-kpi strong,
.card-head h3,.card-heading h3,.hero-heading h2,.page-heading h2,.di-title-row h1,th,td{
  color:var(--c-text)!important;
}
p,small,.muted,.metric-note,.year-pill,.map-caption,.table-footer,.quality-item span,.legend-item,
.kpi-card span,.kpi-card small,.kpi span,.kpi small,.score-summary p,.score-summary small,
.priority-item small,td small,.brand-wrap span,.dashboard-toolbar p,.page-heading p{
  color:var(--c-text-2)!important;
}
.eyebrow,.text-link,.text-button{color:var(--c-blue-dark)!important}

/* Header normal: putih dengan teks gelap. */
.topbar{background:var(--c-surface)!important;color:var(--c-text)!important;border-color:var(--c-border)!important}
.topbar *{color:inherit}
.topbar .brand-mark,.topbar .icon-button{background:#eaf4ff!important;color:var(--c-blue-dark)!important;border-color:#bad8f4!important}
.live-status,.connection-pill{color:#35637c!important}

/* PUSAT DATA embedded: context bar putih, inactive gelap, active biru-putih. */
html.is-embedded body[data-ui-page="data-center"] .app-shell>.sidebar{
  background:var(--c-surface)!important;color:var(--c-text)!important;border-color:var(--c-border)!important;
}
html.is-embedded body[data-ui-page="data-center"] .di-selector,
html.is-embedded body[data-ui-page="data-center"] .di-selector *{color:var(--c-text)!important}
html.is-embedded body[data-ui-page="data-center"] .di-selector .eyebrow{color:var(--c-blue-dark)!important}
html.is-embedded body[data-ui-page="data-center"] .nav-item{
  background:#f7fbff!important;color:#27445f!important;border:1px solid #c9dbea!important;
  font-weight:750!important;
}
html.is-embedded body[data-ui-page="data-center"] .nav-item i{color:#2e6fae!important}
html.is-embedded body[data-ui-page="data-center"] .nav-item span{color:inherit!important}
html.is-embedded body[data-ui-page="data-center"] .nav-item:hover{
  background:#eaf4ff!important;color:#0755b2!important;border-color:#9ec8ef!important;
}
html.is-embedded body[data-ui-page="data-center"] .nav-item.active{
  background:linear-gradient(135deg,#0755b2,#1677e8)!important;color:#fff!important;border-color:#0755b2!important;
  box-shadow:0 8px 20px rgba(22,119,232,.22)!important;
}
html.is-embedded body[data-ui-page="data-center"] .nav-item.active *{color:#fff!important}
html.is-embedded body[data-ui-page="data-center"] .nav-item b{background:#ffe4e8!important;color:#9d2934!important}
html.is-embedded body[data-ui-page="data-center"] .nav-item.active b{background:rgba(255,255,255,.20)!important;color:#fff!important}

/* Pusat Data non-embedded: sidebar gelap = teks putih. */
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar{
  background:var(--c-navy)!important;color:#fff!important;border-color:#173b5c!important;
}
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar *{color:#eaf3fb!important}
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar .eyebrow,
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar .select-shell i{color:#63d6ee!important}
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar .select-shell{
  background:#102d4b!important;border-color:#31536f!important;
}
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar select{color:#fff!important;background:#102d4b!important}
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar .nav-item{
  background:transparent!important;color:#d9e8f4!important;border-color:transparent!important;
}
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar .nav-item.active{
  background:linear-gradient(135deg,#0d65c8,#1677e8)!important;color:#fff!important;border-color:#4396ed!important;
}
html:not(.is-embedded) body[data-ui-page="data-center"] .sidebar .nav-item.active *{color:#fff!important}

/* Tombol: biru/gelap = putih, putih/soft = gelap. */
.button,.action-button,.top-button,.context-button,.table-action,.decision-buttons button,.decision-buttons a{
  background:#f3f8fd!important;color:#173d5e!important;border:1px solid #bcd2e4!important;font-weight:750!important;
}
.button *,.action-button *,.top-button *,.context-button *,.table-action *{color:inherit!important}
.button.primary,.action-button.primary,.top-button.primary,.context-button.primary,
.decision-buttons .primary,.decision-actions .primary{
  background:linear-gradient(135deg,var(--c-blue-dark),var(--c-blue))!important;
  color:#fff!important;border-color:var(--c-blue-dark)!important;
}
.button.primary *,.action-button.primary *,.top-button.primary *,.context-button.primary *,
.decision-buttons .primary *,.decision-actions .primary *{color:#fff!important}
.top-button.accent,.button.success,.action-button.success{
  background:linear-gradient(135deg,#087653,#0a9a6e)!important;color:#fff!important;border-color:#087653!important;
}
.top-button.accent *,.button.success *,.action-button.success *{color:#fff!important}
.button.secondary,.action-button.secondary,.decision-buttons .secondary{
  background:#eaf4ff!important;color:#0755b2!important;border-color:#b9d8f6!important;
}
button:disabled,[aria-disabled="true"]{opacity:.72!important;color:#506980!important;background:#e8eef4!important}

/* Form dan tabel. */
input,select,textarea{color:var(--c-text)!important;background:#fff!important;border-color:#bfd2e2!important}
select option{color:var(--c-text)!important;background:#fff!important}
::placeholder{color:#748ca2!important;opacity:1!important}
th{background:#e9f2fa!important;color:#284a68!important}
td{background:#fff!important;color:#173851!important}
tbody tr:hover td{background:#f2f8fd!important}
.table-action{background:#e8f3ff!important;color:#0755b2!important;border-color:#afd2f2!important}

/* Status. */
.status-pill.neutral,.status.neutral{background:#e8f0f7!important;color:#294a68!important}
.status-pill.good,.status.good{background:#ddf6eb!important;color:#086344!important}
.status-pill.warn,.status.warn{background:#fff0ce!important;color:#774800!important}
.status-pill.bad,.status.bad{background:#ffe0e5!important;color:#922337!important}

/* KPI/icon. */
.kpi-card,.kpi,.surface,.hero-card,.chart-card,.table-card{box-shadow:0 10px 26px rgba(18,57,94,.08)!important}
.kpi-icon.blue{background:#e7f2ff!important;color:#126bc8!important}
.kpi-icon.cyan{background:#e9fbff!important;color:#087f9b!important}
.kpi-icon.purple{background:#f1ebff!important;color:#6945cf!important}
.kpi-icon.green{background:#e6f8f0!important;color:#087657!important}
.kpi-icon.amber{background:#fff4df!important;color:#a96f05!important}
.kpi-icon.red{background:#ffeaed!important;color:#bd3045!important}

/* MAP: kontrol gelap tetap putih; panel embedded terang tetap gelap. */
body:has(#map) .topbar,body:has(#map3d) .topbar{background:var(--c-navy)!important;color:#fff!important;border-color:#183b5b!important}
body:has(#map) .topbar *,body:has(#map3d) .topbar *{color:inherit!important}
body:has(#map) .control-panel:not(.light-panel),body:has(#map3d) .control-panel:not(.light-panel){
  background:rgba(6,26,51,.96)!important;color:#fff!important;border-color:#244866!important;
}
body:has(#map) .control-panel:not(.light-panel) *,body:has(#map3d) .control-panel:not(.light-panel) *{color:inherit!important}
html.is-embedded body:has(#map) .control-panel,html.is-embedded body:has(#map3d) .control-panel{
  background:rgba(255,255,255,.96)!important;color:var(--c-text)!important;border-color:var(--c-border)!important;
}
html.is-embedded body:has(#map) .control-panel *,html.is-embedded body:has(#map3d) .control-panel *{color:inherit}
.maplibregl-popup-content{background:#071b31!important;color:#fff!important}
.maplibregl-popup-content *{color:inherit!important}
.maplibregl-popup-content small{color:#b7cada!important}
html.is-embedded .satria-popup .maplibregl-popup-content{background:#fff!important;color:var(--c-text)!important}
html.is-embedded .satria-popup .maplibregl-popup-content *{color:inherit!important}

/* Mobile: tidak menumpuk/keluar viewport. */
@media(max-width:720px){
  .topbar{min-height:58px!important;height:auto!important;padding:9px 10px!important}
  .top-actions{gap:6px!important;max-width:100%!important}
  .top-actions .connection-pill,.top-actions .live-status,.top-button span{display:none!important}
  .top-button,.icon-button{width:38px!important;min-width:38px!important;padding:0!important;justify-content:center!important}
  .dashboard-shell,.content-shell{width:100%!important;max-width:100%!important;padding:10px!important;margin:0!important}
  .hero-grid,.analytics-grid,.content-grid,.iksi-layout,.priority-layout,.notifications-layout{grid-template-columns:1fr!important;display:grid!important}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .kpi-card,.kpi{min-width:0!important;overflow:hidden!important}
  .kpi-card strong,.kpi strong{white-space:normal!important;overflow-wrap:anywhere!important}
  .area-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  table{min-width:720px!important}
  html.is-embedded body[data-ui-page="data-center"] .app-shell>.sidebar{grid-template-columns:1fr!important;padding:10px!important}
  html.is-embedded body[data-ui-page="data-center"] .side-nav{overflow-x:auto!important;flex-wrap:nowrap!important}
  html.is-embedded body[data-ui-page="data-center"] .nav-item{min-width:max-content!important}
}
@media(max-width:420px){
  .kpi-grid,.area-kpi-grid{grid-template-columns:1fr!important}
}


/* V22.2 data sync contrast hardening */
.row-actions button,
.row-actions a,
.priority-actions .button,
.table-action,
.condition-pill,
.priority-pill,
.status,
.status-pill,
.nav-item b,
.top-button.accent,
.button.primary,
.button.secondary {
  font-weight: 800 !important;
}
.row-actions button,
.row-actions a,
.priority-actions .button,
.table-action,
.top-button.accent,
.button.primary {
  color: #ffffff !important;
}
.row-actions button *,
.row-actions a *,
.priority-actions .button *,
.table-action *,
.top-button.accent *,
.button.primary * {
  color: inherit !important;
}
.row-actions button,
.row-actions a {
  background: #133a5a !important;
  border-color: #2e6ea2 !important;
}
.row-actions button[aria-disabled="true"] {
  color: #d8e5ef !important;
  background: #3d5365 !important;
  border-color: #617587 !important;
}
.priority-actions .button.secondary,
.button.secondary {
  color: #0b2942 !important;
  background: #eaf3fb !important;
  border-color: #b4cfe7 !important;
}
.condition-pill.good,
.priority-pill.p5 { background: #136547 !important; color: #ffffff !important; }
.condition-pill.light,
.priority-pill.p3 { background: #8a5a0a !important; color: #ffffff !important; }
.condition-pill.medium,
.priority-pill.p2 { background: #99522a !important; color: #ffffff !important; }
.condition-pill.heavy,
.priority-pill.p1 { background: #8d2336 !important; color: #ffffff !important; }
.condition-pill.unknown,
.priority-pill.p4,
.status.neutral,
.status-pill.neutral { background: #35556f !important; color: #ffffff !important; }
.status.good,
.status-pill.good { background: #136547 !important; color: #ffffff !important; }
.status.warn,
.status-pill.warn { background: #8a5a0a !important; color: #ffffff !important; }
.status.bad,
.status-pill.bad { background: #8d2336 !important; color: #ffffff !important; }