/* === CSS Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--neutral-100);
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', sans-serif; }
code, .mono { font-family: 'JetBrains Mono', monospace; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* === CSS Variables === */
:root {
  --primary-900: #0c2d48;
  --primary-700: #145374;
  --primary-500: #2e86ab;
  --primary-300: #5eb1bf;
  --primary-100: #d4eef6;
  --neutral-900: #1a1a2e;
  --neutral-700: #4a4a68;
  --neutral-400: #9e9eb8;
  --neutral-200: #e8e8f0;
  --neutral-100: #f4f4f8;
  --neutral-50:  #fafafc;
  --risk-critical: #dc2626;
  --risk-high:     #ea580c;
  --risk-medium:   #d97706;
  --risk-low:      #16a34a;
  --success: #059669;
  --warning: #d97706;
  --error:   #dc2626;
  --info:    #2563eb;
  --header-h: 56px;
  --sidebar-w: 280px;

  /* Layering.
     `.header` is a flex item of `.app-layout`, and per the flexbox spec z-index
     applies to flex items even at position:static — so `.header` creates a
     stacking context. Everything inside it (including the user dropdown) is
     therefore trapped at the header's level no matter how high its own z-index
     goes. Order these four against each other, not the values nested inside them.
     Detail panel stays above the map controls (z-index 1001). */
  --z-detail-panel: 10000;
  --z-header: 10010;
  --z-modal: 10020;
  --z-toast: 10030;
}

/* === Layout === */
.app-layout {
  display: flex;
  flex-direction: column;
  /* `100dvh` (dynamic viewport height) equals the *actually visible* area on mobile,
     shrinking to account for the browser's address/tool bars. Plain `100vh` measures
     the viewport as if that chrome were hidden, so the layout ran taller than the screen
     and the fixed bottom nav ended up behind the toolbar or off-screen. `100vh` stays as
     the fallback for browsers without `dvh`. */
  height: 100vh;
  height: 100dvh;
}
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--neutral-50);
  border-right: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 100;
}
.main-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.view-panel {
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.view-panel.active { display: flex; flex-direction: column; }

/* === Header === */
.header {
  height: var(--header-h);
  background: var(--primary-900);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 24px;
  z-index: var(--z-header);
  flex-shrink: 0;
}
.header-brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.header-brand span { color: #4ade80; }
.header-tabs {
  display: flex;
  gap: 4px;
  margin-left: 16px;
}
.header-tab {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}
.header-tab:hover { color: #fff; background: rgba(255,255,255,0.1); }
.header-tab.active { color: #fff; background: rgba(255,255,255,0.15); border-bottom: 2px solid #4ade80; }
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
}
.header-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-500);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 13px;
}
.menu-toggle {
  /* Hidden on desktop; the mobile media query switches this to inline-flex. */
  display: none;
  align-items: center; justify-content: center;
  background: none; border: none; color: #fff; font-size: 22px;
  /* A comfortable, reliable touch target. `touch-action: manipulation` drops the
     legacy 300ms tap delay and stops a double-tap-zoom gesture from swallowing the
     first tap; `cursor: pointer` makes the click event fire reliably on iOS Safari. */
  min-width: 44px; min-height: 44px; padding: 4px 8px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* === Sidebar === */
.sidebar-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-200);
}
.sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-400);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.sidebar-section-title .chevron { transition: transform 0.2s; font-size: 14px; }
.sidebar-section-title.collapsed .chevron { transform: rotate(-90deg); }
.sidebar-section-content.collapsed { display: none; }
.search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--primary-500); }
.filter-group { margin-bottom: 8px; }
.filter-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-700);
  padding: 3px 0;
  cursor: pointer;
}
.filter-group label input[type="checkbox"] { accent-color: var(--primary-700); }
.filter-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
}
.sidebar-results {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.sidebar-app-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--neutral-200);
  cursor: pointer;
  transition: background 0.1s;
}
.sidebar-app-item:hover { background: var(--primary-100); }
.sidebar-app-item .app-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--neutral-400); }
.sidebar-app-item .app-title { font-size: 13px; font-weight: 500; margin: 2px 0; }
.sidebar-app-item .app-meta { font-size: 11px; color: var(--neutral-700); display: flex; gap: 8px; align-items: center; }

/* === Status Badges === */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.risk-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

/* === Map Styles === */
#map-container { flex: 1; position: relative; min-height: 0; }
#map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#map3d { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; }
.map-mode-toggle {
  position: absolute; top: 10px; left: 10px; z-index: 1001;
  display: flex; background: #fff; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden;
}
.map-mode-btn {
  padding: 8px 14px; border: none; background: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--neutral-700); transition: all 0.15s;
  border-right: 1px solid var(--neutral-200);
}
.map-mode-btn:last-child { border-right: none; }
.map-mode-btn.active { background: var(--primary-700); color: #fff; }
.map-mode-btn:hover:not(.active) { background: var(--primary-100); }
.map3d-legend {
  position: absolute; bottom: 30px; left: 10px; z-index: 120;
  background: rgba(255,255,255,0.92); border-radius: 8px;
  padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  font-size: 11px; display: none;
}
.map3d-legend.show { display: block; }
.map3d-layers {
  position: absolute; top: 10px; right: 10px; z-index: 1001;
  background: rgba(255,255,255,0.95); border-radius: 8px;
  padding: 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font-size: 11px; display: none;
}
.map3d-layers.show { display: block; }
.map3d-layers label {
  display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; font-size: 12px;
}
.map3d-layers h5 { font-size: 11px; color: var(--neutral-400); margin: 6px 0 4px; text-transform: uppercase; }
/* Offset MapLibre nav control below 2D/3D toggle */
#map3d .maplibregl-ctrl-top-left { top: 46px; }
.legend-item { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; }
.leaflet-top.leaflet-left .leaflet-control-zoom { margin-top: 44px; }
.leaflet-popup-content-wrapper { border-radius: 8px !important; }
.leaflet-popup-content { margin: 12px 16px !important; font-family: 'DM Sans', sans-serif; font-size: 13px; }
.popup-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.popup-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px; }
.popup-row .label { color: var(--neutral-400); }

/* === Detail Panel === */
.detail-panel {
  position: fixed;
  top: var(--header-h); right: -420px; bottom: 0;
  width: 400px;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  z-index: var(--z-detail-panel);
  overflow-y: auto;
  transition: right 0.3s ease;
  padding: 20px;
}
.detail-panel.open { right: 0 !important; }
.detail-panel-close {
  background: none; border: none; font-size: 20px; color: var(--neutral-400);
  position: absolute; top: 12px; right: 16px;
}
.detail-header { margin-bottom: 16px; }
.detail-header .app-id { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--neutral-400); }
.detail-header h3 { font-size: 18px; margin: 4px 0 8px; }
.detail-section { margin-bottom: 20px; }
.detail-section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--neutral-400);
  border-bottom: 1px solid var(--neutral-200);
  padding-bottom: 6px; margin-bottom: 10px;
}
.detail-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 13px;
}
.detail-row .label { color: var(--neutral-700); }
.detail-row .value { font-weight: 500; text-align: right; }
.detail-doc {
  padding: 8px 0;
  border-bottom: 1px solid var(--neutral-200);
  font-size: 13px;
}
.detail-doc .doc-name { font-weight: 500; }
.detail-doc .doc-meta { font-size: 11px; color: var(--neutral-400); }
.detail-audit {
  padding: 8px 0;
  border-bottom: 1px solid var(--neutral-200);
  font-size: 13px;
}
.detail-audit .audit-header { display: flex; justify-content: space-between; font-weight: 500; }
.detail-audit .audit-meta { font-size: 11px; color: var(--neutral-400); margin-top: 2px; }
.detail-audit .audit-findings { font-size: 12px; color: var(--neutral-700); margin-top: 4px; font-style: italic; }
.detail-timeline {
  position: relative;
  padding-left: 20px;
}
.timeline-item {
  position: relative;
  padding-bottom: 12px;
  font-size: 12px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -20px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary-500);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--primary-300);
}
.timeline-item.pending::before { background: var(--neutral-200); box-shadow: 0 0 0 2px var(--neutral-200); }
.timeline-item::after {
  content: '';
  position: absolute;
  left: -16px; top: 16px;
  width: 2px; height: calc(100% - 8px);
  background: var(--neutral-200);
}
.timeline-item:last-child::after { display: none; }
.timeline-item .tl-label { font-weight: 500; }
.timeline-item .tl-date { color: var(--neutral-400); }
.detail-actions {
  display: flex; gap: 8px; margin-top: 16px;
}

/* === Buttons === */
.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary { background: var(--primary-700); color: #fff; }
.btn-primary:hover { background: var(--primary-500); }
.btn-secondary { background: #fff; color: var(--primary-700); border: 1px solid var(--primary-700); }
.btn-secondary:hover { background: var(--primary-100); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-ghost { background: none; color: var(--primary-700); }
.btn-ghost:hover { background: var(--primary-100); }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* === Table Styles === */
.data-table-wrapper { padding: 20px; overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.table-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.data-table {
  width: 100%;
  /* Ten register columns cannot compress into a phone viewport legibly. A floor width
     keeps every column reachable and lets .data-table-wrapper scroll sideways instead
     of silently clipping PIC, status and the action buttons. Invisible on desktop,
     where the content area is already wider than this. */
  min-width: 880px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.data-table th {
  background: var(--neutral-100);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: var(--neutral-700);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  /* Keep the header in view while the (potentially tall, sideways-scrolling) table
     body scrolls vertically within .data-table-wrapper. */
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table th:hover { color: var(--primary-700); }
.data-table th .sort-icon { font-size: 10px; margin-left: 4px; }
.data-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-top: 1px solid var(--neutral-200);
}
.data-table tr:hover td { background: var(--primary-100); }
.data-table .actions-cell { display: flex; gap: 4px; }
.table-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12px; color: var(--neutral-700);
}
.table-pagination .page-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.page-btn {
  padding: 4px 10px; border: 1px solid var(--neutral-200);
  border-radius: 4px; background: #fff; font-size: 12px; cursor: pointer;
}
.page-btn.active { background: var(--primary-700); color: #fff; border-color: var(--primary-700); }

/* === Dashboard === */
.dashboard-wrapper { padding: 20px; overflow-y: auto; flex: 1; }
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s;
}
.kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.kpi-card .kpi-label { font-size: 12px; color: var(--neutral-400); font-weight: 500; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; margin: 4px 0; font-family: 'Plus Jakarta Sans', sans-serif; }
.kpi-card .kpi-sub { font-size: 11px; color: var(--neutral-400); }
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.chart-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.chart-card h4 { font-size: 14px; margin-bottom: 12px; }

/* === Cards === */
.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

/* === Modal === */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--neutral-200);
}
.modal-header h3 { font-size: 16px; }
.modal-close { background: none; border: none; font-size: 20px; color: var(--neutral-400); }
.modal-body { padding: 20px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--neutral-200);
}
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; color: var(--neutral-700); }
.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.form-control:focus { border-color: var(--primary-500); }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* === Field Audit === */
.field-audit-wrapper {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; flex: 1;
}
.audit-phone-frame {
  width: 380px;
  max-width: 100%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  overflow: hidden;
  border: 3px solid var(--neutral-200);
}
.audit-header-bar {
  background: var(--primary-900);
  color: #fff;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}
.audit-header-bar .gps-text { font-size: 11px; font-weight: 400; opacity: 0.7; margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
#audit-map { height: 200px; width: 100%; }
.audit-nearest {
  padding: 12px 16px;
  background: var(--primary-100);
  font-size: 13px;
}
.audit-nearest .nearest-title { font-weight: 600; }
.audit-nearest .nearest-meta { font-size: 11px; color: var(--neutral-700); }
.audit-nearest .nearest-actions { display: flex; gap: 8px; margin-top: 8px; }
.audit-form-area { padding: 16px; }
.audit-form-area h4 { font-size: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--neutral-200); padding-bottom: 6px; }
.radio-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.radio-group label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.photo-placeholder {
  display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap;
}
.photo-thumb {
  width: 56px; height: 56px;
  background: var(--neutral-200);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--neutral-400);
}

/* === Reports === */
.reports-wrapper { padding: 20px; overflow-y: auto; flex: 1; }
.report-selector { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.report-btn {
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.report-btn:hover, .report-btn.active { border-color: var(--primary-500); background: var(--primary-100); }
/* Contain a wide report table within the card and scroll it there, rather than letting
   it spill past the card's edge. The print query below resets this to visible so the
   whole table prints. */
.report-content { background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow-x: auto; }
.report-content h3 { font-size: 18px; margin-bottom: 16px; }
.report-section { margin-bottom: 20px; }
.report-section h4 { font-size: 15px; margin-bottom: 8px; color: var(--primary-700); }
.report-table {
  width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 12px;
}
/* Horizontal-scroll container for wide tables inside a fixed-width card. Contains the
   overflow within the card rather than letting it push the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Keep the eight-column catchment table at a legible width and let .table-scroll handle
   the overflow; invisible on desktop, where the card is already wider than this. */
#catchment-detail-table { min-width: 680px; }
.report-table th {
  background: var(--neutral-100); padding: 8px 10px; text-align: left; font-weight: 600;
}
.report-table td { padding: 8px 10px; border-top: 1px solid var(--neutral-200); }

/* === Bottom Nav (mobile) === */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--neutral-200);
  z-index: 200;
  /* Pad past the home indicator / gesture bar on notched phones so the last row of
     labels is not clipped by it. env() is 0 where there is no inset. */
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
}
.bottom-nav-inner {
  display: flex; justify-content: space-around;
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0;
  font-size: 10px;
  color: var(--neutral-400);
  background: none; border: none;
  cursor: pointer;
}
.bottom-nav-item .nav-icon { font-size: 20px; margin-bottom: 2px; }
.bottom-nav-item.active { color: var(--primary-700); }

/* === Overlay === */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 99;
}

/* === Responsive === */
@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -100%;
    top: var(--header-h);
    width: 80%;
    height: calc(100vh - var(--header-h));
    /* Above the Leaflet map. Leaflet's panes and controls stack up to ~1001, and
       `.main-content` (position:relative, no z-index) does not create its own stacking
       context — so a sidebar at the old z-index:100 opened *behind* the map on the
       default Map view, which read as "the hamburger does nothing". Sit above the map
       but below the header (10010) so the hamburger stays reachable to close it. */
    z-index: 9001;
    transition: left 0.3s ease;
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay { z-index: 9000; }
  .sidebar-overlay.open { display: block; }
  .header-tabs { display: none; }
  .bottom-nav { display: block; }
  .menu-toggle { display: inline-flex; }
  .main-content { margin-left: 0; }
  .kpi-row { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
  .detail-panel { width: 100%; right: -100%; }
  .audit-phone-frame { border-radius: 0; border: none; width: 100%; }
  /* Clear the fixed bottom nav (its height plus the safe-area inset) so the last item
     of a scrolling view is not hidden underneath it. */
  .app-body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  /* Reclaim horizontal space for the sideways-scrolling register table. */
  .data-table-wrapper { padding: 12px; }
  .reports-wrapper, .dashboard-wrapper { padding: 12px; }
  /* A one-time hint that the table scrolls sideways, since not every column fits. */
  .data-table-wrapper::before {
    content: "\2194  scroll sideways for more columns";
    display: block;
    font-size: 11px; color: var(--neutral-400);
    margin-bottom: 8px;
  }
}

/* === Print === */
@media print {
  .sidebar, .header, .bottom-nav, .no-print, .detail-panel { display: none !important; }
  .main-content { margin: 0; width: 100%; overflow: visible !important; height: auto !important; }
  .app-body { overflow: visible !important; height: auto !important; display: block !important; }
  .view-panel { overflow: visible !important; height: auto !important; }
  .reports-wrapper { overflow: visible !important; height: auto !important; }
  .report-content { overflow: visible !important; }
  .card, .chart-card, .kpi-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
  body { font-size: 11pt; color: #000; overflow: visible !important; height: auto !important; }
  html { overflow: visible !important; height: auto !important; }
  .leaflet-container { height: 400px !important; }
  .tech-review { font-size: 9pt; }
  .tech-review .tr-section { break-inside: avoid; margin-bottom: 8px; }
  .tech-review .report-table td, .tech-review .report-table th { padding: 4px 6px; }
}

/* === Animations === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.2s ease; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* === Notification Toast === */
.toast {
  position: fixed; bottom: 80px; right: 20px;
  background: var(--primary-900); color: #fff;
  padding: 12px 20px; border-radius: 8px;
  font-size: 13px; z-index: var(--z-toast);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transform: translateY(100px); opacity: 0;
  transition: all 0.3s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* === Data Management === */
.data-preview-table {
  width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px;
}
.data-preview-table th {
  background: var(--neutral-100); padding: 4px 8px; text-align: left; font-weight: 600;
}
.data-preview-table td {
  padding: 4px 8px; border-top: 1px solid var(--neutral-200); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-ok { color: var(--success); }
.log-warn { color: var(--warning); }
.log-err { color: var(--error); }
.log-info { color: var(--info); }

/* === Auth: login page === */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: auto;
  background: linear-gradient(135deg, var(--primary-900), var(--primary-700));
}
.login-card {
  width: 100%;
  max-width: 380px;
  margin: 24px;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.login-brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-900);
  letter-spacing: -0.5px;
}
.login-brand span { color: #4ade80; }
.login-sub {
  color: var(--neutral-400);
  font-size: 13px;
  margin-bottom: 24px;
}
.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--error);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--neutral-700);
  margin-bottom: 18px;
}
.login-submit { width: 100%; justify-content: center; padding: 10px; }
.login-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--neutral-400);
}

/* === Auth: header user menu === */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 8px;
  color: inherit;
  user-select: none;   /* a double-click should toggle, not select the name */
}
.user-menu-btn:hover { background: rgba(255,255,255,0.1); }
.user-menu-name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}
.user-menu-name small { font-size: 11px; color: rgba(255,255,255,0.55); }
.user-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  overflow: hidden;
  /* Local to the header's stacking context — see the layering note in :root. */
  z-index: 10;
}
.user-menu-dropdown.open { display: block; }
.user-menu-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-200);
  color: var(--neutral-900);
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--neutral-900);
}
.user-menu-item:hover { background: var(--neutral-100); }
.user-menu-danger { color: var(--error); }

/* === Auth: read-only role ===
   Viewers do not see write affordances. Presentation only — applications are
   held in localStorage, so this is not a server-enforced boundary. */
.role-viewer .write-action { display: none !important; }