/*
 * SATRIA Irigasi V15 — Unified UI/UX Layer
 * Additive layer loaded after all legacy styles.
 * Does not rename existing IDs/classes or change application workflow.
 */
:root {
  --ui-primary-950: #073b35;
  --ui-primary-900: #0b4f46;
  --ui-primary-800: #0f665b;
  --ui-primary-700: #12796c;
  --ui-primary-600: #168b7c;
  --ui-primary-100: #dff6f1;
  --ui-primary-50: #effbf8;
  --ui-blue-700: #1767a8;
  --ui-blue-100: #dceefe;
  --ui-danger-700: #b42318;
  --ui-danger-100: #fee4e2;
  --ui-warning-700: #9a6700;
  --ui-warning-100: #fff1cf;
  --ui-success-700: #16734a;
  --ui-success-100: #dff7e9;
  --ui-ink-950: #102a2c;
  --ui-ink-800: #1d3b3f;
  --ui-ink-700: #38565a;
  --ui-ink-600: #587074;
  --ui-ink-500: #71878b;
  --ui-line: #d8e4e3;
  --ui-line-strong: #c4d5d3;
  --ui-canvas: #f4f8f7;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fbfa;
  --ui-surface-muted: #edf4f2;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-radius-xl: 28px;
  --ui-shadow-xs: 0 1px 2px rgba(16, 42, 44, .04);
  --ui-shadow-sm: 0 8px 24px rgba(16, 42, 44, .07);
  --ui-shadow-md: 0 18px 46px rgba(16, 42, 44, .10);
  --ui-focus: 0 0 0 4px rgba(22, 139, 124, .18);
  --ui-font: "Plus Jakarta Sans", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ui-sidebar-w: 280px;
  --ui-topbar-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; text-rendering: optimizeLegibility; }
body, input, select, textarea, button { font-family: var(--ui-font) !important; }
body:not(.satria-landing-body):not(.v12-body) {
  color: var(--ui-ink-950) !important;
  background: var(--ui-canvas) !important;
}
body.v15-lock-scroll { overflow: hidden !important; }
::selection { color: #fff; background: var(--ui-primary-700); }

/* Accessibility and keyboard navigation */
.v15-skip-link {
  position: fixed;
  z-index: 100000;
  top: 10px;
  left: 12px;
  padding: 11px 15px;
  border-radius: 12px;
  background: var(--ui-primary-950);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .16s ease;
  box-shadow: var(--ui-shadow-md);
}
.v15-skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: var(--ui-focus) !important;
}
[aria-disabled="true"], button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed !important;
  opacity: .58 !important;
}
.v15-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--ui-ink-950) !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
h1 { line-height: 1.08 !important; }
p, .lead, .subtitle, .muted, small, .v12-muted { color: var(--ui-ink-600) !important; }

/* Unified surfaces */
:where(.card, .panel, .section, .stat-card, .summary-card, .report-card, .content-card,
.table-container, .modal-content, .public-report-card, .field-card, .satria-panel,
.satria-card, .v12-card, .hero-card, .service-card, .component-card) {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-xs) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:where(.card, .panel, .section, .stat-card, .summary-card, .report-card, .content-card,
.v12-card, .service-card) { transition: border-color .16s ease, box-shadow .16s ease; }
:where(.card, .panel, .section, .stat-card, .summary-card, .report-card, .content-card,
.v12-card, .service-card):hover {
  border-color: var(--ui-line-strong) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transform: none !important;
}

/* Buttons and actions */
:where(button, .btn, .v12-btn, .primary-btn, .ghost-btn, .back-btn, .satria-btn, input[type="submit"]) {
  min-height: 42px;
  border-radius: var(--ui-radius-md) !important;
  font-weight: 750 !important;
  line-height: 1.15;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
:where(button, .btn, .v12-btn, .primary-btn, .ghost-btn, .back-btn, .satria-btn, input[type="submit"]):hover {
  transform: translateY(-1px) !important;
}
:where(button, .btn, .v12-btn, .primary-btn, .ghost-btn, .back-btn, .satria-btn, input[type="submit"]):active {
  transform: translateY(0) scale(.985) !important;
}
:where(.btn, .btn-primary, button.primary, .v12-btn.primary, .primary-btn, .satria-btn.primary,
.login-container button[type="submit"]) {
  color: #fff !important;
  background: var(--ui-primary-800) !important;
  border: 1px solid var(--ui-primary-800) !important;
  box-shadow: 0 8px 18px rgba(15, 102, 91, .18) !important;
}
:where(.btn-success, .btn.success, button.success, .v12-btn.success, .satria-btn.green) {
  color: #fff !important;
  background: var(--ui-success-700) !important;
  border-color: var(--ui-success-700) !important;
}
:where(.btn-info, .btn.blue, button.info) {
  color: #fff !important;
  background: var(--ui-blue-700) !important;
  border-color: var(--ui-blue-700) !important;
}
:where(.btn-warning, .btn.warning, button.warning, .v12-btn.warn) {
  color: #4c3200 !important;
  background: #f6c453 !important;
  border-color: #efb938 !important;
}
:where(.btn-danger, .btn.danger, button.danger, .v12-btn.danger) {
  color: #fff !important;
  background: var(--ui-danger-700) !important;
  border-color: var(--ui-danger-700) !important;
}
:where(.btn.secondary, .btn-secondary, .btn.ghost, .v12-btn:not(.primary):not(.success):not(.warn):not(.danger),
.ghost-btn, .back-btn, .satria-btn:not(.primary):not(.green)) {
  color: var(--ui-ink-800) !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line-strong) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

/* Forms */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  min-height: 46px;
  padding: 11px 13px !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: var(--ui-radius-md) !important;
  color: var(--ui-ink-950) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
textarea { min-height: 108px; line-height: 1.55; resize: vertical; }
:where(input, select, textarea)::placeholder { color: #87999c !important; opacity: 1; }
:where(input, select, textarea):focus {
  border-color: var(--ui-primary-600) !important;
  box-shadow: var(--ui-focus) !important;
  outline: none !important;
}
:where(label, .field-label) {
  color: var(--ui-ink-800) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.35;
}
.v15-required-mark { color: var(--ui-danger-700); margin-left: 3px; }
.v15-input-wrap { position: relative; }
.v15-password-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8px;
  width: 36px;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ui-ink-600) !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}
.v15-password-toggle:hover { color: var(--ui-primary-800) !important; transform: translateY(-50%) !important; }
input.v15-has-toggle { padding-right: 48px !important; }
.form-grid, .v12-form, .public-report-form { row-gap: 16px !important; }
.actions { gap: 10px !important; }

/* Tables */
.v15-table-scroll,
.table-wrap,
.table-container,
[id$="TableWrap"] {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #a8bcba transparent;
  border-radius: var(--ui-radius-lg);
}
.v15-table-scroll > table { min-width: 720px; }
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--ui-ink-800) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: #fff;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 13px !important;
  color: var(--ui-ink-700) !important;
  background: var(--ui-surface-muted) !important;
  border-bottom: 1px solid var(--ui-line-strong) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody td {
  padding: 12px 13px !important;
  border-bottom: 1px solid #e8efee !important;
  line-height: 1.45;
}
tbody tr:nth-child(even) { background: #fbfdfc; }
tbody tr:hover { background: var(--ui-primary-50) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }

/* Status, badges and metadata */
:where(.badge, .status-badge, .priority-badge, .chip, .status-chip, .pill, .v12-status, .status-pill) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 10px !important;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .01em;
  line-height: 1.2;
}
.empty, .empty-state, .no-data, .detail-empty {
  padding: 28px 20px !important;
  border: 1px dashed var(--ui-line-strong) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-ink-600) !important;
  background: var(--ui-surface-soft) !important;
  text-align: center;
}

/* Desktop application shell */
.sidebar, .v12-sidebar {
  width: var(--ui-sidebar-w) !important;
  background: linear-gradient(180deg, var(--ui-primary-950) 0%, var(--ui-primary-900) 60%, #0b453f 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
}
.sidebar .logo, .v12-brand {
  margin: 0 0 16px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
}
.logo-icon, .v12-logo, .gis-brand-mark, .brand-badge, .login-icon {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ui-primary-600), #2aa9a0) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16) !important;
}
.menu li a, .v12-nav a {
  min-height: 44px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, .84) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
.menu li a:hover, .v12-nav a:hover { background: rgba(255, 255, 255, .09) !important; }
.menu li a.active, .menu li a.active-hydromap, .menu li a.current, .v12-nav a.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 3px 0 0 #72dbc9 !important;
}
.submenu {
  padding: 6px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, .12) !important;
}
.main, .v12-main { background: var(--ui-canvas) !important; }
.header, .topbar, .gis-topbar, .v12-topbar, .dashboard-header-modern, .executive-header {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

/* Main GIS dashboard */
body[data-ui-page="main"] .main { padding: 18px 20px 28px !important; }
body[data-ui-page="main"] .sidebar { flex: 0 0 var(--ui-sidebar-w) !important; }
body[data-ui-page="main"] .header {
  position: sticky;
  top: 10px;
  z-index: 850;
  min-height: 64px;
  padding: 12px 16px !important;
}
body[data-ui-page="main"] .page { max-width: 1600px; margin-inline: auto; }
body[data-ui-page="main"] .section { padding: 18px !important; margin-bottom: 16px !important; }
body[data-ui-page="main"] .stats { gap: 12px !important; }
body[data-ui-page="main"] .stat-card { min-height: 126px; padding: 17px !important; }
body[data-ui-page="main"] .map-container,
body[data-ui-page="main"] #map { min-height: 560px; }
body[data-ui-page="main"] .layer-control,
body[data-ui-page="main"] .measure-panel {
  border: 1px solid var(--ui-line) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

/* OP module */
body[data-ui-page="op-irigasi"] .wrap { max-width: 1600px !important; padding: 20px 24px 36px !important; }
body[data-ui-page="op-irigasi"] .topbar { padding: 16px 18px !important; }
body[data-ui-page="op-irigasi"] .layout { grid-template-columns: 250px minmax(0, 1fr) !important; gap: 18px !important; }
body[data-ui-page="op-irigasi"] .sidebar { width: auto !important; padding: 12px !important; background: #fff !important; border: 1px solid var(--ui-line) !important; }
body[data-ui-page="op-irigasi"] .nav button {
  min-height: 44px;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  color: var(--ui-ink-700) !important;
}
body[data-ui-page="op-irigasi"] .nav button.active {
  color: var(--ui-primary-900) !important;
  border-color: #b9ded6 !important;
  background: var(--ui-primary-100) !important;
  box-shadow: inset 3px 0 0 var(--ui-primary-700);
}
body[data-ui-page="op-irigasi"] .cards { gap: 12px !important; }
body[data-ui-page="op-irigasi"] .card { min-height: 126px; padding: 18px !important; }
body[data-ui-page="op-irigasi"] .panel { padding: 20px !important; }
body[data-ui-page="op-irigasi"] .notice { color: var(--ui-primary-950) !important; background: var(--ui-primary-50) !important; border-color: #c6e8e1 !important; }

/* V12 command center and field pages */
body.v12-body { background: var(--ui-canvas) !important; }
.v12-shell { grid-template-columns: var(--ui-sidebar-w) minmax(0, 1fr) !important; }
.v12-main { padding: 20px 24px 36px !important; }
.v12-topbar { position: sticky; top: 10px; z-index: 30; padding: 14px 16px !important; }
.v12-card { padding: 18px !important; }
.v12-task { border-color: var(--ui-line) !important; border-radius: var(--ui-radius-md) !important; }
.offline-pill {
  right: 18px !important;
  bottom: 18px !important;
  color: #fff !important;
  background: var(--ui-ink-950) !important;
  box-shadow: var(--ui-shadow-md) !important;
}

/* Reports inbox / damage dashboard / gateway */
body[data-ui-page="laporan-masuk"] .shell,
body[data-ui-page="dashboard-kerusakan"] .shell,
body[data-ui-page="whatsapp-gateway"] .shell {
  width: min(1540px, calc(100% - 40px));
  margin-inline: auto;
}
body[data-ui-page="laporan-masuk"] .top,
body[data-ui-page="dashboard-kerusakan"] .top,
body[data-ui-page="whatsapp-gateway"] .topbar {
  position: sticky;
  top: 10px;
  z-index: 50;
}
body[data-ui-page="laporan-masuk"] .stats,
body[data-ui-page="dashboard-kerusakan"] .stats { gap: 12px !important; }
body[data-ui-page="laporan-masuk"] .stat,
body[data-ui-page="dashboard-kerusakan"] .stat { min-height: 112px; }
body[data-ui-page="laporan-masuk"] .layout { align-items: start; gap: 16px !important; }
body[data-ui-page="laporan-masuk"] .detail { position: sticky; top: 88px; }

/* Map UX */
#map, #damageMap, .map-container, .leaflet-container {
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: #dfe9e7 !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
.leaflet-bar, .leaflet-control-layers, .leaflet-control-scale-line, .leaflet-popup-content-wrapper {
  border: 1px solid rgba(16, 42, 44, .12) !important;
  border-radius: 12px !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
.leaflet-bar a { color: var(--ui-ink-800) !important; }
.leaflet-popup-content-wrapper { padding: 3px; }
.leaflet-popup-content { margin: 14px 16px !important; line-height: 1.5; }

/* Public report wizard */
body.public-report-page { background: var(--ui-canvas) !important; }
.public-report-shell { width: min(1160px, calc(100% - 32px)) !important; margin-inline: auto !important; }
.public-report-topbar {
  position: sticky;
  top: 10px;
  z-index: 40;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
.public-simple-hero {
  overflow: hidden;
  border: 1px solid #cde6e1 !important;
  border-radius: var(--ui-radius-xl) !important;
  background: linear-gradient(135deg, var(--ui-primary-50), #eef7fb) !important;
}
.public-simple-hero h1 { max-width: 780px; font-size: clamp(30px, 5vw, 52px) !important; }
.public-user-tabs {
  position: sticky;
  top: 88px;
  z-index: 35;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
.public-choice-grid button {
  min-height: 92px;
  color: var(--ui-ink-800) !important;
  background: #fff !important;
  border: 1px solid var(--ui-line-strong) !important;
  box-shadow: none !important;
}
.public-choice-grid button:hover { border-color: var(--ui-primary-600) !important; background: var(--ui-primary-50) !important; }
.public-choice-grid button.selected,
.public-choice-grid button.active,
.public-choice-grid button[aria-pressed="true"] {
  border-color: var(--ui-primary-700) !important;
  background: var(--ui-primary-100) !important;
  box-shadow: inset 0 0 0 1px var(--ui-primary-700) !important;
}
.public-stepper span { background: #dce6e4 !important; color: var(--ui-ink-600) !important; }
.public-stepper span.active, .public-stepper span.done { color: #fff !important; background: var(--ui-primary-700) !important; }
.wizard-step { animation: v15-enter .18s ease-out; }

/* Login */
body[data-ui-page="login"] { background: var(--ui-primary-950) !important; }
body[data-ui-page="login"] .login-page {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 48px) !important;
  background:
    radial-gradient(circle at 12% 15%, rgba(71, 190, 172, .20), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(61, 143, 190, .15), transparent 30%),
    var(--ui-primary-950) !important;
}
body[data-ui-page="login"] .login-shell {
  width: min(1060px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .26) !important;
}
body[data-ui-page="login"] .login-brand {
  background:
    linear-gradient(155deg, rgba(7, 59, 53, .96), rgba(15, 102, 91, .94)),
    radial-gradient(circle at 80% 18%, rgba(130, 225, 207, .22), transparent 34%) !important;
}
body[data-ui-page="login"] .login-brand h1,
body[data-ui-page="login"] .login-brand p,
body[data-ui-page="login"] .brand-point span { color: #fff !important; }
body[data-ui-page="login"] .login-container { padding: clamp(26px, 5vw, 52px) !important; border: 0 !important; box-shadow: none !important; }
body[data-ui-page="login"] .login-container form { display: grid; gap: 9px; }
body[data-ui-page="login"] .input-wrap { min-height: 48px; }
body[data-ui-page="login"] .input-wrap input { min-height: 48px; padding-left: 44px !important; }
body[data-ui-page="login"] .login-helper { border-color: var(--ui-line) !important; background: var(--ui-surface-soft) !important; }
body[data-ui-page="login"] .error:not(:empty) {
  padding: 11px 12px;
  border: 1px solid #f6c7c2;
  border-radius: 12px;
  color: var(--ui-danger-700) !important;
  background: #fff5f4;
}

/* PWA/mobile field module */
body[data-ui-page="pwa"] { background: var(--ui-canvas) !important; }
body[data-ui-page="pwa"] .app-shell { max-width: 1020px; }
body[data-ui-page="pwa"] .hero-card { border-radius: var(--ui-radius-xl) !important; }
body[data-ui-page="pwa"] .quick-grid { gap: 12px !important; }
body[data-ui-page="pwa"] .service-card { min-height: 144px; }
body[data-ui-page="pwa"] .bottom-nav {
  border: 1px solid var(--ui-line) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--ui-shadow-md) !important;
}
body[data-ui-page="pwa"] .bottom-nav button.active { color: var(--ui-primary-800) !important; background: var(--ui-primary-100) !important; }

/* Landing page refinements */
.satria-landing-body { color: var(--ui-ink-950) !important; background: var(--ui-canvas) !important; }
.satria-landing-nav {
  min-height: 72px;
  border-bottom-color: var(--ui-line) !important;
  background: rgba(255, 255, 255, .92) !important;
}
.satria-brand-mark { background: var(--ui-primary-800) !important; }
.satria-brand strong, .satria-hero h1 { color: var(--ui-primary-900) !important; }
.satria-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(22, 139, 124, .12), transparent 30%),
    linear-gradient(180deg, #fff, var(--ui-primary-50)) !important;
}
.satria-dashboard-preview { border-color: var(--ui-line) !important; box-shadow: var(--ui-shadow-md) !important; }
.satria-feature-card, .satria-benefit-card, .satria-step, .satria-preview-card,
.satria-problem-card, .satria-role-card, .satria-report-preview, .satria-data-preview > div {
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
.satria-feature-card:hover, .satria-benefit-card:hover, .satria-step:hover, .satria-role-card:hover {
  border-color: var(--ui-line-strong) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

/* Global mobile app bar/drawer */
.v15-mobile-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 9000;
  min-height: 58px;
  padding: 9px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ui-line);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--ui-shadow-xs);
}
.v15-mobile-bar__main { display: flex; min-width: 0; align-items: center; gap: 10px; }
.v15-mobile-bar__toggle {
  width: 40px;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-ink-800) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.v15-mobile-bar__title { min-width: 0; }
.v15-mobile-bar__title strong { display: block; overflow: hidden; color: var(--ui-ink-950); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.v15-mobile-bar__title small { display: block; color: var(--ui-ink-600); font-size: 10px; }
.v15-network {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--ui-success-700);
  background: var(--ui-success-100);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.v15-network::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.v15-network.is-offline { color: var(--ui-danger-700); background: var(--ui-danger-100); }
.v15-drawer-overlay {
  display: none;
  position: fixed;
  z-index: 8998;
  inset: 0;
  background: rgba(5, 24, 24, .48);
  backdrop-filter: blur(2px);
}
.v15-toast-region {
  position: fixed;
  z-index: 10000;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(380px, calc(100vw - 28px));
  gap: 8px;
  pointer-events: none;
}
.v15-toast {
  padding: 12px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  color: var(--ui-ink-800);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--ui-shadow-md);
  font-size: 13px;
  font-weight: 650;
  animation: v15-toast-in .18s ease-out;
}
.v15-toast.is-danger { color: var(--ui-danger-700); border-color: #efc4c0; background: #fff7f6; }

/* Floating module selector */
.apple-system-menu__button {
  right: 18px !important;
  bottom: 18px !important;
  min-height: 44px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: var(--ui-primary-950) !important;
  box-shadow: var(--ui-shadow-md) !important;
}
.apple-system-menu__panel {
  right: 18px !important;
  bottom: 72px !important;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-md) !important;
}
.apple-system-menu__link.is-current { background: var(--ui-primary-100) !important; }

@keyframes v15-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes v15-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  body[data-ui-page="main"] .main { padding-inline: 14px !important; }
  body[data-ui-page="op-irigasi"] .layout { grid-template-columns: 1fr !important; }
  body[data-ui-page="op-irigasi"] .sidebar {
    position: static !important;
    display: block;
    overflow-x: auto;
    padding: 8px !important;
  }
  body[data-ui-page="op-irigasi"] .nav { display: flex !important; min-width: max-content; gap: 6px !important; }
  body[data-ui-page="op-irigasi"] .nav button.active { box-shadow: inset 0 -3px 0 var(--ui-primary-700); }
}

@media (max-width: 900px) {
  .v15-mobile-bar { display: flex; }
  .v15-drawer-overlay { display: block; visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility .18s ease; }
  body.v15-drawer-open .v15-drawer-overlay { visibility: visible; opacity: 1; }

  body[data-has-v15-drawer="true"] .sidebar,
  body[data-has-v15-drawer="true"] .v12-sidebar {
    position: fixed !important;
    z-index: 8999 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 310px) !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    transform: translateX(-105%);
    transition: transform .2s ease !important;
    box-shadow: 18px 0 46px rgba(0, 0, 0, .22) !important;
  }
  body.v15-drawer-open[data-has-v15-drawer="true"] .sidebar,
  body.v15-drawer-open[data-has-v15-drawer="true"] .v12-sidebar { transform: translateX(0); }

  .container, .v12-shell { display: block !important; }
  .main, .v12-main { width: 100% !important; padding: 12px 12px 84px !important; }
  .header, .topbar, .gis-topbar, .v12-topbar { position: static !important; margin-top: 10px !important; }
  body[data-ui-page="main"] .header { top: auto; }
  body[data-ui-page="main"] .map-container,
  body[data-ui-page="main"] #map { min-height: 480px; }
  body[data-ui-page="laporan-masuk"] .shell,
  body[data-ui-page="dashboard-kerusakan"] .shell,
  body[data-ui-page="whatsapp-gateway"] .shell { width: calc(100% - 20px); }
  body[data-ui-page="laporan-masuk"] .detail { position: static; }
  .public-report-topbar { top: 0; border-radius: 0 0 16px 16px !important; }
  .public-user-tabs { top: 68px; }
  .apple-system-menu__button { bottom: 12px !important; right: 12px !important; }
  .apple-system-menu__panel { right: 12px !important; bottom: 66px !important; width: min(390px, calc(100vw - 24px)) !important; }
}

@media (max-width: 640px) {
  :root { --ui-radius-lg: 17px; --ui-radius-xl: 22px; }
  h1 { font-size: clamp(25px, 8vw, 34px) !important; }
  h2 { font-size: clamp(20px, 6vw, 27px) !important; }
  :where(.card, .panel, .section, .stat-card, .summary-card, .report-card, .content-card, .v12-card) { padding: 15px !important; }
  :where(button, .btn, .v12-btn, .primary-btn, .ghost-btn, .back-btn, .satria-btn) { min-height: 44px; }
  .toolbar, .pillbar, .sticky-actions, .actions { align-items: stretch !important; }
  .toolbar > *, .pillbar > *, .sticky-actions > *, .actions > * { max-width: 100%; }
  .pillbar .btn, .sticky-actions .btn, .actions .btn { justify-content: center; }
  body[data-ui-page="op-irigasi"] .wrap { padding: 10px 10px 82px !important; }
  body[data-ui-page="op-irigasi"] .topbar { align-items: flex-start !important; }
  body[data-ui-page="op-irigasi"] .brand-badge { width: 44px; height: 44px; }
  body[data-ui-page="op-irigasi"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body[data-ui-page="op-irigasi"] .card p { font-size: 23px !important; }
  .public-report-shell { width: min(100% - 20px, 1160px) !important; }
  .public-simple-hero { padding: 22px 17px !important; }
  .public-report-topbar { padding-inline: 12px !important; }
  .public-report-inline-tools .btn { padding-inline: 10px !important; }
  .public-report-inline-tools .btn i + * { display: none; }
  .public-user-tabs a { font-size: 11px !important; }
  .public-choice-grid { grid-template-columns: 1fr 1fr !important; }
  .public-choice-grid button { min-height: 104px; padding: 12px 9px !important; }
  body[data-ui-page="login"] .login-page { padding: 10px !important; }
  body[data-ui-page="login"] .login-shell { border-radius: 22px !important; }
  body[data-ui-page="login"] .login-brand { display: none !important; }
  body[data-ui-page="login"] .login-container { padding: 24px 18px !important; }
  .v15-toast-region { right: 10px; bottom: 72px; width: calc(100vw - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .v15-mobile-bar, .v15-drawer-overlay, .v15-toast-region, .apple-system-menu, .v15-skip-link { display: none !important; }
  body { background: #fff !important; }
  :where(.card, .panel, .section, .v12-card) { box-shadow: none !important; break-inside: avoid; }
  thead th { position: static; }
}