/* SATRIA V16 Nusantara — unified GovTech UI layer
   Loaded after V15 styles. It preserves existing IDs and business logic. */

:root {
  --v16-navy-950: #071827;
  --v16-navy-900: #0b2238;
  --v16-navy-800: #10314f;
  --v16-blue-700: #075f9b;
  --v16-blue-600: #0878bd;
  --v16-blue-500: #1397d4;
  --v16-cyan-400: #42c7db;
  --v16-green-700: #08775f;
  --v16-green-600: #0b8f70;
  --v16-green-100: #dff7ef;
  --v16-amber-600: #c97a08;
  --v16-red-600: #d13b45;
  --v16-ink: #102a43;
  --v16-muted: #62758a;
  --v16-bg: #eef4f8;
  --v16-surface: #ffffff;
  --v16-surface-2: #f7fafc;
  --v16-line: #d9e4ec;
  --v16-line-strong: #c4d4df;
  --v16-shadow-sm: 0 3px 10px rgba(13, 38, 58, .07);
  --v16-shadow-md: 0 12px 32px rgba(13, 38, 58, .10);
  --v16-shadow-lg: 0 28px 70px rgba(7, 24, 39, .18);
  --v16-radius-sm: 10px;
  --v16-radius: 16px;
  --v16-radius-lg: 24px;
  --v16-font: Inter, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--v16-font) !important;
  color: var(--v16-ink);
  background: var(--v16-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body *, body *::before, body *::after { box-sizing: border-box; }
body.v16-ready { min-width: 0; }

::selection { background: rgba(19,151,212,.22); color: var(--v16-navy-950); }
:focus-visible { outline: 3px solid rgba(19,151,212,.38) !important; outline-offset: 2px; }

/* Common components */
.btn, button, input, select, textarea { font-family: inherit; }
.btn, button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
  border-radius: 11px;
}
.btn {
  min-height: 40px;
  padding: 9px 14px;
  font-weight: 750;
  letter-spacing: -.01em;
  border: 1px solid var(--v16-line-strong);
  box-shadow: 0 1px 2px rgba(7,24,39,.04);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--v16-shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-success, .btn.success, .btn.green { background: var(--v16-green-600) !important; border-color: var(--v16-green-600) !important; color: #fff !important; }
.btn-info, .btn.blue, .btn-primary, .btn.primary { background: var(--v16-blue-700) !important; border-color: var(--v16-blue-700) !important; color: #fff !important; }
.btn-danger, .btn.danger { background: var(--v16-red-600) !important; border-color: var(--v16-red-600) !important; color: #fff !important; }
.btn-light, .btn.ghost, .btn.secondary { background: #fff !important; color: var(--v16-ink) !important; border-color: var(--v16-line) !important; }

input, select, textarea, .select {
  min-height: 43px;
  border: 1px solid var(--v16-line-strong) !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--v16-ink) !important;
  box-shadow: inset 0 1px 2px rgba(7,24,39,.035);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--v16-blue-500) !important;
  box-shadow: 0 0 0 4px rgba(19,151,212,.12) !important;
}
textarea { min-height: 112px; resize: vertical; }
label, .field-label { color: #304b61; font-weight: 750; }

.panel, .section, .card, .stat, .public-report-card, .login-container, .dashboard-hero-card,
.executive-kpi-card, .executive-summary-card, .executive-status-card {
  border: 1px solid var(--v16-line) !important;
  box-shadow: var(--v16-shadow-sm) !important;
}
.table-wrap, .v15-table-scroll { border-radius: 14px; border: 1px solid var(--v16-line); background: #fff; }
table { border-collapse: separate !important; border-spacing: 0 !important; }
table th {
  background: #edf4f8 !important;
  color: #365066 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--v16-line-strong) !important;
}
table td { border-bottom: 1px solid #e8eef3 !important; color: #263f53; }
table tbody tr:hover td { background: #f7fbfd !important; }

.badge, [class*="status-pill"], [class*="badge-"] { font-weight: 800; letter-spacing: .01em; }

/* Main application shell */
body[data-ui-page="main"] {
  background:
    radial-gradient(circle at 86% 5%, rgba(66,199,219,.16), transparent 24rem),
    linear-gradient(180deg, #f4f8fb 0%, #eaf1f6 100%) !important;
}
body[data-ui-page="main"] .container {
  display: grid !important;
  grid-template-columns: 276px minmax(0,1fr);
  min-height: 100vh;
  overflow: visible !important;
}
body[data-ui-page="main"] .sidebar {
  width: 276px !important;
  min-width: 276px;
  height: 100vh;
  position: sticky !important;
  top: 0;
  padding: 14px 12px 16px !important;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 18%),
    linear-gradient(180deg, var(--v16-navy-950) 0%, var(--v16-navy-900) 52%, #0a2940 100%) !important;
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: 16px 0 50px rgba(7,24,39,.16) !important;
  z-index: 1100;
}
body[data-ui-page="main"] .sidebar::-webkit-scrollbar { width: 6px; }
body[data-ui-page="main"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 10px; }
body[data-ui-page="main"] .logo {
  min-height: 72px;
  padding: 12px !important;
  margin: 0 0 8px !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(19,151,212,.19), rgba(11,143,112,.12)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body[data-ui-page="main"] .logo-icon {
  width: 43px !important;
  height: 43px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--v16-blue-500), var(--v16-cyan-400)) !important;
  box-shadow: 0 11px 25px rgba(19,151,212,.28) !important;
}
body[data-ui-page="main"] .logo-text strong { font-size: 14px !important; letter-spacing: -.01em; }
body[data-ui-page="main"] .logo-text small { font-size: 10.5px !important; color: rgba(235,246,252,.68) !important; }
body[data-ui-page="main"] .menu { padding: 5px 2px 10px !important; overflow: visible !important; }
body[data-ui-page="main"] .menu > li { margin: 2px 0 !important; }
body[data-ui-page="main"] .menu a {
  min-height: 42px;
  padding: 9px 11px !important;
  gap: 10px !important;
  border-radius: 11px !important;
  color: rgba(237,247,252,.84) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  border: 1px solid transparent;
}
body[data-ui-page="main"] .menu a i:first-child { color: #9bd9ef; opacity: 1 !important; }
body[data-ui-page="main"] .menu a:hover {
  transform: none !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.05);
}
body[data-ui-page="main"] .menu a.active,
body[data-ui-page="main"] .menu a.active-hydromap,
body[data-ui-page="main"] .menu a[aria-current="page"] {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(19,151,212,.30), rgba(66,199,219,.10)) !important;
  border-color: rgba(103,215,233,.25) !important;
  box-shadow: inset 3px 0 0 #49c7dc, inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body[data-ui-page="main"] .menu a.active i:first-child,
body[data-ui-page="main"] .menu a.active-hydromap i:first-child { color: #fff; }
body[data-ui-page="main"] .submenu {
  margin: 3px 0 7px 12px !important;
  padding: 5px 0 4px 9px !important;
  border-left: 1px solid rgba(125,203,226,.20);
  display: none;
}
body[data-ui-page="main"] .submenu.show { display: block !important; }
body[data-ui-page="main"] .submenu li a { min-height: 36px; padding: 7px 9px !important; font-size: 11.8px !important; background: transparent !important; }
body[data-ui-page="main"] .v16-menu-section {
  margin: 15px 10px 5px !important;
  list-style: none;
  color: rgba(195,221,232,.46);
  font-size: 9.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body[data-ui-page="main"] .v16-menu-section:first-child { margin-top: 5px !important; }
body[data-ui-page="main"] .sidebar-di-jump,
body[data-ui-page="main"] .sidebar-stats {
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.045) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body[data-ui-page="main"] .sidebar-di-jump { padding: 10px !important; }
body[data-ui-page="main"] .sidebar-di-jump label { color: rgba(239,248,252,.75); font-size: 10px; }
body[data-ui-page="main"] .sidebar-di-jump select { min-height: 36px; font-size: 11px; }
body[data-ui-page="main"] .sidebar-di-jump .btn { min-height: 36px; font-size: 10.5px; }
body[data-ui-page="main"] .sidebar-stats { padding: 11px !important; margin-top: 8px !important; }
body[data-ui-page="main"] .sidebar-stats h4 { font-size: 10.5px !important; color: #d9eef5 !important; }
body[data-ui-page="main"] .sidebar-stats p { font-size: 10.5px !important; color: rgba(232,244,250,.70) !important; }

body[data-ui-page="main"] .main {
  width: auto !important;
  min-width: 0;
  min-height: 100vh;
  padding: 76px 22px 34px !important;
  overflow: visible !important;
}
body[data-ui-page="main"] .gis-topbar {
  position: fixed !important;
  top: 0;
  left: 276px;
  right: 0;
  min-height: 60px;
  padding: 9px 22px !important;
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(196,212,223,.72) !important;
  box-shadow: 0 8px 30px rgba(13,38,58,.065) !important;
  z-index: 1050;
}
body[data-ui-page="main"] .gis-brand { color: var(--v16-navy-900) !important; font-size: 13px !important; }
body[data-ui-page="main"] .gis-brand-mark { background: linear-gradient(135deg, var(--v16-blue-700), var(--v16-cyan-400)) !important; }
body[data-ui-page="main"] .gis-topbar-menu { padding: 3px; border-radius: 11px; background: #edf3f7; }
body[data-ui-page="main"] .gis-topbar-menu button {
  min-height: 33px;
  padding: 6px 11px;
  color: #496276 !important;
  border-radius: 8px !important;
  font-size: 11.5px;
  font-weight: 750;
}
body[data-ui-page="main"] .gis-topbar-menu button:hover { background: #fff !important; color: var(--v16-blue-700) !important; box-shadow: 0 2px 8px rgba(13,38,58,.08); }
body[data-ui-page="main"] .gis-icon { border: 1px solid var(--v16-line); background: #fff !important; color: #456077 !important; box-shadow: 0 2px 8px rgba(13,38,58,.05); }

body[data-ui-page="main"] .page { max-width: 1680px; margin: 0 auto; }
body[data-ui-page="main"] .header {
  gap: 18px;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--v16-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--v16-shadow-sm) !important;
  backdrop-filter: blur(12px);
}
body[data-ui-page="main"] .header h1 { color: var(--v16-navy-900) !important; font-size: clamp(20px,2vw,28px) !important; letter-spacing: -.035em; }
body[data-ui-page="main"] .header-right { min-width: fit-content; }
body[data-ui-page="main"] .controls { gap: 8px !important; margin-top: 12px; }
body[data-ui-page="main"] .control-cluster,
body[data-ui-page="main"] .filter-group {
  background: #f4f8fa !important;
  border: 1px solid #dce8ef !important;
  border-radius: 13px !important;
  padding: 7px !important;
}
body[data-ui-page="main"] .filter-pills label { border-radius: 9px !important; background: #fff !important; border: 1px solid var(--v16-line) !important; }

body[data-ui-page="main"] .command-center-strip {
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
body[data-ui-page="main"] .cc-kpi-card {
  min-height: 102px;
  padding: 14px !important;
  border-radius: 15px !important;
  background: linear-gradient(150deg,#fff 0%,#f5fafc 100%) !important;
  border: 1px solid var(--v16-line) !important;
  box-shadow: var(--v16-shadow-sm) !important;
}
body[data-ui-page="main"] .cc-kpi-card::before { content:""; display:block; width:34px; height:3px; border-radius:10px; margin-bottom:9px; background: linear-gradient(90deg,var(--v16-blue-600),var(--v16-cyan-400)); }
body[data-ui-page="main"] .cc-kpi-label { color: var(--v16-muted) !important; font-size: 10px !important; letter-spacing: .06em; text-transform: uppercase; }
body[data-ui-page="main"] .cc-kpi-value { color: var(--v16-navy-900) !important; font-size: 24px !important; letter-spacing: -.04em; }
body[data-ui-page="main"] .cc-kpi-meta { color: #7b8c9b !important; font-size: 10.5px !important; }
body[data-ui-page="main"] .cc-command-bar {
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  border-radius: 15px !important;
  border: 1px solid var(--v16-line) !important;
  background: #fff !important;
  box-shadow: var(--v16-shadow-sm) !important;
}
body[data-ui-page="main"] .cc-command-icon { background: #e5f4fb !important; color: var(--v16-blue-700) !important; }
body[data-ui-page="main"] .cc-filter-btn { border-radius: 9px !important; border: 1px solid var(--v16-line) !important; background: #f7fafc !important; color: #496276 !important; }
body[data-ui-page="main"] .cc-filter-btn.is-active { background: var(--v16-blue-700) !important; border-color: var(--v16-blue-700) !important; color: #fff !important; }

body[data-ui-page="main"] .hydromap-stage { gap: 12px !important; }
body[data-ui-page="main"] .hydromap-canvas-shell,
body[data-ui-page="main"] .hydromap-analytics-rail {
  border-radius: 18px !important;
  border: 1px solid var(--v16-line) !important;
  box-shadow: var(--v16-shadow-md) !important;
  overflow: hidden;
}
body[data-ui-page="main"] .hydromap-canvas-shell { background: #fff !important; }
body[data-ui-page="main"] .hydromap-canvas-topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--v16-line) !important;
  padding: 10px 12px !important;
}
body[data-ui-page="main"] .hydromap-tab { border-radius: 9px !important; }
body[data-ui-page="main"] .hydromap-tab-active { background: #e5f4fb !important; color: var(--v16-blue-700) !important; }
body[data-ui-page="main"] .hydromap-analytics-rail {
  background: linear-gradient(180deg,var(--v16-navy-900),#0c2a43) !important;
  color: #fff;
}
body[data-ui-page="main"] #map, body[data-ui-page="main"] #dashboardMap { background: #dce9ee; }
body[data-ui-page="main"] .leaflet-control { border-radius: 10px !important; overflow: hidden; box-shadow: 0 7px 20px rgba(13,38,58,.15) !important; }
body[data-ui-page="main"] .leaflet-popup-content-wrapper { border-radius: 15px !important; box-shadow: var(--v16-shadow-lg) !important; }

body[data-ui-page="main"] .stats:not(.hydromap-stats-rail) { gap: 11px !important; }
body[data-ui-page="main"] .stats:not(.hydromap-stats-rail) .card,
body[data-ui-page="main"] .dashboard-stats-grid > * {
  border-radius: 15px !important;
  background: linear-gradient(150deg,#fff,#f6fafc) !important;
}
body[data-ui-page="main"] .section { border-radius: 18px !important; background: rgba(255,255,255,.93) !important; padding: 18px !important; }
body[data-ui-page="main"] .dashboard-header-modern,
body[data-ui-page="main"] .executive-header { background: linear-gradient(135deg,#fff 0%,#edf8fb 100%) !important; }
body[data-ui-page="main"] .dashboard-hero-main h2,
body[data-ui-page="main"] .executive-header h1 { color: var(--v16-navy-900) !important; letter-spacing: -.035em; }

/* Fixed launcher is replaced by a compact command button */
.v16-ecosystem-trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg,var(--v16-navy-900),var(--v16-blue-700));
  box-shadow: 0 17px 38px rgba(7,24,39,.30);
  font-weight: 800;
  cursor: pointer;
}
.v16-ecosystem-trigger:hover { transform: translateY(-2px); }
.v16-ecosystem-trigger small { display:block; color: rgba(255,255,255,.66); font-size: 9px; font-weight: 600; }
.v16-ecosystem-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(4,18,29,.60);
  backdrop-filter: blur(12px);
}
.v16-ecosystem-modal.is-open { display: grid; }
.v16-ecosystem-dialog {
  width: min(920px,100%);
  max-height: min(760px,88vh);
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  background: #f7fafc;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 34px 90px rgba(4,18,29,.38);
}
.v16-dialog-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; }
.v16-dialog-head h2 { margin:0; color:var(--v16-navy-900); font-size:24px; letter-spacing:-.035em; }
.v16-dialog-head p { margin:5px 0 0; color:var(--v16-muted); }
.v16-dialog-close { width:42px; height:42px; border:1px solid var(--v16-line); background:#fff; color:var(--v16-ink); cursor:pointer; }
.v16-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.v16-module-card { display:block; padding:16px; border-radius:16px; background:#fff; border:1px solid var(--v16-line); color:inherit; text-decoration:none; box-shadow:var(--v16-shadow-sm); }
.v16-module-card:hover { border-color:#86c8e3; transform:translateY(-2px); }
.v16-module-card strong { display:block; color:var(--v16-navy-900); margin-bottom:5px; }
.v16-module-card span { color:var(--v16-muted); font-size:12px; line-height:1.5; }
.v16-module-icon { width:40px; height:40px; display:grid; place-items:center; margin-bottom:12px; border-radius:12px; background:#e6f4fa; color:var(--v16-blue-700); }

/* Landing page */
body.satria-landing-body,
body[data-ui-page="index"] {
  background:
    radial-gradient(circle at 82% 4%, rgba(66,199,219,.22), transparent 28rem),
    radial-gradient(circle at 8% 33%, rgba(11,143,112,.10), transparent 24rem),
    #f5f9fb !important;
  color: var(--v16-ink);
}
.satria-landing-nav {
  max-width: 1280px;
  top: 14px !important;
  margin: 0 auto;
  border: 1px solid rgba(196,212,223,.8) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 38px rgba(13,38,58,.10) !important;
}
.satria-brand-mark { background: linear-gradient(135deg,var(--v16-blue-700),var(--v16-cyan-400)) !important; }
.satria-nav-links a { color: #4a6477 !important; font-weight: 700 !important; }
.satria-nav-links a:hover { color: var(--v16-blue-700) !important; }
.satria-hero { padding-top: 150px !important; min-height: 760px; }
.satria-hero-grid { max-width: 1280px !important; gap: clamp(40px,6vw,88px) !important; }
.satria-eyebrow, .satria-section-kicker { color: var(--v16-green-700) !important; background: var(--v16-green-100) !important; border-color: #b9eadc !important; }
.satria-hero h1 { color: var(--v16-navy-950) !important; font-size: clamp(54px,7vw,94px) !important; line-height: .94 !important; letter-spacing: -.065em !important; }
.satria-hero h2 { color: #24465e !important; font-size: clamp(22px,2.5vw,34px) !important; max-width: 780px; letter-spacing: -.025em; }
.satria-hero p { color: #607588 !important; max-width: 740px; font-size: 17px !important; line-height: 1.75 !important; }
.satria-dashboard-preview,
.satria-report-preview {
  border-radius: 25px !important;
  border: 1px solid rgba(181,207,220,.78) !important;
  box-shadow: 0 34px 84px rgba(7,24,39,.20) !important;
  overflow: hidden;
}
.satria-dashboard-preview { transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.satria-preview-top { background: var(--v16-navy-900) !important; color: #fff !important; }
.satria-mini-map { background: linear-gradient(145deg,#dff1f5,#c9e2e8) !important; }
.satria-canal-line { background: linear-gradient(90deg,var(--v16-blue-500),var(--v16-cyan-400)) !important; }
.satria-section { padding: 88px 24px !important; }
.satria-section.alt { background: linear-gradient(180deg,#edf5f8,#f7fafc) !important; }
.satria-section-head h2, .satria-solution-layout h2 { color: var(--v16-navy-900) !important; letter-spacing: -.045em; }
.satria-problem-card, .satria-feature-card, .satria-benefit-card, .satria-preview-card {
  border-radius: 18px !important;
  border: 1px solid var(--v16-line) !important;
  box-shadow: var(--v16-shadow-sm) !important;
  background: rgba(255,255,255,.94) !important;
}
.satria-problem-card:hover, .satria-feature-card:hover, .satria-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--v16-shadow-md) !important; }
.satria-card-icon { background:#e5f4fa !important; color:var(--v16-blue-700) !important; }
.satria-landing-footer { background: var(--v16-navy-950) !important; }

/* Login */
body.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 10%, rgba(66,199,219,.20), transparent 24rem),
    radial-gradient(circle at 92% 88%, rgba(11,143,112,.16), transparent 27rem),
    linear-gradient(140deg,var(--v16-navy-950),var(--v16-navy-800)) !important;
}
.login-shell { width:min(1120px,calc(100% - 32px)) !important; gap:0 !important; border-radius:26px !important; overflow:hidden; box-shadow:0 38px 100px rgba(0,0,0,.34) !important; background:#fff; }
.login-brand {
  position:relative;
  padding: clamp(34px,5vw,64px) !important;
  background:
    linear-gradient(160deg,rgba(7,24,39,.18),rgba(7,24,39,.58)),
    radial-gradient(circle at 70% 15%,rgba(66,199,219,.38),transparent 18rem),
    linear-gradient(145deg,var(--v16-blue-700),var(--v16-navy-900)) !important;
}
.login-brand::after { content:""; position:absolute; width:280px; height:280px; right:-130px; bottom:-130px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 75px rgba(255,255,255,.03); }
.login-brand h1 { font-size:clamp(34px,4vw,55px) !important; letter-spacing:-.055em; }
.login-brand p { color:rgba(241,249,252,.74) !important; line-height:1.7; }
.brand-badge { background:rgba(255,255,255,.11) !important; border:1px solid rgba(255,255,255,.14) !important; }
.brand-point { background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.08) !important; }
.login-container { padding:clamp(32px,5vw,62px) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.login-card-header h2 { color:var(--v16-navy-900) !important; font-size:30px !important; letter-spacing:-.04em; }
.login-icon { background:#e6f4fa !important; color:var(--v16-blue-700) !important; }
#loginBtn { min-height:48px; width:100%; background:linear-gradient(135deg,var(--v16-blue-700),var(--v16-blue-600)) !important; }
.login-helper { border-radius:11px !important; background:#f4f8fa !important; border:1px solid var(--v16-line) !important; }

/* Public report */
body.public-report-page { background:linear-gradient(180deg,#eef6f8,#f7fafc) !important; }
.public-report-topbar { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.91) !important; backdrop-filter:blur(16px); border-bottom:1px solid var(--v16-line) !important; }
.public-report-shell { max-width:1240px !important; }
.public-simple-hero { border-radius:22px !important; background:linear-gradient(135deg,var(--v16-navy-900),var(--v16-blue-700)) !important; box-shadow:var(--v16-shadow-md) !important; }
.public-simple-hero h1 { letter-spacing:-.045em; }
.public-report-card { border-radius:18px !important; background:rgba(255,255,255,.96) !important; }
.public-user-tabs { padding:5px; border-radius:13px !important; background:#e8f0f4 !important; }
.public-user-tabs button { border-radius:9px !important; }
.public-user-tabs button.active { background:#fff !important; color:var(--v16-blue-700) !important; box-shadow:0 3px 12px rgba(13,38,58,.09); }
.public-stepper .active, .public-step-badge { background:var(--v16-blue-700) !important; }
.public-choice-grid button, .public-choice-grid label { border-radius:14px !important; }
.public-choice-grid button:hover, .public-choice-grid label:hover { border-color:#7fc4df !important; background:#f1f9fc !important; }

/* List/admin pages */
body[data-ui-page="laporan-masuk"], body[data-ui-page="dashboard-kerusakan"],
body[data-ui-page="admin-iksi-pai"], body[data-ui-page="whatsapp-gateway"] {
  background:linear-gradient(180deg,#edf4f8,#f8fafc) !important;
}
body[data-ui-page="laporan-masuk"] .shell,
body[data-ui-page="dashboard-kerusakan"] .shell { max-width:1680px !important; padding:22px !important; }
body[data-ui-page="laporan-masuk"] .top,
body[data-ui-page="dashboard-kerusakan"] .topbar {
  border-radius:18px !important;
  background:linear-gradient(135deg,#fff,#eef7fa) !important;
  border:1px solid var(--v16-line) !important;
  box-shadow:var(--v16-shadow-sm) !important;
}
body[data-ui-page="laporan-masuk"] .stats,
body[data-ui-page="dashboard-kerusakan"] .stats-grid { gap:10px !important; }
body[data-ui-page="laporan-masuk"] .stat,
body[data-ui-page="dashboard-kerusakan"] .stats-grid > * { border-radius:15px !important; background:#fff !important; }
body[data-ui-page="laporan-masuk"] .layout,
body[data-ui-page="dashboard-kerusakan"] .main-grid { gap:14px !important; }
body[data-ui-page="dashboard-kerusakan"] .map-card { overflow:hidden; }

/* OP management */
body[data-ui-page="op-irigasi"] { background:linear-gradient(180deg,#edf4f8,#f8fafc) !important; }
body[data-ui-page="op-irigasi"] .wrap { max-width:1680px !important; padding:18px !important; }
body[data-ui-page="op-irigasi"] .topbar { position:sticky; top:0; z-index:30; border-radius:17px !important; background:rgba(255,255,255,.92) !important; backdrop-filter:blur(16px); border:1px solid var(--v16-line) !important; box-shadow:var(--v16-shadow-sm) !important; }
body[data-ui-page="op-irigasi"] .layout { grid-template-columns:248px minmax(0,1fr) !important; gap:14px !important; }
body[data-ui-page="op-irigasi"] .sidebar.panel { position:sticky; top:92px; align-self:start; padding:10px !important; }
body[data-ui-page="op-irigasi"] .nav button { min-height:43px; border-radius:10px !important; text-align:left; color:#4e6577; }
body[data-ui-page="op-irigasi"] .nav button.active { background:#e5f4fa !important; color:var(--v16-blue-700) !important; box-shadow:inset 3px 0 0 var(--v16-blue-600); }
body[data-ui-page="op-irigasi"] .content .panel { border-radius:17px !important; }

/* Ecosystem page */
body.v16-ecosystem-page { margin:0; background:linear-gradient(180deg,#edf5f8,#f8fafc); color:var(--v16-ink); }
.v16-eco-nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px max(24px,calc((100vw - 1260px)/2)); background:rgba(255,255,255,.90); backdrop-filter:blur(16px); border-bottom:1px solid var(--v16-line); }
.v16-eco-brand { display:flex; align-items:center; gap:11px; color:var(--v16-navy-900); text-decoration:none; }
.v16-eco-brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,var(--v16-blue-700),var(--v16-cyan-400)); box-shadow:0 10px 22px rgba(19,151,212,.25); }
.v16-eco-main { max-width:1260px; margin:0 auto; padding:42px 24px 70px; }
.v16-eco-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:22px; align-items:stretch; }
.v16-eco-hero-copy, .v16-eco-score { border:1px solid var(--v16-line); border-radius:24px; box-shadow:var(--v16-shadow-md); }
.v16-eco-hero-copy { padding:clamp(28px,5vw,58px); color:#fff; background:radial-gradient(circle at 85% 10%,rgba(66,199,219,.35),transparent 18rem),linear-gradient(135deg,var(--v16-navy-950),var(--v16-blue-700)); }
.v16-eco-eyebrow { display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.v16-eco-hero h1 { margin:18px 0 14px; font-size:clamp(40px,5vw,68px); line-height:.98; letter-spacing:-.065em; }
.v16-eco-hero p { max-width:750px; color:rgba(240,248,252,.76); font-size:16px; line-height:1.75; }
.v16-eco-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.v16-eco-score { padding:24px; background:#fff; }
.v16-score-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.v16-score-head h2 { margin:0; color:var(--v16-navy-900); }
.v16-score-pill { padding:6px 9px; border-radius:999px; color:var(--v16-green-700); background:var(--v16-green-100); font-size:10px; font-weight:850; }
.v16-score-number { margin:25px 0 5px; font-size:64px; line-height:1; letter-spacing:-.065em; color:var(--v16-navy-900); font-weight:900; }
.v16-score-bar { height:9px; border-radius:99px; background:#e6eef2; overflow:hidden; }
.v16-score-bar span { display:block; width:68%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--v16-green-600),var(--v16-cyan-400)); }
.v16-score-list { margin-top:22px; display:grid; gap:10px; }
.v16-score-row { display:grid; grid-template-columns:1fr auto; gap:14px; padding-bottom:9px; border-bottom:1px solid #e7eef2; color:#577083; font-size:12px; }
.v16-score-row strong { color:var(--v16-ink); }
.v16-eco-section { margin-top:26px; padding:26px; border:1px solid var(--v16-line); border-radius:22px; background:#fff; box-shadow:var(--v16-shadow-sm); }
.v16-eco-section-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:20px; }
.v16-eco-section h2 { margin:0; color:var(--v16-navy-900); letter-spacing:-.04em; }
.v16-eco-section-head p { max-width:700px; margin:0; color:var(--v16-muted); line-height:1.6; }
.v16-flow { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; align-items:stretch; }
.v16-flow-step { position:relative; min-height:135px; padding:14px; border-radius:15px; background:#f2f7f9; border:1px solid #dce8ee; }
.v16-flow-step:not(:last-child)::after { content:"›"; position:absolute; right:-8px; top:50%; transform:translate(50%,-50%); width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:var(--v16-blue-700); color:#fff; font-weight:900; z-index:2; }
.v16-flow-step b { display:block; color:var(--v16-blue-700); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.v16-flow-step strong { display:block; margin:8px 0 5px; color:var(--v16-navy-900); font-size:13px; }
.v16-flow-step span { color:var(--v16-muted); font-size:10.5px; line-height:1.45; }
.v16-eco-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.v16-eco-card { padding:17px; border-radius:16px; background:#f8fbfc; border:1px solid var(--v16-line); }
.v16-eco-card i, .v16-eco-card .v16-fallback-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; margin-bottom:12px; background:#e5f4fa; color:var(--v16-blue-700); }
.v16-eco-card h3 { margin:0 0 6px; color:var(--v16-navy-900); }
.v16-eco-card p { margin:0; color:var(--v16-muted); font-size:12px; line-height:1.6; }

/* Dark mode alignment */
body.dark-mode { --v16-bg:#0e1824; --v16-surface:#152231; --v16-surface-2:#1a2939; --v16-line:#2d4153; --v16-line-strong:#3c5265; --v16-ink:#ecf5fa; --v16-muted:#9db0bf; }
body.dark-mode[data-ui-page="main"] .gis-topbar,
body.dark-mode[data-ui-page="main"] .header,
body.dark-mode[data-ui-page="main"] .cc-command-bar,
body.dark-mode[data-ui-page="main"] .cc-kpi-card,
body.dark-mode[data-ui-page="main"] .section,
body.dark-mode[data-ui-page="main"] .hydromap-canvas-shell { background:#152231 !important; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background:#101c29 !important; color:#ecf5fa !important; }

/* Responsiveness */
@media (max-width: 1240px) {
  body[data-ui-page="main"] .command-center-strip { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .v16-flow { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .v16-flow-step:nth-child(4)::after { display:none; }
}
@media (max-width: 1000px) {
  .satria-nav-links { display:none !important; }
  .satria-dashboard-preview { transform:none; }
  .v16-eco-hero { grid-template-columns:1fr; }
  .v16-eco-grid, .v16-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body[data-ui-page="main"] .container { display:block !important; }
  body[data-ui-page="main"] .sidebar {
    position:fixed !important;
    left:0; top:0; bottom:0;
    width:min(316px,86vw) !important;
    min-width:0;
    transform:translateX(-105%);
    transition:transform .22s ease;
  }
  body.v15-drawer-open[data-ui-page="main"] .sidebar { transform:translateX(0) !important; }
  body[data-ui-page="main"] .gis-topbar { left:0; top:58px; min-height:52px; padding:7px 13px !important; }
  body[data-ui-page="main"] .gis-brand { display:none; }
  body[data-ui-page="main"] .gis-topbar-menu { overflow:auto; }
  body[data-ui-page="main"] .gis-topbar-right { display:none; }
  body[data-ui-page="main"] .main { padding:122px 12px 28px !important; }
  body[data-ui-page="main"] .header { flex-direction:column; align-items:stretch !important; padding:15px !important; }
  body[data-ui-page="main"] .header-right { justify-content:flex-start; width:100%; }
  body[data-ui-page="main"] .command-center-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body[data-ui-page="op-irigasi"] .layout { grid-template-columns:1fr !important; }
  body[data-ui-page="op-irigasi"] .sidebar.panel { position:static; }
  .v16-ecosystem-trigger { right:12px; bottom:12px; }
}
@media (max-width: 720px) {
  .satria-landing-nav { top:0 !important; border-radius:0 0 16px 16px !important; }
  .satria-brand > span:last-child span { display:none; }
  .satria-nav-actions .satria-btn:first-child { display:none; }
  .satria-hero { padding:120px 18px 60px !important; min-height:auto; }
  .satria-hero h1 { font-size:51px !important; }
  .satria-section { padding:62px 18px !important; }
  .login-shell { grid-template-columns:1fr !important; margin:16px auto; }
  .login-brand { display:none !important; }
  .login-container { padding:28px 22px !important; }
  .v16-eco-main { padding:24px 14px 55px; }
  .v16-eco-hero-copy, .v16-eco-score, .v16-eco-section { border-radius:18px; padding:20px; }
  .v16-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v16-flow-step:nth-child(even)::after { display:none; }
  .v16-eco-grid, .v16-module-grid { grid-template-columns:1fr; }
  .v16-eco-section-head { display:block; }
  .v16-eco-section-head p { margin-top:8px; }
}
@media (max-width: 560px) {
  body[data-ui-page="main"] .command-center-strip { grid-template-columns:1fr 1fr !important; }
  body[data-ui-page="main"] .cc-kpi-card { min-height:92px; padding:11px !important; }
  body[data-ui-page="main"] .cc-kpi-value { font-size:20px !important; }
  body[data-ui-page="main"] .header h1 { font-size:21px !important; }
  .v16-ecosystem-trigger span { display:none; }
  .v16-ecosystem-trigger { width:48px; padding:0; justify-content:center; }
  .public-report-shell { padding:12px !important; }
}

@media print {
  .v16-ecosystem-trigger, .v16-ecosystem-modal, .v15-mobile-bar { display:none !important; }
}

/* Graceful map placeholder while spatial layers are loading */
#map:empty, #dashboardMap:empty, #damageMap:empty {
  position: relative;
  background:
    radial-gradient(circle at 22% 38%, rgba(209,59,69,.95) 0 5px, rgba(255,255,255,.95) 6px 9px, transparent 10px),
    radial-gradient(circle at 67% 26%, rgba(201,122,8,.95) 0 5px, rgba(255,255,255,.95) 6px 9px, transparent 10px),
    radial-gradient(circle at 73% 70%, rgba(11,143,112,.95) 0 5px, rgba(255,255,255,.95) 6px 9px, transparent 10px),
    linear-gradient(127deg, transparent 0 44%, rgba(19,151,212,.75) 44.5% 45.5%, transparent 46% 100%),
    linear-gradient(30deg, transparent 0 51%, rgba(19,151,212,.45) 51.4% 52%, transparent 52.5% 100%),
    repeating-linear-gradient(0deg, rgba(62,91,108,.07) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(62,91,108,.07) 0 1px, transparent 1px 42px),
    linear-gradient(145deg,#deebef,#cddfe5) !important;
}
#map:empty::before, #dashboardMap:empty::before, #damageMap:empty::before {
  content: "Peta jaringan irigasi • memuat layer spasial";
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:1;
  padding:9px 12px;
  border-radius:10px;
  color:#36536a;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(177,201,213,.85);
  box-shadow:0 7px 20px rgba(13,38,58,.12);
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(8px);
}