/* Eigene, lokal gespeicherte Schriftart definieren */
@font-face {
    font-family: 'MeineAppMono'; /* So nennen wir die Schriftart intern */
    src: url('fonts/Inconsolata-Bold.ttf') format('truetype'); /* Pfad zu deiner Datei */
    font-weight: bold; /* Wir definieren, dass dies die fette Version ist */
    font-style: normal;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;

    /* --- NEU: Textmarkierung und langes Drücken global deaktivieren --- */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#app-container { display: flex; flex-direction: column; height: 100vh; width: 100vw; }

#header {
    background-color: #f1f3f4;
    padding: calc(15px + env(safe-area-inset-top, 30px)) calc(15px + env(safe-area-inset-right, 0px)) 15px calc(15px + env(safe-area-inset-left, 0px));
    border-bottom: 2px solid rgba(0,0,0,0.1); flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 10;
    display: flex; flex-direction: column; gap: 12px;
}

.header-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }

#location-title { margin: 0; font-size: 16px; color: #333; font-weight: bold; }
#location-subtitle { margin: 2px 0 0 0; font-size: 11px; color: #666; }

#btn-open-map {
    background: #2196F3; color: white; border: none; padding: 10px 18px;
    border-radius: 20px; font-weight: bold; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer; flex-shrink: 0;
}

/* --- Design der Suchleiste und Autocomplete-Box --- */
.search-wrapper { position: relative; width: 100%; }
.search-bar { display: flex; width: 100%; gap: 8px; }

#search-input {
    flex: 1; padding: 10px 15px; border: 1px solid #ccc; border-radius: 20px;
    font-size: 14px; outline: none; font-family: 'Segoe UI', sans-serif;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);

    /* --- NEU: Textmarkierung im Suchfeld explizit wieder erlauben --- */
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
#search-input:focus { border-color: #2196F3; }

.search-bar button {
    background: #2196F3; color: white; border: none; width: 40px; height: 40px;
    border-radius: 50%; font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); flex-shrink: 0;
}

#search-suggestions {
    position: absolute; top: 100%; left: 0; right: 48px; background: white;
    border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    max-height: 220px; overflow-y: auto; z-index: 2000; display: none;
    margin-top: 5px; border: 1px solid #eee; padding: 5px 0;
}
.suggestion-item { padding: 10px 15px; cursor: pointer; font-size: 15px; color: #333; border-bottom: 1px solid #f5f5f5; }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:active { background-color: #e3f2fd; }
.suggestion-admin { font-size: 12px; color: #888; margin-top: 2px; }

/* Restliches Layout */
#scroll-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    padding: 10px calc(10px + env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 15px)) calc(10px + env(safe-area-inset-left, 0px));
}

#charts-area { width: 1800px; padding-bottom: 0px; }

.chart-wrapper { position: relative; margin-bottom: 25px; }
.chart-wrapper-tight { position: relative; margin-bottom: 25px; }
.chart-wrapper:last-child { margin-bottom: 0; }

.sticky-legend {
    position: sticky; left: 10px; z-index: 100; display: inline-block;
    background: rgba(255, 255, 255, 0.9); padding: 4px 8px; border-radius: 4px;
    font-size: 11px; font-weight: bold; color: #333; pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #ddd;
}

#loader {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 16px; font-weight: bold; color: #555;
}
#map-overlay {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #fff; z-index: 9999; display: none; flex-direction: column;
}

#map-header {
    background: #f1f3f4;
    display: flex;
    flex-direction: column;
    padding: calc(15px + env(safe-area-inset-top, 30px)) calc(15px + env(safe-area-inset-right, 0px)) 15px calc(15px + env(safe-area-inset-left, 0px));
    gap: 15px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10000;
}

#map-container { flex: 1; width: 100%; background: #e5e3df; z-index: 1; }

/* --- Favoriten Design --- */
.fav-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #eee; background: #fafafa; margin-bottom: 8px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.fav-info { flex: 1; cursor: pointer; }
.fav-title { font-weight: bold; font-size: 16px; color: #333; }
.fav-controls { display: flex; gap: 6px; }
.fav-btn { background: #e0e0e0; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold; color: #333; }
.fav-btn:active { background: #ccc; }
.fav-btn.delete { color: #fff; background: #F44336; }
.fav-btn.delete:active { background: #d32f2f; }
.fav-edit-bar { text-align: right; margin-bottom: 15px; padding: 5px; }

/* --- Favoriten Wetter-Vorschau Design --- */
.fav-weather-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fav-daily {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.fav-daily-day {
    font-family: 'MeineAppMono', 'Courier New', monospace; /* <-- NEU: Hier greift jetzt deine Monospace-Schrift */
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-bottom: 2px;
}

.fav-daily-temps {
    font-family: 'MeineAppMono', 'Courier New', monospace; /* <-- NEU: Und hier auch für die Temperaturen */
    font-size: 14px;
    font-weight: bold;
    margin-top: 2px;
    display: flex;
    gap: 3px;
    align-items: baseline;
}

.fav-temp-max { color: #D32F2F; }
.fav-temp-min { color: #1976D2; font-size: 12px; }

.fav-refresh-btn {
    background: #e3f2fd;
    color: #1976D2;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.fav-refresh-btn:active {
    background: #bbdefb;
}

/* Weicher Überblend-Effekt für die Regenradar-Ebenen */
.radar-smooth-fade {
    /* Erzwingt die harte, blockige Pixel-Darstellung beim Reinzoomen! */
    image-rendering: pixelated; /* Für moderne Browser */
    image-rendering: -moz-crisp-edges; /* Für Firefox */
    image-rendering: crisp-edges; /* Standardisiertes Fallback */

    /* WICHTIG: Keine transition mehr hier! Die Animation passiert jetzt auf dem Layer-Container. */
}

.map-floating-btn {
    position: absolute;
    top: 80px; /* Unter dem Header */
    right: 15px;
    z-index: 1000;
    background: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-floating-btn.active {
    background: #FFC107; /* Gelb wenn aktiv */
}

#radar-map-container .leaflet-map-pane {
    transform: translateZ(0);
    /* Zwingt den Android WebView, die Karte auf der GPU zu rendern */
}

/* Macht den Hintergrund unserer Custom-Icons transparent */
.clear-storm-arrow {
    background: transparent !important;
    border: none !important;
}

/* --- Leaflet Maßstab transparent machen --- */
.leaflet-control-scale-line {
    background: transparent !important; /* Macht den weißen Hintergrund komplett unsichtbar */
    background-color: transparent !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9), -1px -1px 3px rgba(255, 255, 255, 0.9); /* Weißer Schatten, damit die schwarzen Zahlen lesbar bleiben */
    border-color: #333 !important; /* Sorgt dafür, dass die Begrenzungsstriche dunkel bleiben */
    box-shadow: none !important; /* Verhindert eventuelle Schatten des Kastens selbst */
    text-align: right !important;
    padding-right: 4px !important; /* Ein minimaler Abstand zum rechten Strich, damit es sauber aussieht */
}

/* --- SLIDER THUMB GPU-OPTIMIERUNG --- */
#radar-slider-thumb {
    /* Element auf eigene GPU-Ebene heben */
    will-change: transform;
    transform: translateZ(0);

    /* Touch-Verzögerungen und blaus Aufblitzen des WebViews deaktivieren */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;

    /* WICHTIG: Wir schalten das alte 'left: %' ab und überlassen die X-Position dem JS-Transform. */
    left: 0 !important;
}

#radar-time-slider-container, #radar-slider-track {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- NEU: Entkoppeltes Info-Panel (Radar HUD) --- */
#radar-info-panel {
    position: absolute;
    top: calc(75px + env(safe-area-inset-top, 30px)); /* Direkt unter dem Radar-Header */
    left: calc(15px + env(safe-area-inset-left, 0px));
    z-index: 10001; /* Garantiert über der Karte */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 10px 12px;
    width: 220px; /* Sehr schmal für Handys */
    display: none; /* Standardmäßig unsichtbar */
    flex-direction: column;
    pointer-events: auto; /* Klicks ins Fenster erlauben (Scrollen) */
}

.info-panel-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-panel-close:active { color: #333; }

/* --- Radar Update Animation --- */
@keyframes radarUpdatePulse {
    0% { color: #000000; }
    30% { color: #2196F3; }
    100% { color: #000000; }
}

.radar-update-pulse {
    animation: radarUpdatePulse 2s ease-out;
}

/* --- Gewitter-Zähler (Pins & Polygone) neben dem Maßstab --- */
#radar-map-container .leaflet-top.leaflet-right {
    display: flex;
    flex-direction: row-reverse; /* Skaliert Elemente von rechts nach links durch */
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    padding-top: 12px;
}

#radar-map-container .leaflet-top.leaflet-right .leaflet-control {
    margin: 0 !important;
}

.storm-counter-badge, .polygon-counter-badge {
    font-family: 'MeineAppMono', 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.1;
    padding: 2px 6px 1px 6px;
    box-sizing: border-box;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9), -1px -1px 3px rgba(255, 255, 255, 0.9);
    border: 2px solid #333;
    border-top: none; /* Offener Look passend zum Leaflet-Maßstab */
    background: transparent !important;
    white-space: nowrap;
}

/* Zustände für beide Steuerungen */
.storm-counter-badge.loading, .polygon-counter-badge.loading {
    color: #FFC107 !important;
    border-color: #FFC107 !important;
}

.storm-counter-badge.loaded, .polygon-counter-badge.loaded {
    color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}