/* ========================================
   IDŐJÁRÁS MAGYARORSZÁG - TELJES TÉMA RENDSZER
   ======================================== */

/* Alapértelmezett világos téma */
:root {
    /* Színpaletta - Világos */
    --primary-blue: #2196F3;
    --secondary-blue: #64B5F6;
    --accent-blue: #0D47A1;
    --light-blue: #E3F2FD;

    --success-green: #4CAF50;
    --warning-orange: #FF9800;
    --danger-red: #F44336;
    --info-cyan: #00BCD4;

    /* Háttér színek */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #E3F2FD;
    --bg-card: #FFFFFF;
    --bg-modal: rgba(255, 255, 255, 0.95);

    /* Szöveg színek */
    --text-primary: #212121;
    --text-secondary: #757575;
    --text-muted: #9E9E9E;
    --text-white: #FFFFFF;
    --text-inverse: #FFFFFF;

    /* Árnyékok */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.25);

    /* Gradientek */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
    --gradient-success: linear-gradient(135deg, var(--success-green) 0%, #66BB6A 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning-orange) 0%, #FFB74D 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger-red) 0%, #EF5350 100%);

    /* Időjárás specifikus színek */
    --temp-very-cold: #1565C0;
    --temp-cold: #42A5F5;
    --temp-cool: #66BB6A;
    --temp-warm: #FFA726;
    --temp-hot: #FF7043;
    --temp-very-hot: #F44336;

    --weather-sunny: #FFD54F;
    --weather-cloudy: #90A4AE;
    --weather-rainy: #42A5F5;
    --weather-stormy: #5C6BC0;
    --weather-snowy: #E1F5FE;
    --weather-foggy: #B0BEC5;
}

/* ========================================
   SÖTÉT TÉMA
   ======================================== */
[data-theme="dark"] {
    /* Színpaletta - Sötét */
    --primary-blue: #64B5F6;
    --secondary-blue: #90CAF9;
    --accent-blue: #1976D2;
    --light-blue: #0D47A1;

    --success-green: #66BB6A;
    --warning-orange: #FFB74D;
    --danger-red: #EF5350;
    --info-cyan: #26C6DA;

    /* Háttér színek */
    --bg-primary: #121212;
    --bg-secondary: #1E1E1E;
    --bg-tertiary: #2D2D2D;
    --bg-card: #1E1E1E;
    --bg-modal: rgba(18, 18, 18, 0.95);

    /* Szöveg színek */
    --text-primary: #FFFFFF;
    --text-secondary: #AAAAAA;
    --text-muted: #666666;
    --text-white: #FFFFFF;
    --text-inverse: #121212;

    /* Árnyékok */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.7);

    /* Gradientek */
    --gradient-primary: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%);
    --gradient-secondary: linear-gradient(135deg, #42A5F5 0%, #1976D2 100%);
    --gradient-success: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    --gradient-warning: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    --gradient-danger: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
}

[data-theme="dark"] body {
    background: linear-gradient(135deg, #0D1117 0%, #161B22 50%, #21262D 100%);
    background-attachment: fixed;
}

[data-theme="dark"] .weather-card {
    background: linear-gradient(145deg, #1E1E1E 0%, #2D2D2D 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .weather-card:hover {
    background: linear-gradient(145deg, #252525 0%, #3D3D3D 100%);
    border-color: var(--primary-blue);
}

[data-theme="dark"] .city-card {
    background: linear-gradient(145deg, #1E1E1E 0%, #2D2D2D 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ai-analysis {
    background: linear-gradient(135deg, #1A237E 0%, #0D47A1 50%, #01579B 100%);
}

/* ========================================
   AUTOMATIKUS TÉMA (Rendszer preferencia)
   ======================================== */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        /* Sötét téma változók átvétele */
        --primary-blue: #64B5F6;
        --secondary-blue: #90CAF9;
        --accent-blue: #1976D2;
        --light-blue: #0D47A1;

        --bg-primary: #121212;
        --bg-secondary: #1E1E1E;
        --bg-tertiary: #2D2D2D;
        --bg-card: #1E1E1E;
        --bg-modal: rgba(18, 18, 18, 0.95);

        --text-primary: #FFFFFF;
        --text-secondary: #AAAAAA;
        --text-muted: #666666;

        --shadow-sm: 0 2px 4px rgba(0,0,0,0.4);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
        --shadow-xl: 0 12px 32px rgba(0,0,0,0.7);
    }

    [data-theme="auto"] body {
        background: linear-gradient(135deg, #0D1117 0%, #161B22 50%, #21262D 100%);
        background-attachment: fixed;
    }
}

/* ========================================
   SPECIÁLIS IDŐJÁRÁS TÉMÁK
   ======================================== */

/* Napos időjárás téma */
[data-weather-theme="sunny"] {
    --accent-color: var(--weather-sunny);
    --bg-gradient: linear-gradient(135deg, #FFE082 0%, #FFD54F 50%, #FFC107 100%);
}

/* Felhős időjárás téma */
[data-weather-theme="cloudy"] {
    --accent-color: var(--weather-cloudy);
    --bg-gradient: linear-gradient(135deg, #CFD8DC 0%, #B0BEC5 50%, #90A4AE 100%);
}

/* Esős időjárás téma */
[data-weather-theme="rainy"] {
    --accent-color: var(--weather-rainy);
    --bg-gradient: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 50%, #29B6F6 100%);
}

/* Viharos időjárás téma */
[data-weather-theme="stormy"] {
    --accent-color: var(--weather-stormy);
    --bg-gradient: linear-gradient(135deg, #7986CB 0%, #5C6BC0 50%, #3F51B5 100%);
}

/* Havas időjárás téma */
[data-weather-theme="snowy"] {
    --accent-color: var(--weather-snowy);
    --bg-gradient: linear-gradient(135deg, #F1F8E9 0%, #E8F5E8 50%, #E1F5FE 100%);
}

/* ========================================
   TÉMA ÁTMENETEK ÉS ANIMÁCIÓK
   ======================================== */
* {
    transition:
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Téma váltó gomb stílusok */
.theme-switcher {
    position: relative;
    overflow: hidden;
}

.theme-switcher::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.theme-switcher:hover::before {
    left: 100%;
}

/* ========================================
   HŐMÉRSÉKLET ALAPÚ SZÍNEZÉS
   ======================================== */
.temp-very-cold { color: var(--temp-very-cold) !important; }
.temp-cold { color: var(--temp-cold) !important; }
.temp-cool { color: var(--temp-cool) !important; }
.temp-warm { color: var(--temp-warm) !important; }
.temp-hot { color: var(--temp-hot) !important; }
.temp-very-hot { color: var(--temp-very-hot) !important; }

/* Hőmérséklet háttér gradientek */
.temp-bg-very-cold { background: linear-gradient(135deg, var(--temp-very-cold), #0D47A1) !important; }
.temp-bg-cold { background: linear-gradient(135deg, var(--temp-cold), #1976D2) !important; }
.temp-bg-cool { background: linear-gradient(135deg, var(--temp-cool), #388E3C) !important; }
.temp-bg-warm { background: linear-gradient(135deg, var(--temp-warm), #F57C00) !important; }
.temp-bg-hot { background: linear-gradient(135deg, var(--temp-hot), #E64A19) !important; }
.temp-bg-very-hot { background: linear-gradient(135deg, var(--temp-very-hot), #D32F2F) !important; }

/* ========================================
   IDŐJÁRÁS IKON SZÍNEZÉS
   ======================================== */
.weather-icon-sunny { color: var(--weather-sunny); }
.weather-icon-cloudy { color: var(--weather-cloudy); }
.weather-icon-rainy { color: var(--weather-rainy); }
.weather-icon-stormy { color: var(--weather-stormy); }
.weather-icon-snowy { color: var(--weather-snowy); }
.weather-icon-foggy { color: var(--weather-foggy); }

/* ========================================
   MAGAS KONTRASZT MÓD
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.8);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.8);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.8);
        --shadow-xl: 0 12px 32px rgba(0,0,0,0.8);
    }

    .weather-card, .city-card, .ai-analysis {
        border: 3px solid var(--text-primary) !important;
    }

    .btn {
        border: 2px solid currentColor !important;
    }

    .weather-icon, .detail-icon {
        filter: contrast(2) brightness(1.2);
    }
}

/* ========================================
   CSÖKKENTETT MOZGÁS PREFERENCIA
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .weather-icon {
        animation: none !important;
    }

    .spinner {
        animation: none !important;
        border: 4px solid var(--primary-blue) !important;
    }

    .theme-switcher::before {
        display: none;
    }
}

/* ========================================
   PRINT STÍLUSOK
   ======================================== */
@media print {
    [data-theme="dark"] {
        /* Print módban mindig világos téma */
        --bg-primary: #FFFFFF;
        --bg-secondary: #F8F9FA;
        --bg-card: #FFFFFF;
        --text-primary: #000000;
        --text-secondary: #666666;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
    }

    .weather-card, .city-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    .ai-analysis {
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    .header, .footer, .mobile-nav, .cookie-banner {
        display: none !important;
    }
}

/* ========================================
   TÉMA SPECIFIKUS KOMPONENSEK
   ======================================== */

/* Sötét téma specifikus kiegészítések */
[data-theme="dark"] .search-input {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

[data-theme="dark"] .search-results {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-result:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .chart-tab {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: transparent;
}

[data-theme="dark"] .chart-tab.active,
[data-theme="dark"] .chart-tab:hover {
    background: var(--primary-blue);
    color: var(--text-white);
}

[data-theme="dark"] .view-btn {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: transparent;
}

[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .view-btn:hover {
    background: var(--primary-blue);
    color: var(--text-white);
}

[data-theme="dark"] .notification {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .cookie-banner {
    background: var(--bg-tertiary);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   CUSTOM SCROLLBAR (WEBKIT)
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
}

/* ========================================
   SELECTION SZÍNEK
   ======================================== */
::selection {
    background: var(--primary-blue);
    color: var(--text-white);
}

::-moz-selection {
    background: var(--primary-blue);
    color: var(--text-white);
}

/* ========================================
   FOCUS VISIBLE (Accessibility)
   ======================================== */
*:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

button:focus-visible,
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

/* ========================================
   TÉMA VÁLTÓ ANIMÁCIÓK
   ======================================== */
@keyframes themeTransition {
    0% { opacity: 0.8; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

[data-theme-transitioning] * {
    animation: themeTransition 0.3s ease-in-out;
}

/* ========================================
   RESPONSIVE TÉMA 
   ======================================== */
@media (max-width: 768px) {
    [data-theme="dark"] .mobile-nav {
        background: var(--bg-tertiary);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .mobile-nav-item.active {
        background: rgba(100, 181, 246, 0.2);
        color: var(--primary-blue);
    }
}

/* ========================================
   TÉMA SPECIFIKUS UTILITY OSZTÁLYOK
   ======================================== */
.theme-light-only {
    display: block;
}

.theme-dark-only {
    display: none;
}

[data-theme="dark"] .theme-light-only {
    display: none;
}

[data-theme="dark"] .theme-dark-only {
    display: block;
}

/* Téma alapú szöveg színek */
.text-theme-primary { color: var(--text-primary); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-muted { color: var(--text-muted); }

/* Téma alapú háttér színek */
.bg-theme-primary { background-color: var(--bg-primary); }
.bg-theme-secondary { background-color: var(--bg-secondary); }
.bg-theme-tertiary { background-color: var(--bg-tertiary); }
.bg-theme-card { background-color: var(--bg-card); }

/* Téma alapú border színek */
.border-theme-primary { border-color: var(--text-primary); }
.border-theme-secondary { border-color: var(--text-secondary); }
.border-theme-muted { border-color: var(--text-muted); }