/* ==========================================================================
   Dark mode
   Enabled by <html data-theme="dark"> (button in the navbar, saved in
   localStorage). Bootstrap 5.1 has no built-in dark theme, so the
   components used by the site are overridden here. Many elements have
   inline colours (style="..."), which are matched with attribute selectors.
   ========================================================================== */

html[data-theme="dark"] {
    --dm-bg: #111518;
    --dm-surface: #1a1f24;
    --dm-surface-2: #222930;
    --dm-surface-3: #2b333b;
    --dm-border: #353e47;
    --dm-text: #e4e8ec;
    --dm-muted: #9aa5b1;
    --dm-brand: #5fc98f;
    --dm-brand-soft: rgba(95, 201, 143, 0.12);
    --dm-link: #6ea8fe;
    color-scheme: dark;
}

/* ---- Page ---------------------------------------------------------------- */
html[data-theme="dark"] body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text);
}
html[data-theme="dark"] a:not(.btn) { color: var(--dm-link); }
html[data-theme="dark"] hr { border-color: var(--dm-border) !important; opacity: 1; }
html[data-theme="dark"] .navbar {
    background-color: var(--dm-surface) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* ---- Text / background utilities ---------------------------------------- */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--dm-muted) !important; }
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--dm-text) !important; }
html[data-theme="dark"] .text-primary { color: #6ea8fe !important; }
html[data-theme="dark"] .text-success { color: #4fd18b !important; }
html[data-theme="dark"] .text-info { color: #4dd4f0 !important; }
html[data-theme="dark"] .text-danger { color: #f1707d !important; }
html[data-theme="dark"] .text-warning { color: #ffcd39 !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--dm-surface-2) !important; color: var(--dm-text); }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: var(--dm-border) !important; }
html[data-theme="dark"] .border-primary { border-color: #3d8bfd !important; }
html[data-theme="dark"] .border-success { border-color: #2f9e64 !important; }
html[data-theme="dark"] .border-warning { border-color: #d6a206 !important; }
html[data-theme="dark"] .border-info { border-color: #20a6c4 !important; }

/* Coloured headers keep dark text on light colours (yellow / cyan). */
html[data-theme="dark"] .bg-warning,
html[data-theme="dark"] .bg-warning .text-dark,
html[data-theme="dark"] .bg-info,
html[data-theme="dark"] .bg-info .text-dark,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-info { color: #1d2125 !important; }

/* ---- Cards ---------------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .side-card {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] .card-header:not([class*="bg-"]),
html[data-theme="dark"] .card-footer:not([class*="bg-"]) {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .shadow-sm { box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .45) !important; }
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-lg { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .6) !important; }

/* ---- Forms ------------------------------------------------------------------ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] .form-control::placeholder { color: #75808b; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
    border-color: #3d8bfd;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: var(--dm-surface-3);
    color: var(--dm-muted);
}
html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c4ccd4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .form-select option { background-color: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .form-check-input {
    background-color: var(--dm-surface-3);
    border-color: #56616c;
}
html[data-theme="dark"] .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
html[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button { filter: invert(0.85); }
html[data-theme="dark"] .form-range::-webkit-slider-runnable-track { background-color: var(--dm-surface-3); }

/* ---- Buttons ---------------------------------------------------------------- */
html[data-theme="dark"] .btn-outline-secondary { color: #c4ccd4; border-color: #56616c; }
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--dm-surface-3); color: #fff; }
html[data-theme="dark"] .btn-outline-dark { color: var(--dm-text); border-color: #8a949e; }
html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--dm-text) !important; color: #111 !important; }
html[data-theme="dark"] .btn-outline-primary { color: #6ea8fe; border-color: #3d8bfd; }
html[data-theme="dark"] .btn-outline-success { color: #4fd18b; border-color: #2f9e64; }
html[data-theme="dark"] .btn-outline-info { color: #4dd4f0; border-color: #20a6c4; }
html[data-theme="dark"] .btn-outline-danger { color: #f1707d; border-color: #dc3545; }
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-success:hover,
html[data-theme="dark"] .btn-outline-info:hover,
html[data-theme="dark"] .btn-outline-danger:hover { color: #fff; }
html[data-theme="dark"] .btn-light { background-color: var(--dm-surface-3); border-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .btn-link { color: var(--dm-link); }
html[data-theme="dark"] .btn-check:checked + .btn-outline-primary { color: #fff; }
html[data-theme="dark"] .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---- Tables ----------------------------------------------------------------- */
html[data-theme="dark"] .table {
    color: var(--dm-text);
    border-color: var(--dm-border);
    --bs-table-striped-color: var(--dm-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: var(--dm-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--dm-border); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > * > * {
    --bs-table-bg: var(--dm-surface-3);
    background-color: var(--dm-surface-3) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .table-success { --bs-table-bg: rgba(25, 135, 84, 0.25); color: var(--dm-text); }
html[data-theme="dark"] .table-warning { --bs-table-bg: rgba(255, 193, 7, 0.2); color: var(--dm-text); }
html[data-theme="dark"] .table-danger { --bs-table-bg: rgba(220, 53, 69, 0.22); color: var(--dm-text); }
html[data-theme="dark"] .table-responsive { border-color: var(--dm-border); }
html[data-theme="dark"] #dataTable th {
    background-color: var(--dm-surface-3);
    color: var(--dm-text);
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-track { background: var(--dm-surface-2); }
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb { background: #4a545e; }

/* ---- Tabs, accordion, lists ------------------------------------------------- */
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--dm-border) var(--dm-border) transparent; }
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dm-surface);
    border-color: var(--dm-border) var(--dm-border) var(--dm-surface);
    color: var(--dm-text);
}
html[data-theme="dark"] .accordion-item { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .accordion-button { background-color: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #1d3044; color: #9ec5fe; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .list-group-item { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .dropdown-menu { background-color: var(--dm-surface-2); border-color: var(--dm-border); }
html[data-theme="dark"] .dropdown-item { color: var(--dm-text); }
html[data-theme="dark"] .dropdown-item:hover { background-color: var(--dm-surface-3); }

/* ---- Modals, alerts, popovers, progress ------------------------------------- */
html[data-theme="dark"] .modal-content { background-color: var(--dm-surface); color: var(--dm-text); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] .modal-footer { background-color: var(--dm-surface-2); border-top-color: var(--dm-border); }
html[data-theme="dark"] .modal-header:not([class*="bg-"]) { border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .modal-backdrop.show { opacity: 0.7; }
html[data-theme="dark"] .alert-info { background-color: #0f3440; border-color: #145566; color: #9eeaf9; }
html[data-theme="dark"] .alert-warning { background-color: #3d3110; border-color: #66520f; color: #ffe08a; }
html[data-theme="dark"] .alert-success { background-color: #12321f; border-color: #1d5a37; color: #a3e4bf; }
html[data-theme="dark"] .alert-danger { background-color: #3a1519; border-color: #6a222a; color: #f5aab2; }
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .popover { background-color: var(--dm-surface-2); border-color: var(--dm-border); }
html[data-theme="dark"] .popover-header { background-color: var(--dm-surface-3); color: var(--dm-text); border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .popover-body { color: var(--dm-text); }
html[data-theme="dark"] .progress { background-color: var(--dm-surface-3); }
html[data-theme="dark"] #progressText { color: var(--dm-muted); }
html[data-theme="dark"] .badge.bg-light { color: var(--dm-text) !important; }

/* ---- Site specific classes (style.css) --------------------------------------- */
html[data-theme="dark"] .stats-box,
html[data-theme="dark"] .stats-box:hover {
    background: rgba(26, 31, 36, 0.92);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .stats-box h6 { color: var(--dm-text); border-bottom-color: var(--dm-border); }
html[data-theme="dark"] .stat-label { color: var(--dm-muted); }
html[data-theme="dark"] .monthly-options,
html[data-theme="dark"] .monthly-options-simple,
html[data-theme="dark"] .stats-summary {
    background: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] .stats-summary-monthly { background-color: #142a40; border-color: #1f4466; color: var(--dm-text); }
html[data-theme="dark"] .month-picker,
html[data-theme="dark"] .month-selection { background-color: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .logo-main { background: var(--dm-surface-2); border-color: var(--dm-border); }
html[data-theme="dark"] .ad-space .card-body:hover { background-color: var(--dm-surface-3) !important; border-color: var(--dm-brand) !important; }
html[data-theme="dark"] .ad-space .card-body:hover h1,
html[data-theme="dark"] .ad-space .card-body:hover span { color: var(--dm-brand) !important; }

/* ---- Inline colours written in the HTML / JS --------------------------------- */
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #fff;"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"] { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f1f3f5"],
html[data-theme="dark"] [style*="background-color: #e9ecef"] { background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] [style*="background-color: #eff5f1"],
html[data-theme="dark"] [style*="background-color: #e8f5e9"],
html[data-theme="dark"] [style*="background: rgba(13, 81, 52, 0.1)"] {
    background-color: var(--dm-brand-soft) !important;
    border-color: rgba(95, 201, 143, 0.35) !important;
}
html[data-theme="dark"] [style*="color: #0d5134"],
html[data-theme="dark"] [style*="color:#0d5134"] { color: var(--dm-brand) !important; }
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #495057"],
html[data-theme="dark"] [style*="color: #212529"] { color: var(--dm-text) !important; }
html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #6c757d"] { color: var(--dm-muted) !important; }
html[data-theme="dark"] [style*="border-color: #dee2e6"],
html[data-theme="dark"] [style*="border: 1px solid #dee2e6"] { border-color: var(--dm-border) !important; }
/* Fields greyed out from JS (tilt / azimuth when optimised). */
html[data-theme="dark"] [style*="rgb(240, 240, 240)"] { background-color: var(--dm-surface-3) !important; }

/* Same colours once JS has touched the style attribute (browsers rewrite
   hex colours as rgb(...) in the attribute). */
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] { background-color: var(--dm-surface) !important; }
html[data-theme="dark"] [style*="background-color: rgb(248, 249, 250)"] { background-color: var(--dm-surface-2) !important; }
html[data-theme="dark"] [style*="background-color: rgb(233, 236, 239)"],
html[data-theme="dark"] [style*="background-color: #e9ecef"] {
    background-color: var(--dm-surface-3) !important;
    color: var(--dm-muted) !important;
}
html[data-theme="dark"] [style*="background-color: rgb(239, 245, 241)"],
html[data-theme="dark"] [style*="background-color: rgb(232, 245, 233)"] { background-color: var(--dm-brand-soft) !important; }
html[data-theme="dark"] [style*="background-color: rgb(209, 231, 221)"] { background-color: #1d4a33 !important; }
html[data-theme="dark"] [style*="border: 1px solid rgb(222, 226, 230)"] { border-color: var(--dm-border) !important; }
html[data-theme="dark"] [style*="color: rgb(13, 81, 52)"] { color: var(--dm-brand) !important; }
html[data-theme="dark"] [style*="color: rgb(51, 51, 51)"],
html[data-theme="dark"] [style*="color: rgb(68, 68, 68)"] { color: var(--dm-text) !important; }
html[data-theme="dark"] [style*="color: rgb(85, 85, 85)"],
html[data-theme="dark"] [style*="color: rgb(102, 102, 102)"] { color: var(--dm-muted) !important; }

/* Language switcher buttons (i18n.js) */
html[data-theme="dark"] .lang-btn:hover:not(.active):not(.btn-success) {
    background-color: var(--dm-brand-soft) !important;
    color: var(--dm-brand) !important;
}

/* ---- Leaflet map controls (the map tiles themselves are not changed) --------- */
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-control-layers,
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .leaflet-control-attribution { background: rgba(26, 31, 36, 0.8) !important; color: var(--dm-muted); }
html[data-theme="dark"] .leaflet-control-attribution a { color: var(--dm-link); }
html[data-theme="dark"] .leaflet-container { background: var(--dm-surface-2); }

/* ---- Guided tour (driver.js) -------------------------------------------------- */
html[data-theme="dark"] .driver-popover { background-color: var(--dm-surface-2); color: var(--dm-text); }
html[data-theme="dark"] .driver-popover-title,
html[data-theme="dark"] .driver-popover-description { color: var(--dm-text); }
html[data-theme="dark"] .driver-popover-arrow { border-color: var(--dm-surface-2); }
html[data-theme="dark"] .driver-popover-footer button { background-color: var(--dm-surface-3); color: var(--dm-text); text-shadow: none; border-color: var(--dm-border); }

/* ---- Theme toggle button ------------------------------------------------------ */
.theme-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.theme-toggle .bi-sun { display: none; }
html[data-theme="dark"] .theme-toggle .bi-sun { display: inline; color: #ffcd39; }
html[data-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }

/* Smooth switch (disabled while the page loads to avoid a flash). */
html.theme-ready body,
html.theme-ready .card,
html.theme-ready .navbar,
html.theme-ready .form-control,
html.theme-ready .form-select {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}