/* SATRIA V22 - Stitch adapted UI layer
   Presentation only. Existing IDs, events, APIs, data sources, and workflows remain unchanged. */
:root{
  --v22-navy:#0b2948;
  --v22-navy-deep:#071f39;
  --v22-blue:#0876e8;
  --v22-blue-dark:#005ab6;
  --v22-blue-soft:#eaf4ff;
  --v22-canvas:#edf4fb;
  --v22-surface:#ffffff;
  --v22-surface-soft:#f5f9fd;
  --v22-text:#0b243f;
  --v22-muted:#526f89;
  --v22-border:#d3e1ed;
  --v22-success:#087653;
  --v22-warning:#84520b;
  --v22-danger:#9d2934;
  --v22-shadow:0 10px 28px rgba(18,57,94,.08);
  --v22-floating:0 18px 54px rgba(6,36,72,.18);
}
html,body{max-width:100%;background:var(--v22-canvas);color:var(--v22-text)}
body,button,input,select,textarea{font-family:Inter,"Segoe UI",Arial,sans-serif}
button,a,input,select,textarea{font-weight:inherit}

/* Universal high-contrast contract */
.surface,.hero-card,.kpi-card,.kpi,.chart-card,.map-card,.priority-card,.table-card,.content-card,.page-card,.report-card,.quality-card,.component-card,.impact-card,.notification-card,.card,.area-summary,.area-kpi,
.dashboard-toolbar,.filter-bar,.api-hero,.api-tabs,.integration-card,.status-row,.check-row,.credential-box,.endpoint-row,.side-quality,.select-shell,.search-shell,.table-wrap,.modal,.drawer{
  background:var(--v22-surface)!important;
  color:var(--v22-text)!important;
  border-color:var(--v22-border)!important;
  box-shadow:var(--v22-shadow)!important;
}
.surface *:not(.button):not(.top-button):not(.action-button):not(.status):not(.status-pill):not(.badge):not(.method),
.hero-card *:not(.button):not(.action-button):not(.status):not(.status-pill),
.kpi-card *,.kpi *,.card *:not(.button):not(.status):not(.badge):not(.method){color:inherit}
h1,h2,h3,h4,h5,h6,strong,.num,.value,.kpi-number{color:var(--v22-text)!important;letter-spacing:-.015em}
p,small,.metric-note,.metadata,.helper,.muted,.table-footer,.page-heading p,.dashboard-toolbar p,.score-summary p,.score-summary small,.decision-hero>p{color:var(--v22-muted)!important}
.eyebrow{color:var(--v22-blue-dark)!important;font-weight:800!important;letter-spacing:.11em}

/* Buttons and statuses */
.button,.top-button,.action-button,.context-button,.table-action,.icon-button,.back-button,.collapse-panel-btn,.expand-panel-btn{
  border:1px solid #bad1e5!important;background:var(--v22-surface-soft)!important;color:var(--v22-text)!important;border-radius:11px!important;font-weight:750!important;
}
.button *,.top-button *,.action-button *,.context-button *,.table-action *,.icon-button *,.back-button *{color:inherit!important}
.button.primary,.top-button.primary,.action-button.primary,.top-button.accent,.decision-actions .primary,.decision-buttons .primary{
  background:linear-gradient(135deg,var(--v22-blue-dark),var(--v22-blue))!important;border-color:var(--v22-blue-dark)!important;color:#fff!important;
}
.button.primary *,.top-button.primary *,.action-button.primary *,.top-button.accent *,.decision-actions .primary *,.decision-buttons .primary *{color:#fff!important}
.button.secondary,.action-button.secondary,.decision-buttons .secondary{background:var(--v22-blue-soft)!important;color:var(--v22-blue-dark)!important}
.status-pill,.status,.badge{font-weight:800!important;border:0!important}
.status-pill.good,.status.good,.badge.good{background:#dff6ec!important;color:#086341!important}
.status-pill.warn,.status.warn,.badge.warn{background:#fff0d0!important;color:#754707!important}
.status-pill.bad,.status.bad,.badge.bad{background:#ffe2e5!important;color:#8c2532!important}
.status-pill.neutral,.status.neutral,.badge.neutral{background:#e8f0f7!important;color:#2e526f!important}

/* Data controls */
input,select,textarea{color:var(--v22-text)!important}
.select-shell,.search-shell,.field input,.field select,.field textarea,.form-grid input,.form-grid select,.form-grid textarea,.table-tools select{
  background:#fff!important;border:1px solid #bfd3e5!important;box-shadow:none!important;
}
.select-shell i,.search-shell i,.text-link,.text-button{color:var(--v22-blue-dark)!important}
select option{background:#fff!important;color:var(--v22-text)!important}
::placeholder{color:#7d95aa!important;opacity:1}
table{color:var(--v22-text)!important}
th{background:#edf4fa!important;color:#294963!important;font-weight:800!important;letter-spacing:.04em}
td{background:#fff!important;color:#203b55!important}
tbody tr:hover td{background:#f4f9fd!important}
.table-action{background:var(--v22-blue-soft)!important;color:var(--v22-blue-dark)!important}

/* ============================================================
   Global application shell, adapted from Stitch navigation
   ============================================================ */
body[data-v22-page="shell"]{overflow:hidden;background:var(--v22-canvas)!important}
body[data-v22-page="shell"] .human-shell{grid-template-columns:72px minmax(0,1fr);background:var(--v22-canvas)}
body[data-v22-page="shell"] .primary-rail{
  width:72px;padding:14px 10px;background:var(--v22-navy)!important;border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:8px 0 26px rgba(6,36,72,.08);
}
body[data-v22-page="shell"] .rail-brand{height:58px;padding:0;border-bottom:1px solid rgba(255,255,255,.1)}
body[data-v22-page="shell"] .brand-symbol{width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,#0786ff,#0067d5)!important;color:#fff!important;box-shadow:none}
body[data-v22-page="shell"] .brand-label{display:none}
body[data-v22-page="shell"] .rail-navigation{gap:10px;padding-top:16px}
body[data-v22-page="shell"] .rail-link{width:50px;min-height:50px;padding:0;justify-content:center;border:0;border-radius:10px;color:#d8e7f4!important;background:transparent!important}
body[data-v22-page="shell"] .rail-link i{font-size:18px;color:inherit!important}
body[data-v22-page="shell"] .rail-link span{display:none}
body[data-v22-page="shell"] .rail-link:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
body[data-v22-page="shell"] .rail-link.active{background:var(--v22-blue)!important;color:#fff!important;box-shadow:0 8px 18px rgba(0,90,182,.28)}
body[data-v22-page="shell"] .rail-divider{width:34px;background:rgba(255,255,255,.12)}
body[data-v22-page="shell"] .rail-account{border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
body[data-v22-page="shell"] .human-body{grid-template-rows:64px 46px minmax(0,1fr);height:100dvh}
body[data-v22-page="shell"] .human-topbar{
  min-height:64px;padding:0 18px;background:#fff!important;border-bottom:1px solid var(--v22-border)!important;box-shadow:none!important;color:var(--v22-text)!important;
}
body[data-v22-page="shell"] .topbar-left{min-width:0;gap:18px}
body[data-v22-page="shell"] .shell-product{display:flex;align-items:center;gap:10px;min-width:max-content}
body[data-v22-page="shell"] .shell-product strong{font-size:20px;color:#071d3c!important;white-space:nowrap}
body[data-v22-page="shell"] .shell-product-icon{display:none;width:34px;height:34px;place-items:center;border-radius:10px;background:var(--v22-blue);color:#fff}
body[data-v22-page="shell"] .page-identity{max-width:420px}
body[data-v22-page="shell"] .breadcrumb{display:none}
body[data-v22-page="shell"] .title-line h1{font-size:15px;color:var(--v22-text)!important}
body[data-v22-page="shell"] .page-identity p{font-size:10px;color:var(--v22-muted)!important}
body[data-v22-page="shell"] .page-badge{background:#e8f0f7!important;color:#31516d!important;border-color:transparent!important}
body[data-v22-page="shell"] .stitch-mode-tabs{display:flex;align-self:stretch;align-items:center;gap:20px;margin-left:8px}
body[data-v22-page="shell"] .stitch-mode-tabs button{position:relative;height:100%;padding:0;border:0;background:transparent;color:#627b92;font-size:10px;font-weight:800;cursor:pointer}
body[data-v22-page="shell"] .stitch-mode-tabs button.active,body[data-v22-page="shell"] .stitch-mode-tabs button:hover{color:var(--v22-blue-dark)}
body[data-v22-page="shell"] .stitch-mode-tabs button.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--v22-blue)}
body[data-v22-page="shell"] .global-search{height:40px;border-color:var(--v22-border)!important;background:#f7faff!important}
body[data-v22-page="shell"] .global-search input{color:var(--v22-text)!important}
body[data-v22-page="shell"] .system-status{background:#e9f7f1!important;color:#086341!important;border-color:#c1e6d7!important}
body[data-v22-page="shell"] .icon-button,body[data-v22-page="shell"] .user-button{background:#fff!important;color:var(--v22-text)!important;border-color:var(--v22-border)!important}
body[data-v22-page="shell"] .context-bar{padding:5px 18px;background:#fff!important;border-bottom:1px solid var(--v22-border)!important}
body[data-v22-page="shell"] .context-tab{min-height:35px;color:#526f89!important;font-size:9px;font-weight:800}
body[data-v22-page="shell"] .context-tab.active{background:var(--v22-blue-soft)!important;color:var(--v22-blue-dark)!important;border-color:#b9d8f6!important;box-shadow:none!important}
body[data-v22-page="shell"] .context-hint{color:var(--v22-muted)!important}
body[data-v22-page="shell"] .module-stage{margin:0;border:0;border-radius:0;background:var(--v22-canvas);box-shadow:none}
body[data-v22-page="shell"] .module-stage iframe{background:var(--v22-canvas)}
body[data-v22-page="shell"] .module-loading{background:rgba(237,244,251,.94)!important;color:var(--v22-text)!important}
body[data-v22-page="shell"] .module-loading small{color:var(--v22-muted)!important}

/* ============================================================
   Embedded and standalone page chrome
   ============================================================ */
body[data-v22-page]:not([data-v22-page="shell"]){background:var(--v22-canvas)!important;color:var(--v22-text)!important}
body[data-v22-page]:not([data-v22-page="map"]) .topbar{
  background:#fff!important;color:var(--v22-text)!important;border-bottom:1px solid var(--v22-border)!important;box-shadow:0 4px 18px rgba(18,57,94,.05)!important;
}
body[data-v22-page]:not([data-v22-page="map"]) .topbar .brand-wrap strong{color:#071d3c!important}
body[data-v22-page]:not([data-v22-page="map"]) .topbar .brand-wrap span{color:var(--v22-muted)!important}
body[data-v22-page]:not([data-v22-page="map"]) .topbar .live-status,body[data-v22-page]:not([data-v22-page="map"]) .topbar .connection-pill{color:var(--v22-success)!important}
html.is-embedded body[data-v22-page]:not([data-v22-page="map"]) .topbar{display:none!important}

/* ============================================================
   Dashboard D.I
   ============================================================ */
body[data-v22-page="dashboard"] .dashboard-shell{width:min(1700px,calc(100% - 34px));margin:16px auto 34px}
body[data-v22-page="dashboard"] .dashboard-toolbar{padding:18px 20px;border-radius:16px;box-shadow:none!important}
body[data-v22-page="dashboard"] .dashboard-toolbar h1{font-size:clamp(23px,2.4vw,31px)}
body[data-v22-page="dashboard"] .filter-group{width:min(360px,100%)}
body[data-v22-page="dashboard"] .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:14px}
body[data-v22-page="dashboard"] .hero-card{min-height:220px;padding:20px;border-radius:16px;background:#fff!important}
body[data-v22-page="dashboard"] .score-ring{width:126px;background:conic-gradient(var(--v22-blue) calc(var(--score)*1%),#dce7f0 0)!important;box-shadow:none!important}
body[data-v22-page="dashboard"] .score-ring:before{background:#fff!important;border-color:#dce7f0!important}
body[data-v22-page="dashboard"] .decision-hero{justify-content:flex-start}
body[data-v22-page="dashboard"] .kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
body[data-v22-page="dashboard"] .kpi-card{min-height:122px;padding:16px;border-radius:14px;align-items:flex-start;flex-direction:column;gap:10px}
body[data-v22-page="dashboard"] .kpi-icon{width:40px;height:40px;border-radius:10px}
body[data-v22-page="dashboard"] .kpi-card strong{font-size:24px;white-space:normal;overflow:visible}
body[data-v22-page="dashboard"] .area-summary{border-radius:16px;padding:18px}
body[data-v22-page="dashboard"] .area-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-v22-page="dashboard"] .analytics-grid{gap:14px}
body[data-v22-page="dashboard"] .chart-card,body[data-v22-page="dashboard"] .map-card,body[data-v22-page="dashboard"] .priority-card,body[data-v22-page="dashboard"] .table-card{border-radius:16px}
body[data-v22-page="dashboard"] #dashboardMap{border-color:var(--v22-border)!important;background:#dfeaf3!important}
body[data-v22-page="dashboard"] .priority-item{background:#f8fbff!important;border-color:var(--v22-border)!important}
body[data-v22-page="dashboard"] .priority-rank{background:#eaf4ff!important;color:var(--v22-blue-dark)!important}

/* ============================================================
   Pusat Data D.I - horizontal task navigation like Stitch
   ============================================================ */
body[data-v22-page="data"] .app-shell{display:block!important;min-height:0}
body[data-v22-page="data"] .sidebar{
  position:sticky!important;top:0!important;z-index:30!important;width:100%!important;height:auto!important;padding:12px 18px!important;display:grid!important;grid-template-columns:minmax(240px,360px) minmax(0,1fr) auto!important;align-items:center!important;gap:18px!important;
  background:#fff!important;border:0!important;border-bottom:1px solid var(--v22-border)!important;overflow:visible!important;color:var(--v22-text)!important;
}
body[data-v22-page="data"] .di-selector{display:grid;grid-template-columns:1fr 220px;align-items:end;gap:10px}
body[data-v22-page="data"] .di-selector .eyebrow,body[data-v22-page="data"] .di-selector h1{grid-column:1}
body[data-v22-page="data"] .di-selector h1{margin:3px 0 0;font-size:18px}
body[data-v22-page="data"] .di-selector label{display:none}
body[data-v22-page="data"] .di-selector .select-shell{grid-column:2;grid-row:1/3;align-self:center;box-shadow:none!important}
body[data-v22-page="data"] .side-nav{display:flex!important;gap:4px!important;overflow-x:auto!important;scrollbar-width:none}
body[data-v22-page="data"] .side-nav::-webkit-scrollbar{display:none}
body[data-v22-page="data"] .nav-item{flex:0 0 auto;width:auto!important;height:42px!important;padding:0 12px!important;background:transparent!important;border:0!important;color:#4e6a83!important;border-radius:0!important;box-shadow:none!important;white-space:nowrap}
body[data-v22-page="data"] .nav-item i{color:#7592aa!important}
body[data-v22-page="data"] .nav-item.active{background:transparent!important;color:var(--v22-blue-dark)!important;border-bottom:3px solid var(--v22-blue)!important}
body[data-v22-page="data"] .nav-item.active *{color:var(--v22-blue-dark)!important}
body[data-v22-page="data"] .side-quality{min-width:190px;padding:10px 12px;border-radius:12px;box-shadow:none!important}
body[data-v22-page="data"] .side-links{display:none!important}
body[data-v22-page="data"] .content-shell{padding:20px!important;max-width:1700px;margin:0 auto}
body[data-v22-page="data"] .page-heading{margin-bottom:16px}
body[data-v22-page="data"] .hero-grid{gap:14px}
body[data-v22-page="data"] .iksi-hero,body[data-v22-page="data"] .decision-card{min-height:205px;border-radius:16px;padding:20px}
body[data-v22-page="data"] .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body[data-v22-page="data"] .kpi{min-height:86px;border-radius:14px;padding:14px;box-shadow:none!important}
body[data-v22-page="data"] .kpi strong{font-size:20px}
body[data-v22-page="data"] .area-summary{margin-top:14px;border-radius:16px}
body[data-v22-page="data"] .surface{border-radius:16px}
body[data-v22-page="data"] .score-ring{background:conic-gradient(var(--v22-blue) calc(var(--score)*1%),#dce7f0 0)!important}
body[data-v22-page="data"] .score-ring:after{background:#fff!important}

/* ============================================================
   Peta D.I - map dominant, right inspector, left quick layers
   ============================================================ */
body[data-v22-page="map"]{background:#dfeaf3!important}
body[data-v22-page="map"] .topbar{height:64px;background:#fff!important;color:var(--v22-text)!important;border-bottom:1px solid var(--v22-border)!important;box-shadow:none!important}
body[data-v22-page="map"] .topbar .brand-wrap strong{color:#071d3c!important;font-size:18px}
body[data-v22-page="map"] .topbar .brand-wrap span{color:var(--v22-muted)!important}
body[data-v22-page="map"] .topbar .live-status{color:var(--v22-success)!important}
body[data-v22-page="map"] .workspace{inset:64px 0 0}
html.is-embedded body[data-v22-page="map"] .topbar{display:none!important}
html.is-embedded body[data-v22-page="map"] .workspace{inset:0!important}
body[data-v22-page="map"] .control-panel{
  top:16px!important;right:16px!important;bottom:16px!important;left:auto!important;width:390px!important;padding:18px!important;border:1px solid var(--v22-border)!important;border-radius:16px!important;
  background:rgba(255,255,255,.97)!important;color:var(--v22-text)!important;box-shadow:var(--v22-floating)!important;backdrop-filter:blur(18px);
}
body[data-v22-page="map"] .control-panel:after{background:linear-gradient(transparent,rgba(255,255,255,.98))!important}
body[data-v22-page="map"] .control-panel h1,body[data-v22-page="map"] .control-panel strong,body[data-v22-page="map"] .control-panel label,body[data-v22-page="map"] .control-panel .section-title,body[data-v22-page="map"] .control-panel .legend>strong{color:var(--v22-text)!important}
body[data-v22-page="map"] .control-panel span,body[data-v22-page="map"] .control-panel small,body[data-v22-page="map"] .control-panel .switch-row{color:var(--v22-muted)!important}
body[data-v22-page="map"] .control-panel .eyebrow,body[data-v22-page="map"] .control-panel .section-heading button{color:var(--v22-blue-dark)!important}
body[data-v22-page="map"] .control-panel .select-shell,body[data-v22-page="map"] .control-panel .search-shell,body[data-v22-page="map"] .stat-grid article,body[data-v22-page="map"] .iksi-card,body[data-v22-page="map"] .view-buttons button{
  background:#f7faff!important;border-color:var(--v22-border)!important;color:var(--v22-text)!important;box-shadow:none!important;
}
body[data-v22-page="map"] .control-panel .select-shell select,body[data-v22-page="map"] .control-panel .search-shell input{color:var(--v22-text)!important}
body[data-v22-page="map"] .iksi-score-wrap{border-color:var(--v22-border)!important}
body[data-v22-page="map"] .panel-section,body[data-v22-page="map"] .legend{border-color:var(--v22-border)!important}
body[data-v22-page="map"] .view-buttons button.active{background:var(--v22-blue)!important;color:#fff!important;border-color:var(--v22-blue)!important}
body[data-v22-page="map"] .view-buttons button.active *{color:#fff!important}
body[data-v22-page="map"] .switch{background:#c9d7e4!important}
body[data-v22-page="map"] .switch-row input:checked+.switch{background:var(--v22-blue)!important}
body[data-v22-page="map"] .expand-panel-btn{right:16px!important;left:auto!important;background:#fff!important;color:var(--v22-blue-dark)!important}
body[data-v22-page="map"] .workspace.panel-collapsed .control-panel{transform:translateX(calc(100% + 28px))!important}
body[data-v22-page="map"] .maplibregl-ctrl-bottom-left{left:0!important}
body[data-v22-page="map"] .maplibregl-ctrl-group{background:#fff!important;border-color:var(--v22-border)!important;box-shadow:var(--v22-shadow)!important}
body[data-v22-page="map"] .maplibregl-ctrl-icon{filter:none!important;opacity:.85}
body[data-v22-page="map"] .map-hint{right:422px;background:#fff!important;color:var(--v22-text)!important;border-color:var(--v22-border)!important}
body[data-v22-page="map"] .v22-layer-palette{
  position:absolute;z-index:12;top:16px;left:16px;width:240px;padding:14px;border:1px solid var(--v22-border);border-radius:15px;background:rgba(255,255,255,.96);box-shadow:var(--v22-floating);backdrop-filter:blur(16px);
}
body[data-v22-page="map"] .v22-layer-palette h3{margin:0 0 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
body[data-v22-page="map"] .v22-layer-palette button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:36px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--v22-text);font-size:11px;cursor:pointer}
body[data-v22-page="map"] .v22-layer-palette button:hover{background:var(--v22-blue-soft)}
body[data-v22-page="map"] .v22-layer-palette .state{width:18px;height:18px;display:grid;place-items:center;border:1px solid #9bb7cd;border-radius:5px;color:transparent;background:#fff}
body[data-v22-page="map"] .v22-layer-palette button.on .state{background:var(--v22-blue);border-color:var(--v22-blue);color:#fff}
body[data-v22-page="map"] .satria-popup .maplibregl-popup-content{background:#fff!important;color:var(--v22-text)!important;border-color:var(--v22-border)!important}
body[data-v22-page="map"] .satria-popup .maplibregl-popup-tip{border-top-color:#fff!important;border-bottom-color:#fff!important}
body[data-v22-page="map"] .popup-head{background:linear-gradient(135deg,#eaf4ff,#f6fbff)!important}
body[data-v22-page="map"] .popup-head span{color:var(--v22-blue-dark)!important}
body[data-v22-page="map"] .popup-head strong,body[data-v22-page="map"] .popup-item strong{color:var(--v22-text)!important}
body[data-v22-page="map"] .popup-item{background:#f7faff!important;border-color:var(--v22-border)!important}
body[data-v22-page="map"] .popup-item span,body[data-v22-page="map"] .popup-coordinate{color:var(--v22-muted)!important}
body[data-v22-page="map"] .popup-actions a{background:var(--v22-blue)!important;color:#fff!important;border-color:var(--v22-blue)!important}

/* ============================================================
   AI Kebutuhan Air and Integration Hub
   ============================================================ */
body[data-v22-page="ai"] .page-shell,body[data-v22-page="integration"] .page-shell,body[data-v22-page="ai"] main,body[data-v22-page="integration"] main{max-width:1700px;margin-inline:auto}
body[data-v22-page="ai"] .filter-bar{border-radius:16px;padding:16px;box-shadow:none!important}
body[data-v22-page="ai"] .kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
body[data-v22-page="ai"] .kpi{min-height:118px;border-radius:14px;padding:16px}
body[data-v22-page="ai"] .kpi strong{font-size:25px}
body[data-v22-page="ai"] .grid-main{gap:14px}
body[data-v22-page="ai"] .card{border-radius:16px}
body[data-v22-page="integration"] .api-hero,body[data-v22-page="integration"] .api-tabs,body[data-v22-page="integration"] .card{border-radius:16px}
body[data-v22-page="integration"] .api-tabs button{color:#526f89!important}
body[data-v22-page="integration"] .api-tabs button.active{background:var(--v22-blue)!important;color:#fff!important;border-color:var(--v22-blue)!important}
body[data-v22-page="integration"] .integration-grid{gap:14px}
body[data-v22-page="integration"] .integration-config-card{border-top:4px solid var(--v22-blue)!important}

/* ============================================================
   Responsive behavior: deliberate mobile layout, no crushed desktop
   ============================================================ */
@media(max-width:1280px){
  body[data-v22-page="dashboard"] .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-v22-page="ai"] .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-v22-page="data"] .sidebar{grid-template-columns:minmax(240px,330px) minmax(0,1fr)}
  body[data-v22-page="data"] .side-quality{display:none!important}
}
@media(max-width:980px){
  body[data-v22-page="shell"] .topbar-center{display:none}
  body[data-v22-page="shell"] .page-identity p{display:none}
  body[data-v22-page="shell"] .stitch-mode-tabs{gap:13px}
  body[data-v22-page="dashboard"] .hero-grid,body[data-v22-page="dashboard"] .content-grid{grid-template-columns:1fr}
  body[data-v22-page="data"] .sidebar{grid-template-columns:1fr;gap:10px;padding:10px 14px!important}
  body[data-v22-page="data"] .di-selector{grid-template-columns:1fr minmax(180px,260px)}
  body[data-v22-page="data"] .side-nav{border-top:1px solid var(--v22-border);padding-top:6px}
  body[data-v22-page="map"] .control-panel{width:350px!important}
  body[data-v22-page="map"] .map-hint{right:382px}
}
@media(max-width:760px){
  body[data-v22-page="shell"]{padding-bottom:64px}
  body[data-v22-page="shell"] .human-shell{display:block}
  body[data-v22-page="shell"] .primary-rail{position:fixed;z-index:260;inset:0 auto 64px 0;width:236px;transform:translateX(-104%);align-items:stretch;padding:12px}
  body[data-v22-page="shell"] .primary-rail.open{transform:translateX(0)}
  body[data-v22-page="shell"] .rail-brand{justify-content:flex-start;gap:10px;padding:0 10px}
  body[data-v22-page="shell"] .brand-label{display:inline;color:#fff!important}
  body[data-v22-page="shell"] .rail-link{width:100%;min-height:46px;justify-content:flex-start;gap:12px;padding:0 13px}
  body[data-v22-page="shell"] .rail-link span{display:inline;color:inherit!important}
  body[data-v22-page="shell"] .human-body{height:calc(100dvh - 64px);grid-template-rows:58px 44px minmax(0,1fr)}
  body[data-v22-page="shell"] .human-topbar{min-height:58px;padding:7px 9px}
  body[data-v22-page="shell"] .shell-product{display:none}
  body[data-v22-page="shell"] .stitch-mode-tabs{display:none}
  body[data-v22-page="shell"] .page-identity{max-width:230px}
  body[data-v22-page="shell"] .title-line h1{font-size:14px}
  body[data-v22-page="shell"] .topbar-right>.icon-button,body[data-v22-page="shell"] .system-status{display:none}
  body[data-v22-page="shell"] .context-bar{padding:4px 8px}
  body[data-v22-page="shell"] .context-actions{display:none}
  body[data-v22-page="shell"] .module-stage{margin:0}
  body[data-v22-page="dashboard"] .dashboard-shell{width:calc(100% - 16px);margin:8px auto 20px}
  body[data-v22-page="dashboard"] .dashboard-toolbar{padding:14px;align-items:stretch;flex-direction:column}
  body[data-v22-page="dashboard"] .hero-grid{display:grid;grid-template-columns:1fr}
  body[data-v22-page="dashboard"] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-v22-page="dashboard"] .area-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-v22-page="dashboard"] .analytics-grid{grid-template-columns:1fr}
  body[data-v22-page="dashboard"] .kpi-card{min-height:110px}
  body[data-v22-page="data"] .sidebar{position:sticky!important;top:0!important;padding:8px 10px!important}
  body[data-v22-page="data"] .di-selector{grid-template-columns:1fr;gap:7px}
  body[data-v22-page="data"] .di-selector .select-shell{grid-column:1;grid-row:auto}
  body[data-v22-page="data"] .side-nav{width:100%;overflow-x:auto}
  body[data-v22-page="data"] .nav-item{min-width:124px!important;justify-content:center}
  body[data-v22-page="data"] .content-shell{padding:10px!important}
  body[data-v22-page="data"] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-v22-page="map"] .topbar{height:58px;padding:0 10px}
  body[data-v22-page="map"] .workspace{inset:58px 0 0}
  body[data-v22-page="map"] .v22-layer-palette{top:8px;left:8px;width:205px;padding:10px}
  body[data-v22-page="map"] .control-panel{top:auto!important;right:8px!important;bottom:8px!important;left:8px!important;width:auto!important;max-height:48dvh!important;border-radius:18px!important;padding:14px!important}
  body[data-v22-page="map"] .map-hint{display:none}
  body[data-v22-page="map"] .maplibregl-ctrl-top-right{top:8px;right:4px}
  body[data-v22-page="ai"] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-v22-page="ai"] .grid-main{grid-template-columns:1fr!important}
  body[data-v22-page="integration"] .integration-grid{grid-template-columns:1fr!important}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{min-width:720px}
}
@media(max-width:440px){
  body[data-v22-page="dashboard"] .kpi-grid,body[data-v22-page="dashboard"] .area-kpi-grid,body[data-v22-page="data"] .kpi-grid,body[data-v22-page="ai"] .kpi-grid{grid-template-columns:1fr!important}
  body[data-v22-page="map"] .v22-layer-palette{width:180px}
  body[data-v22-page="map"] .v22-layer-palette button:nth-of-type(n+4){display:none}
}

/* SATRIA V22.1 - area polygon adaptation for the Stitch light inspector */
body[data-v22-page="map"] .area-polygon-summary{background:#f7faff!important;border-color:var(--v22-border)!important}
body[data-v22-page="map"] .area-polygon-heading strong,body[data-v22-page="map"] .area-polygon-grid strong{color:var(--v22-text)!important}
body[data-v22-page="map"] .area-polygon-heading small,body[data-v22-page="map"] .area-polygon-grid span,body[data-v22-page="map"] .area-polygon-grid small{color:var(--v22-muted)!important}
body[data-v22-page="map"] .area-polygon-grid article{background:#fff!important;border-color:var(--v22-border)!important}
body[data-v22-page="map"] .area-layer-group{border-left-color:var(--v22-border)!important}
body[data-v22-page="map"] .switch-row.area-child.baku span>i{color:#1f9d75!important}
body[data-v22-page="map"] .switch-row.area-child.fungsional span>i{color:#1677e8!important}
body[data-v22-page="map"] .switch-row.area-child.potensial span>i{color:#f59e0b!important}
body[data-v22-page="map"] .popup-head.area-popup-head.baku{background:linear-gradient(135deg,#11684d,#1f9d75)!important}
body[data-v22-page="map"] .popup-head.area-popup-head.fungsional{background:linear-gradient(135deg,#0755b2,#1677e8)!important}
body[data-v22-page="map"] .popup-head.area-popup-head.potensial{background:linear-gradient(135deg,#a76605,#f59e0b)!important}
body[data-v22-page="map"] .popup-head.area-popup-head span,body[data-v22-page="map"] .popup-head.area-popup-head strong{color:#fff!important}
@media(max-width:440px){
  body[data-v22-page="map"] .v22-layer-palette button:nth-of-type(n+4){display:flex}
  body[data-v22-page="map"] .v22-layer-palette button:nth-of-type(n+6){display:none}
}