/*
 * BlueDrop dark theme.
 *
 * Everything here is scoped to [data-bs-theme="dark"], so light mode is exactly what style.css and
 * the page templates define. Bootstrap 5.3 supplies the dark versions of its own components; this file
 * re-tints them to the BlueDrop navy palette and covers the app's custom components.
 */

/* ---------------------------------------------------------------- tokens */
html[data-bs-theme="dark"] {
    color-scheme: dark;

    /* app tokens from style.css */
    --bg-light: #0c1726;
    --text-primary: #dce6f1;
    --text-secondary: #9db0c6;
    --primary-light: #1f3a5f;

    /* shared dark palette used by the rules below */
    --bd-surface: #13233a;
    --bd-surface-2: #1a2e4a;
    --bd-surface-3: #213a5c;
    --bd-border: #2b4468;
    --bd-text: #dce6f1;
    --bd-text-strong: #f2f7fc;
    --bd-text-muted: #9db0c6;
    --bd-link: #6ea8ff;

    /* Bootstrap color-mode variables */
    --bs-body-bg: #0c1726;
    --bs-body-bg-rgb: 12, 23, 38;
    --bs-body-color: #dce6f1;
    --bs-body-color-rgb: 220, 230, 241;
    --bs-emphasis-color: #f2f7fc;
    --bs-secondary-color: rgba(220, 230, 241, 0.72);
    --bs-secondary-bg: #1a2e4a;
    --bs-secondary-bg-rgb: 26, 46, 74;
    --bs-tertiary-color: rgba(220, 230, 241, 0.5);
    --bs-tertiary-bg: #13233a;
    --bs-tertiary-bg-rgb: 19, 35, 58;
    --bs-border-color: #2b4468;
    --bs-border-color-translucent: rgba(110, 168, 255, 0.18);
    --bs-link-color: #6ea8ff;
    --bs-link-color-rgb: 110, 168, 255;
    --bs-link-hover-color: #9cc3ff;
    --bs-link-hover-color-rgb: 156, 195, 255;
    --bs-heading-color: #f2f7fc;
}

html[data-bs-theme="dark"] body {
    background-color: var(--bg-light);
    color: var(--text-primary);
}

/* ---------------------------------------------------------------- Bootstrap surfaces */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .list-group,
html[data-bs-theme="dark"] .popover,
html[data-bs-theme="dark"] .toast,
html[data-bs-theme="dark"] .accordion {
    --bs-card-bg: var(--bd-surface);
    --bs-modal-bg: var(--bd-surface);
    --bs-dropdown-bg: var(--bd-surface);
    --bs-list-group-bg: var(--bd-surface);
    --bs-popover-bg: var(--bd-surface);
    --bs-toast-bg: var(--bd-surface);
    --bs-accordion-bg: var(--bd-surface);
    --bs-card-cap-bg: var(--bd-surface-2);
    --bs-card-border-color: var(--bd-border);
    --bs-modal-border-color: var(--bd-border);
    --bs-dropdown-border-color: var(--bd-border);
    --bs-list-group-border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .card {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .dropdown-item {
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--bd-surface-3);
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .dropdown-item.active,
html[data-bs-theme="dark"] .dropdown-item:active {
    background-color: var(--primary-color);
    color: #fff;
}

html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer {
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.65;
}

html[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bd-text);
    --bs-table-border-color: var(--bd-border);
    --bs-table-striped-bg: rgba(110, 168, 255, 0.05);
    --bs-table-hover-bg: rgba(110, 168, 255, 0.09);
}

html[data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-color: var(--bd-border);
}

/* .table-light / bg-light / etc. are fixed-light utilities in Bootstrap; give them dark equivalents */
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .table > thead.table-light > tr > *,
html[data-bs-theme="dark"] .table > .table-light > tr > * {
    --bs-table-bg: var(--bd-surface-2);
    --bs-table-color: var(--bd-text-strong);
    --bs-table-border-color: var(--bd-border);
    background-color: var(--bd-surface-2);
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white {
    background-color: var(--bd-surface-2) !important;
    color: var(--bd-text) !important;
}

html[data-bs-theme="dark"] .bg-light .text-muted,
html[data-bs-theme="dark"] .bg-white .text-muted {
    color: var(--bd-text-muted) !important;
}

/* text-dark/text-black on plain surfaces becomes light; on coloured badges/backgrounds (bg-warning etc.) it stays dark */
html[data-bs-theme="dark"] .text-dark:not([class*="bg-"]),
html[data-bs-theme="dark"] .text-black:not([class*="bg-"]) {
    color: var(--bd-text) !important;
}

html[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--bd-surface-3) !important;
    color: var(--bd-text-strong) !important;
    border-color: var(--bd-border) !important;
}

html[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--bd-surface-3);
    --bs-btn-border-color: var(--bd-border);
    --bs-btn-color: var(--bd-text-strong);
    --bs-btn-hover-bg: #2a4a73;
    --bs-btn-hover-border-color: var(--bd-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2a4a73;
    --bs-btn-active-color: #fff;
}

/* buttons on the blue gradient headers (kept light in light mode) stay readable */
html[data-bs-theme="dark"] .card-header .btn-light {
    --bs-btn-bg: rgba(255, 255, 255, 0.92);
    --bs-btn-color: #0d47a1;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: #0d47a1;
}

html[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bd-text-muted);
    --bs-btn-border-color: var(--bd-border);
    --bs-btn-hover-bg: var(--bd-surface-3);
    --bs-btn-hover-border-color: var(--bd-border);
    --bs-btn-hover-color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #6ea8ff;
    --bs-btn-border-color: #3d6fc4;
}

html[data-bs-theme="dark"] .text-muted {
    color: var(--bd-text-muted) !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text {
    background-color: #0f1d31;
    border-color: var(--bd-border);
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bd-surface-2);
}

html[data-bs-theme="dark"] .form-control::placeholder {
    color: #6f86a1;
}

html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-control[readonly],
html[data-bs-theme="dark"] .form-select:disabled {
    background-color: var(--bd-surface-2);
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: #0f1d31;
    color: var(--bd-text-strong);
    box-shadow: 0 0 0 0.25rem rgba(110, 168, 255, 0.28);
}

html[data-bs-theme="dark"] .form-text {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .form-check-input {
    background-color: #0f1d31;
    border-color: #4a6a94;
}

html[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

html[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: var(--bd-border);
    --bs-nav-tabs-link-hover-border-color: var(--bd-border);
    --bs-nav-tabs-link-active-bg: var(--bd-surface);
    --bs-nav-tabs-link-active-color: var(--bd-text-strong);
    --bs-nav-tabs-link-active-border-color: var(--bd-border) var(--bd-border) var(--bd-surface);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--bd-link);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link.text-danger {
    color: #ff8a8a !important;
}

html[data-bs-theme="dark"] .alert-info {
    --bs-alert-bg: rgba(13, 110, 253, 0.14);
    --bs-alert-border-color: rgba(110, 168, 255, 0.35);
    --bs-alert-color: #b9d4ff;
}

html[data-bs-theme="dark"] .alert-warning {
    --bs-alert-bg: rgba(255, 193, 7, 0.12);
    --bs-alert-border-color: rgba(255, 193, 7, 0.35);
    --bs-alert-color: #ffe08a;
}

html[data-bs-theme="dark"] .alert-success {
    --bs-alert-bg: rgba(25, 135, 84, 0.16);
    --bs-alert-border-color: rgba(75, 200, 140, 0.35);
    --bs-alert-color: #a5e8c6;
}

html[data-bs-theme="dark"] .alert-danger {
    --bs-alert-bg: rgba(220, 53, 69, 0.16);
    --bs-alert-border-color: rgba(255, 120, 130, 0.35);
    --bs-alert-color: #ffb3ba;
}

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end {
    border-color: var(--bd-border) !important;
}

html[data-bs-theme="dark"] hr {
    border-color: var(--bd-border);
    opacity: 0.6;
}

html[data-bs-theme="dark"] code {
    color: #ff9ec7;
}

/* ---------------------------------------------------------------- navbar & footer */
html[data-bs-theme="dark"] .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #0d3a7d, #08254f) !important;
}

html[data-bs-theme="dark"] .footer {
    background-color: var(--bd-surface) !important;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.4);
}

html[data-bs-theme="dark"] .footer a,
html[data-bs-theme="dark"] .footer .text-muted {
    color: var(--bd-text-muted) !important;
}

.theme-selector .theme-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}

.theme-selector .theme-toggle i {
    line-height: 24px;
}

.theme-selector .theme-toggle:hover,
.theme-selector .theme-toggle:focus,
.theme-selector .theme-toggle.show {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

html[data-bs-theme="dark"] .navbar .dropdown-menu {
    background-color: var(--bd-surface);
}

/* ---------------------------------------------------------------- widgets & dashboard */
html[data-bs-theme="dark"] .widget-card {
    background-color: var(--bd-surface);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .widget-value {
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .widget-update-time {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .widget-error {
    color: #ff7b6b;
}

html[data-bs-theme="dark"] .button-led-indicator,
html[data-bs-theme="dark"] .led-indicator {
    background-color: #5b6b80;
}

html[data-bs-theme="dark"] .table-responsive {
    border-color: var(--bd-border);
    background: var(--bd-surface);
}

html[data-bs-theme="dark"] .multi-button-config-table td,
html[data-bs-theme="dark"] #multi-buttons-container,
html[data-bs-theme="dark"] #edit-multi-buttons-container {
    background-color: var(--bd-surface);
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .multi-button-config-table tr:not(:last-child) td,
html[data-bs-theme="dark"] #multi-buttons-container .multi-button-config-table tr,
html[data-bs-theme="dark"] #edit-multi-buttons-container .multi-button-config-table tr {
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .multi-button-config-table input.form-control-sm {
    background-color: #0f1d31;
    color: var(--bd-text);
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .multi-button-drag-handle {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .divider::before,
html[data-bs-theme="dark"] .divider::after {
    border-bottom-color: var(--bd-border);
}

/* widgets over a page background image: swap the light frosted look for a dark one */
html[data-bs-theme="dark"] .page-with-background .widget-card {
    background: linear-gradient(145deg, rgba(14, 28, 48, 0.55), rgba(14, 28, 48, 0.4)) !important;
    background-color: rgba(14, 28, 48, 0.45) !important;
    border: 1px solid rgba(160, 200, 255, 0.22) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
}

html[data-bs-theme="dark"] .page-with-background .widget-card .card-body {
    background: rgba(10, 22, 38, 0.5) !important;
    color: #e4edf7 !important;
}

html[data-bs-theme="dark"] .page-with-background .widget-card[data-widget-type="chart"] .card-body,
html[data-bs-theme="dark"] .page-with-background .widget-card[data-widget-type="bar_graph"] .card-body,
html[data-bs-theme="dark"] .page-with-background .widget-card[data-widget-type="chart"] .chart-container,
html[data-bs-theme="dark"] .page-with-background .widget-card[data-widget-type="bar_graph"] .chart-container {
    background: rgba(10, 22, 38, 0.62) !important;
    border-color: rgba(160, 200, 255, 0.2);
}

html[data-bs-theme="dark"] .page-with-background .widget-card .widget-update-time,
html[data-bs-theme="dark"] .page-with-background .widget-card .text-muted {
    color: rgba(210, 225, 242, 0.85) !important;
}

html[data-bs-theme="dark"] .page-with-background .widget-card .widget-value,
html[data-bs-theme="dark"] .page-with-background .widget-card .widget-units {
    color: #f2f7fc !important;
}

html[data-bs-theme="dark"] .page-with-background .widget-card .led-legend,
html[data-bs-theme="dark"] .page-with-background .widget-card .led-legend span {
    color: #dce6f1 !important;
}

html[data-bs-theme="dark"] .page-with-background .widget-card .form-select,
html[data-bs-theme="dark"] .page-with-background .widget-card .form-control {
    background-color: rgba(10, 22, 38, 0.85) !important;
    color: #e4edf7 !important;
    border-color: rgba(160, 200, 255, 0.28) !important;
}

html[data-bs-theme="dark"] .page-select-card.has-page-bg {
    background-color: rgba(12, 24, 42, 0.88);
    border-color: rgba(160, 200, 255, 0.22);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------- login helpers */
html[data-bs-theme="dark"] .btn-google {
    background-color: #131314;
    border-color: #8e918f;
    color: #e3e3e3;
}

html[data-bs-theme="dark"] .btn-google:hover,
html[data-bs-theme="dark"] .btn-google:focus,
html[data-bs-theme="dark"] .btn-google:active {
    background-color: #1f2023;
    border-color: #a8b3c8;
    color: #fff;
}

/* ---------------------------------------------------------------- voice assistant */
html[data-bs-theme="dark"] .voice-site-chip {
    background-color: var(--bd-surface-2) !important;
    border-color: var(--bd-border) !important;
    color: var(--bd-text) !important;
}

html[data-bs-theme="dark"] .voice-site-chip:hover {
    background-color: var(--bd-surface-3) !important;
    border-color: #3a5a86 !important;
}

html[data-bs-theme="dark"] .voice-toast {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- gallery & thumbnails */
html[data-bs-theme="dark"] .page-bg-thumb-wrap {
    border-color: var(--bd-border);
    background: var(--bd-surface-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

html[data-bs-theme="dark"] .gallery-image-card {
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .gallery-image-preview {
    border-bottom-color: var(--bd-border);
}

/* ---------------------------------------------------------------- channel details modal */
html[data-bs-theme="dark"] #channelFieldsModal .modal-content.channel-fields-shell {
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.6);
}

html[data-bs-theme="dark"] #channelFieldsModal .channel-fields-header {
    background: linear-gradient(120deg, #16294a 0%, #112038 100%);
}

html[data-bs-theme="dark"] #channelFieldsModal .channel-fields-body {
    background: #0f1d31;
}

html[data-bs-theme="dark"] #channelFieldsModal .channel-summary-name {
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] #channelFieldsModal .channel-fields-section-card {
    border: 1px solid var(--bd-border) !important;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] #channelFieldsModal .input-group .form-control[readonly] {
    background-color: #0f1d31;
    border-color: var(--bd-border);
    color: #b9d4ff;
}

html[data-bs-theme="dark"] #channelFieldsModal .copy-dynamic {
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] #channelFieldsModal .copy-dynamic:hover {
    background-color: var(--bd-surface-3);
}

html[data-bs-theme="dark"] #channelFieldsModal .channel-fields-table-wrap {
    border-color: var(--bd-border);
    background: var(--bd-surface);
}

html[data-bs-theme="dark"] #channelFieldsModal #channelFieldsTable thead th {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] #channelFieldsModal #channelFieldsTable tbody tr:hover {
    background-color: rgba(110, 168, 255, 0.09);
}

html[data-bs-theme="dark"] #channelFieldsModal .channel-fields-danger-zone {
    border-color: #7a2f3a !important;
    background: linear-gradient(180deg, #2a1620 0%, var(--bd-surface) 100%);
}

html[data-bs-theme="dark"] #channelFieldsModal .channel-fields-footer {
    border-top-color: var(--bd-border);
    background: #112038;
}

/* ================================================================ dashboard.html */
html[data-bs-theme="dark"] .page-with-background {
    background-image: linear-gradient(
        rgba(8, 16, 30, max(0.38, var(--page-bg-opacity, 0.24))),
        rgba(8, 16, 30, max(0.38, var(--page-bg-opacity, 0.24)))
    ), var(--page-bg-image, none);
    background-color: rgba(10, 20, 36, 0.95);
}

html[data-bs-theme="dark"] .user-dashboard-with-background {
    background-image: linear-gradient(
        rgba(8, 16, 30, max(0.38, var(--user-bg-opacity, 0.24))),
        rgba(8, 16, 30, max(0.38, var(--user-bg-opacity, 0.24)))
    ), var(--user-bg-image, none);
    background-color: rgba(10, 20, 36, 0.95);
}

html[data-bs-theme="dark"] .user-dashboard-default-background {
    background:
        linear-gradient(105deg, rgba(5, 20, 42, 0.98), rgba(7, 56, 118, 0.9)),
        #08305f;
}

html[data-bs-theme="dark"] .user-dashboard-default-background::after {
    background: linear-gradient(180deg, rgba(12, 23, 38, 0), rgba(12, 23, 38, 0.5));
}

html[data-bs-theme="dark"] .dashboard-page-tile .card-body {
    background-color: rgba(19, 35, 58, 0.88);
}

html[data-bs-theme="dark"] .dashboard-page-tile .card-body.has-bg-preview {
    background-image: linear-gradient(rgba(10, 28, 52, 0.34), rgba(10, 28, 52, 0.28)), var(--page-preview-bg);
}

html[data-bs-theme="dark"] .dashboard-page-tile .card-footer {
    color: #6ea8ff;
    background: rgba(19, 35, 58, 0.92) !important;
}

html[data-bs-theme="dark"] .user-dashboard-default-background .dashboard-page-tile {
    background: rgba(19, 35, 58, 0.96) !important;
    border: 1px solid rgba(160, 200, 255, 0.2) !important;
}

html[data-bs-theme="dark"] .user-dashboard-default-background .input-group {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

html[data-bs-theme="dark"] .chart-empty-state {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .chart-extrema-toggle.btn-outline-primary,
html[data-bs-theme="dark"] .chart-extrema-toggle.btn-outline-primary:hover,
html[data-bs-theme="dark"] .chart-extrema-toggle.btn-outline-primary:focus,
html[data-bs-theme="dark"] .chart-extrema-toggle.btn-outline-primary:active,
html[data-bs-theme="dark"] .chart-extrema-toggle.btn-outline-primary.active {
    color: #6ea8ff !important;
    border-color: #6ea8ff !important;
}

html[data-bs-theme="dark"] .chart-extrema-content {
    color: #b9d4ff;
    background: rgba(110, 168, 255, 0.1);
    border-color: rgba(110, 168, 255, 0.28);
}

html[data-bs-theme="dark"] .chart-zoom-hint {
    color: #b9d4ff;
    background: rgba(110, 168, 255, 0.1);
    border-color: rgba(110, 168, 255, 0.25);
}

html[data-bs-theme="dark"] .custom-range-error {
    color: #ffb3ba;
}

html[data-bs-theme="dark"] .widget-group-card[data-group-mode="compact"] .group-mini-widget .volume-tank,
html[data-bs-theme="dark"] .widget-group-card[data-group-mode="compact"] .group-mini-widget .volume-tank::before,
html[data-bs-theme="dark"] .volume-tank::after {
    background: #1d2f48;
}

html[data-bs-theme="dark"] .volume-tank::before,
html[data-bs-theme="dark"] .volume-tank::after {
    border-color: #6d86a6;
}

html[data-bs-theme="dark"] .volume-level-text:not(.is-on-water) {
    color: #e4edf7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

html[data-bs-theme="dark"] .battery-gauge-shell {
    border-color: #8aa3c2;
    background: #14243a;
}

html[data-bs-theme="dark"] .battery-gauge-shell::after {
    background: #8aa3c2;
}

html[data-bs-theme="dark"] .device-health-status {
    color: #dce6f1;
}

html[data-bs-theme="dark"] .device-health-indicator.status-unknown,
html[data-bs-theme="dark"] .device-health-indicator {
    color: #9db0c6;
}

html[data-bs-theme="dark"] .device-health-indicator.status-online { color: #4cd07d; }
html[data-bs-theme="dark"] .device-health-indicator.status-suspicious { color: #f0b429; }
html[data-bs-theme="dark"] .device-health-indicator.status-offline { color: #ff6b6b; }

html[data-bs-theme="dark"] .page-map-tag {
    color: #b9d4ff;
    background: rgba(110, 168, 255, 0.12);
    border-color: rgba(110, 168, 255, 0.3);
}

html[data-bs-theme="dark"] .page-map-tag:hover,
html[data-bs-theme="dark"] .page-map-tag.active {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

html[data-bs-theme="dark"] .page-map-empty {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .dashboard-search-empty {
    background: rgba(72, 46, 10, 0.92);
    border-color: rgba(255, 170, 60, 0.6);
    color: #ffd89a;
}

html[data-bs-theme="dark"] .tri-phase-table-wrap {
    background: rgba(14, 28, 48, 0.7);
    border-color: rgba(160, 200, 255, 0.2);
}

html[data-bs-theme="dark"] .tri-phase-table th,
html[data-bs-theme="dark"] .tri-phase-table td {
    border-color: rgba(160, 200, 255, 0.18);
}

html[data-bs-theme="dark"] .tri-phase-table thead th {
    color: #b9d4ff;
}

html[data-bs-theme="dark"] .tri-phase-table .tri-value {
    color: #f2f7fc;
}

html[data-bs-theme="dark"] .tri-value-unit {
    color: #9cc3ff;
}

/* ================================================================ admin/dashboard.html */
html[data-bs-theme="dark"] .admin-home {
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .admin-stat,
html[data-bs-theme="dark"] .admin-action-card {
    background: var(--bd-surface);
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .admin-stat span,
html[data-bs-theme="dark"] .admin-section-heading p {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .admin-stat strong {
    color: #6ea8ff;
}

html[data-bs-theme="dark"] .admin-action-card:hover {
    border-color: rgba(110, 168, 255, 0.55);
}

html[data-bs-theme="dark"] .admin-action-icon {
    background: rgba(110, 168, 255, 0.16);
    color: #6ea8ff;
}

html[data-bs-theme="dark"] .admin-action-card h3 {
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .admin-action-card p {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .admin-action-meta {
    color: var(--bd-text);
}

/* ================================================================ navbar dropdowns (base.html) */
html[data-bs-theme="dark"] .navbar .dropdown-item:hover,
html[data-bs-theme="dark"] .navbar .dropdown-item:focus {
    background-color: var(--bd-surface-3);
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .navbar .dropdown-item.active,
html[data-bs-theme="dark"] .language-selector .dropdown-item.active,
html[data-bs-theme="dark"] .admin-shortcuts-dropdown .dropdown-item.active {
    background-color: #0d6efd;
    color: #fff;
}

/* ================================================================ login / register / support (auth pages) */
html[data-bs-theme="dark"] {
    --auth-ink: #f2f7fc;
    --auth-muted: #a9bad0;
    --auth-surface: #13233a;
    --auth-line: #2b4468;
}

html[data-bs-theme="dark"] .auth-page {
    --auth-ink: #f2f7fc;
    --auth-muted: #a9bad0;
    --auth-line: #2b4468;
    --auth-surface: #13233a;
}

html[data-bs-theme="dark"] .auth-shell {
    background: var(--bd-surface);
    border-color: var(--bd-border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .auth-form-wrap {
    background: var(--bd-surface);
}

html[data-bs-theme="dark"] .auth-input-group .input-group-text {
    background: var(--bd-surface-2);
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .auth-input-group .form-control,
html[data-bs-theme="dark"] .auth-input-group .btn {
    background: #0f1d31;
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .auth-divider {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .auth-divider::before,
html[data-bs-theme="dark"] .auth-divider::after {
    background: var(--bd-border);
}

html[data-bs-theme="dark"] .auth-note,
html[data-bs-theme="dark"] .auth-cta {
    background: rgba(110, 168, 255, 0.1);
    border-color: rgba(110, 168, 255, 0.28);
    color: #c4d8f0;
}

html[data-bs-theme="dark"] .auth-note strong,
html[data-bs-theme="dark"] .auth-note h4 {
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .auth-links a,
html[data-bs-theme="dark"] .auth-subtitle a {
    color: var(--bd-link);
}

/* ================================================================ about.html (public landing page) */
html[data-bs-theme="dark"] .public-landing-body {
    background: #0a1423;
}

html[data-bs-theme="dark"] .landing-page,
html[data-bs-theme="dark"] .section-heading {
    color: var(--bd-text-strong);
}

html[data-bs-theme="dark"] .section-intro {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .landing-hero::after {
    background: linear-gradient(180deg, rgba(10, 20, 35, 0), #0a1423);
}

html[data-bs-theme="dark"] .capability-item,
html[data-bs-theme="dark"] .team-card,
html[data-bs-theme="dark"] .landing-footer-cta {
    background: var(--bd-surface);
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .capability-item i {
    background: rgba(110, 168, 255, 0.16);
    color: #6ea8ff;
}

html[data-bs-theme="dark"] .capability-item p,
html[data-bs-theme="dark"] .team-card p,
html[data-bs-theme="dark"] .capability-item ul,
html[data-bs-theme="dark"] .landing-footer-cta p {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .team-photo {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.2), rgba(3, 169, 244, 0.14)), #16294a;
    border-bottom-color: var(--bd-border);
}

html[data-bs-theme="dark"] .team-role {
    color: #6ea8ff;
}

html[data-bs-theme="dark"] .team-current-role {
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .team-current-role span {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .team-link {
    color: #9cc3ff;
    background: rgba(110, 168, 255, 0.12);
    border-color: rgba(110, 168, 255, 0.3);
}

html[data-bs-theme="dark"] .team-link:hover,
html[data-bs-theme="dark"] .team-link:focus {
    color: #fff;
    background: rgba(110, 168, 255, 0.28);
}

html[data-bs-theme="dark"] .team-link.disabled {
    color: #7d91ab;
    background: var(--bd-surface-2);
    border-color: var(--bd-border);
}

/* ================================================================ notifications.html */
html[data-bs-theme="dark"] .notification-card {
    background: var(--bd-surface);
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .notification-card[data-url]:not([data-url=""]):hover {
    border-color: rgba(110, 168, 255, 0.5);
}

html[data-bs-theme="dark"] .notification-body {
    color: #c4d3e4;
}

html[data-bs-theme="dark"] .notification-meta {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .notification-pill {
    background: rgba(110, 168, 255, 0.18);
    color: #b9d4ff;
}

html[data-bs-theme="dark"] .notification-pill.schedule {
    background: rgba(75, 200, 140, 0.18);
    color: #a5e8c6;
}

/* ================================================================ schedules / groups / push */
html[data-bs-theme="dark"] .site-group-card:hover,
html[data-bs-theme="dark"] .device-group-card:hover {
    border-color: #6b7fd0 !important;
}

html[data-bs-theme="dark"] .member-picker {
    background: #0f1d31;
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .member-chip {
    background: rgba(110, 168, 255, 0.16);
    border-color: rgba(110, 168, 255, 0.35);
    color: #cfe0f6;
}

html[data-bs-theme="dark"] .member-chip-remove {
    color: #9cc3ff;
}

/* ================================================================ maps */
html[data-bs-theme="dark"] .map-hero {
    border-color: rgba(110, 168, 255, 0.28);
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.16), rgba(32, 201, 151, 0.1));
}

html[data-bs-theme="dark"] .map-preview,
html[data-bs-theme="dark"] .page-map-container {
    border-color: rgba(110, 168, 255, 0.3);
}

html[data-bs-theme="dark"] .coord-chip {
    background: rgba(75, 200, 140, 0.16);
    color: #a5e8c6;
    border-color: rgba(75, 200, 140, 0.32);
}

html[data-bs-theme="dark"] .map-table-tools .form-control {
    background: #0f1d31;
}

html[data-bs-theme="dark"] .map-export-kml-btn {
    background: var(--bd-surface-3);
    color: #9cc3ff;
    border-color: var(--bd-border);
}

html[data-bs-theme="dark"] .map-export-kml-btn:hover {
    background: #2a4a73;
    color: #fff;
    border-color: #3a5a86;
}

html[data-bs-theme="dark"] .map-attribution-note {
    color: var(--bd-text-muted);
}

html[data-bs-theme="dark"] .my-map-controls,
html[data-bs-theme="dark"] .leaflet-control-zoom,
html[data-bs-theme="dark"] .map-fullscreen-search {
    background: rgba(19, 35, 58, 0.95);
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .leaflet-control-zoom a {
    background: var(--bd-surface-2) !important;
    color: var(--bd-text) !important;
    border-color: var(--bd-border) !important;
}

html[data-bs-theme="dark"] .leaflet-control-zoom a:hover {
    background: var(--bd-surface-3) !important;
}

html[data-bs-theme="dark"] .map-fullscreen-search-suggestions {
    background: var(--bd-surface);
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .map-fullscreen-search-suggestions .suggestion-item {
    border-bottom-color: var(--bd-border);
}

html[data-bs-theme="dark"] .map-fullscreen-search-suggestions .suggestion-item:hover {
    background: var(--bd-surface-3);
}

html[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
html[data-bs-theme="dark"] .leaflet-popup-tip {
    background: var(--bd-surface);
    color: var(--bd-text);
}

html[data-bs-theme="dark"] .leaflet-container {
    background: #0c1726;
}

/* darken the map tiles only (not markers or controls) */
html[data-bs-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.85);
}

/* ================================================================ live background previews (pages / users) */
html[data-bs-theme="dark"] #editBgPreviewWidgets > div > div:last-child {
    background: rgba(10, 22, 38, 0.5) !important;
    color: #e4edf7 !important;
}

html[data-bs-theme="dark"] #editBgPreviewWidgets > div:nth-child(2) > div:last-child {
    background: rgba(10, 22, 38, 0.62) !important;
}

html[data-bs-theme="dark"] #editBgPreviewBox {
    background-color: rgba(10, 20, 36, 0.95) !important;
}

html[data-bs-theme="dark"] #userBgPreviewBox {
    border-color: var(--bd-border) !important;
}

/* ================================================================ inline-styled leftovers */
html[data-bs-theme="dark"] [style*="background:#f8f9fa"],
html[data-bs-theme="dark"] [style*="background: #f8f9fa"] {
    background: var(--bd-surface-2) !important;
}

html[data-bs-theme="dark"] [style*="color: #0f172a"],
html[data-bs-theme="dark"] [style*="color:#0f172a"] {
    color: var(--bd-text-strong) !important;
}

/* ================================================================ fixes found by the contrast audit */
html[data-bs-theme="dark"] .auth-shell {
    --auth-ink: #f2f7fc;
    --auth-muted: #a9bad0;
    --auth-surface: #13233a;
    --auth-line: #2b4468;
    --auth-wash-a: #13233a;
    --auth-wash-b: #0f1d31;
}

html[data-bs-theme="dark"] .text-secondary {
    color: var(--bd-text-muted) !important;
}

/* cyan "info" badges: Bootstrap's white text on cyan is weak; dark text reads better on dark pages */
html[data-bs-theme="dark"] .badge.bg-info {
    color: #04222b !important;
}

/* Bootstrap's contextual table rows are fixed light colours; give them dark equivalents */
html[data-bs-theme="dark"] .table-primary,
html[data-bs-theme="dark"] .table > tbody > tr.table-primary > *,
html[data-bs-theme="dark"] td.table-primary,
html[data-bs-theme="dark"] th.table-primary {
    --bs-table-bg: rgba(13, 110, 253, 0.2);
    --bs-table-color: #cfe0f6;
    --bs-table-border-color: rgba(110, 168, 255, 0.3);
    background-color: rgba(13, 110, 253, 0.2);
    color: #cfe0f6;
}

html[data-bs-theme="dark"] .table-success,
html[data-bs-theme="dark"] .table > tbody > tr.table-success > * {
    --bs-table-bg: rgba(25, 135, 84, 0.2);
    --bs-table-color: #bfeed6;
    background-color: rgba(25, 135, 84, 0.2);
    color: #bfeed6;
}

html[data-bs-theme="dark"] .table-warning,
html[data-bs-theme="dark"] .table > tbody > tr.table-warning > * {
    --bs-table-bg: rgba(255, 193, 7, 0.16);
    --bs-table-color: #ffe9a8;
    background-color: rgba(255, 193, 7, 0.16);
    color: #ffe9a8;
}

html[data-bs-theme="dark"] .table-danger,
html[data-bs-theme="dark"] .table > tbody > tr.table-danger > * {
    --bs-table-bg: rgba(220, 53, 69, 0.2);
    --bs-table-color: #ffc2c8;
    background-color: rgba(220, 53, 69, 0.2);
    color: #ffc2c8;
}

html[data-bs-theme="dark"] .table-info,
html[data-bs-theme="dark"] .table > tbody > tr.table-info > * {
    --bs-table-bg: rgba(13, 202, 240, 0.16);
    --bs-table-color: #bdeaf4;
    background-color: rgba(13, 202, 240, 0.16);
    color: #bdeaf4;
}

html[data-bs-theme="dark"] .table-secondary,
html[data-bs-theme="dark"] .table > tbody > tr.table-secondary > * {
    --bs-table-bg: var(--bd-surface-2);
    --bs-table-color: var(--bd-text);
    background-color: var(--bd-surface-2);
    color: var(--bd-text);
}

/* light buttons that sit on the blue gradient hero / headers keep their light look */
html[data-bs-theme="dark"] .landing-hero .btn-light,
html[data-bs-theme="dark"] .admin-hero .btn-light {
    --bs-btn-bg: #ffffff;
    --bs-btn-color: #0d47a1;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-bg: #e9f2ff;
    --bs-btn-hover-color: #0a58ca;
}

/* ================================================================ widget forms */
html[data-bs-theme="dark"] .multi-button-position-label {
    color: #9cc3ff;
}

/* ================================================================ widgets over a page background (full text list) */
html[data-bs-theme="dark"] .page-with-background .widget-card .widget-value,
html[data-bs-theme="dark"] .page-with-background .widget-card .widget-units,
html[data-bs-theme="dark"] .page-with-background .widget-card .widget-converted-value,
html[data-bs-theme="dark"] .page-with-background .widget-card .card-text,
html[data-bs-theme="dark"] .page-with-background .widget-card label,
html[data-bs-theme="dark"] .page-with-background .widget-card .small,
html[data-bs-theme="dark"] .page-with-background .widget-card .days-selector,
html[data-bs-theme="dark"] .page-with-background .widget-card .days-selector label,
html[data-bs-theme="dark"] .page-with-background .widget-card .h1,
html[data-bs-theme="dark"] .page-with-background .widget-card .h2,
html[data-bs-theme="dark"] .page-with-background .widget-card .h3,
html[data-bs-theme="dark"] .page-with-background .widget-card .h4,
html[data-bs-theme="dark"] .page-with-background .widget-card .h5,
html[data-bs-theme="dark"] .page-with-background .widget-card .h6 {
    color: #f2f7fc !important;
}

html[data-bs-theme="dark"] .page-with-background .widget-card .led-legend,
html[data-bs-theme="dark"] .page-with-background .widget-card .led-legend span,
html[data-bs-theme="dark"] .page-with-background .widget-card .days-selector .form-select,
html[data-bs-theme="dark"] .page-with-background .widget-card .custom-range-selector .form-control,
html[data-bs-theme="dark"] .page-with-background .widget-card .custom-range-selector label {
    color: #dce6f1 !important;
}

/* ================================================================ widget status banners (colours are set inline by script) */
html[data-bs-theme="dark"] .widget-network-status {
    color: #cfe0f6 !important;
}

html[data-bs-theme="dark"] .widget-network-status[style*="220, 53, 69"] {
    color: #ffb3ba !important;
}