/* Dark mode overrides for Bootstrap-based theme
   This file overrides CSS variables and common component backgrounds
   to present a global dark appearance for the templates in /templates/2026.
*/
:root {
  --bs-body-bg: #0b0d0f;
  --bs-body-color: #e6eef6;
  --bs-link-color: #66c2ff;
  --bs-link-hover-color: #9fe0ff;
  --bs-primary: #1b8bb4;
  --bs-secondary: #f1004a;
  --bs-light: #0f1416;
  --bs-dark: #0b0d0f;
  --bs-border-color: #22272a;
  --bs-gray-100: #0f1416;
  --bs-gray-200: #16191b;
  --bs-gray-300: #1e2224;
  --bs-gray-400: #2b2f31;
  --bs-gray-500: #3a3f41;
  --bs-gray-600: #4b5052;
  --bs-body-color-rgb: 230,238,246;
  --bs-body-bg-rgb: 11,13,15;
}

/* Make sure body uses the dark bg and text color */
body.dark-mode, body[data-theme="dark"] {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}

/* Navbar, header, footer */
.navbar, header, .site-header, .site-footer, .page-footer {
  background-color: var(--bs-gray-900) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Cards and panels */
.card, .panel, .box, .listing-row, .box-info {
  background-color: var(--bs-gray-800) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Forms */
.form-control, input, textarea, select {
  background-color: #0f1416 !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
}

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary {
  color: var(--bs-body-color) !important;
}

/* Tables */
table {
  color: var(--bs-body-color) !important;
}

/* Utility overrides for light backgrounds used in templates */
.bg-light, .bg-white {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
}

/* Images with captions: ensure text is readable */
.caption, .card-text, .meta {
  color: var(--bs-body-color) !important;
}

/* Small helpers */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Specific adjustments for third-party components (maps, popups, etc.) */
.leaflet-container { background: #070808 !important; }
.mfp-content, .mfp-container { background: #0b0d0f !important; }

/* Ensure footer meta and small text are not too dim */
small, .small { color: #c6d2db !important; }

/* End of dark overrides */