:root {
  --bg: #0b0f13;
  --surface: #111827;
  --surface-alpha: rgba(17, 24, 39, 0.85);
  --muted: #9ca3af;
  --text: #e5e7eb;
  --border: #1f2937;
  --primary: #22c55e;
  --primary-600: #16a34a;
  --primary-700: #15803d;
}

html, body { background: var(--bg) !important; color: var(--text) !important; }

.container, .container-fluid { color: var(--text) !important; }

/* Layout utilities */
.page { max-width: 960px; margin: 96px auto 24px; padding: 0 20px; }
.page-narrow { max-width: 600px; }
.page-wide { max-width: 1200px; }
.page-header { text-align: center; margin-bottom: 16px; }
.page-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.text-center { text-align: center !important; }
@media (max-width: 576px) { .page { margin-top: 84px; padding: 0 16px; } }

/* Overlay panels: force readable white text on semi-transparent backgrounds */
.panel, .card,
.history-container, .search-container, .location-points,
.truck-count, .datetime,
.leaflet-popup-content-wrapper, .leaflet-popup-content,
.leaflet-popup-content b,
.progress-bar, .toggle-history {
  color: var(--text) !important;
}
.leaflet-popup-content a { color: var(--text) !important; text-decoration: underline; }
.search-container input::placeholder { color: var(--muted) !important; }

/* Typography */
h1 { font-size: 2rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .75rem; }
p { color: var(--text); }
.muted, .text-muted { color: var(--muted) !important; }

@media (max-width: 576px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.1rem; }
}

.card { background: var(--surface-alpha) !important; border-color: var(--border) !important; color: var(--text) !important; }
.card .card-header { background: transparent !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; }
.card .card-body { color: var(--text) !important; }

.table, table { color: var(--text) !important; }
.table thead th, thead th { color: var(--muted) !important; border-bottom-color: var(--border) !important; }
.table tbody td, tbody td { border-top-color: var(--border) !important; }
.table-hover tbody tr:hover { background: rgba(255,255,255,0.03) !important; }

.form-control, .form-select, input, select, textarea { 
  background: var(--surface) !important; 
  border-color: var(--border) !important; 
  color: var(--text) !important; 
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 .25rem rgba(34, 197, 94, 0.25) !important;
  border-color: var(--primary) !important;
}
::placeholder { color: #6b7280 !important; }
/* Do not override checkbox/radio base background with generic input rule */
.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Ensure checkboxes are visible in dark theme */
.form-check-input {
  background-color: transparent !important;
  border-color: var(--border) !important;
}
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(34, 197, 94, 0.25) !important;
  border-color: var(--primary) !important;
}

/* Form layout helpers */
.form-group { margin-bottom: 12px; }

/* Generic app button (legacy `.button`) */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px; cursor: pointer; font-weight: 600;
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
}
.button:hover { background: var(--primary-600); border-color: var(--primary-600); }
.button:disabled { opacity: .7; cursor: not-allowed; }

.btn { border-radius: 8px !important; font-weight: 600 !important; }
.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background: var(--primary-600) !important; border-color: var(--primary-600) !important; }
.btn-secondary { background: #1f2937 !important; color: var(--text) !important; border-color: var(--border) !important; }
.btn-secondary:hover { background: #273244 !important; }
.btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; }

.alert { border-radius: 10px !important; }
.alert-info { background: #0b3b2b !important; color: #d1fae5 !important; border-color: #065f46 !important; }

.dropdown-menu { background: var(--surface-alpha) !important; color: var(--text) !important; border-color: var(--border) !important; }
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background: rgba(255,255,255,0.05) !important; }

.modal-content { background: var(--surface-alpha) !important; color: var(--text) !important; border-color: var(--border) !important; }
.modal-header, .modal-footer { border-color: var(--border) !important; }

/* Tabs (Settings page) */
.nav-tabs { border-bottom-color: var(--border) !important; }
.nav-tabs .nav-link { color: var(--muted) !important; background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; }
.nav-tabs .nav-link:hover { color: var(--text) !important; border-bottom-color: rgba(255,255,255,0.15) !important; }
.nav-tabs .nav-link.active { color: var(--text) !important; border-bottom-color: var(--primary) !important; }

/* Tables as cards */
.table-card { background: var(--surface) !important; border-color: var(--border) !important; }
.table-wrap { background: transparent !important; }

/* Force dark tables globally */
table { background: var(--surface-alpha) !important; color: var(--text) !important; }
thead th { background: var(--surface) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; }
tbody td { color: var(--text) !important; border-bottom: 1px solid var(--border) !important; }
tbody td, tbody th { background-color: transparent !important; }
tbody tr:nth-child(even) { background: rgba(255,255,255,0.02) !important; }
tbody tr:hover { background: rgba(255,255,255,0.04) !important; }
th, td { border-color: var(--border) !important; }

/* Small screen spacing tweaks */
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
  th, td { padding: 10px 12px !important; }
}

/* Banners used on manage users */
.banner.success { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border-color: rgba(16, 185, 129, 0.25) !important; }
.banner.error { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.25) !important; }

/* Select quick switch in navbar */
.custom-navbar select.form-select { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; border-color: rgba(255,255,255,0.15) !important; }
.custom-navbar select.form-select option { background: #111827 !important; color: #e5e7eb !important; }

/* Override white/light backgrounds to dark surfaces */
.bg-white, .bg-light,
.card.bg-white, .card.bg-light,
.accordion-item.bg-white, .accordion-item.bg-light,
.modal-content.bg-white, .modal-content.bg-light,
.dropdown-menu.bg-white, .dropdown-menu.bg-light,
.offcanvas, .offcanvas-body {
  background: var(--surface-alpha) !important;
  color: var(--text) !important;
}

/* Unified Back button */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alpha);
  color: var(--text) !important;
  text-decoration: none !important;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.btn-back:hover { background: rgba(255,255,255,0.06); color: var(--text) !important; border-color: var(--border); }
.btn-back i { opacity: .9; }
.bg-white .text-dark, .bg-light .text-dark, .text-dark { color: var(--text) !important; }
.form-label, label { color: var(--text) !important; }

/* Accordion elements */
.accordion-item { background: var(--surface-alpha) !important; border-color: var(--border) !important; }
.accordion-button { background: var(--surface-alpha) !important; color: var(--text) !important; }
.accordion-button:not(.collapsed) { background: var(--surface-alpha) !important; color: var(--text) !important; box-shadow: inset 0 -1px 0 var(--border) !important; }
.accordion-body { background: var(--surface-alpha) !important; color: var(--text) !important; }

/* List group */
.list-group-item { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.list-group-item.active { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.35) !important; color: #86efac !important; }

/* Light button contrast in dark theme */
.btn-light { background: #1f2937 !important; color: var(--text) !important; border-color: var(--border) !important; }
.btn-light:hover { background: #273244 !important; border-color: var(--border) !important; }

/* Dropdown active item */
.dropdown-item.active, .dropdown-item:active { background: rgba(34,197,94,0.18) !important; color: #d1fae5 !important; }

/* Generic panel blocks used across pages */
.panel { background: var(--surface-alpha) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.panel h5, .panel .h5 { color: var(--text) !important; }
.panel .hint, .panel small, .panel .text-muted { color: var(--muted) !important; }

/* Locations list (Locations Map page and similar) */
.locations-list { background: transparent !important; border-color: var(--border) !important; }
.locations-list li { background: var(--surface) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; }