/* Compatibility layer. Keep existing IDs/classes, layout and vendor geometry. */
html:root {
  --font-family: var(--eco-font);
  --primary-color: var(--eco-blue);
  --primary-dark: var(--eco-blue-hover);
  --primary-light: var(--eco-blue);
  --primary-gradient: var(--eco-blue);
  --success-color: var(--eco-closed);
  --danger-color: var(--eco-urgent);
  --warning-color: var(--eco-high);
  --info-color: var(--eco-verified);
  --bg-color: var(--eco-bg);
  --card-bg: var(--eco-surface);
  --text-color: var(--eco-text);
  --text-muted: var(--eco-muted);
  --border-color: var(--eco-border);
  --shadow-sm: var(--eco-shadow-1);
  --shadow-md: var(--eco-shadow-2);
  --shadow-lg: var(--eco-shadow-3);
  --shadow-xl: var(--eco-shadow-3);
  --radius-sm: var(--eco-radius-control);
  --radius-md: var(--eco-radius-card);
  --radius-lg: var(--eco-radius-card);
  --radius-xl: var(--eco-radius-card);
  --transition-fast: var(--eco-motion);
  --transition-base: var(--eco-motion);
  --transition-slow: var(--eco-motion);
  --ink: var(--eco-text);
  --muted: var(--eco-muted);
  --line: var(--eco-border);
  --blue: var(--eco-blue);
  --red: var(--eco-urgent);
  --teal: var(--eco-responding);
  --bs-body-font-family: var(--eco-font);
  --bs-body-color: var(--eco-text);
  --bs-body-bg: var(--eco-bg);
  --bs-secondary-color: var(--eco-muted);
  --bs-border-color: var(--eco-border);
  --bs-primary: var(--eco-blue);
  --bs-link-color: var(--eco-blue);
  --bs-link-hover-color: var(--eco-blue-hover);
  --bs-tertiary-bg: var(--eco-surface-alt);
}
html body, html .analytics-shell, html .leaflet-container, html .leaflet-popup-content {
  font-family: var(--eco-font);
  letter-spacing: 0;
}
html body { color: var(--eco-text); background-color: var(--eco-bg); }
html :where(button, input, select, textarea) { font-family: var(--eco-font); }
html :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--eco-focus) !important;
  outline-offset: 3px;
}
html :where(button, a, input, select, textarea) { touch-action: manipulation; }
html :where([tabindex="-1"], input, select, textarea) { scroll-margin-block: 96px; }
html :where(.btn, .icon-btn, .icon-button, .eco-theme-toggle) { min-height: 44px !important; }
html .btn { min-width: 44px; }
html :where(.icon-btn, .icon-button) { min-width: 44px !important; }
html :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  border-color: var(--eco-control-border);
  border-radius: var(--eco-radius-control);
  color: var(--eco-text);
  background-color: var(--eco-surface);
}
html :where(.form-control, .form-select) { min-height: 44px; }
html :where(input, textarea)::placeholder { color: var(--eco-muted); opacity: 1; }
html :where(.card, .modal-content, .dropdown-menu, .report-card) { border-radius: var(--eco-radius-card); }
html :where(.card, .modal-content, .dropdown-menu, .report-card, .swal2-popup) {
  background-color: var(--eco-surface); color: var(--eco-text); border-color: var(--eco-border);
}
html :is(.btn-primary, .analysis-primary, button.primary) {
  background: var(--eco-blue); border-color: var(--eco-blue); color: #fff;
}
html[data-theme=dark] :is(.btn-primary, .analysis-primary, button.primary) { color: #142637; }
html :is(.btn-primary, .analysis-primary, button.primary):hover { background: var(--eco-blue-hover); border-color: var(--eco-blue-hover); }
html :where(.btn-danger, .report-button, .hotline-button) { background: #b52035; border-color: #b52035; color: #fff; }
html :where(.btn-outline-primary) { color: var(--eco-blue); border-color: var(--eco-blue); }
html :where(.text-muted, .muted, .analysis-note) { color: var(--eco-muted) !important; }
html :where(.stat-value, .metric-value, .command-metrics strong, .map-counts strong, time, code) { font-variant-numeric: tabular-nums; }

/* Status text stays visible; icons supplement it rather than replacing it. */
html :is(.pill, .eco-status, .priority-badge, .status-badge) {
  --eco-pill-text: var(--eco-archived); --eco-pill-bg: var(--eco-archived-bg);
  color: var(--eco-pill-text); background: var(--eco-pill-bg);
  border: 1px solid currentColor; border-radius: var(--eco-radius-pill);
  font-weight: 600; line-height: 1.5;
}
html :is(.pill, .eco-status, .priority-badge, .status-badge).urgent { --eco-pill-text: var(--eco-urgent); --eco-pill-bg: var(--eco-urgent-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge).high { --eco-pill-text: var(--eco-high); --eco-pill-bg: var(--eco-high-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge).medium,
html :is(.pill, .eco-status, .priority-badge, .status-badge).pending { --eco-pill-text: var(--eco-pending); --eco-pill-bg: var(--eco-pending-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge).low { --eco-pill-text: var(--eco-low); --eco-pill-bg: var(--eco-low-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge).verified { --eco-pill-text: var(--eco-verified); --eco-pill-bg: var(--eco-verified-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge).responding { --eco-pill-text: var(--eco-responding); --eco-pill-bg: var(--eco-responding-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge).closed,
html :is(.pill, .eco-status, .priority-badge, .status-badge).resolved,
html :is(.pill, .eco-status, .priority-badge, .status-badge).confirmed { --eco-pill-text: var(--eco-closed); --eco-pill-bg: var(--eco-closed-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge).rejected { --eco-pill-text: var(--eco-rejected); --eco-pill-bg: var(--eco-rejected-bg); }
html :is(.pill, .eco-status, .priority-badge, .status-badge):is(.urgent, .high, .medium, .low, .pending, .verified, .responding, .closed, .resolved, .confirmed, .rejected, .archived) { color: var(--eco-pill-text); background: var(--eco-pill-bg); }
.eco-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 12px; }
.pill:is(.urgent, .high, .medium, .low, .pending, .verified, .responding, .closed, .resolved, .rejected, .archived):not(:has(i))::before {
  font-family: inherit !important; font-style: normal; margin-right: 4px; content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--eco-status-icon) center/contain no-repeat; mask: var(--eco-status-icon) center/contain no-repeat;
}
.pill:is(.urgent, .high) { --eco-status-icon: var(--eco-lucide-triangle-alert); }
.pill:is(.medium, .low) { --eco-status-icon: var(--eco-lucide-flag); }
.pill.pending { --eco-status-icon: var(--eco-lucide-clock-3); }
.pill.verified { --eco-status-icon: var(--eco-lucide-shield-check); }
.pill.responding { --eco-status-icon: var(--eco-lucide-truck); }
.pill:is(.closed, .resolved) { --eco-status-icon: var(--eco-lucide-circle-check); }
.pill.rejected { --eco-status-icon: var(--eco-lucide-circle-x); }
.pill.archived { --eco-status-icon: var(--eco-lucide-archive); }
.eco-skeleton { min-height: 16px; border-radius: 4px; background: var(--eco-surface-alt); animation: eco-breathe 1.4s ease-in-out infinite alternate; }
.eco-empty { padding: 24px 16px; color: var(--eco-muted); text-align: center; }
.eco-empty > i { display: block; margin-bottom: 8px; font-size: 24px; }
.eco-filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; padding-block: 16px; border-block: 1px solid var(--eco-border); }
.eco-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.eco-page-header h1 { font-size: 24px; line-height: 1.3; }
.eco-table-wrap { overflow: auto; }
.eco-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.eco-table :where(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--eco-border); text-align: left; }
.eco-table th { position: sticky; top: 0; z-index: 1; background: var(--eco-surface-alt); }
.eco-table tbody tr:hover { background: var(--eco-surface-alt); }
.eco-table[data-density=compact] :where(th, td) { padding-block: 8px; }
html :where(.pagination .page-link) { min-width: 44px; min-height: 44px; background: var(--eco-surface); color: var(--eco-blue); border-color: var(--eco-border); }
html .pagination .active > .page-link { background: var(--eco-blue); border-color: var(--eco-blue); color: #fff; }
html[data-theme=dark] .pagination .active > .page-link { color: #142637; }
html .pagination .disabled > .page-link { background: var(--eco-surface-alt); color: var(--eco-muted); }
html .swal2-popup { font-family: var(--eco-font); border-radius: 8px; border: 1px solid var(--eco-border); }
html .swal2-title, html .swal2-html-container { color: var(--eco-text); }
html .swal2-actions button { min-height: 44px; border-radius: 6px; }
html .leaflet-popup-content-wrapper, html .leaflet-popup-tip { background: var(--eco-surface); color: var(--eco-text); }
html .leaflet-control-layers, html .leaflet-bar a { background: var(--eco-surface); color: var(--eco-text); }
html .leaflet-bar a { min-width: 44px; min-height: 44px; line-height: 44px; }
html .leaflet-popup-close-button { min-width: 44px; min-height: 44px; line-height: 40px !important; color: var(--eco-muted) !important; }

/* Override fixed light surfaces without changing dimensions or positioning. */
html[data-theme=dark] :where(.top-navbar, .card-header, .card-body, .modal-header, .modal-body, .modal-footer, .report-header, .report-shell, #incidentForm, .report-progress, .queue-pane, .command-metrics, .detail-pane, .dialog-header, .dialog-body, .dialog-footer, .map-layers, .map-caption, .floating-panel, .map-alert, dialog, .mobile-commands, .analytics-shell, .analysis-canvas, .analysis-kpis, .analysis-empty, .registration-card, .login-card, .login-right, .auth-card, .input-group-text) {
  background: var(--eco-surface) !important; color: var(--eco-text) !important; border-color: var(--eco-border) !important;
}
html[data-theme=dark] :where(.queue-item, .map-brand, .connection-status, .icon-button, button:not(.primary):not(.btn-primary):not(.btn-danger):not(.report-button):not(.hotline-button):not(.eco-theme-toggle)) {
  background-color: var(--eco-surface); color: var(--eco-text); border-color: var(--eco-border);
}
html[data-theme=dark] :where(.queue-item:hover, .queue-item[aria-current=true], .dropdown-item:hover) { background-color: var(--eco-surface-alt); }
html[data-theme=dark] :where(.filter-card, .stats-card, .stat-card, .citizen-stat-card, .citizen-toolbar, .citizen-table-card, .filter-section, .filter-container, .table-container, .table-card) { background: var(--eco-surface) !important; color: var(--eco-text) !important; border-color: var(--eco-border) !important; }
html[data-theme=dark] :is(.citizen-stat-card strong, .citizen-name) { color: var(--eco-text); }
html[data-theme=dark] .citizen-stat-card span { color: var(--eco-muted); }
html[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { color: var(--eco-text) !important; background-color: var(--eco-surface) !important; }
html[data-theme=dark] :is(.field-note, .report-progress li, .report-progress li.active) { color: var(--eco-muted); }
html[data-theme=dark] :is(.pending-link, .report-progress li.active) { color: var(--eco-blue); }
html[data-theme=dark] #connectionNotice { color: var(--eco-muted); }
html[data-theme=dark] .report-progress li span { background: var(--eco-surface-alt); color: var(--eco-text); }
html[data-theme=dark] .report-progress li.active span { background: var(--eco-blue); color: #142637; }
html[data-theme=dark] :where(.empty-state h2, .queue-pane summary, .detail-body summary, .urgent-metric strong) { color: var(--eco-text); }
html[data-theme=dark] .urgent-metric strong { color: var(--eco-urgent); }
html[data-theme=dark] :where(.dropdown-item, .analytics-shell h1, .analytics-shell h2, .analytics-shell h3) { color: var(--eco-text); }
html[data-theme=dark] :where(.login-right h3, .login-right label, .login-right p, .form-header h3, .form-header p, .form-check-label) { color: var(--eco-text); }
html[data-theme=dark] :where(.table, .analytics-shell table, .analytics-shell th, .analytics-shell td) { --bs-table-bg: var(--eco-surface); --bs-table-color: var(--eco-text); --bs-table-border-color: var(--eco-border); background-color: var(--eco-surface); color: var(--eco-text); border-color: var(--eco-border); }
html[data-theme=dark] :where(.table thead th, .analytics-shell th) { background: var(--eco-surface-alt); }
html[data-theme=dark] :where(.bg-white, .bg-light) { background-color: var(--eco-surface) !important; }
html[data-theme=dark] .text-dark { color: var(--eco-text) !important; }
html[data-theme=dark] :where(.attention-note, .offline-warning, .review-warning, .connection-strip.stale) { background: var(--eco-medium-bg); color: var(--eco-medium); }
html[data-theme=dark] .connection-strip:not(.stale) { background: var(--eco-closed-bg); color: var(--eco-closed); }
html[data-theme=dark] .map-bottom-actions button:not(.report-button) { background: var(--eco-surface); color: var(--eco-text); }
html[data-theme=dark] .eco-toast { background: var(--eco-surface); color: var(--eco-text); }
html[data-theme=dark] :where(.eco-toast-title, .eco-toast-message, .eco-toast-close) { color: var(--eco-text); }
html .eco-toast-close { min-width: 44px; min-height: 44px; }
html .eco-toast { min-height: 80px; grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 12px; padding: 16px; border: 1px solid var(--eco-border); box-shadow: var(--eco-shadow-2); }
html .eco-toast::before { width: 4px; }
html .eco-toast-title { font-size: 16px; line-height: 1.5; }
html .eco-toast-message { font-size: 14px; line-height: 1.5; font-weight: 400; }
html .eco-toast-success { --eco-toast-color: #176b3d; }
html .eco-toast-error { --eco-toast-color: #b52035; }
html .eco-toast-edit { --eco-toast-color: #075bc4; }
html .eco-toast-warning { --eco-toast-color: #805600; }
@keyframes eco-breathe { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  html[data-theme] { color-scheme: light; --eco-bg: #fff; --eco-surface: #fff; --eco-surface-alt: #f1f3f5; --eco-text: #172e43; --eco-muted: #526579; --eco-border: #ccd7e1; }
  .eco-theme-toggle { display: none !important; }
}