:root {
  --sos-brand-green: #8cc63e;
  --sos-brand-yellow: #fff100;
  --sos-brand-blue: #0071bb;
  --sos-brand-black: #000000;
  --ui-blue: #0071bb;
  --ui-blue-hover: #005b96;
}

/* ===== Roboto global final override ===== */
html, body, button, input, select, textarea, option, table, th, td, a, label, summary, details,
.leaflet-container, .leaflet-control, .leaflet-popup-content, .leaflet-popup-content-wrapper, .leaflet-tooltip {
  font-family: 'Roboto', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* User theme: dark mode overrides */
body.theme-dark,
body.theme-system {
  color-scheme: light;
}
body.theme-dark {
  --bg: #0f172a;
  --panel: #111827;
  --line: #334155;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --blue: #60a5fa;
  --blue2: #3b82f6;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
body.theme-dark #topbar,
body.theme-dark #sidebar,
body.theme-dark .panel,
body.theme-dark .module-box,
body.theme-dark .utility-panel,
body.theme-dark .action-card,
body.theme-dark .account-dropdown,
body.theme-dark .leaflet-control,
body.theme-dark .leaflet-control-layers,
body.theme-dark .leaflet-popup-content-wrapper,
body.theme-dark .leaflet-popup-tip {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark button.icon-btn {
  background: #0b1220 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.theme-dark .brand h1,
body.theme-dark .user-name,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark label,
body.theme-dark .leaflet-control-layers label {
  color: var(--text) !important;
}
body.theme-dark .brand small,
body.theme-dark .user-role,
body.theme-dark .hint,
body.theme-dark .muted,
body.theme-dark small {
  color: var(--muted) !important;
}
body.theme-dark .account-dropdown a {
  color: var(--text) !important;
}
body.theme-dark .account-dropdown a.danger {
  color: #fca5a5 !important;
}

/* =========================================================
   DARK THEME CONTRAST FIX - bản đồ, sidebar, popup, admin
   ========================================================= */
body.theme-dark {
  color-scheme: dark;
  background: var(--bg) !important;
  color: var(--text) !important;
}
body.theme-dark,
body.theme-dark #app-container,
body.theme-dark #map-wrap {
  background: var(--bg) !important;
}

/* Sidebar/map cards: tránh chữ trắng trên nền trắng */
body.theme-dark .sidebar-inner,
body.theme-dark .panel,
body.theme-dark .module-box,
body.theme-dark .utility-panel {
  background: transparent !important;
  color: var(--text) !important;
}
body.theme-dark .layer-item,
body.theme-dark .result-item,
body.theme-dark .info-card,
body.theme-dark .mini-summary,
body.theme-dark .locked-box,
body.theme-dark .mode-tool-list > div,
body.theme-dark .nearest-item,
body.theme-dark .nearest-panel-item,
body.theme-dark .inventory-panel,
body.theme-dark .nearest-panel,
body.theme-dark .tram-staff-item,
body.theme-dark .tram-unit-list div,
body.theme-dark .nearest-distance,
body.theme-dark .inventory-unit-grid div,
body.theme-dark .inventory-kpi,
body.theme-dark .nearest-panel-summary div {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
body.theme-dark .info-card b,
body.theme-dark .locked-box b,
body.theme-dark .panel h3,
body.theme-dark .sidebar-title,
body.theme-dark .popup-title,
body.theme-dark .tram-section h4,
body.theme-dark .tram-photo-details summary,
body.theme-dark .tram-details summary {
  color: #93c5fd !important;
}
body.theme-dark .hint,
body.theme-dark .locked-box,
body.theme-dark .result-item small,
body.theme-dark .tram-empty,
body.theme-dark .tram-note,
body.theme-dark .tram-staff-text,
body.theme-dark .tram-sub,
body.theme-dark .inventory-kpi span,
body.theme-dark .nearest-panel-summary span,
body.theme-dark .nearest-info small,
body.theme-dark .nearest-distance span {
  color: #cbd5e1 !important;
}
body.theme-dark .layer-group-container {
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
  border-color: #334155 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
}
body.theme-dark .layer-group-title {
  background: #1f2937 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
  border-left-color: #60a5fa !important;
}
body.theme-dark .layer-group-title:hover {
  background: #1e3a8a !important;
  border-color: #60a5fa !important;
}
body.theme-dark .layer-group-count {
  background: #0f172a !important;
  color: #bfdbfe !important;
}
body.theme-dark .layer-group-chevron {
  background: #0f172a !important;
  color: #bfdbfe !important;
  box-shadow: inset 0 0 0 1px #334155 !important;
}
body.theme-dark .layer-group-title:hover .layer-group-chevron {
  background: #60a5fa !important;
  color: #0f172a !important;
}
body.theme-dark .layer-item:hover,
body.theme-dark .layer-item.is-active {
  background: #1e293b !important;
  border-color: #60a5fa !important;
}
body.theme-dark .layer-item.is-active {
  box-shadow: inset 3px 0 0 #60a5fa !important;
}
body.theme-dark .layer-item-empty {
  color: #cbd5e1 !important;
}
body.theme-dark .layer-section-title {
  color: #bfdbfe !important;
}
body.theme-dark .layer-section-title::before {
  background: #60a5fa !important;
}

/* Checkbox/risk filter: giữ màu nhận diện nhưng tăng tương phản */
body.theme-dark .checkbox-group label {
  color: #e5e7eb !important;
}
body.theme-dark .checkbox-group label.risk-red {
  background: rgba(127, 29, 29, 0.9) !important;
  color: #fecaca !important;
  padding: 4px 6px;
}
body.theme-dark .checkbox-group label.risk-orange {
  background: rgba(124, 45, 18, 0.9) !important;
  color: #fed7aa !important;
  padding: 4px 6px;
}
body.theme-dark .checkbox-group label.risk-yellow {
  background: rgba(113, 63, 18, 0.9) !important;
  color: #fef08a !important;
  padding: 4px 6px;
}
body.theme-dark .checkbox-group label.risk-green {
  background: rgba(20, 83, 45, 0.9) !important;
  color: #bbf7d0 !important;
  padding: 4px 6px;
}
body.theme-dark .checkbox-group label.risk-unknown {
  background: #1f2937 !important;
  color: #e5e7eb !important;
  padding: 4px 6px;
}

/* Form controls + disabled buttons trong sidebar */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .filter-select,
body.theme-dark .btn-grid button,
body.theme-dark .module-btn,
body.theme-dark .mode-btn,
body.theme-dark .mode-switch-btn,
body.theme-dark .business-mode-btn,
body.theme-dark [data-mode-btn] {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #94a3b8 !important;
}
body.theme-dark button:disabled,
body.theme-dark input:disabled,
body.theme-dark select:disabled,
body.theme-dark textarea:disabled,
body.theme-dark .btn-grid button:disabled {
  background: #1f2937 !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
body.theme-dark .btn-grid button.active,
body.theme-dark .btn-grid button:hover:not(:disabled),
body.theme-dark .module-btn:hover,
body.theme-dark .module-btn.active,
body.theme-dark .module-btn[aria-pressed="true"] {
  background: #1e3a8a !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
}
body.theme-dark body[data-module-mode="incident"] .module-btn.active,
body.theme-dark body[data-module-mode="recovery"] .module-btn.active {
  color: #ffffff !important;
}

/* Topbar/account menu */
body.theme-dark .top-mode-switcher {
  background: #0b1220 !important;
  border-color: #334155 !important;
}
body.theme-dark .top-mode-btn {
  background: #111827 !important;
  color: #bfdbfe !important;
}
body.theme-dark .top-mode-btn.active,
body.theme-dark .top-mode-btn:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}
body.theme-dark .account-dropdown a:hover,
body.theme-dark .account-dropdown a[aria-current="page"] {
  background: #1e293b !important;
  color: #bfdbfe !important;
}
body.theme-dark .account-dropdown a.danger:hover {
  background: #7f1d1d !important;
  color: #fecaca !important;
}

/* Leaflet controls, legend, attribution */
body.theme-dark .legend,
body.theme-dark .leaflet-control,
body.theme-dark .leaflet-control-layers,
body.theme-dark .leaflet-bar a,
body.theme-dark .leaflet-control-attribution {
  background: rgba(17, 24, 39, 0.96) !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
body.theme-dark .legend h4,
body.theme-dark .legend div,
body.theme-dark .leaflet-control-layers label,
body.theme-dark .leaflet-control-attribution a {
  color: #e5e7eb !important;
}
body.theme-dark .map-toolbar button,
body.theme-dark .mobile-menu-btn {
  background: #111827 !important;
  color: #bfdbfe !important;
  border-color: #334155 !important;
}

/* Popup/table content */
body.theme-dark .leaflet-popup-content-wrapper,
body.theme-dark .leaflet-popup-tip,
body.theme-dark .dnc-popup,
body.theme-dark .dnc-section,
body.theme-dark .dnc-popup-header,
body.theme-dark .dnc-table th,
body.theme-dark .dnc-table td,
body.theme-dark .incident-popup,
body.theme-dark .recovery-popup,
body.theme-dark .incident-table th,
body.theme-dark .incident-table td,
body.theme-dark .tram-table th,
body.theme-dark .tram-table td,
body.theme-dark .inventory-table th,
body.theme-dark .inventory-table td,
body.theme-dark .admin-feature-box,
body.theme-dark .admin-feature-table-wrap,
body.theme-dark .admin-feature-table th,
body.theme-dark .admin-feature-table td {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
body.theme-dark .dnc-section-title,
body.theme-dark .incident-table th,
body.theme-dark .tram-table th,
body.theme-dark .inventory-table th,
body.theme-dark .admin-feature-table th {
  background: #1f2937 !important;
  color: #bfdbfe !important;
}
body.theme-dark .dnc-popup-title,
body.theme-dark .tram-title,
body.theme-dark .risk-popup-card,
body.theme-dark .nearest-head,
body.theme-dark .inventory-table-meta,
body.theme-dark .nearest-info strong,
body.theme-dark .nearest-distance b,
body.theme-dark .tram-staff-name {
  color: #e5e7eb !important;
}
body.theme-dark .dnc-popup-subtitle,
body.theme-dark .dnc-table th,
body.theme-dark .popup-grid b,
body.theme-dark .incident-sub {
  color: #cbd5e1 !important;
}
body.theme-dark .dnc-note,
body.theme-dark .nearest-note {
  background: #0f172a !important;
  color: #dbeafe !important;
  border-color: #334155 !important;
}
body.theme-dark .placeholder,
body.theme-dark .tram-photo {
  background: #0b1220 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* Drawer chips/KPI */
body.theme-dark .tram-chip-list span,
body.theme-dark .inventory-chip-list span,
body.theme-dark .dnc-tag,
body.theme-dark .pill {
  background: #1e3a8a !important;
  color: #dbeafe !important;
}
body.theme-dark .tram-kpi,
body.theme-dark .inventory-kpi,
body.theme-dark .nearest-panel-summary div {
  background: #1f2937 !important;
}
body.theme-dark .tram-kpi b,
body.theme-dark .inventory-kpi b,
body.theme-dark .nearest-panel-summary b {
  color: #fbbf24 !important;
}

/* Trang quản trị có dùng body.theme-dark */
body.theme-dark .topbar,
body.theme-dark .card,
body.theme-dark .group,
body.theme-dark .wrap,
body.theme-dark .container {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.theme-dark .group summary,
body.theme-dark table,
body.theme-dark .table th,
body.theme-dark .table td,
body.theme-dark th,
body.theme-dark td {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.theme-dark .table th,
body.theme-dark th,
body.theme-dark .muted {
  color: var(--muted) !important;
}
body.theme-dark .card h1,
body.theme-dark .card h2,
body.theme-dark .topbar h1,
body.theme-dark .topbar h2 {
  color: #bfdbfe !important;
}

/* system theme mirrors dark rules when OS is dark */

/* =========================================================
   ADMIN PANEL DARK THEME OVERRIDES
   ========================================================= */
body.theme-dark .create-panel, body.theme-dark .field-summary, body.theme-dark .group-summary, body.theme-dark .group summary, body.theme-dark .filter-box, body.theme-dark .import-summary, body.theme-dark .empty, body.theme-dark .risk-raw, body.theme-dark .step { background: #1e293b !important; color: #e5e7eb !important; border-color: #334155 !important; }
body.theme-dark .risk-box { background: #1e3a8a !important; border-color: #1e40af !important; }
body.theme-dark .matrix-box { background: #7c2d12 !important; border-color: #9a3412 !important; }
body.theme-dark .field-body, body.theme-dark .group-body { background: #0f172a !important; }
body.theme-dark .risk-input[readonly], body.theme-dark .risk-manual:disabled, body.theme-dark #riskScoreManual:disabled, body.theme-dark #riskManualReason:disabled { background: #1f2937 !important; color: #94a3b8 !important; border-color: #334155 !important; }
body.theme-dark .badge, body.theme-dark .stat, body.theme-dark .pill { background: #334155 !important; color: #e5e7eb !important; }
body.theme-dark .badge.red, body.theme-dark .stat.red { background: rgba(153, 27, 27, 0.5) !important; color: #fecaca !important; border: 1px solid #7f1d1d !important; }
body.theme-dark .badge.orange, body.theme-dark .stat.orange { background: rgba(154, 52, 18, 0.5) !important; color: #fed7aa !important; border: 1px solid #7c2d12 !important; }
body.theme-dark .badge.yellow, body.theme-dark .stat.yellow { background: rgba(133, 77, 14, 0.5) !important; color: #fef08a !important; border: 1px solid #713f12 !important; }
body.theme-dark .badge.green, body.theme-dark .stat.green { background: rgba(22, 101, 52, 0.5) !important; color: #bbf7d0 !important; border: 1px solid #14532d !important; }
body.theme-dark .stat.total { background: #1e3a8a !important; color: #bfdbfe !important; border: 1px solid #1e40af !important; }
body.theme-dark .notice { background: rgba(154, 52, 18, 0.3) !important; color: #fed7aa !important; border: 1px solid #7c2d12 !important; }
body.theme-dark .error { background: rgba(153, 27, 27, 0.3) !important; color: #fecaca !important; border: 1px solid #7f1d1d !important; }


/* =========================================================
   THỐNG KÊ VÀ TABLE DARK OVERRIDES
   ========================================================= */
body.theme-dark .kpi, body.theme-dark .json, body.theme-dark .diff {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
body.theme-dark .location-box {
  background: #0f172a !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}
body.theme-dark .matched {
  background: #7c2d12 !important;
  color: #fed7aa !important;
}
body.theme-dark th, body.theme-dark .table th {
  background: #0b1220 !important;
}
body.theme-dark tr:hover td {
  background: #1e293b !important;
}
body.theme-dark .distance {
  color: #fca5a5 !important;
}
body.theme-dark .diff th, body.theme-dark .diff td {
  border-color: #334155 !important;
}
body.theme-dark .table-wrap { background: transparent !important; }



body.theme-dark .filter-check-all,
body.theme-dark .activity-checklist {
  background: #111827;
  border-color: #334155;
  color: #e5e7eb;
}

body.theme-dark .activity-check-group {
  color: #93c5fd;
}

body.theme-dark .activity-check-item:hover {
  background: #1e293b;
}


/* =========================================================
   UNIFIED PHP UI - admin/report/detail pages
   Applies to standalone PHP pages using body > .topbar and .wrap.
   Keeps the map shell (#topbar/#sidebar/#map-wrap) untouched.
   ========================================================= */
:root {
  --ui-blue: #3159ad;
  --ui-blue-hover: #244f9f;
  --ui-green: #0f766e;
  --ui-orange: #f97316;
  --ui-red: #b42318;
  --ui-bg: #eef3f9;
  --ui-panel: #ffffff;
  --ui-text: #1f2f4d;
  --ui-muted: #6b7890;
  --ui-line: #d9e2ef;
  --ui-line-strong: #cbd8ea;
  --ui-soft-blue: #eef4ff;
  --ui-radius: 10px;
  --ui-shadow: 0 10px 26px rgba(34, 62, 113, 0.07);
}

body > .topbar,
body > header.topbar {
  min-height: 64px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 22px !important;
  background: var(--ui-panel) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  box-shadow: 0 1px 0 rgba(31, 47, 77, 0.03) !important;
  color: var(--ui-text) !important;
  position: sticky;
  top: 0;
  z-index: 30;
}

main.wrap *,
.wrap *,
.container .card * {
  box-sizing: border-box;
}

body > .topbar h1,
body > .topbar h2,
body > header.topbar h1,
body > header.topbar h2,
.wrap .card h1,
.wrap .card h2,
.container .card h1,
.container .card h2 {
  color: var(--ui-blue-hover) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

body > .topbar h1,
body > header.topbar h1,
body > .topbar h2,
body > header.topbar h2 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body > .topbar + main.wrap,
body > header.topbar + main.wrap,
main.wrap {
  max-width: 1560px;
  margin: 18px auto;
  padding: 0 18px;
  color: var(--ui-text);
}

.wrap .card,
main.wrap .card,
.container .card,
.wrap .kpi,
.wrap .table-wrap,
.wrap dialog {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
  color: var(--ui-text) !important;
}

.wrap .card,
main.wrap .card,
.container .card {
  padding: 16px !important;
  margin-bottom: 14px !important;
}

.wrap .card.pad,
main.wrap .card.pad {
  padding: 18px !important;
}

.wrap .card h1,
.container .card h1 {
  font-size: 24px !important;
  font-weight: 900 !important;
}

.wrap .card h2,
.container .card h2 {
  font-size: 18px !important;
  font-weight: 900 !important;
}

.wrap .card h3,
.container .card h3 {
  font-size: 16px !important;
  font-weight: 900 !important;
}

body > .topbar .actions,
body > header.topbar .top-actions,
body > header.topbar .actions,
.wrap .actions,
.wrap .toolbar-actions,
.wrap .modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body > .topbar .btn,
body > header.topbar .btn,
.wrap .btn,
.wrap button.btn,
.wrap a.btn,
.wrap input[type="submit"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--ui-blue) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

body > .topbar .btn:hover,
body > header.topbar .btn:hover,
.wrap .btn:hover {
  filter: brightness(0.96);
}

body > .topbar .btn.light,
body > header.topbar .btn.light,
.wrap .btn.light,
.wrap .btn.gray {
  background: #ffffff !important;
  color: var(--ui-blue-hover) !important;
  border: 1px solid var(--ui-line-strong) !important;
}

body > .topbar .btn.green,
body > header.topbar .btn.green,
.wrap .btn.green,
.wrap .green {
  background: var(--ui-green) !important;
}

body > .topbar .btn.orange,
body > header.topbar .btn.orange,
.wrap .btn.orange,
.wrap .orange {
  background: var(--ui-orange) !important;
}

body > .topbar .btn.red,
body > header.topbar .btn.red,
.wrap .btn.red,
.wrap .red {
  background: var(--ui-red) !important;
}

.wrap label,
main.wrap label,
.wrap .field label {
  display: block;
  margin-bottom: 5px;
  color: #172641 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.wrap input,
.wrap select,
.wrap textarea,
.wrap .field input,
.wrap .field select,
.wrap .field textarea,
.wrap .toolbar input,
.wrap .toolbar select,
main.wrap input,
main.wrap select,
main.wrap textarea {
  min-height: 40px !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  background: #ffffff !important;
  color: #172641 !important;
  font: inherit !important;
  font-size: 14px !important;
  outline: none !important;
}

.wrap textarea,
main.wrap textarea {
  min-height: 78px !important;
  resize: vertical;
}

.wrap input:focus,
.wrap select:focus,
.wrap textarea:focus,
main.wrap input:focus,
main.wrap select:focus,
main.wrap textarea:focus {
  border-color: var(--ui-blue) !important;
  box-shadow: 0 0 0 3px rgba(49, 89, 173, 0.12) !important;
}

.wrap .grid,
main.wrap .grid,
.wrap .form-grid {
  gap: 12px !important;
}

.wrap .filters,
main.wrap .filters {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}

.wrap .filters > label,
main.wrap .filters > label {
  min-width: 0 !important;
  margin: 0 !important;
}

.wrap .filters input,
.wrap .filters select,
main.wrap .filters input,
main.wrap .filters select {
  width: 100% !important;
  min-width: 0 !important;
}

.wrap .filters > label:last-child,
main.wrap .filters > label:last-child {
  justify-self: start;
}

.wrap .filters > label:last-child > div,
main.wrap .filters > label:last-child > div {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.wrap .section-title,
main.wrap .section-title,
.wrap .group summary,
main.wrap .group summary {
  border-radius: 8px !important;
  background: var(--ui-soft-blue) !important;
  color: var(--ui-blue-hover) !important;
  font-weight: 900 !important;
}

.wrap .group,
main.wrap .group {
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.wrap .table,
main.wrap .table,
.wrap table {
  width: 100%;
  border-collapse: collapse;
}

.wrap .table th,
.wrap .table td,
main.wrap .table th,
main.wrap .table td,
.wrap table th,
.wrap table td {
  padding: 10px 12px !important;
  border-color: #edf2f7 !important;
  text-align: left;
  vertical-align: top;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.wrap .table th,
main.wrap .table th,
.wrap table th {
  color: #334155 !important;
  font-weight: 900 !important;
  background: #f8fbff;
}

.wrap .pill,
main.wrap .pill,
.wrap .tag,
main.wrap .tag {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  background: var(--ui-soft-blue) !important;
  color: var(--ui-blue-hover) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  margin: 2px 4px 2px 0 !important;
}

.wrap .muted,
main.wrap .muted,
.wrap small,
main.wrap small,
.wrap .hint,
main.wrap .hint,
.wrap .sub,
main.wrap .sub {
  color: var(--ui-muted) !important;
}

.wrap .notice,
.wrap .alert.ok,
.wrap .msg.ok,
main.wrap .notice {
  background: #ecfdf3 !important;
  color: #067647 !important;
  border: 1px solid #abefc6 !important;
  border-radius: 8px !important;
}

.wrap .error,
.wrap .alert.err,
.wrap .msg.err,
main.wrap .error {
  background: #fef3f2 !important;
  color: #b42318 !important;
  border: 1px solid #fecdca !important;
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  body > .topbar,
  body > header.topbar {
    align-items: flex-start !important;
    flex-direction: column;
    padding: 12px !important;
  }
  body > .topbar .actions,
  body > header.topbar .top-actions,
  body > header.topbar .actions {
    width: 100%;
  }
  body > .topbar .btn,
  body > header.topbar .btn {
    flex: 1 1 auto;
  }
  body > .topbar + main.wrap,
  body > header.topbar + main.wrap,
  main.wrap {
    margin: 12px auto;
    padding: 0 12px;
  }
}

body.theme-dark {
  --ui-bg: #0f172a;
  --ui-panel: #111827;
  --ui-text: #e5e7eb;
  --ui-muted: #94a3b8;
  --ui-line: #334155;
  --ui-line-strong: #334155;
  --ui-soft-blue: #1e293b;
}

body.theme-dark > .topbar,
body.theme-dark > header.topbar,
body.theme-dark .wrap .card,
body.theme-dark main.wrap .card,
body.theme-dark .container .card,
body.theme-dark .wrap .kpi,
body.theme-dark .wrap .table-wrap,
body.theme-dark .wrap dialog,
body.theme-dark .wrap .selected-chem,
body.theme-dark .wrap .mini-card,
body.theme-dark .wrap .source-note {
  background: var(--ui-panel) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
}

body.theme-dark .wrap input,
body.theme-dark .wrap select,
body.theme-dark .wrap textarea,
body.theme-dark main.wrap input,
body.theme-dark main.wrap select,
body.theme-dark main.wrap textarea {
  background: #0f172a !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
}

body.theme-dark .wrap label,
body.theme-dark main.wrap label,
body.theme-dark .wrap .table th,
body.theme-dark main.wrap .table th,
body.theme-dark .wrap table th {
  color: var(--ui-text) !important;
}

body.theme-dark .wrap .table th,
body.theme-dark main.wrap .table th,
body.theme-dark .wrap table th,
body.theme-dark .wrap .group summary,
body.theme-dark main.wrap .group summary,
body.theme-dark .wrap .section-title,
body.theme-dark main.wrap .section-title {
  background: #1e293b !important;
}

body.theme-dark .wrap .table td,
body.theme-dark main.wrap .table td,
body.theme-dark .wrap table td,
body.theme-dark .wrap .table th,
body.theme-dark main.wrap .table th,
body.theme-dark .wrap table th {
  border-color: #263548 !important;
}

/* UI polish pass for standalone PHP pages: admin, reports and public content. */
body {
  text-rendering: optimizeLegibility;
}

body > .topbar,
body > header.topbar {
  border-bottom: 1px solid rgba(203, 216, 232, .88) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 8px 28px rgba(15, 34, 67, .08) !important;
}

body > .topbar h1,
body > header.topbar h1,
body > .topbar .brand h1,
body > header.topbar .brand h1 {
  color: var(--sos-brand-blue) !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body > .topbar .actions,
body > header.topbar .top-actions,
body > header.topbar .actions {
  gap: 9px !important;
}

body > .topbar .btn,
body > header.topbar .btn,
body > header.topbar .lang-switch,
body > .topbar .lang-switch,
.wrap .btn,
main.wrap .btn,
.wrap button,
main.wrap button,
.wrap a.btn,
main.wrap a.btn {
  border-radius: 8px !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

body > .topbar .btn:hover,
body > header.topbar .btn:hover,
body > header.topbar .lang-switch:hover,
body > .topbar .lang-switch:hover,
.wrap .btn:hover,
main.wrap .btn:hover,
.wrap button:hover,
main.wrap button:hover,
.wrap a.btn:hover,
main.wrap a.btn:hover {
  box-shadow: 0 8px 20px rgba(31, 74, 143, .12) !important;
  transform: translateY(-1px);
}

body > .topbar .btn:focus-visible,
body > header.topbar .btn:focus-visible,
body > header.topbar .lang-switch:focus-visible,
body > .topbar .lang-switch:focus-visible,
.wrap .btn:focus-visible,
main.wrap .btn:focus-visible,
.wrap button:focus-visible,
main.wrap button:focus-visible,
.wrap a:focus-visible,
main.wrap a:focus-visible,
.wrap input:focus-visible,
main.wrap input:focus-visible,
.wrap select:focus-visible,
main.wrap select:focus-visible,
.wrap textarea:focus-visible,
main.wrap textarea:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(44, 107, 203, .18) !important;
}

.wrap .card,
main.wrap .card,
.container .card,
.wrap .section,
main.wrap .section,
.wrap .panel,
main.wrap .panel {
  border-color: #d9e4f4 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(15, 34, 67, .07) !important;
}

.wrap h1,
main.wrap h1,
.wrap h2,
main.wrap h2,
.wrap h3,
main.wrap h3 {
  color: var(--sos-brand-blue) !important;
  font-family: 'Roboto', sans-serif !important;
  letter-spacing: 0 !important;
}

.wrap input,
.wrap select,
.wrap textarea,
main.wrap input,
main.wrap select,
main.wrap textarea {
  border-color: #cddbf0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

.wrap input:hover,
.wrap select:hover,
.wrap textarea:hover,
main.wrap input:hover,
main.wrap select:hover,
main.wrap textarea:hover {
  border-color: #9fbce8 !important;
}

.wrap .table-wrap,
main.wrap .table-wrap {
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(15, 34, 67, .06) !important;
}

.wrap table tr,
main.wrap table tr {
  transition: background .14s ease;
}

.wrap table tbody tr:hover,
main.wrap table tbody tr:hover {
  background: #f8fbff !important;
}

.wrap .pill,
main.wrap .pill,
.wrap .tag,
main.wrap .tag {
  border: 1px solid rgba(43, 92, 171, .08) !important;
}

body.theme-dark > .topbar,
body.theme-dark > header.topbar {
  border-bottom-color: #263548 !important;
  background: rgba(15, 23, 42, .96) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25) !important;
}

body.theme-dark .wrap table tbody tr:hover,
body.theme-dark main.wrap table tbody tr:hover {
  background: #162033 !important;
}