/* =========================================
   DARK MODE - Component-specific overrides
   (Base theming handled by theme.css)
   ========================================= */

/* ===== DARK MODE TOGGLE BUTTON (base styles) ===== */
.dark-mode-toggle {
    background: none;
    border: 1px solid var(--border-primary, #dee2e6);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    color: var(--text-primary, #212529);
    transition: background-color var(--transition-fast, 0.2s), border-color var(--transition-fast, 0.2s);
}

.dark-mode-toggle:hover {
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

/* ===== MAP SIDEBAR ===== */
[data-bs-theme="dark"] .map-sidebar-header {
    background-color: var(--bg-panel);
}

[data-bs-theme="dark"] .map-sidebar-toggle {
    background: var(--bg-panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-panel);
}

/* ===== WIDGETS ===== */
[data-bs-theme="dark"] .widget-card {
    background: var(--overlay-glass);
    backdrop-filter: blur(8px);
}

[data-bs-theme="dark"] .map-status-indicator {
    background: var(--overlay-glass);
    color: var(--text-primary);
    box-shadow: var(--shadow-panel);
}

[data-bs-theme="dark"] .widget-card .card-header.bg-white {
    background-color: var(--bg-panel) !important;
}

[data-bs-theme="dark"] .widget-card table td:first-child {
    color: var(--text-secondary);
}

/* ===== ADMIN SIDEBAR (_AdminNav) ===== */
/* (Now handled by theme.css) */

/* ===== ADMIN TABS (inactive nav-tabs links) ===== */
/* (Now handled by theme.css) */

/* ===== INSTALLER SIDE PANELS (Devices + Alarms left list) ===== */
[data-bs-theme="dark"] .list-group-item.list-group-item-action {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .list-group-item.list-group-item-action:hover:not(.active) {
    background-color: var(--bg-panel);
}

[data-bs-theme="dark"] .list-group-item.list-group-item-action.active {
    background-color: var(--accent-bronze);
    border-color: var(--accent-bronze);
}

[data-bs-theme="dark"] .list-group-item:not(.list-group-item-action) {
    background-color: var(--bg-panel) !important;
    color: var(--text-primary);
    border-color: var(--border-primary);
}

/* ===== INSTALLER DATA SYNC STATUS CARDS ===== */
[data-bs-theme="dark"] .card.border-0.bg-light {
    background-color: var(--bg-panel) !important;
}

/* ===== USERS / DEPARTMENTS: dept/project access panels ===== */
[data-bs-theme="dark"] .card-body .rounded.border.bg-light,
[data-bs-theme="dark"] .modal-body .rounded.border.bg-light {
    background-color: var(--bg-panel) !important;
    border-color: var(--border-primary) !important;
}

/* ===== ADMIN GEOFENCE MAP ===== */
[data-bs-theme="dark"] #geofenceMap {
    border-color: var(--border-primary);
}

/* ===== LEAFLET MAP – DARK TILE FILTER ===== */
/* Invert + hue-rotate the tile pane so every base layer gets a dark look.
   Satellite / hybrid imagery is excluded because inversion ruins photos. */
[data-bs-theme="dark"] .leaflet-container {
    background: #000;
}

[data-bs-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(1.1);
}

/* Undo the filter for satellite / hybrid imagery tiles so photos stay natural */
[data-bs-theme="dark"] .leaflet-tile-pane .leaflet-tile[src*="lyrs=s"],
[data-bs-theme="dark"] .leaflet-tile-pane .leaflet-tile[src*="lyrs=y"],
[data-bs-theme="dark"] .leaflet-tile-pane .leaflet-tile[src*="World_Imagery"] {
    filter: invert(1) hue-rotate(180deg);  /* double-invert = back to normal */
}

/* ===== LEAFLET MAP POPUPS / CONTROLS ===== */
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
    background: var(--bg-panel);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .leaflet-control-zoom a {
    background-color: var(--bg-panel);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

[data-bs-theme="dark"] .leaflet-control-zoom a:hover {
    background-color: var(--bg-hover);
}

[data-bs-theme="dark"] .leaflet-control-attribution {
    background: var(--overlay-glass) !important;
    color: var(--text-secondary);
}

[data-bs-theme="dark"] .leaflet-control-attribution a {
    color: var(--accent-bronze);
}

/* Keep markers / vectors / interactive overlays looking normal */
[data-bs-theme="dark"] .leaflet-marker-pane,
[data-bs-theme="dark"] .leaflet-shadow-pane,
[data-bs-theme="dark"] .leaflet-overlay-pane svg,
[data-bs-theme="dark"] .leaflet-overlay-pane canvas {
    filter: invert(1) hue-rotate(180deg);  /* counter the parent invert */
}

/* ===== TABLES – table-light header fix ===== */
/* (Now handled by theme.css) */

/* ===== FOOTER ===== */
/* (Now handled by theme.css) */

/* ===== DATALOG ===== */
[data-bs-theme="dark"] .datalog-table tr.active-row {
    background-color: rgba(139, 115, 85, 0.15);
}

/* ===== DEVICE FORM SECTIONS ===== */
[data-bs-theme="dark"] .device-form-section {
    background: var(--bg-panel);
    border-color: var(--border-primary);
}

[data-bs-theme="dark"] .device-form-section-title {
    color: var(--text-secondary);
    border-bottom-color: var(--border-primary);
}

[data-bs-theme="dark"] .device-form-section .form-label {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .device-form-actions {
    border-top-color: var(--border-primary);
}

/* ===== SYNC STATUS CHIPS ===== */
[data-bs-theme="dark"] .sync-chip {
    background: var(--bg-panel);
    border-color: var(--border-primary);
}

[data-bs-theme="dark"] .sync-chip-label {
    color: var(--text-secondary);
}

/* ===== MAP ICON RAIL ===== */
[data-bs-theme="dark"] .map-icon-rail {
    background-color: var(--bg-sidebar) !important;
    border-color: var(--border-primary) !important;
}

[data-bs-theme="dark"] .map-icon-rail .btn-light {
    background-color: var(--bg-panel);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .map-icon-rail .btn-light:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

/* ===== DEVICE LIST ===== */
[data-bs-theme="dark"] .device-row:hover {
    background-color: var(--bg-hover);
}

[data-bs-theme="dark"] .device-row-enabled {
    background-color: rgba(77, 122, 94, 0.15);
}

[data-bs-theme="dark"] .device-row-enabled:hover {
    background-color: rgba(77, 122, 94, 0.22);
}

/* ===== DATERANGEPICKER ===== */
[data-bs-theme="dark"] .daterangepicker {
    background-color: var(--bg-panel);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker:after {
    border-bottom-color: var(--bg-panel);
}

[data-bs-theme="dark"] .daterangepicker:before {
    border-bottom-color: var(--border-primary);
}

[data-bs-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--bg-panel);
    border-color: var(--bg-panel);
}

[data-bs-theme="dark"] .daterangepicker .calendar-table th,
[data-bs-theme="dark"] .daterangepicker .calendar-table td {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker td.available:hover,
[data-bs-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker td.off,
[data-bs-theme="dark"] .daterangepicker td.off.in-range,
[data-bs-theme="dark"] .daterangepicker td.off.start-date,
[data-bs-theme="dark"] .daterangepicker td.off.end-date {
    background-color: var(--bg-panel);
    color: var(--text-muted);
}

[data-bs-theme="dark"] .daterangepicker td.in-range {
    background-color: rgba(139, 115, 85, 0.2);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker td.active,
[data-bs-theme="dark"] .daterangepicker td.active:hover {
    background-color: var(--accent-bronze);
    color: #fff;
}

[data-bs-theme="dark"] .daterangepicker td.disabled,
[data-bs-theme="dark"] .daterangepicker option.disabled {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .daterangepicker th.month {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker .calendar-table .next span,
[data-bs-theme="dark"] .daterangepicker .calendar-table .prev span {
    border-color: var(--text-secondary);
}

[data-bs-theme="dark"] .daterangepicker select.monthselect,
[data-bs-theme="dark"] .daterangepicker select.yearselect {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

[data-bs-theme="dark"] .daterangepicker select.hourselect,
[data-bs-theme="dark"] .daterangepicker select.minuteselect,
[data-bs-theme="dark"] .daterangepicker select.secondselect,
[data-bs-theme="dark"] .daterangepicker select.ampmselect {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

[data-bs-theme="dark"] .daterangepicker .calendar-time {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker .drp-buttons {
    border-top-color: var(--border-primary);
}

[data-bs-theme="dark"] .daterangepicker .drp-selected {
    color: var(--text-secondary);
}

[data-bs-theme="dark"] .daterangepicker .drp-buttons .btn {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .daterangepicker .ranges li.active {
    background-color: var(--accent-bronze);
    color: #fff;
}

[data-bs-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left,
[data-bs-theme="dark"] .daterangepicker.show-ranges.rtl .drp-calendar.right,
[data-bs-theme="dark"] .daterangepicker.show-ranges.single.ltr .drp-calendar.left,
[data-bs-theme="dark"] .daterangepicker.show-ranges.single.rtl .drp-calendar.right {
    border-color: var(--border-primary);
}