/* ============================================================ Bootstrap Date Range Picker — dark / light theme overrides Loaded after daterangepicker.css so specificity wins cleanly. The picker popup is appended to (parentEl:'body') so it is never clipped by overflow:hidden containers. ============================================================ */ /* ??? Shared tweaks (both modes) ??? */ .daterangepicker { border-radius: 0.5rem; overflow: hidden; font-size: 0.875rem; } .daterangepicker .calendar-table table { border-collapse: separate; border-spacing: 2px; } .daterangepicker td, .daterangepicker th { border-radius: 0.3rem; } /* ??? DARK MODE ??? */ html[data-bs-theme="dark"] .daterangepicker { background-color: #2b3035; border: 1px solid #495057; color: #dee2e6; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.6); } /* ?? Arrow ?? */ html[data-bs-theme="dark"] .daterangepicker::before { border-bottom-color: #495057; border-top-color: #495057; } html[data-bs-theme="dark"] .daterangepicker::after { border-bottom-color: #2b3035; border-top-color: #2b3035; } html[data-bs-theme="dark"] .daterangepicker.drops-up::before { border-top-color: #495057; } html[data-bs-theme="dark"] .daterangepicker.drops-up::after { border-top-color: #2b3035; } /* ?? Calendar table wrapper ?? */ html[data-bs-theme="dark"] .daterangepicker .calendar-table { background-color: #2b3035; border: none; } /* ?? Week-day header cells ?? */ html[data-bs-theme="dark"] .daterangepicker th { color: #6c757d; background-color: transparent; border: none; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ?? Month/year navigation arrows ?? */ html[data-bs-theme="dark"] .daterangepicker th.prev span, html[data-bs-theme="dark"] .daterangepicker th.next span { border-color: #adb5bd; } html[data-bs-theme="dark"] .daterangepicker th.prev:hover, html[data-bs-theme="dark"] .daterangepicker th.next:hover { background-color: #343a40; color: #dee2e6; } /* ?? Month / year header label ?? */ html[data-bs-theme="dark"] .daterangepicker th.month { color: #dee2e6; font-weight: 600; } /* ?? Month / year