main {
  background-image: url("/images/background.png");
  background-size: cover;
}
:root {
  /* Core palette */
  --bs-body-bg: #0f1115;
  --bs-body-bg-rgb: 15,17,21;
  --bs-body-color: #fff;
  --bs-body-color-rgb: 214,217,223;

  --bs-secondary-color: #a8b0bd;
  --bs-secondary-bg: #161a22;
  --bs-tertiary-bg: #12161d;

  --bs-border-color: #263042;

  /* Brand accents (tweak to taste) */
  --bs-primary: rgb(255, 42, 105);
  --bs-primary-rgb: 77,163,255;
  --bs-link-color: rgb(255, 42, 105);
  --bs-link-hover-color: #a9ccff;

  /* Components */
  --bs-card-bg: rgba(255, 42, 105, 0.1);
  --bs-card-border-color: #2a3244;
  --bs-card-color: var(--bs-body-color);

  --bs-navbar-color: #cfd5df;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-brand-color: #e5eaf1;

  --bs-dropdown-bg: #11161f;
  --bs-dropdown-border-color: #2a3244;
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: #1a2230;

  --bs-offcanvas-bg: #0f131b;
  --bs-offcanvas-color: var(--bs-body-color);

  --bs-list-group-bg: #11151d;
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: #2a3244;

  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.05);
  --bs-table-hover-bg: rgba(255,255,255,0.08);
  --bs-table-border-color: #2a3244;

  --bs-input-bg: #0f141c;
  --bs-input-border-color: #2a3244;
  --bs-input-color: var(--bs-body-color);
  --bs-input-placeholder-color: #8a93a3;
  --bs-input-focus-border-color: #4da3ff;
  --bs-focus-ring-color: rgba(77,163,255, .35);

  --bs-tooltip-bg: #10141b;
  --bs-tooltip-color: #e1e5ec;

  --bs-modal-bg: #10141b;
  --bs-modal-border-color: #2a3244;
}

/* Buttons (slightly brighter primary; softer secondary) */
:root .btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: rgba(255, 42, 105, 0.8);
  --bs-btn-hover-border-color: rgba(255, 42, 105, 0.8);
  --bs-btn-active-bg: rgb(255, 42, 105);
  --bs-btn-active-border-color: rgb(255, 42, 105);
  --bs-btn-disabled-bg: #345a82;
  --bs-btn-disabled-border-color: #345a82;
}

:root .btn-outline-secondary,
:root .btn-secondary {
  --bs-btn-color: #cfd6e3;
  --bs-btn-bg: #1a2130;
  --bs-btn-border-color: #2a3244;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #222a3b;
  --bs-btn-hover-border-color: #394765;
}

.btn-outline-primary {
--bs-btn-color: rgb(255, 42, 105);
--bs-btn-border-color: rgb(255, 42, 105);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(255, 42, 105);
--bs-btn-hover-border-color: rgb(255, 42, 105);
--bs-btn-focus-shadow-rgb: 13,110,253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(255, 42, 105);
--bs-btn-active-border-color: rgb(255, 42, 105);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: rgb(255, 42, 105);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: rgb(255, 42, 105);
--bs-gradient: none;
}

/* Navbar / header */
:root .navbar {
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
:root .navbar .nav-link.active {
  color: #fff;
}

/* Sidebar list-group (left nav) */
:root .list-group-item {
  background-color: var(--bs-list-group-bg);
  color: var(--bs-list-group-color);
  border-color: var(--bs-list-group-border-color);
}
:root .list-group-item:hover {
  background-color: #17202e;
}
:root .list-group-item.active {
  background-color: rgba(77,163,255,.15);
  border-color: #3a79bb;
  color: #e7f0ff;
}

/* Cards */
:root .card {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
}
:root .card-header {
  background-color: #171c26;
  border-bottom-color: var(--bs-card-border-color);
}

/* Tables */
:root .table > :not(caption) > * > * {
  box-shadow: inset 0 0 0 9999px transparent;
  color: var(--bs-body-color);
}
:root .table thead th {
  background: #161c27;
  color: #cdd5e2;
  border-bottom-color: var(--bs-table-border-color);
}
:root .table td,
:root .table th {
  border-color: var(--bs-table-border-color);
}

/* Forms */
:root .form-control,
:root .form-select {
  background-color: var(--bs-input-bg);
  color: var(--bs-input-color);
  border-color: var(--bs-input-border-color);
}
:root .form-control::placeholder {
  color: var(--bs-input-placeholder-color);
}
:root .form-control:focus,
:root .form-select:focus {
  border-color: var(--bs-input-focus-border-color);
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

/* Dropdowns */
:root .dropdown-menu {
  background-color: var(--bs-dropdown-bg);
  border-color: var(--bs-dropdown-border-color);
}
:root .dropdown-item:hover,
:root .dropdown-item:focus {
  background-color: var(--bs-dropdown-link-hover-bg);
}

/* Badges based on status */
:root .badge.bg-success { background-color: #18b66f !important; }
:root .badge.bg-danger  { background-color: #ff5f74 !important; }
:root .badge.bg-secondary { background-color: #46556f !important; }

/* Offcanvas / modal / borders */
:root .offcanvas,
:root .modal-content {
  background-color: var(--bs-offcanvas-bg);
  color: var(--bs-offcanvas-color);
  border-color: var(--bs-border-color);
}

/* Links */
:root a { color: var(--bs-link-color); }
:root a:hover { color: var(--bs-link-hover-color); }

/* Muted tables with .table-striped / .table-hover feel nicer in dark */
:root .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-striped-bg);
}
:root .table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-hover-bg);
}

/* ------------------------------
   2) Auto dark mode (OS setting)
   If you prefer automatic dark when user’s OS is dark,
   this mirrors the same theme variables without manual attribute.
---------------------------------*/
@media (prefers-color-scheme: dark) {
  :root) {
    /* inherit all the same variables as above */
    --bs-body-bg: #0f1115;
    --bs-body-bg-rgb: 15,17,21;
    --bs-body-color: #fff;
    --bs-secondary-color: #a8b0bd;
    --bs-secondary-bg: #161a22;
    --bs-tertiary-bg: #12161d;
    --bs-border-color: #263042;
    --bs-primary: #4da3ff;
    --bs-primary-rgb: 77,163,255;
    --bs-link-color: #7ab4ff;
    --bs-link-hover-color: #a9ccff;
    --bs-card-bg: #131722;
    --bs-card-border-color: #2a3244;
    --bs-card-color: var(--bs-body-color);
    --bs-navbar-color: #cfd5df;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-brand-color: #e5eaf1;
    --bs-dropdown-bg: #11161f;
    --bs-dropdown-border-color: #2a3244;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: #1a2230;
    --bs-offcanvas-bg: #0f131b;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-list-group-bg: #11151d;
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-border-color: #2a3244;
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.05);
    --bs-table-hover-bg: rgba(255,255,255,0.08);
    --bs-table-border-color: #2a3244;
    --bs-input-bg: #0f141c;
    --bs-input-border-color: #2a3244;
    --bs-input-color: var(--bs-body-color);
    --bs-input-placeholder-color: #8a93a3;
    --bs-input-focus-border-color: #4da3ff;
    --bs-focus-ring-color: rgba(77,163,255,.35);
    --bs-tooltip-bg: #10141b;
    --bs-tooltip-color: #e1e5ec;
    --bs-modal-bg: #10141b;
    --bs-modal-border-color: #2a3244;
  }
}

.card {
  border:1px rgba(255, 42, 105, 0.1) !important;
  border-radius: 8px;
}

.modal-fullscreen {
  width:100vw !important;
  max-width:100vw !important;
}

#mapLegend { margin-top:6px; font-size:.8rem; color:#666; }


/* Modal surface sizing */
#statChartWrap { height: min(70vh, 560px); }
.modal-fullscreen #statChartWrap { height: calc(100vh - 180px); } /* header paddings accounted */
#statChart, #statMap { width: 100% !important; height: 100% !important; display: block; }

.collapse-caret { transition: transform .2s ease; }