/**
 * Route Finder Dark Mode Stylesheet
 * Version: 1.0
 *
 * Features:
 * - Follows browser/system preference by default
 * - Manual toggle with session persistence
 * - Smooth transitions between modes
 * - Applies to filter page, group page, and route info pages
 */

/* ============================================================================
   DARK MODE VARIABLES
   ========================================================================= */

:root {
    /* Light mode colors (defaults) */
    --rf-bg-primary: #ffffff;
    --rf-bg-secondary: #f5f5f5;
    --rf-bg-tertiary: #e9ecef;
    --rf-bg-card: #ffffff;
    --rf-bg-hover: #f8f9fa;

    --rf-text-primary: #212529;
    --rf-text-secondary: #6c757d;
    --rf-text-muted: #adb5bd;

    --rf-border-color: #dee2e6;
    --rf-border-light: #e9ecef;

    --rf-link-color: #0066cc;
    --rf-link-hover: #0052a3;

    --rf-accent-primary: #d30b4c;
    --rf-accent-secondary: #0066cc;

    --rf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --rf-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --rf-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Dark mode colors */
[data-rf-theme="dark"],
.rf-dark-mode {
    --rf-bg-primary: #1a1a1a;
    --rf-bg-secondary: #2d2d2d;
    --rf-bg-tertiary: #3a3a3a;
    --rf-bg-card: #242424;
    --rf-bg-hover: #333333;

    --rf-text-primary: #f8f9fa;
    --rf-text-secondary: #d1d5db;
    --rf-text-muted: #9ca3af;

    --rf-border-color: #404040;
    --rf-border-light: #333333;

    --rf-link-color: #4da3ff;
    --rf-link-hover: #80bdff;

    --rf-accent-primary: #ff2e6e;
    --rf-accent-secondary: #4da3ff;

    --rf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --rf-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --rf-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* Filter button colors for dark mode */
    --rfcc-filter-button-unselected-color: rgba(58, 58, 58, 0.8);
    --rfcc-filter-button-unselected-text-color: #f8f9fa;
    --rfcc-filter-button-selected-color: rgba(208, 213, 219, 0.95);
    --rfcc-filter-button-selected-text-color: #1a1a1a;
    --rfcc-filter-button-selected-hover-color: rgba(64, 64, 64, 0.9);
    --rfcc-filter-button-hover-text-color: #ffffff;
}

/* Auto dark mode based on browser preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-rf-theme="light"]) {
        --rf-bg-primary: #1a1a1a;
        --rf-bg-secondary: #2d2d2d;
        --rf-bg-tertiary: #3a3a3a;
        --rf-bg-card: #242424;
        --rf-bg-hover: #333333;

        --rf-text-primary: #f8f9fa;
        --rf-text-secondary: #d1d5db;
        --rf-text-muted: #9ca3af;

        --rf-border-color: #404040;
        --rf-border-light: #333333;

        --rf-link-color: #4da3ff;
        --rf-link-hover: #80bdff;

        --rf-accent-primary: #ff2e6e;
        --rf-accent-secondary: #4da3ff;

        --rf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --rf-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --rf-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

        /* Filter button colors for dark mode */
        --rfcc-filter-button-unselected-color: rgba(58, 58, 58, 0.8);
        --rfcc-filter-button-unselected-text-color: #f8f9fa;
        --rfcc-filter-button-selected-color: rgba(208, 213, 219, 0.95);
        --rfcc-filter-button-selected-text-color: #1a1a1a;
        --rfcc-filter-button-selected-hover-color: rgba(64, 64, 64, 0.9);
        --rfcc-filter-button-hover-text-color: #ffffff;
    }
}

/* ============================================================================
   SMOOTH TRANSITIONS
   ========================================================================= */

.rf-dark-mode-transition,
.rf-dark-mode-transition * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* ============================================================================
   MAIN LAYOUT ELEMENTS
   ========================================================================= */

/* Body and main containers */
body.rf-dark-mode,
.rf-dark-mode,
[data-rf-theme="dark"] body {
    background-color: var(--rf-bg-primary);
    color: var(--rf-text-primary);
}

.rf-dark-mode .site-content,
.rf-dark-mode #content,
.rf-dark-mode .content-area,
.rf-dark-mode main,
[data-rf-theme="dark"] .site-content,
[data-rf-theme="dark"] #content,
[data-rf-theme="dark"] .content-area,
[data-rf-theme="dark"] main {
    background-color: var(--rf-bg-primary);
    color: var(--rf-text-primary);
}

/* ============================================================================
   ROUTE FILTER PAGE
   ========================================================================= */

/* Filter container */
.rf-dark-mode #simple-route-filter-container,
.rf-dark-mode .filter-controls {
    background-color: var(--rf-bg-secondary);
    border-color: var(--rf-border-color);
}

/* Filter inputs */
.rf-dark-mode input[type="text"],
.rf-dark-mode input[type="number"],
.rf-dark-mode input[type="search"],
.rf-dark-mode select,
.rf-dark-mode textarea {
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    border-color: var(--rf-border-color);
}

.rf-dark-mode input::placeholder,
.rf-dark-mode textarea::placeholder {
    color: var(--rf-text-muted);
}

.rf-dark-mode input:focus,
.rf-dark-mode select:focus,
.rf-dark-mode textarea:focus {
    background-color: var(--rf-bg-hover);
    border-color: var(--rf-accent-secondary);
}

/* Filter buttons */
.rf-dark-mode .filter-button,
.rf-dark-mode .route-shortcut-btn {
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    border-color: var(--rf-border-color);
}

.rf-dark-mode .filter-button:hover,
.rf-dark-mode .route-shortcut-btn:hover {
    background-color: var(--rf-bg-hover);
}

.rf-dark-mode .filter-button.active,
.rf-dark-mode .route-shortcut-btn.active {
    background-color: var(--rf-accent-primary);
    color: #ffffff;
}

/* Quick Filters bar at top of filter page */
.rf-dark-mode .filter-presets-bar,
[data-rf-theme="dark"] .filter-presets-bar {
    background: rgba(45, 45, 45, 0.5) !important;
}

.rf-dark-mode .filter-presets-bar > div > span,
[data-rf-theme="dark"] .filter-presets-bar > div > span {
    color: var(--rf-text-primary) !important;
}

.rf-dark-mode .filter-preset-link,
.rf-dark-mode #clear-preset-link,
[data-rf-theme="dark"] .filter-preset-link,
[data-rf-theme="dark"] #clear-preset-link {
    color: var(--rf-text-primary) !important;
    background: transparent !important;
}

.rf-dark-mode .filter-preset-link:hover,
.rf-dark-mode #clear-preset-link:hover,
[data-rf-theme="dark"] .filter-preset-link:hover,
[data-rf-theme="dark"] #clear-preset-link:hover {
    color: var(--rf-accent-primary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Quick Filter buttons (route shortcuts) - comprehensive dark mode support */
[data-rf-theme="dark"] .route-shortcut-btn,
.rf-dark-mode .route-shortcut-btn,
[data-rf-theme="dark"] .climbing-btn,
.rf-dark-mode .climbing-btn,
[data-rf-theme="dark"] .activity-type-btn,
.rf-dark-mode .activity-type-btn,
[data-rf-theme="dark"] .grade-btn,
.rf-dark-mode .grade-btn,
[data-rf-theme="dark"] .club-group-btn,
.rf-dark-mode .club-group-btn,
[data-rf-theme="dark"] .direction-btn,
.rf-dark-mode .direction-btn {
    background-color: var(--rf-bg-tertiary) !important;
    color: var(--rf-text-primary) !important;
    border-color: var(--rf-border-color) !important;
}

[data-rf-theme="dark"] .route-shortcut-btn:hover,
.rf-dark-mode .route-shortcut-btn:hover,
[data-rf-theme="dark"] .climbing-btn:hover,
.rf-dark-mode .climbing-btn:hover,
[data-rf-theme="dark"] .activity-type-btn:hover,
.rf-dark-mode .activity-type-btn:hover,
[data-rf-theme="dark"] .grade-btn:hover,
.rf-dark-mode .grade-btn:hover,
[data-rf-theme="dark"] .club-group-btn:hover,
.rf-dark-mode .club-group-btn:hover,
[data-rf-theme="dark"] .direction-btn:hover,
.rf-dark-mode .direction-btn:hover {
    background-color: var(--rf-bg-hover) !important;
    color: var(--rf-text-primary) !important;
}

[data-rf-theme="dark"] .route-shortcut-btn.active,
.rf-dark-mode .route-shortcut-btn.active,
[data-rf-theme="dark"] .climbing-btn.active,
.rf-dark-mode .climbing-btn.active,
[data-rf-theme="dark"] .activity-type-btn.active,
.rf-dark-mode .activity-type-btn.active,
[data-rf-theme="dark"] .grade-btn.active,
.rf-dark-mode .grade-btn.active,
[data-rf-theme="dark"] .club-group-btn.active,
.rf-dark-mode .club-group-btn.active,
[data-rf-theme="dark"] .direction-btn.active,
.rf-dark-mode .direction-btn.active {
    background-color: var(--rf-accent-primary) !important;
    color: #ffffff !important;
}

/* Special "All" type route shortcut buttons */
[data-rf-theme="dark"] .route-shortcut-btn.route-shortcut-all,
.rf-dark-mode .route-shortcut-btn.route-shortcut-all {
    border: 1px solid var(--rf-border-color) !important;
}

/* All/None buttons for activity types, club groups, directions */
[data-rf-theme="dark"] .activity-type-all-none-btn,
.rf-dark-mode .activity-type-all-none-btn,
[data-rf-theme="dark"] .club-group-all-none-btn,
.rf-dark-mode .club-group-all-none-btn,
[data-rf-theme="dark"] .direction-all-none-btn,
.rf-dark-mode .direction-all-none-btn {
    background-color: var(--rf-bg-tertiary) !important;
    color: var(--rf-text-primary) !important;
    border-color: var(--rf-border-color) !important;
}

[data-rf-theme="dark"] .activity-type-all-none-btn:hover,
.rf-dark-mode .activity-type-all-none-btn:hover,
[data-rf-theme="dark"] .club-group-all-none-btn:hover,
.rf-dark-mode .club-group-all-none-btn:hover,
[data-rf-theme="dark"] .direction-all-none-btn:hover,
.rf-dark-mode .direction-all-none-btn:hover {
    background-color: var(--rf-bg-hover) !important;
    color: var(--rf-text-primary) !important;
}

/* ============================================================================
   ROUTE CARDS
   ========================================================================= */

.rf-dark-mode .route-item,
.rf-dark-mode .route-group-card,
.rf-dark-mode .route-card {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border-color: var(--rf-border-color);
    color: var(--rf-text-primary);
    box-shadow: var(--rf-shadow-md);
}

.rf-dark-mode .route-item-content p {
    color: #cccccc !important;
}

.rf-dark-mode .route-item:hover,
.rf-dark-mode .route-group-card:hover,
.rf-dark-mode .route-card:hover {
    background-color: var(--rf-bg-hover);
    box-shadow: var(--rf-shadow-lg);
}

.rf-dark-mode .route-title,
.rf-dark-mode .route-name,
[data-rf-theme="dark"] .route-title,
[data-rf-theme="dark"] .route-name {
    color: var(--rf-text-primary);
}

.rf-dark-mode .route-description,
.rf-dark-mode .route-excerpt,
[data-rf-theme="dark"] .route-description,
[data-rf-theme="dark"] .route-excerpt {
    color: var(--rf-text-secondary);
}

.rf-dark-mode .route-meta,
.rf-dark-mode .route-stats,
[data-rf-theme="dark"] .route-meta,
[data-rf-theme="dark"] .route-stats {
    color: #ffffff !important;
}

/* Mini route card stat values (distance, direction, elevation) */
.rf-dark-mode .route-stats .stat,
.rf-dark-mode .route-stats .stat-value,
.rf-dark-mode .route-stats .stat-icon,
[data-rf-theme="dark"] .route-stats .stat,
[data-rf-theme="dark"] .route-stats .stat-value,
[data-rf-theme="dark"] .route-stats .stat-icon {
    color: #ffffff !important;
}

/* Route badges */
.rf-dark-mode .route-badge,
.rf-dark-mode .activity-badge,
.rf-dark-mode .grade-badge {
    background-color: var(--rf-bg-tertiary);
    color: var(--rf-text-primary);
    border-color: var(--rf-border-color);
}

/* ============================================================================
   ROUTE INFO PAGE (Single Route)
   ========================================================================= */

.rf-dark-mode .route-header,
.rf-dark-mode .route-info-section,
[data-rf-theme="dark"] .route-header,
[data-rf-theme="dark"] .route-info-section {
    background-color: var(--rf-bg-card);
    border-color: var(--rf-border-color);
}

.rf-dark-mode .route-details-table,
[data-rf-theme="dark"] .route-details-table {
    background-color: var(--rf-bg-card);
}

.rf-dark-mode .route-details-table tr,
[data-rf-theme="dark"] .route-details-table tr {
    border-color: var(--rf-border-color) !important;
}

.rf-dark-mode .route-details-table th,
[data-rf-theme="dark"] .route-details-table th {
    color: var(--rf-text-primary) !important;
    background-color: var(--rf-bg-secondary);
}

.rf-dark-mode .route-details-table td,
[data-rf-theme="dark"] .route-details-table td {
    color: #ffffff !important;
}

/* Turn-by-turn directions and route metadata */
.rf-dark-mode .route-description,
.rf-dark-mode .route-meta,
.rf-dark-mode .route-stats,
.rf-dark-mode .directions-list,
.rf-dark-mode .turn-instruction,
[data-rf-theme="dark"] .route-description,
[data-rf-theme="dark"] .route-meta,
[data-rf-theme="dark"] .route-stats,
[data-rf-theme="dark"] .directions-list,
[data-rf-theme="dark"] .turn-instruction {
    color: #ffffff !important;
}

/* Route Description section - white text in dark mode */
.rf-dark-mode .route-desc,
.rf-dark-mode .route-desc p,
.rf-dark-mode .route-desc span,
.rf-dark-mode .route-desc div,
[data-rf-theme="dark"] .route-desc,
[data-rf-theme="dark"] .route-desc p,
[data-rf-theme="dark"] .route-desc span,
[data-rf-theme="dark"] .route-desc div {
    color: #ffffff !important;
}

/* Ride table (main route info table) - white text in dark mode */
.rf-dark-mode .ride-table,
.rf-dark-mode .ride-table td,
.rf-dark-mode .ride-table th,
[data-rf-theme="dark"] .ride-table,
[data-rf-theme="dark"] .ride-table td,
[data-rf-theme="dark"] .ride-table th {
    color: #ffffff !important;
}

/* Full Description - white text in dark mode for better readability */
.rf-dark-mode .full-description,
.rf-dark-mode .full-description p,
.rf-dark-mode .full-description span,
.rf-dark-mode .full-description div,
[data-rf-theme="dark"] .full-description,
[data-rf-theme="dark"] .full-description p,
[data-rf-theme="dark"] .full-description span,
[data-rf-theme="dark"] .full-description div {
    color: #ffffff !important;
}

/* Route titles should be bright */
.rf-dark-mode .route-title,
.rf-dark-mode .route-name,
.rf-dark-mode h1,
.rf-dark-mode h2,
.rf-dark-mode h3,
[data-rf-theme="dark"] .route-title,
[data-rf-theme="dark"] .route-name,
[data-rf-theme="dark"] h1,
[data-rf-theme="dark"] h2,
[data-rf-theme="dark"] h3 {
    color: var(--rf-text-primary) !important;
}

/* Turn-by-turn directions section */
.rf-dark-mode .rfcc-prompt-card-section,
[data-rf-theme="dark"] .rfcc-prompt-card-section {
    background-color: var(--rf-bg-card) !important;
    border-color: var(--rf-border-color) !important;
}

.rf-dark-mode .rfcc-prompt-card-header h3,
[data-rf-theme="dark"] .rfcc-prompt-card-header h3 {
    color: var(--rf-text-primary) !important;
}

.rf-dark-mode .rfcc-prompt-card-header:hover h3,
[data-rf-theme="dark"] .rfcc-prompt-card-header:hover h3 {
    color: var(--rf-accent-primary) !important;
}

.rf-dark-mode .rfcc-toggle-prompt-card,
[data-rf-theme="dark"] .rfcc-toggle-prompt-card {
    color: var(--rf-text-secondary) !important;
}

.rf-dark-mode .rfcc-prompt-card-excerpt,
[data-rf-theme="dark"] .rfcc-prompt-card-excerpt {
    color: var(--rf-text-secondary) !important;
}

.rf-dark-mode .rfcc-prompt-card-content,
[data-rf-theme="dark"] .rfcc-prompt-card-content {
    color: var(--rf-text-primary) !important;
}

.rf-dark-mode .prompt-card-attribution,
[data-rf-theme="dark"] .prompt-card-attribution {
    background-color: var(--rf-bg-secondary) !important;
    color: var(--rf-text-secondary) !important;
}

.rf-dark-mode .prompt-card-attribution a,
[data-rf-theme="dark"] .prompt-card-attribution a {
    color: var(--rf-accent-primary) !important;
}

/* Prompt card table - better readability */
.rf-dark-mode .prompt-card-table,
[data-rf-theme="dark"] .prompt-card-table {
    background-color: var(--rf-bg-card) !important;
    color: var(--rf-text-primary) !important;
}

.rf-dark-mode .prompt-card-table th,
[data-rf-theme="dark"] .prompt-card-table th {
    background-color: var(--rf-bg-secondary) !important;
    color: var(--rf-text-primary) !important;
    border-color: var(--rf-border-color) !important;
}

.rf-dark-mode .prompt-card-table td,
[data-rf-theme="dark"] .prompt-card-table td {
    background-color: var(--rf-bg-card) !important;
    color: var(--rf-text-primary) !important;
    border-color: var(--rf-border-color) !important;
}

.rf-dark-mode .prompt-card-table tr:hover td,
[data-rf-theme="dark"] .prompt-card-table tr:hover td {
    background-color: var(--rf-bg-hover) !important;
}

/* ============================================================================
   GROUP PAGE (Multiple Routes)
   ========================================================================= */

.rf-dark-mode .route-group-header,
.rf-dark-mode .group-info {
    background-color: var(--rf-bg-card);
    border-color: var(--rf-border-color);
}

.rf-dark-mode .group-description {
    color: var(--rf-text-secondary);
}

.rf-dark-mode .route-variants-list {
    background-color: var(--rf-bg-secondary);
}

/* ============================================================================
   MAPS
   ========================================================================= */

.rf-dark-mode .map-container {
    border-color: var(--rf-border-color);
}

/* Dark mode map overlay - dims map by 20% for better visibility
   Only applied when dark mode is active AND the dimming setting is enabled */
.rf-dark-mode .leaflet-map-wrapper.rfcc-dark-mode-dim::after,
[data-rf-theme="dark"] .leaflet-map-wrapper.rfcc-dark-mode-dim::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 400;
    transition: opacity 0.3s ease;
}

/* Map controls on group route page */
.rf-dark-mode .map-controls {
    background: #2a2a2a !important;
    border-color: #444 !important;
}

.rf-dark-mode .show-only-btn {
    background: #0a7ea4 !important;
}

.rf-dark-mode .show-only-btn:hover {
    background: #096d8f !important;
}

.rf-dark-mode .show-only-btn.active {
    background: #c0392b !important;
}

.rf-dark-mode .skip-to-facts-btn {
    background: #1a6fd6 !important;
}

.rf-dark-mode .skip-to-facts-btn:hover {
    background: #155bb8 !important;
}

.rf-dark-mode .map-controls .apply-filters-btn {
    background: #0a7ea4 !important;
}

.rf-dark-mode .map-controls .apply-filters-btn:hover {
    background: #096d8f !important;
}

/* Overlay menu above maps (single and group routes) */
.rf-dark-mode .route-map-menu-bar {
    background: rgba(42, 42, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode .route-map-menu-item {
    color: #e0e0e0 !important;
}

.rf-dark-mode .route-map-menu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.rf-dark-mode .route-map-menu-item.active {
    background: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode .route-map-dropdown {
    background: rgba(42, 42, 42, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode .dropdown-item {
    color: #e0e0e0 !important;
}

.rf-dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.rf-dark-mode .check-mark {
    color: #4a9eff !important;
}

.rf-dark-mode .item-icon {
    color: #aaa !important;
}

.rf-dark-mode .item-arrow {
    color: #777 !important;
}

.rf-dark-mode .submenu {
    background: rgba(42, 42, 42, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode .submenu-item {
    color: #e0e0e0 !important;
}

.rf-dark-mode .submenu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.rf-dark-mode .radio-mark {
    color: #4a9eff !important;
}

.rf-dark-mode .dropdown-divider {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Leaflet map dark mode styles */
.rf-dark-mode .leaflet-container {
    background-color: var(--rf-bg-secondary);
}

.rf-dark-mode .leaflet-popup-content-wrapper {
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
}

.rf-dark-mode .leaflet-popup-tip {
    background-color: var(--rf-bg-card);
}

/* Leaflet map controls - zoom and layers */
.rf-dark-mode .leaflet-control-zoom,
.rf-dark-mode .leaflet-control-layers,
[data-rf-theme="dark"] .leaflet-control-zoom,
[data-rf-theme="dark"] .leaflet-control-layers {
    background-color: rgba(42, 42, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
}

/* Zoom buttons (+/-) */
.rf-dark-mode .leaflet-control-zoom a,
[data-rf-theme="dark"] .leaflet-control-zoom a {
    background-color: rgba(42, 42, 42, 0.95) !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.rf-dark-mode .leaflet-control-zoom a:hover,
[data-rf-theme="dark"] .leaflet-control-zoom a:hover {
    background-color: rgba(60, 60, 60, 0.95) !important;
    color: #ffffff !important;
}

.rf-dark-mode .leaflet-control-zoom a.leaflet-disabled,
[data-rf-theme="dark"] .leaflet-control-zoom a.leaflet-disabled {
    background-color: rgba(42, 42, 42, 0.95) !important;
    color: #666 !important;
    cursor: default;
}

/* Fullscreen button - match zoom controls exactly */
.rf-dark-mode .leaflet-control-fullscreen,
[data-rf-theme="dark"] .leaflet-control-fullscreen {
    background-color: rgba(42, 42, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px !important;
}

.rf-dark-mode .leaflet-control-fullscreen a,
[data-rf-theme="dark"] .leaflet-control-fullscreen a {
    border: none !important;
}

.rf-dark-mode a.leaflet-fullscreen-icon,
[data-rf-theme="dark"] a.leaflet-fullscreen-icon {
    -webkit-filter: invert(1) !important;
    filter: invert(1) !important;
    background-color: rgba(213, 213, 213, 0.95) !important;
}

.rf-dark-mode .leaflet-control-fullscreen a:hover,
[data-rf-theme="dark"] .leaflet-control-fullscreen a:hover {
    background-color: rgba(60, 60, 60, 0.95) !important;
    color: #ffffff !important;
}

/* Layers control - exact match to zoom button style */
.rf-dark-mode .leaflet-control-layers,
[data-rf-theme="dark"] .leaflet-control-layers {
    background-color: transparent !important;
    border: none !important;
}

.rf-dark-mode .leaflet-control-layers-toggle,
[data-rf-theme="dark"] .leaflet-control-layers-toggle {
    background-color: rgba(42, 42, 42, 0.95) !important;
    color: #e0e0e0 !important;
}

.rf-dark-mode .leaflet-control-layers-toggle:hover,
[data-rf-theme="dark"] .leaflet-control-layers-toggle:hover {
    background-color: rgba(60, 60, 60, 0.95) !important;
    color: #ffffff !important;
}

.rf-dark-mode .leaflet-control-layers-expanded,
[data-rf-theme="dark"] .leaflet-control-layers-expanded {
    color: #e0e0e0 !important;
    background-color: rgba(42, 42, 42, 0.95) !important;
}

.rf-dark-mode .leaflet-control-layers-base label,
.rf-dark-mode .leaflet-control-layers-overlays label,
[data-rf-theme="dark"] .leaflet-control-layers-base label,
[data-rf-theme="dark"] .leaflet-control-layers-overlays label {
    color: #e0e0e0 !important;
}

.rf-dark-mode .leaflet-control-layers-separator,
[data-rf-theme="dark"] .leaflet-control-layers-separator {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Attribution control */
.rf-dark-mode .leaflet-control-attribution,
[data-rf-theme="dark"] .leaflet-control-attribution {
    background-color: rgba(42, 42, 42, 0.8) !important;
    color: #d1d5db !important;
}

.rf-dark-mode .leaflet-control-attribution a,
[data-rf-theme="dark"] .leaflet-control-attribution a {
    color: #4da3ff !important;
}

/* ============================================================================
   ELEVATION PROFILE
   ========================================================================= */

/* Elevation profile containers - subtle dark overlay */
.rf-dark-mode #elevation-profile-wrapper,
.rf-dark-mode .elevation-profile-section,
.rf-dark-mode .elevation-profile-wrapper,
.rf-dark-mode #elevation-container,
[data-rf-theme="dark"] #elevation-profile-wrapper,
[data-rf-theme="dark"] .elevation-profile-section,
[data-rf-theme="dark"] .elevation-profile-wrapper,
[data-rf-theme="dark"] #elevation-container {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Leaflet elevation control - lighter background with transparency */
.rf-dark-mode .elevation-detached,
.rf-dark-mode .leaflet-control-elevation,
[data-rf-theme="dark"] .elevation-detached,
[data-rf-theme="dark"] .leaflet-control-elevation {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Elevation chart SVG background - semi-transparent */
.rf-dark-mode .elevation-detached svg,
.rf-dark-mode .leaflet-control-elevation svg,
[data-rf-theme="dark"] .elevation-detached svg,
[data-rf-theme="dark"] .leaflet-control-elevation svg {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Elevation chart text elements - softer light grey, no stroke/outline */
.rf-dark-mode .elevation-detached text,
.rf-dark-mode .leaflet-control-elevation text,
.rf-dark-mode .elevation-detached .axis text,
.rf-dark-mode .leaflet-control-elevation .axis text,
.rf-dark-mode .elevation-detached text tspan,
.rf-dark-mode .leaflet-control-elevation text tspan,
.rf-dark-mode .elevation-detached .tick text,
.rf-dark-mode .leaflet-control-elevation .tick text,
[data-rf-theme="dark"] .elevation-detached text,
[data-rf-theme="dark"] .leaflet-control-elevation text,
[data-rf-theme="dark"] .elevation-detached .axis text,
[data-rf-theme="dark"] .leaflet-control-elevation .axis text,
[data-rf-theme="dark"] .elevation-detached text tspan,
[data-rf-theme="dark"] .leaflet-control-elevation text tspan,
[data-rf-theme="dark"] .elevation-detached .tick text,
[data-rf-theme="dark"] .leaflet-control-elevation .tick text {
    fill: #d1d5db !important;
    font-weight: normal !important;
    stroke: none !important;
    stroke-width: 0 !important;
    text-shadow: none !important;
    paint-order: normal !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-stroke-width: 0 !important;
}

/* Elevation chart grid lines and axes - very subtle */
.rf-dark-mode .elevation-detached .grid line,
.rf-dark-mode .elevation-detached .axis line,
.rf-dark-mode .elevation-detached .axis path,
.rf-dark-mode .leaflet-control-elevation .grid line,
.rf-dark-mode .leaflet-control-elevation .axis line,
.rf-dark-mode .leaflet-control-elevation .axis path,
[data-rf-theme="dark"] .elevation-detached .grid line,
[data-rf-theme="dark"] .elevation-detached .axis line,
[data-rf-theme="dark"] .elevation-detached .axis path,
[data-rf-theme="dark"] .leaflet-control-elevation .grid line,
[data-rf-theme="dark"] .leaflet-control-elevation .axis line,
[data-rf-theme="dark"] .leaflet-control-elevation .axis path {
    stroke: rgba(255, 255, 255, 0.15) !important;
}

/* Elevation chart background area - keep light for readability */
.rf-dark-mode .elevation-detached .background,
.rf-dark-mode .leaflet-control-elevation .background,
[data-rf-theme="dark"] .elevation-detached .background,
[data-rf-theme="dark"] .leaflet-control-elevation .background {
    fill: rgba(255, 255, 255, 0.03) !important;
}

/* Elevation profile labels and tooltips - subtle styling */
.rf-dark-mode .elevation-detached .elevation-text,
.rf-dark-mode .leaflet-control-elevation .elevation-text,
.rf-dark-mode .elevation-detached .tooltip,
.rf-dark-mode .leaflet-control-elevation .tooltip,
[data-rf-theme="dark"] .elevation-detached .elevation-text,
[data-rf-theme="dark"] .leaflet-control-elevation .elevation-text,
[data-rf-theme="dark"] .elevation-detached .tooltip,
[data-rf-theme="dark"] .leaflet-control-elevation .tooltip {
    color: #d1d5db !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    font-weight: normal !important;
}

/* Elevation summary text - readable grey */
.rf-dark-mode .elevation-detached .elevation-summary,
.rf-dark-mode .leaflet-control-elevation .elevation-summary,
[data-rf-theme="dark"] .elevation-detached .elevation-summary,
[data-rf-theme="dark"] .leaflet-control-elevation .elevation-summary {
    color: #d1d5db !important;
    font-weight: normal !important;
}

/* ============================================================================
   NAVIGATION & PAGINATION
   ========================================================================= */

.rf-dark-mode .pagination,
.rf-dark-mode .page-numbers {
    background-color: var(--rf-bg-card);
    border-color: var(--rf-border-color);
}

.rf-dark-mode .page-numbers a {
    color: var(--rf-link-color);
}

.rf-dark-mode .page-numbers a:hover {
    color: var(--rf-link-hover);
    background-color: var(--rf-bg-hover);
}

.rf-dark-mode .page-numbers.current {
    background-color: var(--rf-accent-primary);
    color: #ffffff;
}

/* ============================================================================
   LINKS
   ========================================================================= */

.rf-dark-mode a {
    color: var(--rf-link-color);
}

.rf-dark-mode a:hover {
    color: var(--rf-link-hover);
}

/* ============================================================================
   PASSWORD PROTECTION
   ========================================================================= */

/* Global unlock prompt box */
.rf-dark-mode .rfcc-global-unlock-prompt {
    background: var(--rf-bg-card) !important;
    border-color: var(--rf-accent-primary) !important;
}

.rf-dark-mode .rfcc-global-unlock-prompt h3 {
    color: var(--rf-text-primary) !important;
}

.rf-dark-mode .rfcc-global-unlock-prompt p {
    color: var(--rf-text-secondary) !important;
}

.rf-dark-mode .rfcc-global-unlock-input,
.rf-dark-mode #rfcc-global-unlock-password {
    background-color: var(--rf-bg-secondary) !important;
    color: var(--rf-text-primary) !important;
    border-color: var(--rf-border-color) !important;
}

.rf-dark-mode .rfcc-global-unlock-input::placeholder,
.rf-dark-mode #rfcc-global-unlock-password::placeholder {
    color: var(--rf-text-muted) !important;
}

.rf-dark-mode .rfcc-global-unlock-input:focus,
.rf-dark-mode #rfcc-global-unlock-password:focus {
    background-color: var(--rf-bg-hover) !important;
    border-color: var(--rf-accent-secondary) !important;
}

/* Password input groups on route cards */
.rf-dark-mode .rfcc-password-input-group input {
    background-color: var(--rf-bg-secondary) !important;
    color: var(--rf-text-primary) !important;
    border-color: var(--rf-border-color) !important;
}

.rf-dark-mode .rfcc-password-input-group input::placeholder {
    color: var(--rf-text-muted) !important;
}

/* Password description placeholder */
.rf-dark-mode .rfcc-description-placeholder {
    color: var(--rf-text-secondary) !important;
    background-color: var(--rf-bg-secondary) !important;
    padding: 12px !important;
    border-radius: 4px !important;
    border-left: 3px solid var(--rf-accent-primary) !important;
}

/* ============================================================================
   BUTTONS
   ========================================================================= */

.rf-dark-mode button,
.rf-dark-mode .button,
.rf-dark-mode .btn {
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    border-color: var(--rf-border-color);
}

.rf-dark-mode button:hover,
.rf-dark-mode .button:hover,
.rf-dark-mode .btn:hover {
    background-color: var(--rf-bg-hover);
}

.rf-dark-mode button.primary,
.rf-dark-mode .button.primary,
.rf-dark-mode .btn-primary {
    background-color: var(--rf-accent-primary);
    color: #ffffff;
    border-color: var(--rf-accent-primary);
}

/* ============================================================================
   TABLES
   ========================================================================= */

.rf-dark-mode table {
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
}

.rf-dark-mode table thead {
    background-color: var(--rf-bg-secondary);
    border-color: var(--rf-border-color);
}

.rf-dark-mode table tbody tr {
    border-color: var(--rf-border-light);
}

.rf-dark-mode table tbody tr:hover {
    background-color: var(--rf-bg-hover);
}

/* ============================================================================
   FORMS
   ========================================================================= */

.rf-dark-mode .form-group label {
    color: var(--rf-text-primary);
}

.rf-dark-mode .form-control {
    background-color: var(--rf-bg-card);
    color: var(--rf-text-primary);
    border-color: var(--rf-border-color);
}

.rf-dark-mode .form-control:focus {
    background-color: var(--rf-bg-hover);
    border-color: var(--rf-accent-secondary);
}

/* ============================================================================
   DARK MODE TOGGLE BUTTON
   ========================================================================= */

.rf-dark-mode-toggle {
    position: absolute;
    top: 200px;
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--rf-bg-card);
    border: 2px solid var(--rf-border-color);
    box-shadow: var(--rf-shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.rf-dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--rf-shadow-lg);
}

.rf-dark-mode-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--rf-text-primary);
}

/* Hide/show icons based on mode */
.rf-dark-mode-toggle .icon-sun {
    display: none;
}

.rf-dark-mode-toggle .icon-moon {
    display: block;
}

[data-rf-theme="dark"] .rf-dark-mode-toggle .icon-sun {
    display: block;
}

[data-rf-theme="dark"] .rf-dark-mode-toggle .icon-moon {
    display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .rf-dark-mode-toggle {
        top: 150px;
        right: 10px;
        width: 44px;
        height: 44px;
    }

    .rf-dark-mode-toggle svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ========================================================================= */

.rf-dark-mode :focus {
    outline-color: var(--rf-accent-secondary);
}

.rf-dark-mode :focus-visible {
    outline: 2px solid var(--rf-accent-secondary);
    outline-offset: 2px;
}

/* ============================================================================
   SCROLLBAR (Webkit browsers)
   ========================================================================= */

.rf-dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.rf-dark-mode ::-webkit-scrollbar-track {
    background: var(--rf-bg-secondary);
}

.rf-dark-mode ::-webkit-scrollbar-thumb {
    background: var(--rf-bg-tertiary);
    border-radius: 6px;
}

.rf-dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--rf-border-color);
}

/* ============================================================================
   WEATHER TIMELINE SLIDER
   ========================================================================= */

/* Weather Timeline container */
.rf-dark-mode .rfcc-weather-timeline,
[data-rf-theme="dark"] .rfcc-weather-timeline {
    background: rgba(42, 42, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Timeline buttons */
.rf-dark-mode .timeline-btn,
[data-rf-theme="dark"] .timeline-btn {
    background: #4a9eff !important;
    color: #ffffff !important;
}

.rf-dark-mode .timeline-btn:hover,
[data-rf-theme="dark"] .timeline-btn:hover {
    background: #3a8ee0 !important;
}

.rf-dark-mode .timeline-btn:disabled,
[data-rf-theme="dark"] .timeline-btn:disabled {
    background: #555 !important;
    opacity: 0.5;
}

/* Timeline slider track */
.rf-dark-mode #weather-timeline-slider,
[data-rf-theme="dark"] #weather-timeline-slider {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
}

/* Slider thumb (Chrome/Safari) */
.rf-dark-mode #weather-timeline-slider::-webkit-slider-thumb,
[data-rf-theme="dark"] #weather-timeline-slider::-webkit-slider-thumb {
    background: #4a9eff !important;
}

.rf-dark-mode #weather-timeline-slider::-webkit-slider-thumb:hover,
[data-rf-theme="dark"] #weather-timeline-slider::-webkit-slider-thumb:hover {
    background: #3a8ee0 !important;
}

/* Slider thumb (Firefox) */
.rf-dark-mode #weather-timeline-slider::-moz-range-thumb,
[data-rf-theme="dark"] #weather-timeline-slider::-moz-range-thumb {
    background: #4a9eff !important;
}

.rf-dark-mode #weather-timeline-slider::-moz-range-thumb:hover,
[data-rf-theme="dark"] #weather-timeline-slider::-moz-range-thumb:hover {
    background: #3a8ee0 !important;
}

/* Current time display */
.rf-dark-mode #weather-current-time,
[data-rf-theme="dark"] #weather-current-time {
    color: #e0e0e0 !important;
}

.rf-dark-mode #weather-current-time .time-text,
[data-rf-theme="dark"] #weather-current-time .time-text {
    color: #e0e0e0 !important;
}

.rf-dark-mode #weather-current-time .temp-text,
[data-rf-theme="dark"] #weather-current-time .temp-text {
    color: #d0d0d0 !important;
}

.rf-dark-mode #weather-current-time .wind-text,
[data-rf-theme="dark"] #weather-current-time .wind-text {
    color: #b0b0b0 !important;
}

.rf-dark-mode #weather-current-time .wind-text i,
[data-rf-theme="dark"] #weather-current-time .wind-text i {
    color: #4a9eff !important;
}

/* Weather forecast banner */
.rf-dark-mode .rfcc-weather-banner,
[data-rf-theme="dark"] .rfcc-weather-banner {
    background: #2d2d2d !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode .banner-toggle,
[data-rf-theme="dark"] .banner-toggle {
    background: rgba(42, 42, 42, 0.95) !important;
    color: #e0e0e0 !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode .banner-toggle:hover,
[data-rf-theme="dark"] .banner-toggle:hover {
    background: rgba(60, 60, 60, 0.95) !important;
}

.rf-dark-mode .banner-toggle i,
[data-rf-theme="dark"] .banner-toggle i {
    color: #4a9eff !important;
}

.rf-dark-mode .banner-toggle .city-name,
[data-rf-theme="dark"] .banner-toggle .city-name {
    color: #9aa0a6 !important;
}

.rf-dark-mode .banner-content,
[data-rf-theme="dark"] .banner-content {
    background: #3a3a3a !important;
}

.rf-dark-mode .forecast-item,
[data-rf-theme="dark"] .forecast-item {
    background: #2d2d2d !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode .forecast-item:hover,
[data-rf-theme="dark"] .forecast-item:hover {
    border-color: #4a9eff !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3) !important;
}

.rf-dark-mode .forecast-item.active,
[data-rf-theme="dark"] .forecast-item.active {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.2) 0%, rgba(74, 158, 255, 0.1) 100%) !important;
    border-color: #4a9eff !important;
}

.rf-dark-mode .forecast-time,
[data-rf-theme="dark"] .forecast-time {
    color: #b0b0b0 !important;
}

.rf-dark-mode .forecast-item.active .forecast-time,
[data-rf-theme="dark"] .forecast-item.active .forecast-time {
    color: #4a9eff !important;
}

.rf-dark-mode .temp-value,
[data-rf-theme="dark"] .temp-value {
    color: #e0e0e0 !important;
}

.rf-dark-mode .temp-feels,
[data-rf-theme="dark"] .temp-feels {
    color: #999 !important;
}

.rf-dark-mode .forecast-wind,
[data-rf-theme="dark"] .forecast-wind {
    color: #b0b0b0 !important;
}

.rf-dark-mode .forecast-wind i,
[data-rf-theme="dark"] .forecast-wind i {
    color: #4a9eff !important;
}

.rf-dark-mode .forecast-precip,
[data-rf-theme="dark"] .forecast-precip {
    color: #b0b0b0 !important;
}

.rf-dark-mode .forecast-precip i,
[data-rf-theme="dark"] .forecast-precip i {
    color: #5dade2 !important;
}

/* Weather banner scrollbar */
.rf-dark-mode .banner-content::-webkit-scrollbar-track,
[data-rf-theme="dark"] .banner-content::-webkit-scrollbar-track {
    background: #2d2d2d !important;
}

.rf-dark-mode .banner-content::-webkit-scrollbar-thumb,
[data-rf-theme="dark"] .banner-content::-webkit-scrollbar-thumb {
    background: #4a9eff !important;
}

.rf-dark-mode .banner-content::-webkit-scrollbar-thumb:hover,
[data-rf-theme="dark"] .banner-content::-webkit-scrollbar-thumb:hover {
    background: #3a8ee0 !important;
}

/* Riding Conditions Display - matches weather banner exactly */
.rf-dark-mode #weather-conditions-display,
[data-rf-theme="dark"] #weather-conditions-display {
    background: #2d2d2d !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode #weather-conditions-display[data-text-type],
[data-rf-theme="dark"] #weather-conditions-display[data-text-type] {
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #999;
    --icon-color: #4a9eff;
    --border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   MAP DRAG HANDLE
   ========================================================================= */

/* Map resize drag handle */
.rf-dark-mode #map-drag-handle,
[data-rf-theme="dark"] #map-drag-handle {
    background: rgba(255, 255, 255, 0.15) !important;
}

.rf-dark-mode #map-drag-handle:hover,
[data-rf-theme="dark"] #map-drag-handle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.rf-dark-mode #map-drag-handle span,
[data-rf-theme="dark"] #map-drag-handle span {
    color: rgba(255, 255, 255, 0.7) !important;
}

.rf-dark-mode #map-drag-handle #shrink-btn:hover,
.rf-dark-mode #map-drag-handle #grow-btn:hover,
[data-rf-theme="dark"] #map-drag-handle #shrink-btn:hover,
[data-rf-theme="dark"] #map-drag-handle #grow-btn:hover {
    color: #4a9eff !important;
    transform: scale(1.2);
}

/* ============================================================================
   PRINT STYLES (Always light mode)
   ========================================================================= */

@media print {
    .rf-dark-mode-toggle {
        display: none !important;
    }

    .rf-dark-mode {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}