/* =========================================
   1. SZÍNVÁLTOZÓK (Alap és Színtévesztő mód)
   ========================================= */
:root {
    --status-warning: #FFC107;
    --status-success: #28A745;
    --status-danger: #DC3545;
    --status-primary: #007BFF;
    --status-primary-transparent: rgba(0, 123, 255, 0.1);
}

/* Okabe-Ito paletta aktiválása */
body.colorblind-mode {
    --status-warning: #E69F00;
    --status-success: #0072B2;
    --status-danger: #CC79A7;
    --status-primary: #56B4E9;
    --status-primary-transparent: rgba(86, 180, 233, 0.1);
}

/* =========================================
   2. ÜVEGHATÁSÚ PANELEK ÉS KERESŐ
   ========================================= */
.search-box-container, .master-panel, #info-bottom-sheet { 
    background: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    color: #333;
}

.search-box-container { position: relative; display: flex; align-items: center; padding: 2px 5px; border-radius: 8px; margin-bottom: 5px; }
.search-box-input { border: none; outline: none; padding: 6px 6px; font-size: 15px; width: 140px; background: transparent; color: inherit; }
.search-box-btn { background: none; border: none; font-size: 16px; cursor: pointer; padding: 6px; color: inherit; }
.search-box-btn:hover { color: var(--status-primary); } /* Változóra cserélve */

.search-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: none; max-height: 200px; overflow-y: auto; z-index: 1000; margin-top: 4px; border: 1px solid #ddd; }
.search-suggestion-item { padding: 10px; font-size: 13px; line-height: 1.3; cursor: pointer; border-bottom: 1px solid #eee; }
.search-suggestion-item:hover { background: var(--status-primary-transparent); } /* Változóra cserélve */

/* =========================================
   3. MASTER PANEL (Jobb oldal)
   ========================================= */
.master-panel { 
    padding: 12px 15px !important; 
    border-radius: 12px !important; 
    max-width: 260px; 
    max-height: 80vh; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    transition: all 0.3s ease; 
    will-change: transform; 
}
.master-panel::-webkit-scrollbar { width: 5px; }
.master-panel::-webkit-scrollbar-track { background: transparent; }
.master-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }

.legend-filter-item { transition: transform 0.2s; }
.legend-filter-item:hover { transform: scale(1.02); opacity: 1 !important; }

.stat-bar-container { height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; margin: 4px 0 8px 0; overflow: hidden; }
.stat-bar { height: 100%; transition: width 0.5s ease-out; }

path.leaflet-interactive { outline: none !important; -webkit-tap-highlight-color: transparent; transition: fill-opacity 0.15s ease, fill-color 0.15s ease, stroke-width 0.1s ease; }
.opacity-slider { width: 100%; cursor: pointer; }

/* PRÉMIUM ÖSSZECSUKHATÓ PANEL CSS */
.legend-body-wrapper { max-height: 800px; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease; opacity: 1; }
.legend-body-wrapper.collapsed { max-height: 0 !important; opacity: 0; margin-top: 0 !important; }
.legend-collapse-handle { width: 100%; height: 18px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-top: 5px; padding-top: 3px; }
.legend-collapse-handle::after { content: ''; width: 40px; height: 4px; background-color: #d1d5db; border-radius: 4px; transition: background-color 0.2s, transform 0.3s; }
.legend-collapse-handle:hover::after { background-color: #9ca3af; }
.legend-collapse-handle.collapsed-state::after { background-color: var(--status-primary); } /* Változóra cserélve */

/* =========================================
   4. SÖTÉT MÓD UI OSZTÁLYOK ÉS ATTRIBUTION
   ========================================= */
.dark-mode-ui { background: rgba(30, 30, 30, 0.85) !important; color: #f0f0f0 !important; border-color: rgba(255,255,255,0.1) !important; }
.dark-mode-ui .search-suggestions { background: rgba(40,40,40,0.95); border-color: #555; }
.dark-mode-ui .search-suggestion-item { border-color: #444; }
.dark-mode-ui .search-suggestion-item:hover { background: rgba(255,255,255,0.1); }
.dark-mode-ui .stat-bar-container { background: rgba(255,255,255,0.1); }
.dark-mode-ui hr, .dark-mode-ui #master-settings-content { border-color: #555 !important; }
.dark-mode-ui button#force-refresh-btn { background: #444 !important; color: #fff !important; border-color: #666 !important; }
.dark-mode-ui #forecast-slider-container { background: rgba(255,255,255,0.05) !important; border-color: #555 !important; }
.dark-mode-ui #fc-day-label, .dark-mode-ui strong { color: #ffffff !important; } /* JAVÍTVA: fekete helyett fehér szöveg! */
.dark-mode-ui::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); }

.dark-mode-ui .legend-collapse-handle::after { background-color: #555; }
.dark-mode-ui .legend-collapse-handle:hover::after { background-color: #777; }
.dark-mode-ui .legend-collapse-handle.collapsed-state::after { background-color: var(--status-primary); } /* Változóra cserélve */

.leaflet-control-attribution { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(5px); border-radius: 4px 0 0 0; font-size: 10px !important; color: #555 !important; padding: 2px 5px !important; }
.dark-mode-attribution .leaflet-control-attribution { background: rgba(30,30,30,0.7) !important; color: #aaa !important; }
.dark-mode-attribution .leaflet-control-attribution a { color: var(--status-primary) !important; } /* Változóra cserélve */

/* =========================================
   5. RENDSZER ELEMEK (Betöltő, Bottom Sheet)
   ========================================= */
#map-loader-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(230, 234, 238, 0.95); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.loader-spinner { border: 5px solid #f3f3f3; border-top: 5px solid var(--status-primary); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 10px; } /* Változóra cserélve */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#info-bottom-sheet { position: absolute; bottom: -120%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 500px; z-index: 1001; border-radius: 16px 16px 0 0; padding: 15px 20px 25px 20px; box-sizing: border-box; font-family: Arial, sans-serif; transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#info-bottom-sheet.active { bottom: 0; }
.bs-drag-handle { width: 40px; height: 5px; background: #ccc; border-radius: 3px; margin: 0 auto 15px auto; cursor: pointer; }
.bs-close-btn { position: absolute; top: 12px; right: 15px; font-size: 20px; cursor: pointer; color: #888; border: none; background: none; outline: none; }

.show-two-finger-warning::after { content: "A térkép mozgatásához használj két ujjat!"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); color: white; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; z-index: 10000; pointer-events: none; text-align: center; }

@media (max-width: 600px) {
    .master-panel { max-width: 220px; padding: 10px !important; }
    .leaflet-control-zoom { display: none !important; }
    label { display: inline-block; width: 100%; padding: 2px 0; }
    .leaflet-control-attribution { font-size: 8px !important; }
}

/* =========================================
   6. LEAFLET POPUP STÍLUSOK (Világos / Sötét)
   ========================================= */
.leaflet-popup-content-wrapper, 
.leaflet-popup-tip {
    background-color: white !important;
    color: #333 !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4) !important;
}
.leaflet-popup-content {
    color: #333 !important;
}

/* Sötét mód a Popupokra (Ha a gombbal váltasz VAGY a rendszer sötét) */
.dark-mode-ui .leaflet-popup-content-wrapper, 
.dark-mode-ui .leaflet-popup-tip,
@media (prefers-color-scheme: dark) {
    .leaflet-popup-content-wrapper, 
    .leaflet-popup-tip {
        background-color: #222 !important;
        color: #f0f0f0 !important; /* Szürke helyett olvashatóbb világos */
        border: 1px solid #444;
    }
    .leaflet-popup-content {
        color: #f0f0f0 !important;
    }
    .leaflet-popup-content b, 
    .leaflet-popup-content strong {
        color: var(--status-primary) !important; /* Változóra cserélve a szép kék kiemelés */
    }
}