/* Moderní styly pro Předpověď počasí - Optimalizovaná verze 2025 */

/* Reset pro HTML element */
html {
    background-color: var(--body-bg-color);
    /* transition: background-color var(--transition-speed); - removed theme transition */
}

/* Zajistit správné pozadí pro celou stránku */
html[data-theme="dark"] {
    background-color: #141e2c !important;
}

html[data-theme="light"] {
    background-color: #f8f9fc !important;
}

/* Pouze odstranit focus outline */
*:focus {
    outline: none;
}
    
    /* Vypnout tap highlight color */
    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}
    
    /* Specificky pro problematické elementy */
    .sticky-top-row,
    .card,
    .dashboard-card,
    .weather-card,
    .current-weather-card,
    .modern-toggle,
    .detail-card,
    .modern-weather-header,
    .modern-weather-body,
    .card-header,
    .card-body,
    button,
    a,
    div:not(.nav-tab) {
        transition: none !important;
        animation: none !important;
        -webkit-transition: none !important;
        -webkit-animation: none !important;
    }
    
    
    /* Zakázat veškeré tap highlight */
    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }
    
}

:root {
    /* Světlý režim - základní paleta barev */
    --primary-color: #4099ff;
    --primary-light: #6db9ff;
    --primary-dark: #2874a6;
    --secondary-color: #2980b9;
    --accent-color: #f1c40f;
    --danger-color: #ff6b6b;
    --success-color: #38d39f;
    --warning-color: #ffa502;
    
    /* Světlý režim - neutrální barvy */
    --light-color: #f8f9fa;
    --dark-color: #2c3e50;
    --gray-color: #8c9db5;
    --light-gray-color: #eef2f7;
    --card-bg-color: #ffffff;
    --body-bg-color: #f8f9fc;
    --text-color: #2c3e50;
    --text-secondary: #6c757d;
    --border-color: rgba(0, 0, 0, 0.2);
    
    /* Světlý režim - záhlaví */
    --header-bg-color: rgba(255, 255, 255, 0.97);
    --header-text-color: #2c3e50;
    
    /* Světlý režim - karty a součásti UI */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
    --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
    --weather-card-gradient: linear-gradient(135deg, #4099ff, #3366ff);
    --weather-card-text: #ffffff;
    
    /* Efekty */
    --transition-speed: 0s;
    
    /* Zaoblení */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    
    /* Responsive proměnné */
    --spacing-xs: 4px;   /* Pro velmi malé displeje */
    --spacing-sm: 8px;   /* Pro malé displeje */
    --spacing-md: 12px;  /* Pro střední displeje */
    --spacing-lg: 16px;  /* Pro velké displeje */
    --spacing-xl: 24px;  /* Pro velmi velké displeje */
    
    /* Padding a mezery pro malá zařízení */
    --container-padding: var(--spacing-xl);
    --card-padding: var(--spacing-lg);
    --element-gap: var(--spacing-md);
}

/* Tmavý režim - přepíše proměnné z světlého režimu */
[data-theme="dark"] {
    /* Tmavý režim - základní paleta barev */
    --primary-color: #64b1ff;
    --primary-light: #83c6ff;
    --primary-dark: #3e80c9;
    --secondary-color: #4b99db;
    --accent-color: #ffd028;
    --danger-color: #ff7676;
    --success-color: #5de8b5;
    --warning-color: #ffa726;
    
    /* Tmavý režim - neutrální barvy */
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    --gray-color: #a0aec0;
    --light-gray-color: #2c3544;
    --card-bg-color: #1e2a3a;
    --body-bg-color: #141e2c;
    --text-color: #e9ecef;
    --text-secondary: #a0aec0;
    --border-color: rgba(255, 255, 255, 0.07);
    
    /* Tmavý režim - záhlaví */
    --header-bg-color: rgba(30, 42, 58, 0.97);
    --header-text-color: #e9ecef;
    
    /* Tmavý režim - karty a součásti UI */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
    --weather-card-gradient: linear-gradient(135deg, #285a9c, #1a3c6b);
    --weather-card-text: #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--body-bg-color) !important;
    color: var(--text-color);
    position: relative;
    min-height: 100vh;
    scroll-behavior: smooth;
    /* transition: background-color var(--transition-speed), color var(--transition-speed); - removed theme transition */
    margin: 0;
    padding: 0;
    /* Force immediate text rendering */
    text-rendering: optimizeSpeed !important;
    font-display: block !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

/* Explicitní pozadí pro body element */
[data-theme="dark"] body {
    background-color: #141e2c !important;
}

[data-theme="light"] body {
    background-color: #f8f9fc !important;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-bg-color);
    opacity: 0.95;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transition: opacity var(--transition-speed), visibility var(--transition-speed); - removed theme transition */
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Model switch loading mask */
.model-switch-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-bg-color);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease, visibility 0s linear 0.1s;
    pointer-events: none;
}

.model-switch-mask.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.1s ease, visibility 0s linear 0s;
    pointer-events: all;
}

.model-switch-content {
    text-align: center;
    transform: scale(1);
    transition: transform 0.1s ease;
}

.model-switch-mask.visible .model-switch-content {
    transform: scale(1);
}

.model-switch-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    opacity: 0.8;
    transition: opacity 0.1s ease;
}

.model-switch-mask.visible .model-switch-text {
    opacity: 1;
}

/* Prevent content jumping during model switch */
.model-switching {
    overflow: hidden;
    height: 100vh;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 6px;
}

/* Hlavní container */
.container-xl {
    max-width: 1920px;
    padding: 0 var(--container-padding);
    margin: 0 auto;
}

@media (max-width: 375px) {
    :root {
        --container-padding: var(--spacing-sm);
        --card-padding: var(--spacing-sm);
        --element-gap: var(--spacing-xs);
    }
}

/* Přepínač tmavého/světlého režimu */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1030;
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    margin-right: 10px;
    /* transition: background-color var(--transition-speed), transform var(--transition-speed); - removed theme transition */
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle i {
    font-size: 1.2rem;
    transform-origin: center;
    /* transition: transform 0.5s ease, color var(--transition-speed); - removed theme transition */
    color: var(--primary-color);
}

/* Hover efekty pro theme toggle pouze na zařízeních s myší - vypnout na mobilech */
@media (hover: hover) and (pointer: fine) {
    .theme-toggle:hover {
        transform: translateY(-2px);
    }

    .theme-toggle:hover i {
        transform: rotate(30deg);
        color: var(--primary-light);
    }
}

/* Focus a active stavy pro mobily */
.theme-toggle:focus,
.theme-toggle:active {
    outline: none;
    box-shadow: none;
    transform: none !important;
}

.theme-toggle:focus i,
.theme-toggle:active i {
    transform: none !important;
    color: var(--primary-color) !important;
}

/* Zabránit zvýraznění při kliknutí na mobilu */
.theme-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

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

[data-theme="light"] .theme-toggle .sun {
    display: none;
}

[data-theme="light"] .theme-toggle .moon {
    display: inline-block;
}

/* Sticky header - nalepený ke kraji, bez změn velikosti */
.sticky-top-row {
    position: sticky;
    top: 0;
    z-index: 1021;
    background-color: var(--header-bg-color);
    padding: 8px 15px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
    
    /* Optimalizace pro plynulé rolování */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    contain: layout style paint;
    /* transition: background-color var(--transition-speed), border-color var(--transition-speed), 
                color var(--transition-speed); - removed theme transition */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}



@media (min-width: 576px) and (max-width: 767px) {
    /* Weather details v jednom řádku od 576px do 767px */
    .current-weather-card:not(.collapsed) .weather-details {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    .current-weather-card:not(.collapsed) .detail-card {
        flex: 1 1 0 !important;
        max-width: 120px !important;
        min-width: 90px !important;
    }
    
    /* Zajistit viditelnost weather-station-column */
    /* These rules are now handled by responsive layout in JavaScript */
    
    /* Grid layout už je definován výše pro min-width: 576px */
    
    /* Weather-station data bude řízena grid layoutem definovaným výše */
    
    /* Zvětšit dashboard card pro zobrazení hourly preview - pouze když není collapsed */
    .current-weather-card:not(.collapsed) {
        min-height: 420px !important;
        max-height: 1000px !important; /* Increased to match other rules */
    }
    
    /* Zajistit správnou výšku pro collapsed stav - kompaktní */
    .current-weather-card.collapsed {
        min-height: auto !important;
        max-height: 40px !important;
    }
    
    .current-weather-card:not(.collapsed) .card-body {
        min-height: 380px !important;
        padding-bottom: 40px !important;
    }
    
    .current-weather-card.collapsed .card-body {
        min-height: auto !important;
        padding: 0 !important;
    }
    
    /* Zajistit viditelnost textu v collapsed stavu */
    .current-weather-card.collapsed .compact-condition {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
    
    .current-weather-card.collapsed .compact-weather {
        padding: 0.5rem 1rem !important;
    }
    
    /* Větší mezera mezi grafy */
    .chart-card {
        margin-bottom: 1.5rem !important;
    }
}

@media (min-width: 992px) {
    /* Weather details v jednom řádku na desktop */
    .weather-details {
        display: flex !important;
        flex-direction: row !important;
        max-width: 100%;
        margin: 8px auto;
        gap: clamp(12px, 1.5vw, 20px);
        justify-content: center;
        flex-wrap: nowrap !important;
    }
    
    .detail-card {
        flex: 1 1 0 !important;
        max-width: 150px !important;
        min-width: 100px !important;
    }
}

@media (min-width: 957px) {
    /* Zajistit čitelnost detail-card na větších obrazovkách */
    .weather-details {
        gap: 20px;
    }
}

/* Media query pro 421px-575px - oprava chybějících pravidel */
@media (min-width: 421px) and (max-width: 575px) {
    .weather-details .detail-card,
    .weather-details-secondary .detail-card {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        aspect-ratio: 1 !important;
        padding: 0.8rem 0.2rem 0.2rem 0.2rem !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }
    
    .weather-details,
    .weather-details-secondary {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.4rem !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    
    /* Zajistit správné rozložení obsahu v kartách */
    .weather-details .detail-icon,
    .weather-details-secondary .detail-icon {
        font-size: 1.2rem !important;
        margin: 0 0 0.2rem 0 !important;
        opacity: 0.8 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        display: block !important;
    }
    
    .weather-details .detail-label,
    .weather-details-secondary .detail-label {
        font-size: 0.7rem !important;
        margin-bottom: 0.15rem !important;
        margin-top: 0 !important;
        line-height: 1 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    
    .weather-details .detail-value,
    .weather-details-secondary .detail-value {
        font-size: 0.9rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    .weather-details .detail-info,
    .weather-details-secondary .detail-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.05rem !important;
        width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
    }
}

/* Landscape mobil - zachovat centrované zobrazení jako v portrait */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
}

/* Základní header layout - mobilní first přístup */
.modern-header {
    background: var(--header-bg-color) !important;
    color: var(--header-text-color) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    overflow: visible !important;
}

.header-container {
    padding: 0.5rem;
    text-align: center; /* Centrovat všechen obsah */
}

.header-main-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center; /* Změna z space-between na center */
}

/* Mobilní layout - vše viditelné */
.header-brand {
    flex: 0 0 100%;
    text-align: center;
    order: 1;
    display: flex;
    justify-content: center;
}

.header-controls {
    flex: 0 0 100%;
    display: flex !important;
    justify-content: center;
    order: 2;
    overflow-x: visible; /* Změna z auto na visible */
    overflow-y: hidden;
    min-width: 0; /* Umožní flexboxu zmenšit prvek */
    margin-top: 0.5rem;
}

.header-status {
    flex: 0 0 100%;
    display: flex !important;
    justify-content: center;
    order: 3;
    min-height: 48px; /* Zajistí stabilní výšku i když prvky zmizí */
    align-items: center;
    contain: layout; /* Prevent layout shifts during updates */
}

.control-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px; /* Odpovídá výšce day-selector */
}

/* Pre-allocate space for day selector and model switcher */
.day-selector-container-modern {
    min-width: 200px;
    min-height: 38px;
}

.day-selector-modern {
    min-width: 200px;
}

#model-switcher.model-switcher-modern {
    min-width: 120px;
    min-height: 38px;
}

#model-switcher {
    display: flex !important;
    visibility: visible !important;
    flex: 1 1 auto; /* Změna z 0 0 auto na 1 1 auto pro využití dostupného místa */
    order: 4;
    opacity: 1 !important;
    min-width: 100px;
    max-width: 300px; /* Maximální šířka */
    min-height: 38px; /* Stejná výška jako day-selector */
    justify-content: center;
    align-items: center;
}

/* Mobile specific overrides for header elements */
@media (max-width: 575px) {
    .control-group {
        justify-content: center;
        width: 100%;
    }
    
    #model-switcher {
        margin: 0 auto;
    }
}

/* Mobilní úpravy pro malé displeje */
@media (max-width: 576px) {
    .nav-tab {
        padding: 0.3rem 0.4rem;
        font-size: 0.7rem;
    }
    
    .nav-tab i {
        font-size: 0.9rem;
        margin-right: 0.2rem;
    }
    
    /* Zobrazit zkrácený text i na malých displejích */
    .tab-text {
        display: inline !important;
        font-size: 0.65rem;
    }
    
    /* Skrýt pouze dlouhé texty */
    .tab-text.d-none.d-md-inline {
        display: none !important;
    }
    
    /* Zobrazit krátké texty */
    .tab-text.d-md-none {
        display: inline !important;
    }
    
    .theme-tab {
        padding: 0.4rem;
    }
    
    .theme-tab .tab-text {
        display: none !important; /* Theme tab zůstane bez textu */
    }
    
    /* Zvětšit brand na malých displejích */
    .brand-weather-icon-mobile {
        width: 1.8rem;
        height: 1.8rem;
    }
    
    .brand-title-mobile {
        font-size: 1.05rem;
    }
}

/* Specifický rozsah 406px-417px - oprava ořezávání header-controls */
@media (min-width: 406px) and (max-width: 417px) {
    .header-controls {
        overflow-x: auto !important;
        overflow-y: visible !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 0.25rem !important;
    }
    
    .control-group {
        min-width: 0 !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
    }
    
    .nav-tab {
        flex-shrink: 0 !important;
        min-width: auto !important;
        padding: 0.3rem 0.4rem !important;
    }
}

/* Velmi malé displeje - skrýt všechny texty */
@media (max-width: 405px) {
    .nav-tab .tab-text {
        display: none !important;
    }
    
    .nav-tab i {
        margin-right: 0;
    }
    
    .nav-tab {
        padding: 0.4rem 0.5rem;
    }
    
    /* Zvětšit brand ikonu a text */
    .brand-weather-icon-mobile {
        width: 2rem;
        height: 2rem;
    }
    
    .brand-title-mobile {
        font-size: 1.1rem;
    }
}

/* Zobrazení krátkých textů od 576px do 767px */
@media (min-width: 576px) and (max-width: 767px) {
    /* Skrýt dlouhé texty */
    .nav-tab .tab-text.d-none.d-md-inline {
        display: none !important;
    }
    
    /* Zobrazit krátké texty */
    .nav-tab .tab-text.d-md-none {
        display: inline !important;
    }
}

/* Tablet layout (576px - 1350px) - zalamování pro menší obrazovky */
@media (min-width: 576px) and (max-width: 1350px) {
    .header-main-row {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .header-brand {
        flex: 0 0 100%;
        order: 1;
        text-align: center;
        display: flex;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    
    .header-controls {
        flex: 1 1 auto;
        order: 2;
        margin: 0 0.5rem;
        min-width: 0;
        justify-content: center;
    }
    
    .header-status {
        flex: 0 0 auto;
        order: 3;
        margin-left: 0;
        display: flex;
        justify-content: center;
    }
    
    .control-group {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
    }
    
    /* Na menších tabletech povolit zalamování */
    @media (max-width: 767px) {
        .header-controls {
            flex: 0 0 100%;
            margin-bottom: 0.5rem;
            justify-content: center;
        }
        
        .header-status {
            flex: 0 0 100%;
            justify-content: center;
        }
        
        .day-selector-container,
        .day-selector-container-modern {
            margin: 0.25rem 0;
        }
        
        #model-switcher,
        .model-switcher-modern {
            margin: 0.25rem 0;
        }
    }
}

/* Střední displeje (768px - 1350px) - krátké názvy a centrování */
@media (min-width: 768px) and (max-width: 1350px) {
    
    .brand-group {
        margin: 0 auto;
    }
}

/* Desktop layout (1350px+) - plně horizontální layout */
@media (min-width: 1350px) {
    .header-main-row {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }
    
    .header-container {
        text-align: left; /* Reset centrování textu */
    }
    
    .header-brand {
        flex: 0 0 auto;
        order: 1;
        text-align: left;
        display: flex;
        margin-bottom: 0; /* Reset margin */
    }
    
    .header-controls {
        flex: 1 1 auto;
        order: 2;
        margin: 0 1rem;
        justify-content: center;
    }
    
    .header-status {
        flex: 0 0 auto;
        order: 3;
        margin-left: auto;
    }
    
    .control-group {
        flex-wrap: nowrap;
        gap: 1rem;
    }
    
    
    .brand-title {
        font-size: 1.4rem;
    }
    
    .brand-content {
        align-items: center; /* Vertikální zarovnání ikon a textu */
    }
    
    .brand-text {
        gap: 0.2rem; /* Mezera mezi title a subtitle */
    }
    
    .brand-weather-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}


/* Brand group styles */
.brand-group {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.brand-content,
.brand-content-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weather-icon-branding {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.brand-weather-icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.brand-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    padding: 0;
}

.brand-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.3;
    padding: 0;
}

.brand-title-mobile {
    font-size: 1.2rem;
    font-weight: 600;
}

.weather-icon-mobile {
    display: inline-flex;
    align-items: center;
}

.brand-weather-icon-mobile {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}


/* Nav tabs styles - obnovení stylů tlačítek */
.nav-tabs-modern {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap !important; /* Vždy na jednom řádku */
}

/* Kompaktní nav-tabs na malých obrazovkách */
@media (max-width: 576px) {
    .nav-tabs-modern {
        gap: 0.25rem;
    }
}

/* Responsivní chování pro nav-tabs - zalamování až do 1350px */
@media (min-width: 576px) and (max-width: 1350px) {
    .nav-tabs-modern {
        flex-wrap: wrap !important;
        justify-content: center;
        overflow-x: visible !important; /* Odstranit horizontální scroll */
    }
    
    .nav-tab {
        flex: 0 0 auto;
        min-width: 80px;
    }
}

.nav-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg-color);
    color: var(--text-color);
    border-radius: 8px;
    cursor: pointer;
    /* transition: all 0.2s ease; - removed animation */
    font-size: 0.875rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Hover efekty pouze pro zařízení s myší */
@media (hover: hover) and (pointer: fine) {
    .nav-tab:hover {
        background: var(--text-color);
        color: var(--card-bg-color);
        border-color: var(--text-color);
    }
}

.nav-tab.active {
    background: var(--primary-color);
    color: white !important;
    border-color: var(--primary-color);
}

.nav-tab.active i {
    color: white !important;
}

.theme-tab {
    padding: 0.5rem;
    min-width: auto;
}

/* Odstranit hover efekt pro theme-tab na dotykových zařízeních */
@media (hover: none) {
    .theme-tab:hover {
        background: transparent !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
}

/* Day selector buttons */
.day-nav-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    background: var(--card-bg-color);
    color: var(--text-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* transition: all 0.2s ease; - removed animation */
    padding: 0;
}

/* Hover efekty pouze pro zařízení s myší */
@media (hover: hover) and (pointer: fine) {
    .day-nav-btn:hover {
        background: var(--text-color);
        color: var(--card-bg-color);
        border-color: var(--text-color);
    }
}

.current-day-text {
    font-weight: 500;
    min-width: 100px;
    text-align: center;
    line-height: 1.4;
    padding: 0.1rem 0;
}

/* Model switcher styles */
.model-switcher-modern {
    display: flex !important;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 auto; /* Využít dostupné místo */
    order: 4;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1022;
    min-height: 38px; /* Stejná výška jako day-selector */
    min-width: 100px;
    max-width: 300px; /* Maximální šířka */
}


/* Select element v model-switcher */
#model-switcher select,
.model-switcher-modern select {
    margin: 0 auto;
    display: block;
    width: 100%; /* Využít celou šířku kontejneru */
    max-width: 100%;
    font-size: 0.9rem;
}

/* Responzivní velikost pro model-switcher */
@media (max-width: 576px) {
    #model-switcher select,
    .model-switcher-modern select {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    #model-switcher,
    .model-switcher-modern {
        min-width: 80px;
        max-width: 150px; /* Menší max šířka na mobilech */
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    #model-switcher select,
    .model-switcher-modern select {
        font-size: 0.85rem;
    }
}

/* Stylové tlačítkové rozhraní pro přepínač */
.model-button-group {
    display: flex;
    justify-content: center;
    background-color: var(--light-gray-color);
    border-radius: var(--border-radius-md);
    padding: 3px;
    /* transition: background-color var(--transition-speed); - removed theme transition */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.model-button-group .btn {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    min-width: 80px;
    border-radius: var(--border-radius-sm);
    border: none;
    /* transition: all var(--transition-speed); - removed theme transition */
    background-color: transparent;
    color: var(--text-color);
}

.model-button-group .btn:not(.active):hover {
    background-color: var(--card-bg-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.model-button-group .btn.active,
.model-button-group .btn.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


/* Centrální ovládací panel - modely a výběr dnů */
.control-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}

/* Day selector container pro zachování místa - centrovaný */
.day-selector-container,
.day-selector-container-modern {
    min-height: 38px;
    height: 38px; /* Fixní výška pro rezervaci místa */
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: 200px; /* Minimální šířka pro rezervaci místa */
    max-width: 240px;
    flex: 0 0 auto;
    order: 3;
}

/* Day selector - v headeru, zarovnaný na střed */
.day-selector,
.day-selector-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-gray-color);
    border-radius: var(--border-radius-md);
    padding: 3px 12px;
    height: 38px;
    /* transition: background-color var(--transition-speed), transform var(--transition-speed); - removed theme transition */
}

/* Hover efekt pouze pro zařízení s myší */
@media (hover: hover) and (pointer: fine) {
    .day-selector:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }
}

#current-day {
    font-weight: 500;
    min-width: 100px;
    text-align: center;
    color: var(--text-color);
    /* transition: color var(--transition-speed); - removed theme transition */
}

.day-selector .btn,
.day-nav-btn {
    background: transparent;
    border-color: transparent;
    /* transition: all var(--transition-speed); - removed theme transition */
    color: var(--text-color);
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.current-day-text {
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hover efekty pouze pro zařízení s myší - vypnout na mobilech */
@media (hover: hover) and (pointer: fine) {
    .day-selector .btn:hover {
        background-color: var(--card-bg-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

.day-selector .btn:focus {
    outline: none;
    box-shadow: none;
    background-color: transparent !important;
}

/* Odstranit hover efekty na dotykových zařízeních */
@media (hover: none) {
    .day-selector .btn:hover,
    .day-nav-btn:hover {
        background-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* Chart type selector - přepínač pro grafy */
.chart-type-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* transition: all var(--transition-speed) ease; - removed theme transition */
}

.chart-type-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.4rem 0.8rem;
    font-weight: 500;
    font-size: 0.85rem;
    /* transition: all var(--transition-speed) ease; - removed theme transition */
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.chart-type-btn i {
    font-size: 0.9rem;
}

.chart-type-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.chart-type-btn.active i {
    color: white;
}

/* Hover efekty pouze pro zařízení s myší */
@media (hover: hover) and (pointer: fine) {
    .chart-type-btn:hover:not(.active) {
        background: var(--text-color);
        color: var(--card-bg-color);
        border-color: var(--text-color);
    }
}

/* Responsivní styly pro přepínač grafů */
@media (max-width: 576px) {
    .chart-type-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .chart-type-btn i {
        font-size: 0.85rem;
    }
}

@media (max-width: 405px) {
    .chart-type-text {
        display: none;
    }
    
    .chart-type-btn {
        padding: 0.4rem 0.5rem;
    }
    
    .chart-type-btn i {
        margin: 0;
    }
}

/* Pravá část záhlaví */
.header-right-content {
    display: flex;
    align-items: center;
    background-color: var(--light-gray-color);
    border-radius: var(--border-radius-md);
    padding: 8px 16px;
    margin-right: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    /* transition: background-color var(--transition-speed), transform var(--transition-speed); - removed theme transition */
}

.header-right-content:hover {
    transform: translateY(-2px);
}

/* Info o aktualizaci */
.update-info {
    position: relative;
    padding-left: 5px;
}

#last-update {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-color);
    /* transition: color var(--transition-speed); - removed theme transition */
    white-space: nowrap;
}


/* Freshness warning */
#data-freshness-warning {
    background-color: rgba(255, 165, 2, 0.1);
    border-left: 3px solid var(--warning-color);
    color: var(--text-color);
    border-radius: var(--border-radius-sm);
    /* transition: background-color var(--transition-speed), color var(--transition-speed); - removed theme transition */
}

#data-freshness-warning i {
    color: var(--warning-color);
    margin-right: 5px;
}

/* Moderní aktuální počasí */
.current-weather-card {
    background: var(--weather-card-gradient);
    color: var(--weather-card-text);
    border-radius: var(--border-radius-lg);
    /* transition: all var(--transition-speed); - removed theme transition */
    overflow: hidden;
}


/* Moderní kompaktní header */
.modern-weather-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: transparent;
    border: none;
    min-height: auto;
    height: 100%;
}

.weather-header-content {
    flex: 1;
    display: flex;
    align-items: center;
}

.weather-title {
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-toggle {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    /* transition: all var(--transition-speed); - removed theme transition */
    backdrop-filter: blur(10px);
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    cursor: pointer;
    flex-shrink: 0;
}

.modern-toggle:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modern-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.modern-toggle:active {
    transform: none !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Ve světlém režimu */
:root .modern-toggle {
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.2);
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:root .modern-toggle:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:root .modern-toggle:focus {
    box-shadow: 0 0 0 3px var(--primary-color);
}

/* Sbalená verze - moderní layout */
.compact-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
}

.compact-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compact-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compact-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Moderní kompaktní obsah */
.modern-weather-body {
    padding: clamp(0.25rem, 0.75vw, 0.5rem) clamp(0.75rem, 2.5vw, 1.25rem) 0 clamp(0.75rem, 2.5vw, 1.25rem);
    /* transition: all var(--transition-speed); - removed theme transition */
}

/* Ensure enough height when weather station data is shown */
@media (min-width: 769px) {
    .current-weather-card:not(.collapsed) .modern-weather-body {
        min-height: 450px; /* Increased for better fit */
    }
    
    .current-weather-grid.has-comparison {
        min-height: 420px; /* Increased for better fit */
    }
}


.current-weather-grid {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas: 
        "main station preview";
    gap: clamp(0.3rem, 0.8vw, 0.5rem) !important;
    align-items: center;
    width: 100%;
}

/* Properly constrain the first column when comparison is active */
.current-weather-grid.has-comparison {
    grid-template-columns: minmax(250px, 280px) auto 1fr !important;
}

/* Assign grid areas to elements */
.current-weather-grid .weather-main-column {
    grid-area: main;
}

.current-weather-grid .weather-station-column {
    grid-area: station;
}

.current-weather-grid .weather-preview {
    grid-area: preview;
}

/* When no comparison data */
.current-weather-grid:not(.has-comparison) .weather-station-column {
    display: none;
}

.current-weather-grid:not(.has-comparison) {
    grid-template-columns: minmax(280px, 350px) 1fr !important;
    grid-template-areas: "main preview" !important;
    gap: clamp(0.3rem, 0.8vw, 0.5rem) !important;
}

/* Zajistit rovnoměrné rozložení bez porovnání */
.current-weather-grid:not(.has-comparison) .weather-main-column,
.current-weather-grid:not(.has-comparison) .weather-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Přepsat min-width pro weather-preview v 1x2 gridu */
.current-weather-grid:not(.has-comparison) .weather-preview {
    min-width: 0 !important;
}

/* 768-991px: 2 boxy layout (main + station) */
@media (min-width: 768px) and (max-width: 991px) {
    .current-weather-grid {
        grid-template-columns: 1fr auto !important;
        grid-template-areas: "main station" !important;
    }
    
    /* Skrýt weather-preview a hourly-preview */
    .current-weather-grid .weather-preview,
    #today-hourly-preview,
    .hourly-preview-wrapper {
        display: none !important;
    }
    
    /* Skrýt mobile station data duplicity */
    .mobile-station-data,
    .weather-main-column .weather-station-data {
        display: none !important;
    }
    
    /* Zobrazit weather-station-column */
    .current-weather-grid .weather-station-column {
        display: block !important;
        width: auto !important;
        min-width: 300px !important;
        max-width: 400px !important;
        grid-area: station !important;
    }
    
    /* Main column styling */
    .current-weather-grid .weather-main-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-area: main !important;
    }
}

/* Tablet range 576-767px: obsah pod sebou bez mezery napravo */
@media (min-width: 576px) and (max-width: 767px) {
    .current-weather-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    /* Skrýt weather-preview a hourly-preview */
    .current-weather-grid .weather-preview,
    #today-hourly-preview,
    .hourly-preview-wrapper {
        display: none !important;
    }
    
    /* Skrýt mobile station data duplicity */
    .mobile-station-data,
    .weather-main-column .weather-station-data {
        display: none !important;
    }
    
    /* Zobrazit weather-station-column pod main */
    .current-weather-grid .weather-station-column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
    }
    
    /* Weather-station-data na plnou šířku */
    .weather-station-data {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Main column styling */
    .current-weather-grid .weather-main-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: 1 !important;
    }
}

/* Mobile layout controlled by JavaScript classes - single column */
.current-weather-grid.mobile-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}

.current-weather-grid.mobile-layout .weather-station-column {
    display: none !important;
}

.current-weather-grid.mobile-layout #weather-comparison-inline {
    display: none !important;
}

.current-weather-grid.mobile-layout .weather-preview {
    display: none !important;
}

.current-weather-grid.mobile-layout .weather-main-column {
    width: 100% !important;
    max-width: 100% !important;
}

/* Tablet layout - REMOVED (používají se media queries místo toho) */

/* Desktop layout controlled by JavaScript classes */
.current-weather-grid.desktop-layout .weather-station-column {
    display: block !important;
}

.current-weather-grid.desktop-layout #weather-comparison-inline {
    display: block !important;
}

.current-weather-grid.desktop-layout .weather-preview {
    display: block !important;
}

/* Mobile layout - under 576px: 2 boxy (main + station) */
@media (max-width: 575px) {
    /* 2 column grid layout */
    .current-weather-grid {
        grid-template-columns: 1fr auto !important;
        grid-template-areas: "main station" !important;
    }
    
    /* Skrýt weather-preview a hourly-preview */
    .current-weather-grid .weather-preview,
    #today-hourly-preview,
    .hourly-preview-wrapper {
        display: none !important;
    }
    
    /* Skrýt mobile station data duplicity */
    .mobile-station-data,
    .weather-main-column .weather-station-data {
        display: none !important;
    }
    
    /* Zobrazit weather-station-column - širší na mobilu */
    .current-weather-grid .weather-station-column {
        display: block !important;
        width: auto !important;
        min-width: 250px !important;
        max-width: 400px !important;
        grid-area: station !important;
    }
    
    /* Weather-station-data širší na mobilu */
    .weather-station-data {
        min-width: 250px !important;
        max-width: 400px !important;
        width: 100% !important;
    }
    
    /* Main column styling */
    .current-weather-grid .weather-main-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-area: main !important;
    }
}
    
    /* Styling for mobile station data under main column */
    .mobile-station-data {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
    }
    
    .mobile-station-data .weather-station-data {
        display: block !important;
        width: 100% !important;
    }
    
    .mobile-station-data .station-tiles {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        gap: 0.3rem !important;
        max-height: 300px !important;
        overflow: hidden !important;
    }
    
    .mobile-station-data .station-tile {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.25rem !important;
        font-size: 0.7rem !important;
        min-height: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Desktop layout - 992px and up: 3x1 grid */
@media (min-width: 992px) {
    /* KRITICKÉ: Zobrazit weather-preview na desktopu když je grid has-comparison */
    .current-weather-grid.has-comparison .weather-preview {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Zobrazit weather-preview i když má třídu has-comparison-desktop */
    .current-weather-grid.has-comparison .weather-preview.has-comparison-desktop {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Zobrazit weather-station-column jen na desktopu */
    .current-weather-grid.has-comparison .weather-station-column {
        display: block !important;
    }
    
    /* Zobrazit weather-comparison-inline jen na desktopu */
    .current-weather-grid.has-comparison #weather-comparison-inline {
        display: block !important;
    }
    
    .has-comparison .current-weather-grid {
        grid-template-columns: auto auto 1fr !important;
        gap: 1rem !important;
        min-height: 600px !important;
        height: auto !important;
        align-items: center !important;
    }
    
    .has-comparison .current-weather-grid > .weather-main-column {
        max-width: 280px !important;
        width: 100% !important;
        justify-self: start !important;
    }
    
    /* Ensure grid properly sizes the first column */
    .has-comparison .current-weather-grid {
        grid-template-columns: minmax(250px, 280px) auto 1fr !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column {
        width: auto !important;
        min-width: 300px !important;
        max-width: 400px !important;
        max-height: 500px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .weather-station-data {
        width: 100% !important;
        overflow: hidden !important;
        display: block !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .station-tiles-container {
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .station-tiles {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        gap: 0.3rem !important;
        max-height: 400px !important;
        overflow: hidden !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .station-tile {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 100px !important;
        min-height: 80px !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        padding: 0.25rem !important;
        gap: 0.1rem !important;
        font-size: 0.7rem !important;
        aspect-ratio: unset !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        text-overflow: ellipsis !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .weather-station-data .station-tiles-container .station-tiles .station-tile * {
        transform: none !important;
        font-size: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .weather-station-data .station-tiles-container .station-tiles .station-tile .tile-icon {
        font-size: 0.7rem !important;
        margin-bottom: 0.05rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .weather-station-data .station-tiles-container .station-tiles .station-tile .tile-label {
        font-size: 0.55rem !important;
        line-height: 1 !important;
        margin: 0.05rem 0 !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .weather-station-data .station-tiles-container .station-tiles .station-tile .tile-value {
        font-size: 0.6rem !important;
        line-height: 1 !important;
    }
    
    /* Force override all clamp() and vw scaling in station area */
    .has-comparison .current-weather-grid > .weather-station-column .station-compare-container {
        margin-top: 0.5rem !important;
        text-align: center !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .nav-tab {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview {
        grid-area: preview !important;
        grid-column: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
        height: 100% !important;
        min-height: 400px !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        align-self: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview #today-hourly-preview {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 370px !important;
        max-height: 370px !important;
        flex-grow: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        align-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper {
        /* Same grid layout for consistent row filling */
        display: grid !important;
        grid-template-rows: 1fr 1fr !important; /* Exactly 2 rows */
        grid-auto-flow: row !important;
        grid-auto-columns: 85px !important;
        gap: 4px !important;
        width: 100% !important;
        height: 324px !important;
        max-height: 324px !important;
        padding: 8px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item {
        width: 85px !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        padding: 16px 6px !important;
        font-size: 0.75rem !important;
        gap: 6px !important;
        justify-self: center !important;
        align-self: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        flex: none !important;
        /* Zajistit, že pozadí pokryje celou výšku */
        background-clip: padding-box !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-icon {
        font-size: 1.4rem !important;
        height: 1.4rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-time {
        font-size: 0.75rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        font-weight: 500 !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-temp {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-rain {
        font-size: 0.7rem !important;
        margin: 0 !important;
        color: #0066cc !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
        min-height: 1rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-rain i {
        font-size: 0.6rem !important;
        color: #0066cc !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-wind {
        font-size: 0.65rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Zajistit, že všechny části dlaždice zaberou celou výšku */
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item > * {
        flex-shrink: 0 !important;
        width: 100% !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: inherit !important;
        border-radius: inherit !important;
        z-index: -1 !important;
    }
    
    .has-comparison .current-weather-grid > .station-action {
        display: none !important;
        grid-area: none !important;
    }
    
    .has-comparison .current-weather-grid .weather-main-column .weather-details {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        gap: 0.5rem !important;
        width: fit-content !important;
        max-width: fit-content !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .has-comparison .current-weather-grid .weather-main-column .weather-details .detail-card {
        flex: 1 1 0 !important;
        max-width: 150px !important;
        min-width: 100px !important;
        width: auto !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }
}



/* Minimal layout shift fixes - very conservative */
.spinner-border {
    transform: translateZ(0);
}


/* Chart containers basic stabilization */
.dashboard-card,
.card.dashboard-card {
    contain: layout;
}

#hourly-weather-chart,
#hourly-wind-chart {
    contain: layout;
    min-height: 400px; /* Reserve space for chart + padding */
    position: relative;
}

#hourly-weather-chart canvas,
#hourly-wind-chart canvas {
    width: 100% !important;
    height: 300px !important;
}

/* Tab content stabilization */
.tab-content.content-transition {
    contain: layout;
}

/* Weather main and location minimal stabilization */
.weather-main {
    contain: layout;
}

p#location.location {
    contain: layout;
}

/* Intermediate layout - 568px to 767px: equal width columns with 2x2 detail grid */
@media (min-width: 568px) and (max-width: 767px) {
    .has-comparison .current-weather-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: 
            "main station" !important;
        gap: clamp(0.5rem, 2vw, 1rem) !important;
        align-items: start !important;
    }
    
    .has-comparison .current-weather-grid > .weather-main-column {
        grid-area: main !important;
        grid-column: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column {
        grid-area: station !important;
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview {
        display: none !important;
        grid-area: none !important;
    }
    
    .has-comparison .current-weather-grid > .station-action {
        display: none !important;
        grid-area: none !important;
    }
    
    .has-comparison .current-weather-grid .weather-main-column .weather-details {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
        flex-wrap: unset !important;
        overflow-x: unset !important;
        padding: unset !important;
    }
    
    .has-comparison .current-weather-grid .weather-main-column .weather-details .detail-card {
        flex: none !important;
        max-width: none !important;
        min-width: auto !important;
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* Intermediate layout - 768px to 991px: fixed width station column */
@media (min-width: 768px) and (max-width: 991px) {
    .has-comparison .current-weather-grid {
        display: grid !important;
        grid-template-columns: 1fr 300px !important;
        grid-template-areas: 
            "main station" !important;
        gap: clamp(0.5rem, 2vw, 1rem) !important;
        align-items: start !important;
    }
    
    .has-comparison .current-weather-grid > .weather-main-column {
        grid-area: main !important;
        grid-column: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column {
        grid-area: station !important;
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-preview {
        display: none !important;
        grid-area: none !important;
    }
    
    .has-comparison .current-weather-grid > .station-action {
        display: none !important;
        grid-area: none !important;
    }
    
    .has-comparison .weather-details {
        display: grid !important;
        gap: 0.5rem !important;
        width: fit-content !important;
    }
}

/* Mobile layout - under 568px */
@media (max-width: 567px) {
    .has-comparison .current-weather-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
    }
    
    .has-comparison .weather-main-column,
    .has-comparison .weather-station-column {
        width: 100% !important;
    }
    
    .has-comparison .weather-main {
        width: 100% !important;
        text-align: center !important;
    }
    
    .has-comparison .weather-preview {
        width: 100% !important;
    }
}


@media (min-width: 1200px) {
    /* Current weather grid already uses dynamic gap with clamp() */
    
    .weather-preview {
        min-width: clamp(300px, 30vw, 450px);
    }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 1199px) {
    .has-comparison .current-weather-grid {
        min-height: 400px; /* Even more height for tablets */
    }
    
    .has-comparison .weather-preview {
        max-width: 400px; /* Smaller width on tablets */
    }
}

/* Default weather-main-column styling */
.weather-main-column {
    display: flex;
    flex-direction: column;
    gap: clamp(0.375rem, 1vw, 0.75rem);
    align-items: center;
    width: 100%;
}

/* Show weather preview with comparison */
.has-comparison .weather-preview {
    display: block !important;
}


.weather-main {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.weather-icon-large {
    font-size: clamp(4rem, 12vw, 7rem) !important;
}

.weather-icon-large *,
.weather-icon-large .weather-icon,
.weather-icon-large svg,
.weather-icon-large img,
.weather-icon-large i,
.weather-icon-large span {
    width: clamp(4rem, 12vw, 7rem) !important;
    height: clamp(4rem, 12vw, 7rem) !important;
    max-width: clamp(4rem, 12vw, 7rem) !important;
    max-height: clamp(4rem, 12vw, 7rem) !important;
    font-size: clamp(4rem, 12vw, 7rem) !important;
    line-height: clamp(4rem, 12vw, 7rem) !important;
}

/* Override všechny starší pravidla pro current-weather-icon */
.weather-icon-large .current-weather-icon,
.weather-icon-large#current-icon,
.weather-icon-large #current-icon,
#current-icon.weather-icon-large {
    font-size: clamp(4rem, 12vw, 7rem) !important;
    width: clamp(4rem, 12vw, 7rem) !important;
    height: clamp(4rem, 12vw, 7rem) !important;
}

.weather-primary {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
}

.temperature {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.condition {
    font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
}

.location {
    font-size: clamp(0.7rem, 2vw, 1rem);
    margin: 0;
    opacity: 0.7;
}

/* Kartičky detailů */
.weather-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.125rem, 0.3vw, 0.25rem);
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    margin-top: clamp(0.2rem, 0.5vw, 0.3rem);
    min-height: 120px; /* Reserve space for detail cards */
}

.weather-details-secondary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    align-items: stretch;
    margin-top: 0;
}

/* Ensure 2x2 grid layout for detail cards at all screen sizes */
.weather-details,
.weather-details-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    max-width: 250px !important;
    margin: 0 auto !important;
}

/* On mobile, change to 1x4 grid */
@media (max-width: 567px) {
    .weather-details,
    .weather-details-secondary {
        display: flex !important;
        flex-direction: row !important;
        max-width: 100% !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .weather-details .detail-card,
    .weather-details-secondary .detail-card {
        flex: 1 1 auto !important;
        max-width: 120px !important;
        min-width: 80px !important;
        width: auto !important;
        height: auto !important;
        aspect-ratio: 1 !important;
    }
    
    /* Center all content */
    .current-weather-grid {
        justify-items: center !important;
    }
    
    .weather-station-column,
    .weather-preview,
    .station-action {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
}

/* Station action styling when comparison is shown */
.has-comparison .station-action {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.3rem 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
}

.has-comparison .weather-station-column {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Style station action buttons */
.station-action .btn {
    min-width: 150px;
}

/* Ensure station-action appears after main content */
.station-action {
    order: 10 !important;
}

/* Desktop specific sizing for weather-details */
@media (min-width: 992px) {
    .weather-details,
    .weather-details-secondary {
        max-width: 200px !important;
    }
    
    .weather-details .detail-card,
    .weather-details-secondary .detail-card {
        height: 80px !important;
        padding: 0.3rem !important;
    }
    
    /* Reduce all text sizes in detail cards on desktop */
    .weather-details .detail-value,
    .weather-details-secondary .detail-value,
    .weather-details .tile-value,
    .weather-details-secondary .tile-value {
        font-size: clamp(0.65rem, 1.8vw, 0.85rem) !important;
    }
    
    .weather-details .detail-label,
    .weather-details-secondary .detail-label,
    .weather-details .tile-label,
    .weather-details-secondary .tile-label {
        font-size: clamp(0.4rem, 1.2vw, 0.55rem) !important;
    }
    
    .weather-details .detail-icon,
    .weather-details-secondary .detail-icon,
    .weather-details .tile-icon,
    .weather-details-secondary .tile-icon {
        font-size: clamp(0.7rem, 2.2vw, 1rem) !important;
    }
    
    .weather-details .tile-unit,
    .weather-details-secondary .tile-unit {
        font-size: clamp(0.4rem, 1.1vw, 0.5rem) !important;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .weather-details .detail-card,
    .weather-details-secondary .detail-card {
        width: 65px !important;
        height: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        padding: 0.6rem 0.15rem 0.15rem 0.15rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .weather-details .detail-icon,
    .weather-details-secondary .detail-icon {
        font-size: 0.75rem !important;
        margin: 0 0 0.1rem 0 !important;
        width: auto !important;
        display: block !important;
    }
    
    .weather-details .detail-label,
    .weather-details-secondary .detail-label {
        font-size: 0.5rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .weather-details .detail-value,
    .weather-details-secondary .detail-value {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
    }
    
    .weather-details .detail-value span:last-child,
    .weather-details-secondary .detail-value span:last-child {
        font-size: 0.4rem !important;
    }
    
    .weather-details,
    .weather-details-secondary {
        gap: 0.15rem !important;
    }
}

/* Responsive grid sizes - tiles now use dynamic clamp() sizing */
@media (max-width: 420px) {
    /* Prevent horizontal overflow on very small screens */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Force proper layout for mobile */
    .current-weather-card {
        padding: 0.25rem !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Reorganize modern-weather-body for mobile */
    .modern-weather-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: 
            "main"
            "details"
            "station"
            "action"
            "preview" !important;
        gap: 0.3rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .station-action {
        grid-area: action !important;
    }
    
    .weather-main-column {
        display: contents !important; /* This breaks the wrapper */
    }
    
    .weather-main {
        grid-area: main !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .weather-details {
        grid-area: details !important;
        width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    .weather-station-column {
        grid-area: station !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .weather-preview {
        grid-area: preview !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .weather-details,
    .weather-details-secondary,
    .has-comparison .weather-details {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.2rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;  /* Changed from nowrap to wrap */
        overflow: visible !important;  /* Changed from overflow-x: auto */
        padding: 0 0.2rem !important;
        box-sizing: border-box !important;
    }
    
    /* Station tiles use global styles - always 3x3 grid with square tiles */
    
    /* Keep detail cards uniform on mobile */
    .weather-details .detail-card,
    .weather-details-secondary .detail-card {
        width: 65px !important;
        height: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        aspect-ratio: 1 !important;
        padding: 0.5rem 0.15rem 0.15rem 0.15rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Three-row layout: icon, label, value */
    .weather-details .detail-icon,
    .weather-details-secondary .detail-icon {
        font-size: 0.8rem !important;
        margin: 0 0 0.15rem 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        display: block !important;
    }
    
    .weather-details .detail-info,
    .weather-details-secondary .detail-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.05rem !important;
        text-align: center !important;
        width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
    }
    
    .weather-details .detail-label,
    .weather-details-secondary .detail-label {
        font-size: 0.55rem !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 0 !important;
    }
    
    .weather-details .detail-value,
    .weather-details-secondary .detail-value {
        font-size: 0.65rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        justify-content: center !important;
        width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 0.05rem !important;
        flex-shrink: 0 !important;
    }
    
    .weather-details .detail-value span:first-child,
    .weather-details-secondary .detail-value span:first-child {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .weather-details .detail-value span:last-child,
    .weather-details-secondary .detail-value span:last-child {
        flex-shrink: 0 !important;
        font-size: 0.45rem !important;
        opacity: 0.8 !important;
    }
    
    /* Ensure station column displays properly */
    .weather-station-column {
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0.2rem !important;
        width: 100% !important;
        background: var(--card-bg-color) !important;
        border-radius: var(--border-radius-sm) !important;
    }
    
    /* Ensure station data is visible */
    .station-tiles-container {
        margin-top: 0 !important;
        width: 100% !important;
    }
    
}

.detail-card {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: clamp(0.25rem, 0.5vw, 0.5rem);
    text-align: center;
    /* transition: all var(--transition-speed); - removed theme transition */
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1;
    min-height: 60px; /* Ensure minimum height to prevent shift */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    gap: 0.125rem;
    box-sizing: border-box;
}

.detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), rgba(64, 153, 255, 0.5));
    transform: translateX(-100%);
    /* transition: transform var(--transition-speed); - removed theme transition */
}

[data-theme="light"] .detail-card {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color) !important;
}

/* Ensure borders are always visible in light theme */
[data-theme="light"] .weather-details .detail-card {
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
}

/* Same thin black borders for weather station tiles */
[data-theme="light"] .station-tile {
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .detail-card {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
}

.detail-card:hover {
    box-shadow: 0 4px 12px rgba(64, 153, 255, 0.15);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.detail-card:hover::before {
    transform: translateX(0);
}

[data-theme="dark"] .detail-card:hover {
    box-shadow: 0 4px 12px rgba(64, 153, 255, 0.2);
    border-color: var(--primary-color);
}

.detail-icon {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--primary-color);
    margin-bottom: clamp(0.2rem, 0.5vw, 0.3rem);
    opacity: 0.8;
    /* transition: opacity var(--transition-speed); - removed theme transition */
}

.detail-card:hover .detail-icon {
    opacity: 1;
}

.detail-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    width: 100%;
    overflow: hidden;
}

.detail-label {
    font-size: clamp(0.5rem, 1.2vw, 0.7rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: clamp(0.1rem, 0.3vw, 0.2rem);
    max-width: 100%;
    line-height: 1;
    text-align: center;
}

.detail-value {
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
    /* transition: color var(--transition-speed); - removed theme transition */
    max-width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
}

/* Ensure units are smaller */
.detail-value span:last-child,
.detail-unit {
    font-size: 0.7em;
    font-weight: 400;
    opacity: 0.8;
}

/* Hodinový náhled */
.weather-preview {
    min-width: 300px;
    /* Minimal layout shift prevention */
    transform: translateZ(0);
    contain: layout;
}

/* Zobrazit weather-preview na desktopu když je součástí gridu s porovnáním */
@media (min-width: 992px) {
    .current-weather-grid.has-comparison .weather-preview {
        display: block !important;
    }
}

/* Responsive design pro moderní aktuální počasí */
@media (max-width: 567px) {
    /* modern-weather-body already uses dynamic padding with clamp() */
    
    .current-weather-grid {
        display: flex;
        flex-direction: column;
        /* gap already uses dynamic value with clamp() */
        align-items: center;
    }
    
    .weather-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* gap already uses dynamic value with clamp() */
        width: 100%;
    }
    
    .weather-details {
        display: flex;
        flex-direction: row;
        justify-content: center;
        /* gap and other properties already use dynamic values with clamp() */
        width: 100%;
        max-width: none;
    }
    
    /* All card elements already use dynamic sizing with clamp() */
    
    .weather-preview {
        width: 100%;
        order: 3;
    }
    
    /* Temperature and weather-icon-large already use dynamic sizing with clamp() */
}

@media (max-width: 575px) {
    .modern-weather-header {
        padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.375rem, 1.5vw, 0.75rem);
        min-height: clamp(28px, 7vw, 36px);
    }
    
    /* modern-weather-body already uses dynamic padding */
    
    .compact-right {
        gap: 6px;
        display: none !important; /* Skryj na malém mobilu */
    }
    
    .compact-detail {
        font-size: 0.7rem;
    }
    
    .compact-layout {
        gap: 8px !important;
    }
    
    .compact-left {
        gap: 8px !important;
    }
    
    .compact-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.8rem !important;
    }
    
    .compact-temp {
        font-size: 1.5rem !important;
    }
    
    .compact-condition {
        font-size: 1rem !important;
    }
    
    .modern-toggle {
        width: 24px !important;
        height: 24px !important;
        border-width: 1px !important;
    }
    
    .modern-toggle .simple-icon {
        font-size: 0.7rem !important;
    }
    
    .current-weather-grid {
        gap: 12px !important;
    }
    
    .weather-main {
        gap: 12px;
        flex-direction: row;
        justify-content: center;
    }
    
    /* Weather icon large already uses dynamic sizing with clamp() */
    
    .weather-primary {
        text-align: left;
    }
    
    .weather-details {
        max-width: 100%;
        gap: 4px;
    }
    
    /* detail-card, detail-icon, detail-label and detail-value already use dynamic sizing with clamp() */
    
    /* Temperature, condition and location already use dynamic sizing with clamp() */
    
    /* Skrýt hodinovou předpověď na mobilu */
    .weather-preview {
        display: none !important;
    }
    
    /* Na mobilu zůstává weather-preview skrytý i s has-comparison */
    
    /* Vylepšené stylování pro mobilní zobrazení */
    .weather-details {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        gap: 0px;
        margin-top: 12px;
        width: 100%;
        flex-wrap: nowrap;
        align-items: stretch;
        max-width: none;
    }
    
    .detail-card {
        background: var(--card-bg-color);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: clamp(6px, 1.5vw, 10px) clamp(5px, 2vw, 12px);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: clamp(2px, 0.8vw, 3px);
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        width: auto;
    }
    
    
    .detail-icon {
        font-size: clamp(0.7rem, 2.5vw, 0.95rem);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--primary-color);
        width: clamp(14px, 3vw, 18px);
    }
    
    .detail-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-left: 2px;
        flex: 1;
        min-width: 0;
    }
    
    .detail-label {
        font-size: clamp(0.75rem, 2vw, 0.95rem);
        opacity: 0.7;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
    }
    
    .detail-value {
        font-size: clamp(0.85rem, 2.5vw, 1.15rem);
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }
    
    /* Hlavní sekce počasí */
    .weather-main {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 8px 0;
        gap: 16px;
    }
    
    .weather-icon-large {
        margin-bottom: 0;
        margin-left: -12px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    
    .temperature {
        font-size: 2.5rem;
        line-height: 1;
        margin-bottom: 4px;
    }
    
    .condition {
        font-size: 1.15rem;
        margin-bottom: 2px;
    }
    
    .location {
        font-size: 0.9rem;
        opacity: 0.8;
    }
}

/* Current weather toggle button */
.current-weather-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--weather-card-text);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* transition: all var(--transition-speed); - removed theme transition */
}

.current-weather-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.current-weather-toggle:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    outline: none;
}

.current-weather-toggle .simple-icon {
    font-size: 0.9rem;
    /* transition: transform var(--transition-speed); - removed theme transition */
}

/* Kompaktní zobrazení v headeru */
.compact-weather {
    opacity: 0;
    transform: translateX(-10px);
    /* transition: opacity 0.3s ease-in, transform 0.3s ease-in; - removed animation */
}

.current-weather-card.collapsed .compact-weather {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease-in 0.2s, transform 0.4s ease-in 0.2s;
}

.compact-icon {
    font-size: 1.8rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compact-main-info {
    flex: 1;
    min-width: 140px;
    margin-left: 8px;
}

.compact-temp {
    font-size: 1.2rem;
    color: var(--weather-card-text);
    white-space: nowrap;
    font-weight: 600;
}

.compact-condition {
    font-size: 0.9rem;
    opacity: 0.9;
    color: var(--weather-card-text);
    overflow: visible;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
}

.compact-details {
    flex: 2;
    justify-content: flex-end;
    margin-left: 16px;
    align-items: center;
}

.compact-detail {
    font-size: 0.9rem;
    opacity: 0.85;
    color: var(--weather-card-text);
    white-space: nowrap;
    font-weight: 500;
}

/* Ve světlém režimu */
:root .compact-temp,
:root .compact-condition,
:root .compact-detail {
    color: var(--text-color);
}

/* Moderní animace pro zavírání/otevírání */
.current-weather-card.collapsed {
    max-height: 40px; /* Compact height for collapsed state */
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .current-weather-card.collapsed {
        max-height: 32px !important;
    }
}

/* Removed duplicate rule - see line 3689 for current implementation */

.current-weather-card:not(.collapsed) .modern-weather-body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-in 0.1s, transform 0.3s ease-in 0.1s;
}

.modern-toggle .simple-icon,
.modern-toggle .bi {
    font-size: 0.9rem;
    font-weight: bold;
    /* transition: transform var(--transition-speed); - removed theme transition */
}

.current-weather-card.collapsed .modern-toggle .simple-icon,
.current-weather-card.collapsed .modern-toggle .bi {
    transform: rotate(180deg);
}

.current-weather-card.collapsed .normal-weather-title {
    display: none;
}

.current-weather-card:not(.collapsed) .compact-weather {
    display: none !important;
}

.current-weather-card:not(.collapsed) {
    max-height: 1000px; /* Increased to accommodate weather station data */
    transition: max-height 0.4s ease-in;
}

.current-weather-card.collapsed .card-body {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.current-weather-card:not(.collapsed) .card-body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-in 0.1s, transform 0.3s ease-in 0.1s;
}

.current-weather-card.collapsed .current-weather-toggle .simple-icon,
.current-weather-card.collapsed .current-weather-toggle .bi {
    transform: rotate(180deg);
}

/* Animace pro skrývání při přepínání dnů - kompletní skrytí bez mezery */
#top-preview-row.day-switched {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#top-preview-row:not(.day-switched) {
    display: block;
    /* animation: slideInFromTop 0.4s ease-out; - removed initial animation */
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Backup animace pro card, pokud by row selektor nefungoval */
.current-weather-card.day-switched {
    /* transform: translateY(-20px); - removed animation */
    opacity: 0;
    pointer-events: none;
    /* transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; - removed transition */
}

.current-weather-card:not(.day-switched) {
    /* transform: translateY(0); - removed animation */
    opacity: 1;
    pointer-events: auto;
    /* transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; - removed transition */
}

/* Bílé pozadí pro aktuální počasí ve světlém režimu */
:root .current-weather-card {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Toggle button ve světlém režimu */
:root .current-weather-toggle {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-color);
}

:root .current-weather-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

:root .current-weather-toggle:focus {
    box-shadow: 0 0 0 2px var(--primary-color);
}

/* Zachovat gradient v tmavém režimu */
[data-theme="dark"] .current-weather-card {
    background: var(--weather-card-gradient);
    color: var(--weather-card-text);
    border: none;
}

/* Oprava stylů pro rozbalené počasí v tmavém režimu na mobilu */
@media (max-width: 768px) {
    [data-theme="dark"] .current-weather-card {
        background: linear-gradient(135deg, #4099ff, #3366ff);
        border: none;
        color: #ffffff;
    }
    
    [data-theme="dark"] .modern-weather-body {
        color: #ffffff;
    }
    
    [data-theme="dark"] .detail-label,
    [data-theme="dark"] .detail-value,
    [data-theme="dark"] .temperature,
    [data-theme="dark"] .condition,
    [data-theme="dark"] .location,
    [data-theme="dark"] .update-info-text {
        color: #ffffff !important;
    }
    
    [data-theme="dark"] .detail-card {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    [data-theme="dark"] .detail-icon {
        color: #ffffff !important;
    }
    
    /* Zabránit přebarvování v tmavém režimu */
    [data-theme="dark"] .current-weather-card:active,
    [data-theme="dark"] .current-weather-card:focus {
        background: linear-gradient(135deg, #4099ff, #3366ff) !important;
    }
    
    [data-theme="dark"] .modern-toggle {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    [data-theme="dark"] .modern-toggle:active {
        background: rgba(255, 255, 255, 0.2) !important;
    }
}

.current-weather-icon {
    font-size: 4rem;
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    /* transition: transform var(--transition-speed), color var(--transition-speed); - removed theme transition */
}

.current-weather-card:hover .current-weather-icon {
    transform: translateY(-5px);
}

.current-info-container {
    padding: 0;
}

#current-temp {
    margin-bottom: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.1;
}

#current-conditions {
    font-weight: 500;
    font-size: 1.1rem;
    margin-top: 0;
}

#current-details {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

#location {
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
}

/* Dnešní hodinová předpověď pro hlavní kartu */
.today-hourly-preview {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 0;
    width: 100%;
    align-content: center;
    gap: 4px;
    overflow: hidden;
    /* Zajistit, že dlaždice se nevejdou za hranice kontejneru */
    box-sizing: border-box;
    /* Exactly 2 rows: 2 * 150px height + gap (4px) + padding (2 * 8px) */
    height: 324px;
    max-height: 324px;
}

.hourly-preview-wrapper {
    display: grid;
    grid-template-rows: 1fr 1fr; /* Exactly 2 rows */
    grid-auto-flow: row;
    grid-auto-columns: 75px;
    gap: 4px;
    width: 100%;
    height: 324px;
    max-height: 324px;
    padding: 8px;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: center;
    align-content: center;
    /* Minimal layout shift prevention */
    transform: translateZ(0);
    contain: layout;
}

/* Clean desktop layout for hourly preview */
@media (min-width: 992px) {
    .today-hourly-preview {
        width: 100%;
        max-width: none;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: center;
        gap: 6px;
        padding: 8px;
    }
    
    /* Override for comparison layout */
    .has-comparison .current-weather-grid > .weather-preview .today-hourly-preview {
        width: 100%;
        max-width: none;
        min-width: 0;
        justify-content: flex-start;
        padding: 0;
    }
    
    .hourly-preview-wrapper {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        gap: 6px;
    }
    
    .hourly-preview-item {
        width: 55px;
        height: 150px;
        min-height: 150px;
        font-size: 0.7rem;
        padding: 8px 2px;
        flex: 0 0 55px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }
}

.hourly-preview-item {
    flex: 0 0 auto;
    padding: 10px 8px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    /* transition: background-color var(--transition-speed), transform var(--transition-speed); - removed theme transition */
    width: 75px;
    min-height: 150px;
    height: 150px;
}

/* Orámování dlaždiček aktuální předpovědi ve světlém režimu */
:root .current-weather-card .hourly-preview-item {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .current-weather-card .hourly-preview-item {
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
}

.hourly-preview-item:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}


.preview-time {
    font-weight: 500;
    margin-bottom: clamp(2px, 0.5vw, 3px);
    font-size: clamp(0.7rem, 1.8vw, 0.8rem);
}

.preview-icon {
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--accent-color);
    margin: clamp(3px, 1vw, 5px) 0;
}

.preview-temp {
    font-size: clamp(0.85rem, 2.2vw, 1.1rem);
    font-weight: 600;
    margin: clamp(2px, 0.7vw, 3px) 0;
}

.preview-wind {
    font-size: clamp(0.65rem, 1.6vw, 0.75rem);
    color: var(--text-secondary);
    margin: clamp(1px, 0.5vw, 2px) 0;
}

/* Responzivní úpravy pro menší obrazovky */
@media (max-width: 991px) {
    .hourly-preview-item {
        width: 70px;
        padding: 8px 6px;
    }
}

/* Úzké zobrazení - zachovat jednořádkové zobrazení s overflow */
@media (max-width: 767px) {
    /* Vyšší kontejner pro umístění dlaždic - pouze pro rozbalený stav */
    .current-weather-card:not(.collapsed) .card-body {
        min-height: auto;
        padding-bottom: 20px;
    }
    
    /* Reorganizace layoutu - ikona a text na celou šířku - pouze pro rozbalený stav */
    .current-weather-card:not(.collapsed) .row {
        flex-direction: column;
        min-height: auto;
    }
    
    .current-weather-card .col-lg-2,
    .current-weather-card .col-lg-3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    
    .current-weather-card .col-lg-7 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        margin-top: 15px;
    }
    
    /* Umožnit zalamování na více řádků */
    .today-hourly-preview {
        flex-wrap: wrap;
        min-height: auto;
        max-height: none;
        align-content: center;
    }
    
    .hourly-preview-wrapper {
        flex-wrap: wrap;
        min-height: auto;
        align-content: center;
    }
    
    .hourly-preview-item {
        flex: 0 0 auto;
        width: 70px;
        min-width: 60px;
        padding: 8px 4px;
        margin-bottom: 0;
    }
}

/* Velmi malé obrazovky - optimalizované jednořádkové zobrazení */
@media (max-width: 480px) {
    .hourly-preview-item {
        width: 60px;
        min-width: 55px;
        padding: 6px 3px;
    }
    
    .today-hourly-preview {
        min-height: auto;
    }
    
    .hourly-preview-wrapper {
        min-height: auto;
    }
}

/* Model switcher - styl podobný day selectoru */
.model-select-wrapper {
    position: relative;
    width: auto;
    min-width: 160px;
    max-width: 250px;
}

/* Dynamické přizpůsobení model switcheru */
@media (max-width: 500px) {
    .model-select-wrapper {
        min-width: 120px;
        max-width: 180px;
    }
    .model-select {
        font-size: 0.85rem;
        padding: 0.4rem 1.5rem 0.4rem 0.8rem;
    }
}

@media (max-width: 400px) {
    .model-select-wrapper {
        min-width: 100px;
        max-width: 140px;
    }
    .model-select {
        font-size: 0.8rem;
        padding: 0.35rem 1.2rem 0.35rem 0.6rem;
        height: 36px;
    }
}

.model-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--light-gray-color);
    background-image: none !important;
    border-radius: var(--border-radius-md);
    border: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.95rem;
    font-family: inherit;
    padding: 0.45rem 1.2rem;
    width: 100%;
    height: 38px;
    cursor: pointer;
    text-align: center;
    /* transition: all var(--transition-speed); - removed theme transition */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    /* Vycentrování textu */
    text-align: center;
    text-align-last: center;
    direction: ltr;
    
    /* Zabránění překrývání s šipkou */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
}

/* Speciální CSS pro Firefox */
@-moz-document url-prefix() {
    .model-select {
        text-align: center;
        padding-left: 0.5rem;
        padding-right: 1.2rem;
    }
}

.model-select:hover {
    background-color: var(--card-bg-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.model-select:focus {
    background-color: var(--card-bg-color);
    box-shadow: 0 0 0 2px var(--primary-color);
    outline: none;
}

.model-select:active {
    background-color: var(--card-bg-color);
}


/* Styly pro možnosti v dropdownu */
.model-select option {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    padding: 10px;
    text-align: center;
    direction: ltr;
}

/* Záložky */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    /* transition: border-color var(--transition-speed); - removed theme transition */
}

.nav-tabs .nav-link {
    color: var(--text-color);
    border: none;
    padding: 12px 20px;
    border-radius: 0;
    font-weight: 500;
    position: relative;
    /* transition: color var(--transition-speed), background-color var(--transition-speed); - removed theme transition */
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(64, 153, 255, 0.05);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: rgba(64, 153, 255, 0.1);
    font-weight: 600;
}

.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--primary-color);
}

/* Karty */
.dashboard-card {
    border: none;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    /* transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed); - removed theme transition */
    height: 100%;
    background-color: var(--card-bg-color);
    margin-bottom: 1.5rem; /* Větší mezera mezi grafy */
}

/* Tenké orámování karet ve světlém režimu */
:root .dashboard-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .dashboard-card {
    border: none;
}

/* Orámování všech prvků ve světlém režimu */
:root .nav-tabs .nav-link {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

:root .model-switcher select,
:root .btn {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    border: 1px solid transparent;
}

[data-theme="dark"] .model-switcher select,
[data-theme="dark"] .btn {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Bootstrap ikony - přizpůsobení barev */
:root .bi {
    color: #6c757d;
}

[data-theme="dark"] .bi {
    color: #a0aec0;
}

.hourly-rain .bi,
.daily-precip .bi {
    color: var(--primary-color) !important;
}

/* Theme toggle Bootstrap ikony */
.theme-toggle .bi {
    font-size: 1.2rem;
    /* transition: opacity 0.3s ease, color 0.3s ease; - removed theme transition */
    cursor: pointer;
}

.theme-toggle .light-icon {
    color: #ffa502;
}

.theme-toggle .dark-icon {
    color: #64b1ff;
}

.dashboard-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card-header {
    background-color: var(--card-bg-color);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    padding: 16px 20px;
    color: var(--text-color);
    text-align: center;
    /* transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed); - removed theme transition */
    cursor: default;
    user-select: none;
}

/* Zabránit změnám při kliknutí */
.card-header:active,
.card-header:focus {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color) !important;
    outline: none;
}

/* Odstraněno - způsobovalo problémy s mizením pozadí */
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Specifické pro mobilní zařízení */
@media (max-width: 768px) {
    .card,
    .dashboard-card,
    .card-header,
    .card-body,
    .current-weather-card,
    .modern-weather-header,
    .modern-weather-body {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Zabránit přebarvování aktuálního počasí */
    .current-weather-card:active,
    .current-weather-card:focus,
    .modern-weather-header:active,
    .modern-weather-header:focus,
    .modern-weather-body:active,
    .modern-weather-body:focus,
    .card-header:active,
    /* Odstraněno - inherit způsoboval mizení pozadí */
    
    /* Specificky pro tmavý režim */
    [data-theme="dark"] .current-weather-card:active,
    [data-theme="dark"] .current-weather-card:focus,
    [data-theme="dark"] .modern-weather-header:active,
    [data-theme="dark"] .modern-weather-header:focus {
        background: linear-gradient(135deg, #4099ff, #3366ff) !important;
        color: #ffffff !important;
    }
    
    /* Zakázat pointer events na záhlavích */
    .card-header {
        pointer-events: none !important;
    }
    
    /* Povolit pointer events pouze na tlačítku */
    .modern-toggle {
        pointer-events: auto !important;
    }
}

/* Grid layout pro hodinovou předpověď */
.hourly-forecast-grid {
    display: grid;
    grid-gap: clamp(5px, 1.5vw, 10px);
    padding: clamp(5px, 1.5vw, 10px);
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(clamp(55px, 8vw, 70px), clamp(80px, 12vw, 100px)));
    justify-content: center;
}

/* Hodinová předpověď */
.hourly-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: clamp(5px, 1.5vw, 10px) clamp(3px, 1vw, 5px);
    gap: clamp(5px, 1.5vw, 8px);
}

.hourly-item {
    padding: clamp(8px, 2vw, 12px) clamp(5px, 1.5vw, 8px);
    text-align: center;
    min-width: clamp(55px, 8vw, 70px);
    max-width: clamp(80px, 12vw, 100px);
    border-radius: var(--border-radius-md);
    background-color: var(--light-color);
    /* transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed); - removed theme transition */
    margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Tenké orámování ve světlém režimu */
:root .hourly-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .hourly-item {
    border: none;
}

@media (max-width: 375px) {
    /* hourly-item already uses dynamic sizing with clamp() */
}

.hourly-item:hover {
    background-color: var(--card-bg-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.hourly-time {
    font-weight: 500;
    margin-bottom: clamp(5px, 1.5vw, 8px);
    color: var(--text-color);
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    /* transition: color var(--transition-speed); - removed theme transition */
}

.hourly-icon {
    font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    color: var(--primary-color);
    margin: 6px 0;
    /* transition: transform var(--transition-speed), color var(--transition-speed); - removed theme transition */
}

/* Větší ikony počasí v hodinové předpovědi */
.hourly-icon .weather-icon {
    width: clamp(2rem, 5vw, 3rem) !important;
    height: clamp(2rem, 5vw, 3rem) !important;
}

.hourly-item:hover .hourly-icon {
    transform: translateY(-2px);
}

.hourly-temp {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    font-weight: 600;
    margin: clamp(4px, 1vw, 6px) 0;
    color: var(--text-color);
    /* transition: color var(--transition-speed); - removed theme transition */
}

.hourly-rain {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 500;
    margin: 4px 0;
    gap: 0.3rem;
    /* transition: color var(--transition-speed); - removed theme transition */
}

.hourly-wind {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500; 
    color: var(--text-color);
    gap: 0.3rem;
    /* transition: color var(--transition-speed); - removed theme transition */
}

[data-theme="dark"] .hourly-rain {
    color: #83c6ff; /* Světlejší modrá v tmavém režimu */
}

[data-theme="dark"] .hourly-wind {
    color: #e2e8f0; /* Světlejší text v tmavém režimu */
}

/* Denní souhrny - stejný styl jako hodinová předpověď */
.daily-container-modern {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 5px;
    gap: 8px;
}

.daily-item {
    padding: 12px 8px;
    text-align: center;
    min-width: 140px;
    max-width: 180px;
    border-radius: var(--border-radius-md);
    background-color: var(--light-color);
    /* transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed); - removed theme transition */
    margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

/* Tenké orámování ve světlém režimu */
:root .daily-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .daily-item {
    border: none;
}

/* Interaktivní karty */
.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    background-color: rgba(64, 153, 255, 0.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Vybraná denní karta */
.daily-item.selected {
    background-color: rgba(64, 153, 255, 0.1);
    box-shadow: 0 0 0 2px var(--primary-color);
}

[data-theme="dark"] .daily-item.selected {
    background-color: rgba(100, 177, 255, 0.15);
}

/* Styl pro informaci o srážkách v denním přehledu */
.daily-precip {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 500;
    margin: 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

/* Struktura denní dlaždice */
.daily-date {
    margin-bottom: 8px;
}

.daily-icon {
    margin: 8px 0;
}

.daily-temp {
    margin: 8px 0;
}

.daily-precip {
    margin: 8px 0;
}

.daily-bottom-section {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
}

/* Styl pro informaci o větru v denním přehledu */
.daily-wind {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500; 
    color: var(--text-color);
    gap: 0.3rem;
    margin: 0;
    /* transition: color var(--transition-speed); - removed theme transition */
}

[data-theme="dark"] .daily-precip {
    color: #83c6ff; /* Světlejší modrá v tmavém režimu */
}

[data-theme="dark"] .daily-wind {
    color: #e2e8f0; /* Světlejší text v tmavém režimu */
}

.daily-precip i {
    margin-right: 5px;
}

/* Styly pro klikací karty denní předpovědi */
.clickable-card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.clickable-card:hover {
    background-color: var(--card-bg-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* .clickable-card:active odstraneno - způsobovalo problémy na mobilech */

/* Karty jsou teď intuitivnější bez nutnosti textového hintu */
.clickable-card {
    position: relative;
    overflow: hidden;
}

.clickable-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    /* transition: transform var(--transition-speed); - removed theme transition */
}

.clickable-card:hover::after {
    opacity: 1;
}

.daily-date {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 0.9rem;
    /* transition: color var(--transition-speed); - removed theme transition */
}

.daily-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 6px 0;
    /* transition: transform var(--transition-speed), color var(--transition-speed); - removed theme transition */
}

/* Ikony počasí v denní předpovědi - stejné jako hodinová */
.daily-icon .weather-icon {
    width: 3rem !important;
    height: 3rem !important;
}

.daily-item:hover .daily-icon {
    color: var(--primary-color);
}

.daily-temp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 6px 0;
}

.temp-max {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    /* transition: color var(--transition-speed); - removed theme transition */
}

.temp-min {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    /* transition: color var(--transition-speed); - removed theme transition */
}

/* Grafy - opravené styly */
canvas {
    width: 100% !important;
    max-height: 300px;
    padding: 0;
    margin: 0;
}

/* Speciální mezery mezi grafy na mobilu */
@media (max-width: 991px) {
    /* Základní mezera 0.5rem pro všechny grafy */
    #chart-tab-pane .dashboard-card {
        margin-bottom: 1.5rem;
    }
    
    /* Větší mezera po 2. grafu */
    #chart-tab-pane .chart-card-2 {
        margin-bottom: 2rem;
    }
    
    /* Poslední graf má normální mezeru */
    #chart-tab-pane .chart-card-4 {
        margin-bottom: 0.5rem;
    }
}

/* Oprava pro zobrazení grafů */
.card-body canvas {
    display: block !important;
    visibility: visible !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray-color);
    border-radius: 4px;
    /* transition: background-color var(--transition-speed); - removed theme transition */
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
    /* transition: background-color var(--transition-speed); - removed theme transition */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* No data message - správná viditelnost v obou režimech */
.no-data-message {
    color: var(--text-color) !important;
    font-weight: 500;
    opacity: 0.8;
    /* transition: color var(--transition-speed); - removed theme transition */
}

/* Alert s no-data message - zajistit viditelnost v tmavém režimu */
.alert.no-data-message {
    background-color: var(--light-gray-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    opacity: 1;
}

/* Footer */
footer {
    color: var(--text-secondary);
    /* transition: color var(--transition-speed); - removed theme transition */
    border-top: 1px solid var(--border-color);
    /* transition: border-color var(--transition-speed); - removed theme transition */
    min-height: 60px; /* Prevent layout shift */
    display: flex;
    align-items: center;
    justify-content: center;
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    /* transition: color var(--transition-speed); - removed theme transition */
}

footer a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

/* Bootstrap úpravy */
.alert {
    background-color: var(--light-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    /* transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed); - removed theme transition */
}

.bg-light {
    background-color: var(--body-bg-color) !important;
    /* transition: background-color var(--transition-speed); - removed theme transition */
}

.text-muted {
    color: var(--text-secondary) !important;
    /* transition: color var(--transition-speed); - removed theme transition */
}

/* Responzivní úpravy */
@media (min-width: 1200px) {
    /* hourly-forecast-grid already uses dynamic sizing with clamp() */
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* hourly-forecast-grid already uses dynamic sizing with clamp() */
    
    .daily-item {
        min-width: 160px;
        max-width: 200px;
    }
    
    .current-weather-icon:not(.weather-icon-large) {
        font-size: 4.5rem;
    }
    
    .day-selector-container {
        min-height: 34px;
    }
}


@media (min-width: 576px) and (max-width: 767px) {
    /* hourly-forecast-grid already uses dynamic sizing with clamp() */
    
    .daily-item {
        min-width: 70px;
        max-width: 80px;
    }
    
    /* current-weather-icon already uses dynamic sizing */
    
    /* #current-temp already uses dynamic sizing */
    }
    
    .container-xl {
        padding: 0 15px;
    }
    
    /* preview-icon, preview-temp and preview-time already use dynamic sizing with clamp() */
    
    .model-button-group {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .model-button-group .btn {
        flex: 1 0 auto;
        margin-bottom: 5px;
    }

    .day-selector-container {
        min-height: 32px;
    }
}

@media (max-width: 575px) {
    /* Header mobile optimalizace - kompaktnější */
    .sticky-top-row {
        padding: 6px 8px;
        margin-bottom: 0.5rem;
    }
    
    @media (max-width: 380px) {
        .sticky-top-row {
            padding: 4px 6px;
            margin-bottom: 0.5rem;
        }
    }
    
    .sticky-top-row .row {
        margin: 0;
        align-items: center;
    }
    
    .sticky-top-row .row > [class*="col-"] {
        padding-left: 4px;
        padding-right: 4px;
    }
    
    .sticky-top-row h1 {
        font-size: 1.1rem;
        margin: 0;
        font-weight: 700;
    }
    
    .sticky-top-row h1 img {
        width: 1.3rem;
        height: 1.3rem;
        margin-right: 0.3rem;
    }
    
    /* Control center mobile layout - kompaktnější */
    .control-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    
    .model-select-wrapper {
        min-width: 160px;
        max-width: 200px;
        width: 100%;
    }
    
    .model-select {
        font-size: 0.9rem;
        padding: 0.4rem 2rem 0.4rem 1rem;
        height: 36px;
        font-weight: 600;
    }
    
    .day-selector-container {
        margin-left: 0 !important;
        min-height: 36px;
    }
    
    .day-selector {
        width: auto;
        justify-content: center;
        padding: 4px 12px;
        height: 36px;
    }
    
    .day-selector .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
        min-width: 32px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #current-day {
        font-size: 0.9rem;
        min-width: 80px;
        margin: 0 0.5rem;
        font-weight: 600;
    }
    
    /* Header right content mobile - kompaktnější layout */
    .header-right-content {
        flex-direction: row;
        gap: 8px !important;
        padding: 6px 10px;
        background-color: transparent;
        border-radius: var(--border-radius-sm);
        align-items: center;
    }
    
    .update-info {
        text-align: left;
        flex: 1;
    }
    
    #last-update {
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }
    
    .theme-toggle {
        width: 28px;
        height: 28px;
        margin-right: 5px;
        margin-left: 5px;
        flex-shrink: 0;
        position: relative;
    }
    
    .theme-toggle i {
        font-size: 1rem;
    }
    
    
    /* Ostatní mobile styly */
    .hourly-forecast-grid {
        grid-template-columns: repeat(auto-fit, minmax(65px, 75px));
        grid-gap: 6px;
    }
    
    .hourly-icon {
        font-size: 1.5rem;
        margin: 4px 0;
    }
    
    .hourly-temp {
        font-size: 1.1rem;
        margin: 4px 0;
    }
    
    .hourly-time {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
    
    .hourly-rain, .hourly-wind {
        font-size: 0.75rem;
    }
    
    .daily-item {
        min-width: 65px;
        max-width: 75px;
    }
    
    /* current-weather-icon, #current-temp and #current-conditions already use dynamic sizing */
    
    .nav-tabs .nav-link {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    /* preview elements already use dynamic sizing with clamp() */
    
    .hourly-preview-item {
        padding: clamp(3px, 1vw, 5px) clamp(1px, 0.5vw, 2px);
    }

    .day-selector-container {
        min-height: 30px;
    }
    
    .header-controls {
        margin-top: 5px;
    }
    
    /* Lepší zobrazení na záložkách */
    .nav-tabs {
        gap: 5px;
    }
    
    .nav-tabs .nav-link i {
        margin-right: 2px;
    }
    
    /* Méně paddingu pro kontejner */
    .container-xl {
        padding: 0 10px;
    }
}

/* Speciální optimalizace pro iPhone SE a velmi malé displeje */
@media (max-width: 375px) {
    /* Menší záhlaví */
    .sticky-top-row h1 {
        font-size: 1rem !important;
        font-weight: 700;
    }
    
    .sticky-top-row h1 img {
        width: 1.1rem !important;
        height: 1.1rem !important;
    }
    
    /* Ještě kompaktnější control center */
    .control-center {
        max-width: 180px;
        gap: 6px;
    }
    
    .model-select-wrapper {
        min-width: 140px;
        max-width: 180px;
    }
    
    .model-select {
        font-size: 0.8rem;
        padding: 0.3rem 1.5rem 0.3rem 0.8rem;
        height: 32px;
    }
    
    .day-selector {
        height: 32px;
        padding: 3px 8px;
    }
    
    .day-selector .btn {
        min-width: 28px;
        height: 26px;
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    
    #current-day {
        font-size: 0.8rem;
        min-width: 70px;
    }
    
    /* Menší theme toggle */
    .theme-toggle {
        width: 24px !important;
        height: 24px !important;
        margin-right: 3px !important;
        margin-left: 3px !important;
    }
    
    .theme-toggle i {
        font-size: 0.9rem !important;
    }
    
    #last-update {
        font-size: 0.6rem;
        max-width: 120px;
        font-weight: 600;
    }
    
    /* Menší current weather toggle */
    .current-weather-toggle {
        width: 26px !important;
        height: 26px !important;
    }
    
    .current-weather-toggle .simple-icon {
        font-size: 0.8rem !important;
    }
    
    /* Menší collapsed výška na malých obrazovkách */
    .current-weather-card.collapsed {
        max-height: 32px !important;
    }
    
    .current-weather-card.collapsed .card-header {
        height: 32px !important;
        padding: 0 12px !important;
    }
    
    /* Kompaktnější zobrazení na malých obrazovkách */
    .compact-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.6rem !important;
    }
    
    .compact-temp {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
    }
    
    .compact-condition {
        font-size: 0.85rem !important;
        font-weight: 500 !important;
    }
    
    .compact-main-info {
        min-width: 120px !important;
        margin-left: 6px !important;
    }
    
    /* Skrýt detaily na malých obrazovkách, nechat jen hlavní info */
    .compact-details {
        display: none !important;
    }
    
    /* Na velmi malých obrazovkách skrýt popis a nechat jen ikonu a teplotu */
    .card-header span.fw-semibold {
        display: none !important;
    }
    
    .compact-weather {
        margin-left: 0 !important;
    }
    
    
    /* Kompaktnější prvky UI */
    .hourly-forecast-grid {
        grid-template-columns: repeat(auto-fit, minmax(55px, 65px));
        grid-gap: 5px;
    }
    
    .hourly-item {
        padding: 8px 5px;
        min-width: 60px;
    }
    
    /* Menší mezery a fonty v záložkách */
    .nav-tabs .nav-link {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
    
    .nav-tabs .nav-link i {
        font-size: 0.85rem;
    }
    
    /* Kompaktnější horní panel */
    .header-right-content {
        padding: 5px 8px;
    }
    
    /* Aktuální počasí */
    .current-weather-icon:not(.weather-icon-large) {
        font-size: 2.5rem;
    }
    
    #current-temp {
        font-size: 1.8rem;
    }
    
    #current-details {
        font-size: 0.75rem;
    }
    
    #location {
        font-size: 0.8rem;
    }
    
    /* Přepínač modelů */
    .model-button-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        min-width: 65px;
    }
    
    /* Náhled hodin */
    .today-hourly-preview {
        gap: 3px;
    }
    
    .hourly-preview-item {
        padding: 4px 1px;
    }
    
    /* Denní předpověď - kompaktnější na malém mobilu */
    .daily-item {
        padding: 6px 3px;
        min-width: 55px;
        max-width: 65px;
        min-height: 200px;
    }
    
    .daily-icon {
        font-size: 1.3rem;
        margin: 3px 0;
    }
    
    .daily-date {
        font-size: 0.7rem;
        margin-bottom: 3px;
    }
    
    .temp-max {
        font-size: 1rem;
        margin: 3px 0;
    }
    
    .temp-min {
        font-size: 0.9rem;
    }
    
    .daily-precip {
        font-size: 0.7rem;
    }
    
    .daily-wind {
        font-size: 0.7rem;
    }
    
    /* Hodinové dlazdice také kompaktnější */
    .hourly-preview-item {
        width: 55px;
        min-width: 50px;
        padding: 4px 2px;
        height: 150px;
        min-height: 150px;
    }
    
    .preview-icon {
        font-size: 0.9rem;
        margin: 2px 0;
    }
    
    .preview-temp {
        font-size: 0.8rem;
        margin: 2px 0;
    }
    
    .preview-time {
        font-size: 0.65rem;
        margin-bottom: 2px;
    }
    
    /* Dodatečné úpravy pro aktuální počasí na velmi malých obrazovkách */
    .weather-details {
        gap: 4px;
        margin-top: 8px;
    }
    
    .detail-card {
        padding: 6px 4px;
        min-height: auto;
    }
    
    .detail-icon {
        font-size: 0.9rem;
    }
    
    .detail-value {
        font-size: 0.9rem;
    }
    
    .detail-label {
        font-size: 0.75rem;
    }
    
    .temperature {
        font-size: 2rem;
    }
    
    .condition {
        font-size: 0.85rem;
    }
    
    .location {
        font-size: 0.7rem;
    }
}

/* Pouze vypnout tap highlight na dotykových zařízeních */
@media (hover: none) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Mezery mezi grafy na záložce Grafy */

/* Na mobilech (pod 992px) - grafy jsou pod sebou */
@media (max-width: 991px) {
    #chart-tab-pane .col-lg-6 {
        margin-bottom: 1.5rem;
    }
    
    /* Poslední graf nemá dolní mezeru */
    #chart-tab-pane .row:last-child .col-lg-6:last-child {
        margin-bottom: 0;
    }
    
    /* Mezery mezi grafy na hodinové záložce */
    #hourly-tab-pane .col-lg-6:first-child {
        margin-bottom: 1.5rem;
    }
}

/* Na desktopu (992px a více) - grafy jsou vedle sebe */
@media (min-width: 992px) {
    /* Mezera mezi řádky */
    #chart-tab-pane .chart-row-top {
        margin-bottom: 1rem;
    }
    
    /* Žádná mezera mezi grafy vedle sebe */
    #chart-tab-pane .col-lg-6 {
        margin-bottom: 0;
    }
}

/* Smooth content transitions for model switching - removed to prevent theme animations */
.content-transition {
    /* transition: opacity 0.15s ease-in-out; - removed theme transition */
}

.content-transition.fade-out {
    opacity: 0.3;
}

/* Tab content smooth transitions - removed to prevent theme animations */
.tab-pane {
    /* transition: opacity 0.2s ease-in-out; - removed theme transition */
}

/* Weather data containers smooth update - removed to prevent theme animations */
#current-weather,
#hourly-forecast,
#daily-summary {
    /* transition: opacity 0.15s ease-in-out; - removed theme transition */
}

/* Disable model switch mask by default */
#model-switch-mask {
    display: none !important;
}

/* Improved transitions for collapsible current weather */
.current-weather-card {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease-in-out;
}

.current-weather-card .modern-weather-body {
    transition: opacity 0.25s ease-in-out, 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.current-weather-card .compact-weather {
    transition: opacity 0.25s ease-in-out, 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth toggle icon rotation */
.current-weather-card .modern-toggle .simple-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.current-weather-card .modern-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Prevent layout shift during collapse/expand */
.current-weather-card .modern-weather-header {
    min-height: 40px;
    /* transition: background-color 0.2s ease-in-out; - removed theme transition */
    display: flex;
    align-items: center;
}

.current-weather-card.collapsed .modern-weather-header {
    min-height: 40px;
    height: 40px;
}

.current-weather-card.collapsed .modern-weather-body {
    display: block; /* Changed from none to block */
    padding: 0; /* Remove padding when collapsed */
}

/* Hide everything except weather-preview when collapsed */
.current-weather-card.collapsed .weather-main,
.current-weather-card.collapsed .weather-details {
    display: none;
}

/* Hide weather-preview when collapsed on desktop - but show on desktop when grid has data */
.current-weather-card.collapsed .weather-preview {
    display: none;
}

/* Exception: Show weather-preview on desktop when there's hourly data, even when card is collapsed */
@media (min-width: 992px) {
    .current-weather-card.collapsed .weather-preview {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Extra strong rule to override any other hiding rules */
    .current-weather-grid .weather-preview {
        display: block !important;
    }
    
    /* Override tablet/mobile hiding rules specifically for desktop */
    .has-comparison .current-weather-grid > .weather-preview {
        display: block !important;
        grid-area: preview !important;
    }
}

/* Show weather-preview only on mobile when collapsed */
@media (max-width: 768px) {
    .current-weather-card.collapsed .weather-preview {
        display: block;
        padding: 0.5rem;
        margin: 0;
    }
}

.current-weather-card.collapsed .weather-header-content {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Smooth transition for the whole top preview row - removed to prevent theme animations */
#top-preview-row {
    /* transition: opacity 0.2s ease-in-out; - removed theme transition */
}

/* Fix collapsed current weather text readability */
.current-weather-card.collapsed {
    min-height: 40px;
    height: auto;
}

.current-weather-card.collapsed .compact-weather {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    height: 40px;
    padding: 0;
}

.current-weather-card.collapsed .compact-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 1rem;
    padding: 0 1rem;
}

.current-weather-card.collapsed .compact-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
}

.current-weather-card.collapsed .compact-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0.5rem;
    gap: 0.5rem;
    height: 100%;
}

.current-weather-card.collapsed .compact-condition {
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
    text-overflow: initial;
}

/* Mobile specific fixes */
@media (max-width: 576px) {
    .current-weather-card.collapsed {
        min-height: 45px;
    }
    
    .current-weather-card.collapsed .compact-weather {
        padding: 0;
        min-height: 45px;
        height: 45px;
    }
    
    .current-weather-card.collapsed .compact-layout {
        padding: 0 0.75rem;
    }
    
    .current-weather-card.collapsed .compact-condition {
        font-size: 0.85rem;
        white-space: nowrap;
        max-width: none;
    }
    
    .current-weather-card.collapsed .compact-temp {
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .current-weather-card.collapsed .compact-icon {
        font-size: 1.6rem;
        width: 28px;
        height: 28px;
    }
}

/* Weather Comparison Styles */
.comparison-card {
    background-color: var(--card-bg-color);
}

.comparison-card .card-body {
    padding: 0.75rem;
}

/* Table styling */
.comparison-card table {
    margin-bottom: 0;
}

.comparison-card table th {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: 0.5rem 0.75rem;
}

.comparison-card table th small {
    font-weight: 400;
    font-size: 0.75rem;
}

.comparison-card table td {
    padding: 0.4rem 0.75rem;
    vertical-align: middle;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-color);
}

.comparison-card table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-card table td:first-child {
    color: var(--text-secondary);
    font-weight: 500;
}

.comparison-card table td:first-child i {
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

/* Dark mode styles for comparison table */
[data-theme="dark"] .comparison-card table th {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .comparison-card table td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .comparison-card .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 576px) {
    .comparison-card table {
        font-size: 0.85rem;
    }
    
    .comparison-card table th,
    .comparison-card table td {
        padding: 0.3rem 0.5rem;
    }
    
    .comparison-card table th small {
        font-size: 0.7rem;
    }
}

.comparison-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .comparison-column.comparison-diff {
        border-top: 1px solid var(--border-color);
        padding-top: 1.5rem;
        margin-top: 0.5rem;
    }
}

.comparison-column {
    text-align: center;
}

.comparison-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.comparison-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comparison-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1rem;
    padding: 0.2rem 0;
}

.comparison-item i {
    color: var(--text-secondary);
    font-size: 0.85rem;
    width: 1rem;
}

.comparison-diff .comparison-item {
    font-weight: 600;
}

.comparison-diff .comparison-item span {
    color: var(--primary-color);
}

/* Show button in weather card when station data is available */
.weather-station-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.2rem 0.6rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    /* transition: background-color 0.2s; - removed theme transition */
}

.weather-station-indicator:hover {
    background-color: var(--primary-hover);
}

/* Extra data from weather station */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.extra-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}

.extra-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.extra-item span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.extra-item strong {
    color: var(--text-color);
    font-weight: 600;
}

/* Inline comparison in weather preview */
#weather-comparison-inline {
    margin: 0;
    max-width: 100%;
}

/* Remove any top margin on tablets/desktop */
@media (min-width: 769px) {
    .has-comparison #weather-comparison-inline {
        margin-top: 0;
    }
}

#weather-comparison-inline table {
    font-size: 0.85rem;
    background-color: transparent;
    table-layout: fixed; /* Force equal column widths */
    margin-bottom: 0 !important; /* Remove Bootstrap margin */
}

#weather-comparison-inline table th {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    background-color: transparent;
    white-space: nowrap;
}

#weather-comparison-inline table th:first-child {
    width: 35%; /* Slightly narrower for labels */
}

#weather-comparison-inline table th small {
    font-weight: 400;
    font-size: 0.7rem;
    opacity: 0.8;
}

#weather-comparison-inline table td {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-color); /* Ensure text is visible */
}

#weather-comparison-inline table tbody tr:last-child td {
    border-bottom: none;
}

#weather-comparison-inline table td:first-child {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

#weather-comparison-inline table td:first-child i {
    margin-right: 0.4rem;
    font-size: 0.8rem;
}

/* Center align numeric values */
#weather-comparison-inline table td:not(:first-child) {
    text-align: center;
}

/* Difference column styling */
#weather-comparison-inline .fw-bold {
    font-size: 0.85rem;
}

/* Dark mode for inline comparison */
[data-theme="dark"] #weather-comparison-inline table {
    color: #e9ecef; /* Light color for dark mode */
}

[data-theme="dark"] #weather-comparison-inline table th {
    color: #a0aec0; /* Secondary light color */
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #weather-comparison-inline table td {
    color: #e9ecef; /* Ensure all cells have light text */
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] #weather-comparison-inline table td:first-child {
    color: #a0aec0; /* Secondary light color for labels */
}

[data-theme="dark"] #weather-comparison-inline .text-primary {
    color: #64b1ff !important; /* Lighter blue for dark mode */
}

/* Mobile adjustments */
@media (max-width: 576px) {
    /* Ensure weather preview takes full width and is visible */
    .weather-preview {
        width: 100% !important;
        padding: 0.5rem !important;
        margin: 0 !important;
    }
    
    #weather-comparison-inline {
        max-width: 100%; /* Full width on mobile */
        margin: 0.25rem 0;
        padding: 0;
        width: 100% !important;
    }
    
    #weather-comparison-inline table {
        font-size: 0.7rem;
        width: 100%;
    }
    
    #weather-comparison-inline table th,
    #weather-comparison-inline table td {
        padding: 0.15rem 0.2rem;
    }
    
    #weather-comparison-inline table th {
        font-size: 0.65rem;
        padding: 0.2rem 0.15rem;
    }
    
    #weather-comparison-inline table th:first-child {
        width: 30%;
    }
    
    #weather-comparison-inline table th small {
        font-size: 0.55rem;
        display: block;
        margin-top: 0.1rem;
    }
    
    #weather-comparison-inline table td {
        font-size: 0.7rem;
    }
    
    #weather-comparison-inline table td:first-child {
        font-size: 0.65rem;
    }
    
    /* Keep icons visible on mobile */
    
    /* Shorten labels on mobile */
    @media (max-width: 400px) {
        #weather-comparison-inline table {
            font-size: 0.65rem;
        }
        
        #weather-comparison-inline table td {
            font-size: 0.65rem;
            padding: 0.1rem;
        }
    }
}

/* Ultra narrow devices (< 360px) */
@media (max-width: 360px) {
    .weather-preview {
        padding: 0 0.25rem;
    }
    
    #weather-comparison-inline {
        margin: 0;
    }
    
    #weather-comparison-inline table th {
        font-size: 0.6rem;
    }
    
    #weather-comparison-inline table td {
        font-size: 0.6rem;
    }
}

/* Weather preview should be hidden when current weather is collapsed on desktop - UPDATED */
@media (min-width: 769px) and (max-width: 991px) {
    /* Only hide on tablet range, not on full desktop */
    .current-weather-card.collapsed .weather-preview {
        display: none !important;
    }
}

/* Weather Comparison Styles */
.weather-comparison-container {
    padding: 0;
    width: 100%;
}

/* Weather comparison inline should be in the second column */
#weather-comparison-inline {
    width: 100%;
}

/* Weather main should stay in first column */
.has-comparison .weather-main {
    min-width: 200px;
}

.comparison-header {
    margin-bottom: 1rem;
}

.comparison-header-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.comparison-content {
    /* Simple stacked layout */
}

.comparison-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.comparison-times {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.time-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

/* Summary table styling */
.summary-table {
    width: auto;
    margin: 0;
}

.summary-table th {
    text-align: center !important;
    padding: 0.4rem 0.3rem;
    white-space: nowrap;
    vertical-align: middle;
}

.summary-table td {
    padding: 0.3rem 0.3rem;
    white-space: nowrap;
}

/* Column specific styles */
.th-icon {
    width: auto;
    text-align: center;
    padding-left: 0.3rem;
    padding-right: 0.2rem;
}

.td-icon {
    width: auto;
    text-align: left;
    padding-left: 0.3rem;
    padding-right: 0.2rem;
}

.th-value {
    text-align: center;
    min-width: 50px;
    padding-left: 0.2rem;
    padding-right: 0.3rem;
}

.td-value {
    text-align: center;
    min-width: 50px;
    font-variant-numeric: tabular-nums;
    padding-left: 0.2rem;
    padding-right: 0.3rem;
}

.th-range {
    text-align: center;
    min-width: 80px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.td-range {
    text-align: center;
    min-width: 80px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.th-consensus {
    text-align: center;
    width: 50px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.td-consensus {
    text-align: center;
    width: 50px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.td-icon {
    color: var(--text-muted);
}

.td-value {
    font-weight: 500;
}

.station-value {
    color: var(--primary-color);
}

.td-range {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.range-sep {
    margin: 0 2px;
}

.comparison-table th,
.comparison-table td {
    padding: 0.3rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.summary-table .param-name {
    font-weight: 500;
}

.summary-table .station-value {
    font-weight: 600;
    color: var(--primary-color);
}

.summary-table .model-avg {
    font-weight: 500;
}

.summary-table .model-range {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.consensus-col {
    text-align: center;
    width: 60px;
}

.consensus-good {
    color: var(--success-color, #28a745);
}

.consensus-moderate {
    color: var(--warning-color, #ffc107);
}

.consensus-poor {
    color: var(--danger-color, #dc3545);
}

.comparison-detail-btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    /* transition: all 0.2s; - removed theme transition */
    cursor: pointer;
}

.comparison-detail-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.comparison-detail-btn:active {
    transform: translateY(0);
}

/* Detailed Comparison Modal */
.comparison-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.comparison-modal-content {
    background: var(--card-bg-color);
    border-radius: var(--border-radius-lg);
    max-width: 95%;
    max-height: 92%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin: 0.25rem;
}

.comparison-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparison-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* transition: all 0.2s; - removed theme transition */
}

.btn-close:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.comparison-modal-body {
    padding: 0.75rem;
    overflow: auto;
}

/* Reduce padding on mobile */
@media (max-width: 768px) {
    .comparison-modal-header {
        padding: 0.75rem 1rem;
    }
    
    .comparison-modal-body {
        padding: 0.5rem;
    }
}

.detailed-table {
    min-width: 800px;
}

.detailed-table th {
    position: sticky;
    top: 0;
    background: var(--card-bg-color);
    z-index: 10;
}

.detailed-table .no-data {
    color: var(--text-muted);
    text-align: center;
}

.detailed-table .diff-low {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    font-weight: 600;
}

.detailed-table .diff-medium {
    background: rgba(255, 193, 7, 0.1);
    color: #ff8800;
    font-weight: 600;
}

.detailed-table .diff-high {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-weight: 600;
}

/* Dark mode diff colors for desktop */
[data-theme="dark"] .detailed-table .diff-low {
    background: rgba(40, 167, 69, 0.2);
}

[data-theme="dark"] .detailed-table .diff-medium {
    background: rgba(255, 193, 7, 0.2);
}

[data-theme="dark"] .detailed-table .diff-high {
    background: rgba(220, 53, 69, 0.2);
}

/* Adjust weather-preview container */
.weather-preview {
    width: 100%;
}

/* When has comparison, weather-preview contains the comparison table */
.has-comparison .weather-preview {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    max-width: none !important;
    width: 100%;
    display: block !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .weather-comparison-container {
        min-width: auto; /* Allow smaller width on mobile */
        padding: 0.5rem;
    }
    
    .comparison-times {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .comparison-table {
        font-size: 0.8rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.3rem;
    }
    
    .consensus-col {
        width: 40px;
    }
}

/* Ensure inline comparison is always visible when collapsed on mobile */
@media (max-width: 576px) {
    .current-weather-card.collapsed .weather-preview {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0.25rem !important;
        margin: 0 !important;
    }
    
    .current-weather-card.collapsed #weather-comparison-inline {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
    }
    
    .current-weather-card.collapsed .modern-weather-body {
        display: block !important;
        min-height: auto;
        height: auto;
        padding: 0 !important;
    }
    
    .current-weather-card.collapsed .current-weather-grid {
        display: block !important;
        gap: 0 !important;
    }
    
    /* Reduce all gaps in weather preview on mobile */
    .weather-preview {
        padding: 0.25rem !important;
    }
    
    #weather-comparison-inline {
        margin: 0 !important;
    }
}

/* But hide the body content when collapsed (except weather-preview) */
.current-weather-card.collapsed .current-weather-grid > *:not(.weather-preview) {
    display: none;
}

/* Additional station info on main page */
.station-additional-info {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.station-additional-info .additional-info-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.additional-info-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.info-inline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.info-inline-item i {
    color: var(--primary-color);
    font-size: 1rem;
}

.info-name {
    color: var(--text-secondary);
}

.info-value {
    font-weight: 600;
    color: var(--text-color);
}

/* Mobile adjustments for inline info */
@media (max-width: 576px) {
    .additional-info-inline {
        gap: 0.75rem;
        flex-direction: column;
    }
    
    .info-inline-item {
        font-size: 0.8rem;
    }
    
    .station-additional-info .additional-info-title {
        font-size: 0.85rem;
    }
}


/* Mobile detailed comparison styles - transposed */
.detailed-table-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.comparison-table-transposed {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    background: var(--card-bg-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.comparison-table-transposed th,
.comparison-table-transposed td {
    padding: 0.2rem 0.15rem;
    text-align: center;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.comparison-table-transposed thead th {
    background: var(--light-color);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.empty-header {
    background: var(--light-color);
    min-width: 65px;
}

.param-header {
    min-width: 48px;
    padding: 0.2rem 0.1rem;
}

.param-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}

.param-header-content i {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.param-unit {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.row-label {
    font-weight: 600;
    text-align: left !important;
    background: var(--light-color);
    position: sticky;
    left: 0;
    z-index: 5;
    min-width: 65px;
    padding-left: 0.3rem !important;
    padding-right: 0.2rem !important;
}

.station-row {
    background: rgba(var(--primary-rgb), 0.05);
}

.station-row .station-value {
    font-weight: 600;
    color: var(--primary-color);
}

.model-row:nth-child(even) {
    background: var(--light-color);
}

.model-value {
    font-weight: 500;
}

/* Diff color classes for mobile table */
.comparison-table-transposed .diff-low {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.comparison-table-transposed .diff-medium {
    background: rgba(255, 193, 7, 0.1);
    color: #ff8800;
}

.comparison-table-transposed .diff-high {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Dark mode diff colors */
[data-theme="dark"] .comparison-table-transposed .diff-low {
    background: rgba(40, 167, 69, 0.2);
}

[data-theme="dark"] .comparison-table-transposed .diff-medium {
    background: rgba(255, 193, 7, 0.2);
}

[data-theme="dark"] .comparison-table-transposed .diff-high {
    background: rgba(220, 53, 69, 0.2);
}

/* Table responsive wrapper for desktop */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dark mode adjustments for mobile transposed table */
[data-theme="dark"] .comparison-table-transposed {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .comparison-table-transposed th,
[data-theme="dark"] .comparison-table-transposed td {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .comparison-table-transposed thead th,
[data-theme="dark"] .row-label {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .station-row {
    background: rgba(64, 153, 255, 0.1);
}

[data-theme="dark"] .model-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* Fix primary-rgb variable for station row background */
:root {
    --primary-rgb: 64, 153, 255;
}


/* Parameter units next to icons */
.param-unit {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.3rem;
}

/* Adjust icon cell to accommodate both icon and unit */
.td-icon {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

/* Ensure icons are visible on mobile */
.td-icon i {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Mobile adjustments */
@media (max-width: 576px) {
    /* Minimize gaps between weather-main and weather-comparison */
    .has-comparison .current-weather-grid {
        gap: 0.5rem !important;
    }
    
    /* Minimize gaps between divs on mobile */
    .weather-comparison-container {
        padding: 0.25rem;
    }
    
    .comparison-header {
        margin-bottom: 0.5rem;
    }
    
    .comparison-header-top {
        margin-bottom: 0.25rem;
        gap: 0.5rem;
    }
    
    .comparison-times {
        gap: 0.25rem;
    }
    
    .comparison-content {
        padding: 0;
    }
    
    /* Table adjustments */
    .summary-table th {
        padding: 0.25rem 0.15rem;
        font-size: 0.75rem;
    }
    
    .summary-table td {
        padding: 0.2rem 0.15rem;
    }
    
    .td-icon {
        padding: 0.2rem 0.15rem;
    }
    
    .td-icon i {
        font-size: 0.8rem;
        display: inline-block !important; /* Force icons to be visible */
    }
    
    .param-unit {
        font-size: 0.65rem;
    }
    
    .td-value {
        min-width: 40px;
        font-size: 0.85rem;
    }
    
    .th-value {
        min-width: 40px;
    }
    
    /* Reduce title font size */
    .comparison-title {
        font-size: 0.85rem;
        margin: 0;
    }
    
    /* Smaller detail button */
    .comparison-detail-btn {
        padding: 0.15rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* On very small screens, hide icon and show only unit */
@media (max-width: 360px) {
    .td-icon i {
        display: none;
    }
    .param-unit {
        margin-left: 0;
        font-size: 0.8rem;
    }
}

/* ===== Enhanced Model Comparison Styles - Compact Version ===== */
.weather-comparison-compact {
    background: var(--card-bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    font-size: 0.875rem;
}

.comparison-header-compact {
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .comparison-header-compact {
    background: rgba(255, 255, 255, 0.02);
}

.comparison-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.comparison-title-text {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-color);
}

.comparison-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-icon-compact {
    background: none;
    border: none;
    color: var(--primary-color);
    padding: 0.2rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.btn-detail-compact {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-detail-compact:hover {
    background: var(--primary-dark);
}

.comparison-times-compact {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
}

.time-label-compact {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.comparison-table-compact {
    font-size: 0.8125rem;
}

.comparison-table-compact th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg-color);
}

.comparison-table-compact td {
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .comparison-table-compact td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.th-param {
    width: 2.5rem;
    text-align: center;
}

.th-station, .th-models {
    width: 3.5rem;
    text-align: center;
}

.th-range {
    text-align: center;
}

.th-match {
    width: 2rem;
    text-align: center;
}

.td-param {
    text-align: center;
    white-space: nowrap;
}

.td-station {
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
}

.td-models, .td-range {
    text-align: center;
    color: var(--text-color);
}

.td-match {
    text-align: center;
}

.param-unit-inline {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-left: 0.2rem;
}

.range-values {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Consensus indicators */
.consensus-good {
    color: var(--success-color);
}

.consensus-moderate {
    color: var(--warning-color);
}

.consensus-poor {
    color: var(--danger-color);
}

/* Accuracy color coding */
.accuracy-good {
    background-color: rgba(56, 211, 159, 0.1);
    color: var(--success-color);
}

.accuracy-moderate {
    background-color: rgba(255, 165, 2, 0.1);
    color: var(--warning-color);
}

.accuracy-poor {
    background-color: rgba(255, 107, 107, 0.1);
    color: var(--danger-color);
}

/* Detailed comparison styles */
.detailed-comparison-container {
    max-height: 70vh;
    overflow-y: auto;
}

.detailed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.forecast-times {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
}

.time-info {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.detailed-comparison-table {
    font-size: 0.9rem;
}

.detailed-comparison-table th {
    position: sticky;
    top: 0;
    background: var(--card-bg-color);
    z-index: 10;
}

.unit-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
}

.station-row {
    background-color: rgba(0, 0, 0, 0.03);
}

.detailed-table-compact .station-row {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .detailed-table-compact .station-row td {
    background-color: #0f1824 !important;
}

/* Dark mode table base styles */
[data-theme="dark"] .table {
    color: #e1e6ed;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .detailed-table-compact tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

.model-row:hover {
    background-color: var(--light-gray-color);
}

.diff-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Station additional info - compact */
.station-additional-compact {
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
}

[data-theme="dark"] .station-additional-compact {
    background: rgba(255, 255, 255, 0.02);
}

.additional-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-color);
}

.additional-item i {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Dark mode adjustments */
[data-theme="dark"] .weather-comparison-container {
    background: var(--card-bg-color);
}

[data-theme="dark"] .comparison-header {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .station-row {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .accuracy-good {
    background-color: rgba(56, 211, 159, 0.2);
}

[data-theme="dark"] .accuracy-moderate {
    background-color: rgba(255, 165, 2, 0.2);
}

[data-theme="dark"] .accuracy-poor {
    background-color: rgba(255, 107, 107, 0.2);
}

/* Dark mode for compact comparison */
[data-theme="dark"] .weather-comparison-compact {
    background: var(--card-bg-color);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .comparison-table-compact th {
    background: var(--card-bg-color);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .btn-icon-compact {
    color: var(--primary-color);
}

[data-theme="dark"] .btn-detail-compact {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .btn-detail-compact:hover {
    background: var(--primary-light);
}

/* Responsive styles for compact comparison */
@media (max-width: 576px) {
    .weather-comparison-compact {
        font-size: 0.8125rem;
    }
    
    .comparison-header-compact {
        padding: 0.375rem 0.5rem;
    }
    
    .comparison-title-text {
        font-size: 0.8125rem;
    }
    
    .btn-detail-compact {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }
    
    .comparison-times-compact {
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.7rem;
    }
    
    .comparison-table-compact {
        font-size: 0.75rem;
    }
    
    .comparison-table-compact th,
    .comparison-table-compact td {
        padding: 0.2rem 0.3rem;
    }
    
    .th-station, .th-models {
        width: 3rem;
    }
    
    .param-unit-inline {
        font-size: 0.625rem;
    }
    
    .station-additional-compact {
        padding: 0.375rem 0.5rem;
        gap: 0.5rem;
        font-size: 0.7rem;
    }
    
    .additional-item i {
        font-size: 0.75rem;
    }
}

/* Ensure no overflow */
.weather-comparison-compact {
    max-width: 100%;
    overflow-x: auto;
}

.comparison-table-compact {
    table-layout: fixed;
}

/* Fix for inline comparison in weather preview */
#weather-comparison-inline {
    max-width: 100%;
    overflow: hidden;
}

/* Desktop layout for comparison and hourly preview */
@media (min-width: 992px) {
    .weather-preview {
        display: block !important;
    }
    
    /* Force show weather-preview on desktop regardless of has-comparison state */
    .has-comparison .current-weather-grid > .weather-preview,
    .current-weather-grid.has-comparison .weather-preview {
        display: block !important;
        grid-area: preview !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .weather-preview.has-comparison-desktop {
        display: flex !important;
        gap: 1rem;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: row-reverse; /* Změna pořadí - comparison vpravo */
    }
    
    .weather-preview.has-comparison-desktop > div {
        display: block !important;
    }
    
    .weather-preview.has-comparison-desktop #weather-comparison-inline {
        flex: 0 1 auto; /* Proměnlivá šířka */
        min-width: 300px;
        max-width: 600px;
    }
    
    .weather-preview.has-comparison-desktop #today-hourly-preview {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
    }
    
    /* Make comparison more compact on desktop */
    .weather-preview.has-comparison-desktop .weather-comparison-compact {
        font-size: 0.8125rem;
    }
    
    .weather-preview.has-comparison-desktop .comparison-table-compact {
        font-size: 0.75rem;
    }
    
    .weather-preview.has-comparison-desktop .comparison-header-compact {
        padding: 0.5rem 0.75rem;
    }
    
    .weather-preview.has-comparison-desktop .comparison-table-compact th,
    .weather-preview.has-comparison-desktop .comparison-table-compact td {
        padding: 0.3rem 0.4rem;
    }
    
    /* Ensure hourly cards stay horizontal */
    .weather-preview.has-comparison-desktop .today-hourly-preview {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
    }
    
    .weather-preview.has-comparison-desktop .weather-card {
        min-width: 80px;
        flex: 0 0 auto;
    }
}

/* Extra large screens - even more side space */
@media (min-width: 1400px) {
    .weather-preview.has-comparison-desktop #weather-comparison-inline {
        max-width: 650px;
    }
}

/* Fix for weather preview container */
.weather-preview {
    width: 100%;
}

/* Ensure both divs are visible when has-comparison-desktop */
.weather-preview.has-comparison-desktop > * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Inline comparison table styles */
.comparison-table-inline {
    font-size: 0.75rem;
    margin: 0;
    width: 100%;
}

.comparison-table-inline tbody {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.comparison-row-inline {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    padding: 0.5rem;
    min-width: 0;
}

[data-theme="dark"] .comparison-row-inline {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .td-label-inline i {
    color: #6db9ff;
}

[data-theme="dark"] .station-value {
    color: #6db9ff;
}

.comparison-row-inline td {
    padding: 0.2rem 0;
    border: none;
    text-align: center;
}

.td-label-inline {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
}

.td-label-inline i {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.label-text {
    font-size: 0.7rem;
}

.td-value-inline {
    display: block !important;
}

.value-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.value-label {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.station-value {
    color: var(--primary-color);
}

.value-unit {
    font-size: 0.625rem;
    color: var(--text-secondary);
}

.range-number {
    font-size: 0.875rem;
}

.td-match-inline {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 0.3rem;
}

.td-match-inline i {
    font-size: 1.1rem;
}

/* Hide header text on desktop for inline view */
@media (min-width: 992px) {
    .weather-preview.has-comparison-desktop .comparison-header-compact {
        padding: 0.3rem 0.5rem;
    }
    
    .weather-preview.has-comparison-desktop .comparison-title-text {
        font-size: 0.75rem;
    }
    
    .weather-preview.has-comparison-desktop .comparison-times-compact {
        display: none;
    }
    
    .weather-preview.has-comparison-desktop .weather-comparison-compact {
        border: none;
        box-shadow: none;
    }
}

/* Mobile styles for inline comparison */
@media (max-width: 768px) {
    .comparison-table-inline tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    
    .comparison-row-inline {
        padding: 0.6rem 0.5rem;
    }
    
    .td-label-inline {
        font-size: 0.8rem;
        margin-bottom: 0.4rem;
    }
    
    .td-label-inline i {
        font-size: 1rem;
    }
    
    .label-text {
        font-size: 0.75rem;
    }
    
    .value-label {
        font-size: 0.55rem;
    }
    
    .value-number {
        font-size: 1.1rem;
    }
    
    .value-unit {
        font-size: 0.6rem;
    }
    
    /* Hide rozptyl on mobile */
    .comparison-row-inline .td-value-inline:nth-child(4) {
        display: none !important;
    }
    
    /* Adjust match icon */
    .td-match-inline i {
        font-size: 0.9rem;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .comparison-table-inline tbody {
        grid-template-columns: 1fr;
    }
    
    .comparison-row-inline {
        display: grid;
        grid-template-columns: auto 1fr 1fr auto;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .td-label-inline {
        grid-column: 1;
        margin: 0;
    }
    
    .td-value-inline {
        grid-column: span 1;
    }
    
    .td-match-inline {
        grid-column: 4;
        margin: 0;
    }
}

/* Modal styles for Bootstrap 5 */
.modal {
    --bs-modal-bg: var(--card-bg-color);
    --bs-modal-border-color: var(--border-color);
    --bs-modal-header-border-color: var(--border-color);
}

.modal-content {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-content {
    background-color: #1a2332 !important;
    color: #e1e6ed !important;
    border: 1px solid #2a3544 !important;
}

.modal-header {
    background-color: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

[data-theme="dark"] .modal-header {
    background-color: #141e2c !important;
    border-bottom: 1px solid #2a3544 !important;
}

.modal-title {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-body {
    padding: 1.25rem;
    color: var(--text-color);
}

.btn-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-color);
    opacity: 0.5;
}

.btn-close:hover {
    opacity: 0.8;
}

/* Modal backdrop */
.modal.show {
    background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal.show {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Legend modal specific styles */
.modal-body h6 {
    color: var(--text-color);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-body ul {
    color: var(--text-color);
}

.modal-body li {
    margin-bottom: 0.5rem;
}

.modal-body table {
    margin-top: 0.5rem;
}

.modal-body table {
    background: var(--card-bg-color);
}

.modal-body table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
}

.modal-body table td:first-child {
    white-space: nowrap;
    width: 4rem;
}

[data-theme="dark"] .modal-body table {
    background: transparent;
}

[data-theme="dark"] .modal-body table td {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Icon colors in legend table */
.modal-body table .bi {
    color: var(--primary-color);
    font-size: 1.1rem;
}

[data-theme="dark"] .modal-body table .bi {
    color: #6db9ff;
}

/* Modal footer */
.modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: flex-end;
}

[data-theme="dark"] .modal-footer {
    background-color: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Modal buttons */
.modal .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.modal .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

[data-theme="dark"] .modal .btn-secondary {
    background-color: #495057;
    border-color: #495057;
}

[data-theme="dark"] .modal .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Detailed comparison modal - compact */
.detailed-comparison-compact {
    font-size: 0.8125rem;
}

.detailed-times-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.time-badge {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

[data-theme="dark"] .time-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #e1e6ed;
}

[data-theme="dark"] .time-badge.text-muted {
    color: #8c97a9 !important;
}

.detailed-table-compact {
    font-size: 0.75rem;
}

.detailed-table-compact th,
.detailed-table-compact td {
    padding: 0.35rem 0.4rem;
    text-align: center;
    vertical-align: middle;
}

.th-model-name,
.td-model-name {
    text-align: left;
    width: 5rem;
    font-weight: 600;
}

.th-value,
.td-value {
    width: 3rem;
}

.th-score,
.td-score {
    width: 3rem;
}

.unit-mini {
    font-size: 0.625rem;
    color: var(--text-secondary);
    display: block;
}

.td-station-value {
    font-weight: 600;
    color: var(--primary-color);
}

.no-data {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Score indicators */
.score-good {
    color: var(--success-color);
    font-weight: 600;
}

.score-moderate {
    color: var(--warning-color);
    font-weight: 600;
}

.score-poor {
    color: var(--danger-color);
    font-weight: 600;
}

[data-theme="dark"] .score-good {
    color: #4fffbb;
}

[data-theme="dark"] .score-moderate {
    color: #ffb84d;
}

[data-theme="dark"] .score-poor {
    color: #ff8c8c;
}

/* Make accuracy backgrounds more subtle */
.detailed-table-compact .accuracy-good {
    background-color: rgba(56, 211, 159, 0.15);
}

.detailed-table-compact .accuracy-moderate {
    background-color: rgba(255, 165, 2, 0.15);
}

.detailed-table-compact .accuracy-poor {
    background-color: rgba(255, 107, 107, 0.15);
}

[data-theme="dark"] .detailed-table-compact .accuracy-good {
    background-color: rgba(56, 211, 159, 0.25) !important;
    color: #4fffbb !important;
    border: 1px solid rgba(56, 211, 159, 0.3) !important;
}

[data-theme="dark"] .detailed-table-compact .accuracy-moderate {
    background-color: rgba(255, 165, 2, 0.25) !important;  
    color: #ffb84d !important;
    border: 1px solid rgba(255, 165, 2, 0.3) !important;
}

[data-theme="dark"] .detailed-table-compact .accuracy-poor {
    background-color: rgba(255, 107, 107, 0.25) !important;
    color: #ff8c8c !important;
    border: 1px solid rgba(255, 107, 107, 0.3) !important;
}

/* Dark mode table styles - complete override */
[data-theme="dark"] .detailed-table-compact {
    background-color: #1a2332 !important;
    color: #e1e6ed !important;
}

[data-theme="dark"] .detailed-table-compact thead {
    background-color: #141e2c !important;
}

[data-theme="dark"] .detailed-table-compact th {
    background-color: #141e2c !important;
    border-bottom: 1px solid #2a3544 !important;
    color: #8c97a9 !important;
}

[data-theme="dark"] .detailed-table-compact td {
    background-color: transparent;
    border-bottom: 1px solid #232d3d !important;
    color: #e1e6ed !important;
}

[data-theme="dark"] .detailed-table-compact td.accuracy-good,
[data-theme="dark"] .detailed-table-compact td.accuracy-moderate,
[data-theme="dark"] .detailed-table-compact td.accuracy-poor {
    background-color: inherit !important;
}

[data-theme="dark"] .detailed-table-compact tbody tr {
    background-color: transparent !important;
}

[data-theme="dark"] .detailed-table-compact tbody tr:hover td {
    background-color: #202938 !important;
}

[data-theme="dark"] .td-model-name {
    color: #e1e6ed !important;
}

[data-theme="dark"] .td-station-value {
    color: #4099ff !important;
    font-weight: 600;
}

[data-theme="dark"] .no-data {
    color: #4a5568 !important;
    opacity: 0.7;
}

/* Accuracy indicators in legend */
.modal-body .accuracy-good,
.modal-body .accuracy-moderate,
.modal-body .accuracy-poor {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: 600;
}

/* Score column in detailed table */
.text-success {
    color: var(--success-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

/* Compact modal styles */
.modal-header-compact {
    padding: 0.75rem 1rem;
}

.modal-title-compact {
    font-size: 1rem;
}

.modal-body-compact {
    padding: 0.75rem;
}

.btn-close-compact {
    font-size: 1.25rem;
}

/* Make modal more compact */
.modal-lg {
    max-width: 720px;
}

/* Modal responsive */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-header-compact {
        padding: 0.5rem 0.75rem;
    }
    
    .modal-body-compact {
        padding: 0.5rem;
    }
    
    .modal-title-compact {
        font-size: 0.9rem;
    }
    
    .detailed-times-row {
        font-size: 0.7rem;
    }
    
    .detailed-table-compact {
        font-size: 0.7rem;
    }
    
    .detailed-table-compact th,
    .detailed-table-compact td {
        padding: 0.25rem 0.3rem;
    }
    
    .th-model-name,
    .td-model-name {
        width: 4rem;
    }
    
    .th-value,
    .td-value {
        width: 2.5rem;
    }
    
    .unit-mini {
        font-size: 0.5625rem;
    }
}

/* Weather Comparison Summary Styles */
.weather-comparison-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    font-size: 0.9rem;
}

[data-theme="dark"] .weather-comparison-summary {
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #1e293b;
}

.comparison-header {
    margin-bottom: 12px;
}

.comparison-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.comparison-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
}

[data-theme="dark"] .comparison-title {
    color: #ffffff;
}

.comparison-actions {
    display: flex;
    gap: 8px;
}

.comparison-time-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.time-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e9ecef;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #495057;
}

[data-theme="dark"] .time-badge {
    background: #1e293b;
    color: #ffffff;
    border: 1px solid #334155;
}

.time-badge i {
    font-size: 0.85rem;
}

/* Summary table */
.comparison-summary-table {
    margin-bottom: 0;
}

.comparison-summary-table th {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 8px;
    background: #f1f3f5;
    border-bottom: 2px solid #dee2e6;
    text-align: center;
}

[data-theme="dark"] .comparison-summary-table th {
    background: #1e293b;
    border-bottom-color: #334155;
    color: #ffffff;
}

.comparison-summary-table td {
    padding: 6px 8px;
    vertical-align: middle;
    text-align: center;
    font-size: 0.85rem;
}

.comparison-summary-table td:first-child {
    text-align: left;
}

.comparison-summary-table .param-name {
    margin-left: 5px;
    font-weight: 500;
    font-size: 0.8rem;
}

.comparison-summary-table i.bi {
    font-size: 0.9rem;
    color: #6c757d;
}

[data-theme="dark"] .comparison-summary-table i.bi {
    color: #94a3b8;
}

.comparison-summary-table .station-value {
    font-weight: 600;
    color: #007bff;
    font-size: 1rem;
}

[data-theme="dark"] .comparison-summary-table .station-value {
    color: #4dabf7;
}

.comparison-summary-table .model-avg {
    font-weight: 600;
    font-size: 1rem;
}

/* Dark theme table styling */
[data-theme="dark"] .comparison-summary-table {
    color: #ffffff;
    background: transparent;
}

[data-theme="dark"] .comparison-summary-table tbody tr {
    border-bottom: 1px solid #334155;
}

[data-theme="dark"] .comparison-summary-table tbody tr:last-child {
    border-bottom: none;
}

[data-theme="dark"] .comparison-summary-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .comparison-summary-table td {
    border-color: #334155;
    color: #ffffff;
}

[data-theme="dark"] .table {
    color: #e2e8f0;
    --bs-table-bg: transparent;
    --bs-table-border-color: #334155;
}

[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

[data-theme="dark"] .text-success {
    color: #4ade80 !important;
}

[data-theme="dark"] .text-warning {
    color: #fbbf24 !important;
}

[data-theme="dark"] .text-danger {
    color: #f87171 !important;
}

/* Station additional data */
.station-additional-data {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.dark-theme .station-additional-data {
    border-top-color: #333;
}

.additional-data-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #495057;
}

[data-theme="dark"] .additional-data-title {
    color: #ffffff;
}

/* Dark theme buttons */
[data-theme="dark"] .btn.btn-sm.btn-outline-info {
    color: #38bdf8;
    border-color: #475569;
    background: transparent;
}

[data-theme="dark"] .btn.btn-sm.btn-outline-info:hover {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0f172a;
}

[data-theme="dark"] .btn.btn-sm.btn-outline-primary {
    color: #60a5fa;
    border-color: #475569;
    background: transparent;
}

[data-theme="dark"] .btn.btn-sm.btn-outline-primary:hover {
    background: #60a5fa;
    border-color: #60a5fa;
    color: #0f172a;
}

.additional-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.additional-data-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.additional-data-item i {
    color: #6c757d;
    font-size: 1.1rem;
}

[data-theme="dark"] .additional-data-item i {
    color: #94a3b8;
}

.additional-data-item .data-label {
    color: #6c757d;
}

[data-theme="dark"] .additional-data-item .data-label {
    color: #94a3b8;
}

.additional-data-item .data-value {
    font-weight: 600;
    color: #495057;
}

[data-theme="dark"] .additional-data-item .data-value {
    color: #ffffff;
}

/* Detailed comparison styles */
.detailed-comparison {
    font-size: 0.9rem;
}

.detailed-header {
    margin-bottom: 0.75rem;
}

.header-content {
    padding: 0.375rem 1rem;
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    margin: 0;
}

[data-theme="dark"] .header-content {
    background: rgba(255,255,255,0.05);
}

.time-info {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.station-time,
.forecast-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.95rem;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    white-space: nowrap;
}

.station-note {
    text-align: center;
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    white-space: nowrap;
}


.detailed-comparison-table {
    margin-bottom: 0;
}

.detailed-comparison-table th,
.detailed-comparison-table td {
    padding: 4px 2px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.75rem;
}

.model-name-col,
.model-name-cell {
    text-align: left !important;
    width: auto;
    min-width: 60px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.param-col {
    width: auto;
    min-width: 45px;
    max-width: 60px;
    padding: 6px 4px;
}

.param-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.param-header i {
    font-size: 1rem;
    color: #6c757d;
}

[data-theme="dark"] .param-header i {
    color: #94a3b8;
}

.param-name-small {
    font-size: 0.7rem;
    font-weight: normal;
    color: #6c757d;
}

[data-theme="dark"] .param-name-small {
    color: #cbd5e1;
}

.param-unit {
    font-size: 0.65rem;
    color: #6c757d;
    font-weight: normal;
}

[data-theme="dark"] .param-unit {
    color: #94a3b8;
}

.score-col {
    width: auto;
    min-width: 50px;
    max-width: 60px;
}

.score-cell {
    padding: 4px !important;
}

.station-data-row {
    background: #e7f3ff;
}

[data-theme="dark"] .station-data-row {
    background: rgba(64, 153, 255, 0.15);
}

/* Dark theme for detailed table */
[data-theme="dark"] .detailed-comparison-table {
    color: #ffffff;
    background: #0f172a;
}

[data-theme="dark"] .detailed-comparison-table th {
    background: #1e293b;
    border-color: #334155;
    color: #ffffff;
}

[data-theme="dark"] .detailed-comparison-table td {
    border-color: #334155;
    color: #ffffff;
}

/* Dark theme modal */
[data-theme="dark"] .modal-content {
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #1e293b;
}

[data-theme="dark"] .modal-header {
    background: #1e293b;
    border-bottom: 1px solid #334155;
    color: #ffffff;
}

[data-theme="dark"] .modal-body {
    background: #0f172a;
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

[data-theme="dark"] .modal-title {
    color: #ffffff;
}

[data-theme="dark"] .forecast-time-badge,
[data-theme="dark"] .station-time-badge {
    background: #1e293b;
    color: #ffffff;
    border: 1px solid #334155;
}

.station-value-cell {
    font-weight: 600;
    color: #007bff;
}

[data-theme="dark"] .station-value-cell {
    color: #60a5fa;
}

[data-theme="dark"] .value-cell {
    color: #ffffff;
}

.value-cell {
    font-weight: 500;
    padding: 4px 2px !important;
    font-size: 0.85rem;
}

.no-data {
    color: #adb5bd;
    font-style: italic;
}

[data-theme="dark"] .no-data {
    color: #64748b;
    font-style: italic;
}

/* Accuracy colors for detailed table */
.detailed-comparison-table .accuracy-good {
    background-color: rgba(40, 167, 69, 0.15) !important;
    color: #28a745;
    font-weight: 600;
}

.detailed-comparison-table .accuracy-moderate {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #ff8800;
    font-weight: 600;
}

.detailed-comparison-table .accuracy-poor {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #dc3545;
    font-weight: 600;
}

[data-theme="dark"] .detailed-comparison-table .accuracy-good {
    background-color: rgba(40, 167, 69, 0.25) !important;
    color: #4fffbb;
}

[data-theme="dark"] .detailed-comparison-table .accuracy-moderate {
    background-color: rgba(255, 193, 7, 0.25) !important;
    color: #ffb84d;
}

[data-theme="dark"] .detailed-comparison-table .accuracy-poor {
    background-color: rgba(220, 53, 69, 0.25) !important;
    color: #ff8c8c;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .weather-comparison-summary {
        padding: 12px;
        font-size: 0.85rem;
    }
    
    .comparison-title {
        font-size: 0.95rem;
    }
    
    .comparison-time-info {
        gap: 8px;
    }
    
    .time-badge {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
    
    .comparison-summary-table th,
    .comparison-summary-table td {
        padding: 6px 4px;
        font-size: 0.9rem;
    }
    
    .comparison-summary-table .icon-cell {
        padding: 6px 2px;
    }
    
    .comparison-summary-table .icon-cell i {
        font-size: 1rem;
    }
    
    .comparison-summary-table .station-value,
    .comparison-summary-table .model-avg {
        font-size: 0.95rem;
    }
    
    .additional-data-grid {
        grid-template-columns: 1fr;
    }
    
    .detailed-comparison-table th,
    .detailed-comparison-table td {
        padding: 5px;
        font-size: 0.75rem;
    }
    
    .param-header i {
        font-size: 1rem;
    }
    
    .param-name-small {
        display: none;
    }
    
    .model-name-col,
    .model-name-cell {
        min-width: 70px;
    }
    
    .param-col {
        min-width: 50px;
    }
}

/* Modal responsive styles */
.modal-dialog {
    max-width: 90%;
    width: 900px;
}

@media (max-width: 992px) {
    .modal-dialog {
        max-width: 95%;
        margin: 1rem;
    }
}

@media (max-width: 768px) {
    .modal-dialog {
        max-width: 100%;
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem;
    }
    
    .modal-body {
        padding: 0.5rem;
    }
    
    /* Make detailed table scrollable on mobile */
    .detailed-comparison .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
    }
    
    .detailed-comparison-table {
        width: 100%;
        table-layout: fixed;
    }
    
    .detailed-comparison-table th,
    .detailed-comparison-table td {
        padding: 3px 2px;
        font-size: 0.7rem;
    }
    
    .param-header {
        gap: 0;
    }
    
    .param-header i {
        font-size: 0.8rem;
    }
    
    .param-unit {
        font-size: 0.55rem;
        line-height: 1;
    }
    
    .model-name-col,
    .model-name-cell {
        min-width: 50px;
        max-width: 70px;
        font-size: 0.65rem;
        padding-left: 4px !important;
        padding-right: 2px !important;
    }
    
    .param-col {
        min-width: 35px;
        max-width: 45px;
        padding: 2px !important;
    }
    
    .score-col {
        min-width: 40px;
        max-width: 50px;
    }
    
    .value-cell {
        font-size: 0.7rem !important;
        padding: 2px !important;
    }
    
    .time-badges-row {
        gap: 8px;
    }
    
    .forecast-time-badge,
    .station-time-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    .modal-body {
        padding: 0.25rem;
        overflow-y: auto;
    }
    
    .detailed-header {
        margin-bottom: 8px;
    }
    
    .forecast-time-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}

/* Integrated Weather Comparison Styles */
.weather-comparison-integrated {
    background-color: transparent;
    padding: 0;
}

.weather-comparison-integrated .comparison-header {
    margin-bottom: 0.75rem;
}

.weather-comparison-integrated .comparison-time-info {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.weather-comparison-integrated .time-badge {
    background-color: var(--hover-bg);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.weather-comparison-integrated .time-badge i {
    font-size: 0.75rem;
}

.comparison-integrated-table {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.comparison-integrated-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.4rem 0.3rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-color);
}

.comparison-integrated-table .model-col {
    text-align: left;
    width: auto;
    min-width: 80px;
}

.comparison-integrated-table .param-col {
    width: 60px;
    text-align: center;
}

.comparison-integrated-table .score-col {
    width: 50px;
    text-align: center;
}

.comparison-integrated-table td {
    padding: 0.3rem;
    vertical-align: middle;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-color);
}

.comparison-integrated-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-integrated-table .station-row {
    background-color: var(--hover-bg);
}

.comparison-integrated-table .station-row td {
    font-weight: 600;
}

.comparison-integrated-table .model-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Accuracy color coding */
.comparison-integrated-table .accuracy-good {
    color: #28a745;
    font-weight: 600;
}

.comparison-integrated-table .accuracy-moderate {
    color: #fd7e14;
    font-weight: 600;
}

.comparison-integrated-table .accuracy-poor {
    color: #dc3545;
    font-weight: 600;
}

/* Dark mode accuracy colors */
[data-theme="dark"] .comparison-integrated-table .accuracy-good {
    color: #52d979;
}

[data-theme="dark"] .comparison-integrated-table .accuracy-moderate {
    color: #ff9742;
}

[data-theme="dark"] .comparison-integrated-table .accuracy-poor {
    color: #ff5e5e;
}

/* Additional station data compact display */
.station-additional-compact {
    margin-top: 0.5rem;
    padding: 0.4rem 0.5rem;
    background-color: var(--hover-bg);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.station-additional-compact .additional-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
}

.station-additional-compact .additional-item strong {
    color: var(--text-color);
}

.station-additional-compact .separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Responsive adjustments for integrated comparison */
@media (max-width: 768px) {
    .comparison-integrated-table {
        font-size: 0.75rem;
    }
    
    .comparison-integrated-table th,
    .comparison-integrated-table td {
        padding: 0.25rem 0.2rem;
        font-size: 0.7rem;
    }
    
    .comparison-integrated-table .param-col {
        width: 45px;
    }
    
    .comparison-integrated-table .score-col {
        width: 40px;
    }
    
    .comparison-integrated-table .model-name {
        font-size: 0.7rem;
    }
    
    .station-additional-compact {
        font-size: 0.7rem;
        gap: 0.3rem;
        padding: 0.3rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .weather-comparison-integrated .comparison-time-info {
        font-size: 0.7rem;
        gap: 0.5rem;
    }
    
    .weather-comparison-integrated .time-badge {
        padding: 0.15rem 0.3rem;
        font-size: 0.65rem;
    }
    
    .comparison-integrated-table th i {
        font-size: 0.65rem;
    }
    
    .comparison-integrated-table .param-col span {
        display: none !important;
    }
}

/* Weather Station Data Styles */
.weather-station-data {
    background: transparent;
    border: none;
    border-radius: var(--border-radius);
    padding: clamp(0.25rem, 1vw, 0.5rem);
    margin-bottom: clamp(0.375rem, 1vw, 0.5rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.weather-station-data .station-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    flex-wrap: wrap;
    gap: clamp(0.375rem, 1vw, 0.5rem);
}

.weather-station-data .station-time-info {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.weather-station-data .time-badge {
    background-color: var(--card-bg-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
    border-radius: var(--border-radius);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: clamp(0.375rem, 1vw, 0.5rem);
    /* transition: all var(--transition-speed); - removed theme transition */
    width: 100%;
    text-align: center;
}

[data-theme="dark"] .weather-station-data .time-badge {
    background-color: var(--card-bg-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.weather-station-data .station-actions {
    display: flex;
    align-items: center;
    gap: clamp(0.375rem, 1vw, 0.5rem);
}

.weather-station-data .model-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.375rem, 1vw, 0.5rem);
    padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
    background-color: var(--card-bg-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    /* transition: all var(--transition-speed); - removed theme transition */
    cursor: pointer;
}

.weather-station-data .model-compare-btn:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(64, 153, 255, 0.2);
}

[data-theme="dark"] .weather-station-data .model-compare-btn {
    background-color: var(--card-bg-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .weather-station-data .model-compare-btn:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

/* Station tiles */
.station-tiles-container {
    margin-top: clamp(0.25rem, 0.7vw, 0.3rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Station action container - will be shown when needed */
#station-action-container {
    display: none;
}

/* Station compare button with nav-tab styling */
.station-compare-btn {
    margin: 0;
    justify-content: center;
    min-width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Smooth transitions for hourly preview to prevent flashing - removed to prevent theme change animations */
#today-hourly-preview {
    /* transition: opacity 0.2s ease-in-out; - removed theme transition */
}

.hourly-preview-wrapper {
    /* transition: all 0.2s ease-in-out; - removed theme transition */
}

.hourly-preview-item {
    /* transition: all 0.2s ease-in-out; - removed theme transition */
}

/* Responsive styling for compare button */
@media (max-width: 567px) {
    .station-compare-btn span {
        display: none;
    }
    
    .station-compare-btn {
        min-width: 32px;
        padding: 0.5rem;
    }
}

@media (min-width: 568px) {
    .station-compare-btn {
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
        padding: clamp(0.3rem, 1vw, 0.5rem) clamp(0.5rem, 1.5vw, 0.75rem);
    }
    
    .station-compare-btn span {
        display: inline !important;
    }
}


.station-compare-btn:hover {
    background: var(--text-color) !important;
    color: var(--card-bg-color) !important;
    border-color: var(--text-color) !important;
}

.tiles-header h6 {
    text-align: center;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.station-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.2rem, 0.8vw, 0.3rem);
    margin-bottom: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Responzivní layout pro station tiles */
@media (max-width: 480px) {
    .station-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.2rem;
        max-width: calc(100% - 0.5rem);
        margin: 0 auto 0.5rem auto;
    }
}

@media (min-width: 481px) and (max-width: 991px) {
    .station-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.25rem, 0.8vw, 0.4rem);
        max-width: 100%;
        margin: 0 auto 0.5rem auto;
    }
    
    .station-tile {
        padding: clamp(0.4rem, 1.2vw, 0.7rem);
        gap: clamp(0.15rem, 0.8vw, 0.3rem);
    }
    
    .tile-icon {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
    }
    
    .tile-label {
        font-size: clamp(0.6rem, 2.8vw, 0.85rem);
    }
    
    .tile-value {
        font-size: clamp(0.9rem, 3.5vw, 1.4rem);
    }
    
    .tile-unit {
        font-size: clamp(0.6rem, 2.5vw, 0.85rem);
    }
}

/* Fix station tiles around 992px-1200px where layout becomes problematic */
@media (min-width: 992px) and (max-width: 1200px) {
    /* Keep station tiles in 3x3 grid */
    .station-tiles {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem;
    }
    
    .station-tile {
        padding: 0.8rem;
        gap: 0.4rem;
        min-height: 130px;
    }
    
    .tile-icon {
        font-size: 1.8rem;
    }
    
    .tile-label {
        font-size: 0.9rem;
        line-height: 1.3;
    }
    
    .tile-value {
        font-size: 1.1rem;
        line-height: 1.3;
        font-weight: 600;
    }
    
    .tile-unit {
        font-size: 0.8rem;
    }
    
    /* Specific fixes for comparison layout station tiles - keep 3x3 grid */
    .has-comparison .current-weather-grid > .weather-station-column .station-tiles {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .station-tile {
        min-height: 110px !important;
        max-height: 140px !important;
        padding: 0.7rem !important;
        gap: 0.3rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .tile-icon {
        font-size: 1.6rem !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .tile-label {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .tile-value {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }
    
    .has-comparison .current-weather-grid > .weather-station-column .tile-unit {
        font-size: 0.75rem !important;
    }
    
    /* Force 2-column layout without hourly preview */
    .has-comparison .current-weather-grid {
        grid-template-columns: 1fr 320px !important;
        grid-template-areas: "main station" !important;
    }
    
    /* Hide hourly preview completely in this range - ULTIMATE */
    .has-comparison .current-weather-grid > .weather-preview,
    .has-comparison .current-weather-grid .weather-preview,
    .has-comparison .weather-preview,
    .has-comparison #today-hourly-preview,
    .has-comparison .hourly-preview-wrapper,
    .weather-preview,
    #today-hourly-preview,
    .hourly-preview-wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* Force current-weather-grid to only have 2 columns */
    .current-weather-grid {
        grid-template-columns: 1fr auto !important;
        grid-template-areas: "main station" !important;
    }
    
    .has-comparison .current-weather-grid {
        grid-template-columns: 1fr 320px !important;
        grid-template-areas: "main station" !important;
    }
    
    /* Ensure station tiles are square */
    .has-comparison .current-weather-grid > .weather-station-column .station-tile {
        aspect-ratio: 1/1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}


.station-tile {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: clamp(0.4rem, 1.2vw, 0.6rem);
    text-align: center;
    /* transition: all var(--transition-speed); - removed theme transition */
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.15rem, 0.8vw, 0.25rem);
    box-sizing: border-box;
}

.station-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), rgba(64, 153, 255, 0.5));
    transform: translateX(-100%);
    /* transition: transform var(--transition-speed); - removed theme transition */
}

.station-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--primary-color);
}

.station-tile:hover::before {
    transform: translateX(0);
}

[data-theme="dark"] .station-tile {
    background: var(--card-bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .station-tile:hover {
    box-shadow: 0 4px 12px rgba(64, 153, 255, 0.2);
    border-color: var(--primary-color);
}

.tile-icon {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    color: var(--primary-color);
    margin-bottom: clamp(0.1rem, 0.5vw, 0.2rem);
    opacity: 0.8;
    /* transition: opacity var(--transition-speed); - removed theme transition */
    flex-shrink: 0;
}

.station-tile:hover .tile-icon {
    opacity: 1;
}

.tile-label {
    font-size: clamp(0.6rem, 2.8vw, 0.8rem);
    color: var(--text-secondary);
    margin-bottom: clamp(0.1rem, 0.5vw, 0.15rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    flex-shrink: 0;
}

.tile-value {
    font-size: clamp(0.9rem, 3.5vw, 1.3rem);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(0.1rem, 0.3vw, 0.15rem);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.tile-unit {
    font-size: clamp(0.6rem, 2.5vw, 0.8rem);
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0.8;
    white-space: nowrap;
    flex-shrink: 0;
}


/* Detailed comparison modal - cleaned up */

/* Hide default Bootstrap close button */
.modal-header .btn-close {
    display: none !important;
}

/* Modal close button - using modern-toggle style */
.modal-close-toggle,
#comparison-modal .modal-close-toggle {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    /* transition: all var(--transition-speed) !important; - removed theme transition */
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.modal-close-toggle:hover {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.modal-close-toggle:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4) !important;
}

.modal-close-toggle:active {
    transform: none !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Light theme override for modal close button */
[data-theme="light"] .modal-close-toggle {
    background: var(--card-bg-color) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: var(--card-shadow) !important;
}

[data-theme="light"] .modal-close-toggle:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: var(--card-shadow-hover) !important;
}

/* Modal dialog sizing */
#comparison-modal .modal-dialog {
    max-width: fit-content;
    width: auto;
    margin: 1.75rem auto;
}

#comparison-modal .modal-content {
    width: auto;
    min-width: 800px;
    max-width: 95vw;
    overflow: visible;
}

#comparison-modal .modal-body {
    padding: 0.75rem;
    overflow: visible;
}

/* Responsive modal sizing */
@media (max-width: 992px) {
    #comparison-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }
    
    #comparison-modal .modal-content {
        min-width: auto;
        width: 100%;
        max-width: 100%;
        height: fit-content;
        overflow: visible;
    }
    
    #comparison-modal .modal-body {
        padding: 0.5rem;
        overflow: visible;
    }
    
    #comparison-modal .table-responsive {
        overflow: visible;
    }
}

@media (max-width: 576px) {
    #comparison-modal .modal-dialog {
        margin: 0.25rem;
        max-width: calc(100vw - 0.5rem);
        width: calc(100vw - 0.5rem);
        max-height: calc(100vh - 0.5rem);
    }
    
    #comparison-modal .modal-content {
        max-width: 100%;
        width: 100%;
        min-width: auto;
        height: fit-content;
        overflow: visible;
    }
    
    #comparison-modal .modal-body {
        padding: 0.25rem;
        overflow: visible;
    }
    
    #comparison-modal .table-responsive {
        overflow: visible;
    }
}

/* Legend items in detailed comparison */
.comparison-legend .legend-items {
    display: flex;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.comparison-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.comparison-legend .accuracy-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.comparison-legend .accuracy-good {
    background-color: #d4edda;
    border: 1px solid #28a745;
}

.comparison-legend .accuracy-moderate {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
}

.comparison-legend .accuracy-poor {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
}

[data-theme="dark"] .comparison-legend .accuracy-good {
    background-color: rgba(40, 167, 69, 0.2);
}

[data-theme="dark"] .comparison-legend .accuracy-moderate {
    background-color: rgba(255, 193, 7, 0.2);
}

[data-theme="dark"] .comparison-legend .accuracy-poor {
    background-color: rgba(220, 53, 69, 0.2);
}

/* Responsive adjustments - now handled by dynamic clamp() sizing */

@media (max-width: 768px) {
    .weather-station-data .station-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .weather-station-data .station-actions {
        text-align: center;
    }
    
    .weather-station-data .model-compare-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Tile sizing now handled by clamp() values */
    
    .time-info {
        gap: clamp(0.375rem, 1vw, 0.5rem);
        font-size: clamp(0.65rem, 1.8vw, 0.75rem);
    }
    
    .station-note {
        font-size: clamp(0.55rem, 1.5vw, 0.65rem);
    }
}

@media (max-width: 480px) {
    .time-info {
        flex-direction: column;
        gap: clamp(0.1rem, 0.3vw, 0.125rem);
    }
}

@media (max-width: 576px) {
    /* Tile sizing now handled by clamp() values */
    
    .station-data-table .station-row td {
        font-size: 0.9rem;
        padding: 0.5rem 0.25rem;
    }
}

/* Removed old weather-comparison-summary styles */
.weather-comparison-summary {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.weather-comparison-summary .comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.weather-comparison-summary .comparison-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
}

.weather-comparison-summary .station-name {
    font-weight: normal;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.weather-comparison-summary .comparison-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.weather-comparison-summary .comparison-actions .btn {
    color: var(--text-secondary);
    opacity: 0.7;
    /* transition: opacity 0.2s; - removed theme transition */
    font-size: 1rem;
}

.weather-comparison-summary .comparison-actions .btn:hover {
    opacity: 1;
    color: var(--primary-color);
}

.weather-comparison-summary .comparison-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Station data grid */
.weather-comparison-summary .station-data-summary {
    background: var(--bs-gray-100);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem;
}

[data-theme="dark"] .weather-comparison-summary .station-data-summary {
    background: rgba(255,255,255,0.05);
}

.weather-comparison-summary .data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
}

.weather-comparison-summary .data-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.weather-comparison-summary .data-item i {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.weather-comparison-summary .data-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.weather-comparison-summary .data-value {
    font-weight: 600;
    color: var(--text-color);
}

/* Best model info */
.weather-comparison-summary .best-model-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bs-info-bg-subtle);
    border-radius: var(--border-radius-sm);
}

[data-theme="dark"] .weather-comparison-summary .best-model-info {
    background: rgba(13, 110, 253, 0.1);
}

.weather-comparison-summary .model-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.weather-comparison-summary .model-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weather-comparison-summary .model-name {
    font-weight: 600;
    color: var(--text-color);
}

.weather-comparison-summary .model-score {
    font-weight: 700;
    font-size: 0.9rem;
}

/* Hint */
.weather-comparison-summary .comparison-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.8;
    padding: 0.25rem;
    border-radius: var(--border-radius-sm);
    /* transition: all 0.2s ease; - removed animation */
}

.weather-comparison-summary .comparison-hint:hover {
    background: var(--bs-gray-100);
    opacity: 1;
}

[data-theme="dark"] .weather-comparison-summary .comparison-hint:hover {
    background: rgba(255,255,255,0.05);
}

/* Modal Styles for Detailed Comparison */
.detailed-comparison {
    padding: 0;
}

.detailed-comparison .detailed-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detailed-comparison .forecast-time-badge {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text);
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
}

[data-theme="dark"] .detailed-comparison .forecast-time-badge {
    background: rgba(13, 110, 253, 0.15);
    color: #6cb2ff;
}

/* Detailed Comparison Table */
.detailed-comparison-table {
    margin-bottom: 0;
    font-size: 0.875rem;
    text-align: center;
}

.detailed-comparison-table th {
    background: var(--bs-gray-100);
    border-color: var(--border-color);
    font-weight: 600;
    vertical-align: middle;
}

[data-theme="dark"] .detailed-comparison-table th {
    background: rgba(255,255,255,0.05);
}

.detailed-comparison-table .model-name-col {
    width: 120px;
    min-width: 120px;
}

.detailed-comparison-table .model-name-cell {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 600;
    white-space: nowrap;
}

.detailed-comparison-table .param-col {
    width: 80px;
    text-align: center;
}

.detailed-comparison-table .score-col {
    width: 70px;
    text-align: center;
}

.detailed-comparison-table .score-cell {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 700;
    white-space: nowrap;
}

.detailed-comparison-table .param-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.detailed-comparison-table .param-header i {
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.detailed-comparison-table .param-name-small {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    font-weight: 500;
    white-space: nowrap;
}

.detailed-comparison-table .param-unit {
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    color: var(--text-secondary);
    font-weight: normal;
    white-space: nowrap;
}

.detailed-comparison-table .station-data-row {
    background: var(--bs-info-bg-subtle);
}

[data-theme="dark"] .detailed-comparison-table .station-data-row {
    background: rgba(13, 110, 253, 0.1);
}

.detailed-comparison-table .value-cell {
    text-align: center;
    font-family: var(--bs-font-monospace);
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 500;
    white-space: nowrap;
}

.detailed-comparison-table .station-value-cell {
    font-weight: 700;
}

.detailed-comparison-table .no-data {
    color: var(--text-muted);
    font-style: italic;
}

/* Accuracy color coding for detailed table */
.detailed-comparison-table .accuracy-good {
    color: #28a745;
    font-weight: 600;
}

.detailed-comparison-table .accuracy-moderate {
    color: #fd7e14;
    font-weight: 600;
}

.detailed-comparison-table .accuracy-poor {
    color: #dc3545;
    font-weight: 600;
}

/* Legend Styles */
.comparison-legend {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

[data-theme="dark"] .comparison-legend {
    background: var(--card-bg-color);
    border-color: rgba(255,255,255,0.1);
}

.comparison-legend .legend-title {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.comparison-legend .legend-content {
    font-size: 0.85rem;
}

.comparison-legend .legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.comparison-legend .legend-color {
    font-size: 1.2rem;
    width: 20px;
}

.comparison-legend .legend-label {
    font-weight: 600;
    min-width: 100px;
}

.comparison-legend .legend-values {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.comparison-legend .legend-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

/* Additional Station Info */
.station-additional {
    background: var(--bs-gray-100);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1rem;
}

[data-theme="dark"] .station-additional {
    background: rgba(255,255,255,0.05);
}

.station-additional h6 {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.station-additional .additional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.station-additional .additional-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.station-additional .additional-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.station-additional .additional-value {
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .weather-comparison-summary {
        padding: 0.5rem;
    }
    
    .weather-comparison-summary .comparison-title {
        font-size: 0.85rem;
    }
    
    .weather-comparison-summary .station-name {
        display: none;
    }
    
    .weather-comparison-summary .data-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }
    
    .weather-comparison-summary .data-item {
        font-size: 0.8rem;
    }
    
    .weather-comparison-summary .data-label {
        display: none;
    }
    
    .weather-comparison-summary .data-item i {
        margin-right: 0.2rem;
    }
    
    .weather-comparison-summary .best-model-info {
        padding: 0.4rem;
    }
    
    .weather-comparison-summary .comparison-hint {
        font-size: 0.75rem;
    }
    
    .detailed-comparison-table {
        font-size: 0.8rem;
    }
    
    .detailed-comparison-table .model-name-col {
        width: 80px;
        min-width: 80px;
    }
    
    .detailed-comparison-table .param-col {
        width: 60px;
    }
    
    .detailed-comparison-table .param-name-small {
        display: none;
    }
    
    .comparison-legend .legend-row {
        flex-wrap: wrap;
    }
    
    .comparison-legend .legend-values {
        width: 100%;
        margin-left: 1.5rem;
    }
}

@media (max-width: 576px) {
    .weather-comparison-summary .data-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
    }
    
    .weather-comparison-summary .data-item {
        font-size: 0.75rem;
    }
    
    .weather-comparison-summary .data-value {
        font-size: 0.8rem;
    }
    
    .weather-comparison-summary .best-model-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .weather-comparison-summary .model-details {
        width: 100%;
        justify-content: space-between;
    }
}

/* Ensure modal is accessible on mobile */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.25rem;
        max-width: calc(100% - 0.5rem);
    }
    
    .modal-header {
        padding: 0.5rem;
    }
    
    .modal-body {
        padding: 0.5rem;
    }
    
    .modal-content {
        font-size: 0.75rem;
    }
    
    .detailed-header {
        margin-bottom: 0.5rem;
    }
    
    .header-content {
        padding: 0.5rem;
        margin: 0;
        width: 100%;
    }
    
    .time-info {
        gap: 0.5rem;
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
        flex-direction: column;
        align-items: center;
    }
    
    .station-note {
        font-size: 0.7rem;
    }
    
    .detailed-comparison-table {
        font-size: 0.85rem;
        width: 100%;
        table-layout: fixed;
    }
    
    .detailed-comparison-table th,
    .detailed-comparison-table td {
        padding: 3px 2px;
    }
    
    .detailed-comparison-table .value-cell {
        font-size: 1rem;
        font-weight: 600;
    }
    
    .detailed-comparison-table .param-header i {
        font-size: 0.875rem;
    }
    
    .detailed-comparison-table .param-name-small {
        display: none;
    }
    
    .detailed-comparison-table .param-unit {
        font-size: 0.65rem;
    }
    
    .detailed-comparison-table .model-name-col {
        width: 20%;
        min-width: 60px;
        font-size: 0.75rem;
    }
    
    .detailed-comparison-table .param-col {
        width: 13%;
        min-width: 45px;
    }
    
    .detailed-comparison-table .score-col {
        width: 15%;
        min-width: 40px;
    }
    
    .comparison-legend {
        padding: 0.25rem;
        margin-top: 0.25rem;
    }
    
    .comparison-legend .legend-title {
        font-size: 0.65rem;
        margin-bottom: 0.125rem;
    }
    
    .comparison-legend .legend-items {
        gap: 0.4rem;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    
    .comparison-legend .legend-item {
        font-size: 0.65rem;
        white-space: nowrap;
        flex: 1;
        justify-content: center;
    }
    
    .comparison-legend .accuracy-indicator {
        width: 10px;
        height: 10px;
    }
}

/* FINAL OVERRIDE - NO TRANSITIONS ANYWHERE - HIGHEST PRIORITY */
/* This must be at the end of the file to override everything */

/* Universal transition disable - nuclear option with highest specificity */
html *, html *::before, html *::after,
body *, body *::before, body *::after {
    transition: none !important;
    animation: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-timing-function: none !important;
    transition-delay: 0s !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
}

/* Override ALL Bootstrap classes */
.fade, .collapse, .collapsing, .show, .showing, .hiding,
.btn, .btn:hover, .btn:focus, .btn:active,
.nav-link, .nav-link:hover, .nav-link:focus, .nav-link:active,
.nav-tabs .nav-link, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:active,
.nav-tabs .nav-link::before, .nav-tabs .nav-link::after,
.card, .card:hover, .card:focus,
.dropdown-menu, .dropdown-toggle,
.btn-group .btn, .btn-toolbar .btn {
    transition: none !important;
    animation: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
}

/* Text elements specifically */
html body, html body p, html body span, html body div, 
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, 
html body a, html body li, html body td, html body th {
    transition: none !important;
    animation: none !important;
}

/* All hover/focus/active states */
html *:hover, html *:focus, html *:active,
body *:hover, body *:focus, body *:active {
    transition: none !important;
    animation: none !important;
}

/* Media query overrides */
@media screen {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ULTIMATE ANIMATION KILLER - Maximum specificity overrides */
html body *, 
html body *::before, 
html body *::after,
html body .tab-pane,
html body .tab-pane.fade,
html body .fade,
html body .nav-tab,
html body .btn,
html body .card,
html body .dashboard-card,
html body [data-bs-toggle],
html body [role="tab"],
html body [role="tabpanel"] {
    transition: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    -webkit-animation: none !important;
    -moz-transition: none !important;
    -moz-animation: none !important;
    -ms-transition: none !important;
    -ms-animation: none !important;
    -o-transition: none !important;
    -o-animation: none !important;
}

/* Bootstrap tab specific overrides */
html body .tab-pane.fade.show,
html body .tab-pane.fade.active,
html body .tab-pane.show,
html body .tab-pane.active {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
}

/* Theme toggle specific overrides */
html body [onclick*="toggleTheme"],
html body .theme-tab,
html body .simple-icon,
html body .bi-moon-fill,
html body .bi-sun-fill {
    transition: none !important;
    animation: none !important;
}

/* OVERRIDE BOOTSTRAP COMPLETELY */
.fade {
    transition: none !important;
}

.fade.show {
    opacity: 1 !important;
}

.tab-pane {
    transition: none !important;
}

.nav-tabs .nav-link {
    transition: none !important;
}

/* FINAL ABSOLUTE OVERRIDE - This MUST be the last CSS rule */
* {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    transition: none !important;
    animation: none !important;
}

*::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    transition: none !important;
    animation: none !important;
}

/* Override any possible CSS custom properties */
:root {
    --bs-nav-tabs-link-active-bg: transparent !important;
    --bs-fade-transition: none !important;
    --bs-tab-fade-transition: none !important;
}

/* CHART SPECIFIC ANIMATION KILLER */
#chart-tab-pane,
#chart-tab-pane *,
.chart-row-top,
.chart-row-bottom,
.chart-card-2,
.chart-card-3,
.chart-card-4,
#temperature-chart,
#precipitation-chart,
#humidity-pressure-chart,
#wind-chart,
canvas {
    transition: none !important;
    animation: none !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
}


/* PREVENT CHART CONTAINER LAYOUT SHIFTS */
#chart-tab-pane .card {
    min-height: 300px !important;
}

#chart-tab-pane .card-body {
    min-height: 250px !important;
}

#chart-tab-pane canvas {
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
}

/* Force immediate dimensions for chart containers */
#temperature-chart,
#precipitation-chart,
#humidity-pressure-chart,
#wind-chart {
    width: 100% !important;
    height: 250px !important;
    display: block !important;
}

/* FIX: Override grid layout for hourly preview when has-comparison is present */
/* Allow normal horizontal scrolling layout instead of forced 2x10 grid */
@media (min-width: 992px) {
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        align-items: center !important;
        place-content: initial !important;
        grid-template-areas: none !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    /* Reset hourly preview items to normal size */
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item {
        width: 55px !important;
        height: 85px !important;
        min-height: 85px !important;
        max-height: 85px !important;
        padding: 4px !important;
        font-size: 0.65rem !important;
        gap: 2px !important;
        flex: 0 0 auto !important;
    }

    /* Adjust item content sizes back to normal */
    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-icon {
        font-size: 1.1rem !important;
        height: 1.1rem !important;
    }

    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-time {
        font-size: 0.65rem !important;
    }

    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-temp {
        font-size: 0.75rem !important;
    }

    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-rain {
        font-size: 0.6rem !important;
    }

    .has-comparison .current-weather-grid > .weather-preview .hourly-preview-wrapper .hourly-preview-item .preview-wind {
        font-size: 0.55rem !important;
    }

    /* Ensure the hourly preview container maintains proper height */
    .has-comparison .current-weather-grid > .weather-preview #today-hourly-preview {
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
    }
}