/* ========================================================================
   WEATHER GRADIENT THEME - Samma stil som landing page
   Applicerar blå gradient och glassmorphism på vädersidor
   ======================================================================== */

/* Blå gradient-bakgrund när väderdata visas */
body:has(.weather-container) {
    background: linear-gradient(180deg, #4A90E2 0%, #5BA3F5 50%, #6BB6FF 100%) !important;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Justera header för vädersidor - blå bakgrund som smälter in */
body:has(.weather-container) .site-header {
    margin-bottom: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(180deg, rgba(50, 110, 180, 0.4) 0%, rgba(60, 120, 190, 0.3) 100%) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Styla brand text i header på vädersidor */
body:has(.weather-container) .site-header .brand-nordic {
    color: white !important;
}

body:has(.weather-container) .site-header .brand-weather {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Styla navigation menu button på vädersidor */
body:has(.weather-container) .site-header .nav-menu-button {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body:has(.weather-container) .site-header .nav-menu-button svg {
    stroke: white !important;
}

body:has(.weather-container) .site-header .nav-menu-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Styla sökrutan i header på vädersidor */
body:has(.weather-container) .site-header .header-search-input {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    backdrop-filter: blur(10px);
}

body:has(.weather-container) .site-header .header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

body:has(.weather-container) .site-header .header-search-input:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body:has(.weather-container) .site-header .header-search-icon {
    stroke: rgba(255, 255, 255, 0.8) !important;
}

/* Weather container transparent bakgrund */
body:has(.weather-container) .site-main {
    background: transparent !important;
}

.weather-container {
    background: transparent;
    padding: 2rem 0;
}

/* Styla footer på vädersidor */
body:has(.weather-container) .site-footer {
    background: linear-gradient(180deg, rgba(42, 80, 150, 0.3) 0%, rgba(30, 60, 120, 0.5) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    margin-top: 0 !important;
}

body:has(.weather-container) .site-footer .footer-brand {
    color: white;
}

body:has(.weather-container) .site-footer .footer-tagline {
    color: rgba(255, 255, 255, 0.8);
}

body:has(.weather-container) .site-footer h4 {
    color: rgba(255, 255, 255, 0.95);
}

body:has(.weather-container) .site-footer .footer-links a {
    color: rgba(255, 255, 255, 0.85);
}

body:has(.weather-container) .site-footer .footer-links a:hover {
    color: white;
}

body:has(.weather-container) .site-footer .footer-copyright,
body:has(.weather-container) .site-footer .data-attribution {
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================================================
   LOCATION HEADER - Vit text
   ======================================================================== */

.location-header {
    text-align: center;
    margin-bottom: 2rem;
}

.location-title {
    color: white !important;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.location-title::after {
    background: rgba(255, 255, 255, 0.4) !important;
}

.location-date {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem;
    font-weight: 500;
}

/* ========================================================================
   TILLBAKA TILL FAVORITER-LÄNK - Vit stil
   ======================================================================== */

.back-to-favorites-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white !important;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-to-favorites-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(-4px);
    color: white !important;
}

.back-to-favorites-link svg {
    stroke: white;
    transition: transform 0.2s ease;
}

.back-to-favorites-link:hover svg {
    transform: translateX(-2px);
}

/* ========================================================================
   PROVIDER CARDS - Glassmorphism-stil
   ======================================================================== */

.providers-section {
    margin-bottom: 2rem;
}

.providers-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.providers-header h3 {
    color: white !important;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.providers-header h3::after {
    background: rgba(255, 255, 255, 0.4) !important;
}

.providers-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem;
}

/* Provider cards - ENHETLIG glassmorphism */
.provider-card {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.provider-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.provider-card .card-header.provider-logo {
    background: #ffffff !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

.provider-card .card-body {
    color: white;
}

.provider-card .metric-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

.provider-card .metric-value {
    color: white !important;
    font-weight: 600 !important;
}

.provider-metric {
    background: transparent !important;
    border-radius: 8px;
}

.provider-metric:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================================================
   WEATHER TABLES - Glassmorphism-stil
   ======================================================================== */

/* Dagens väder sektion */
body:has(.weather-container) h2 {
    color: white !important;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Weather table - ENHETLIG glassmorphism */
.weather-table {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.weather-table thead th {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    color: white !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.weather-table tbody td {
    color: white !important;
    border-top: none !important;
    font-weight: 500 !important;
}

.forecast-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.forecast-row:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.forecast-row:last-child {
    border-bottom: none !important;
}

/* Temperatur och värden */
.temperature,
.weather-cell span,
.wind-cell {
    color: white !important;
    font-weight: 500 !important;
}

/* ========================================================================
   DAY SECTIONS - Sammanhängande Glassmorphism
   ======================================================================== */

/* Container för alla dagskort - mörkare bakgrund */
.days-vertical-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden;
}

.day-section {
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden;
    border: none !important;
    margin: 0 !important;
}

.day-tab-button {
    width: 100%;
    background: transparent !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
    color: white !important;
    padding: 0 !important;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.day-tab-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateX(3px);
}

.day-tab-button.active {
    background: transparent !important;
}

.day-tab-button.active .day-preview {
    background: rgba(255, 255, 255, 0.08) !important;
    justify-content: center !important;
    position: relative;
}

/* Dölj väderinformation när dag är expanderad - visa bara dagnamn och chevron */
.day-tab-button.active .day-preview .day-weather-icon,
.day-tab-button.active .day-preview .day-temp,
.day-tab-button.active .day-preview .day-wind,
.day-tab-button.active .day-preview .day-certainty {
    display: none !important;
}

/* Centrera dagnamnet när aktiv */
.day-tab-button.active .day-preview .day-name {
    text-align: center !important;
    flex: 1 !important;
    margin: 0 auto !important;
}

/* Pil till höger när aktiv */
.day-tab-button.active .day-preview .day-chevron {
    position: absolute !important;
    right: 1rem !important;
}

/* Dölj headers när en dag är expanderad */
.day-tab-button.active + .day-content .day-preview-headers,
.day-section:has(.day-tab-button.active) + .day-section .day-preview-headers {
    display: none !important;
}

/* Om första dagen är aktiv, dölj headers */
.day-section:first-of-type .day-tab-button.active ~ * .day-preview-headers,
.days-vertical-layout:has(.day-tab-button.active) .day-preview-headers {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
}

/* Visa headers när ingen dag är aktiv */
.day-preview-headers {
    max-height: 100px !important;
    opacity: 1 !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
}

/* Rotera chevron när aktiv med smooth animation */
.day-preview .day-chevron svg {
    transition: transform 0.3s ease;
}

.day-tab-button.active .day-preview .day-chevron svg {
    transform: rotate(180deg);
}

.day-content {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* ========================================================================
   DAY PREVIEW CARDS - Sammanhängande Glassmorphism (ÖVERSKRIVER day-preview.css)
   ======================================================================== */

/* Container wrapper för day-preview headers och kort */
.days-vertical-layout .day-preview-headers,
.days-vertical-layout .day-preview:first-of-type {
    margin-top: 0 !important;
}

/* Day preview headers - mörkare för bättre läsbarhet */
.day-preview-headers {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: white !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ALLA day-preview kort - mörkare för bättre läsbarhet */
.day-preview {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    color: white !important;
    transition: all 0.3s ease, justify-content 0.3s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Smooth transitions för elementen i day-preview */
.day-preview .day-name,
.day-preview .day-weather-icon,
.day-preview .day-temp,
.day-preview .day-wind,
.day-preview .day-certainty,
.day-preview .day-chevron {
    transition: all 0.3s ease !important;
}

.day-preview:last-child {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* Första och sista preview-headers får rundade hörn för att matcha containern */
.day-preview-headers:first-child {
    border-radius: 12px 12px 0 0 !important;
}

.day-section:last-child .day-preview {
    border-radius: 0 0 12px 12px !important;
}

.day-preview:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateX(2px);
    box-shadow: none !important;
}

/* Desktop specifik override */
@media (min-width: 768px) {
    .day-preview {
        background: rgba(255, 255, 255, 0.08) !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
}

/* Mobil specifik override */
@media (max-width: 767.98px) {
    .day-preview {
        background: rgba(255, 255, 255, 0.08) !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 0.4rem !important;
    }
}

.day-preview-headers > * {
    color: white !important;
    font-weight: 600 !important;
}

/* Day preview elements - vit text överallt - ÖVERSKRIVER #1e3a8a */
.day-preview .day-name {
    color: white !important;
    font-weight: 600 !important;
}

.day-preview .day-temp {
    color: white !important;
    font-weight: 500 !important;
}

.day-preview .day-wind {
    color: white !important;
}

.day-preview .day-wind span {
    color: white !important;
}

.day-preview .day-chevron {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Weather ikoner - gör dem mer synliga */
.day-preview .day-weather-icon img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* ========================================================================
   PROVIDER DETAIL CARDS - ENHETLIG Glassmorphism
   ======================================================================== */

.providers-comparison {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.provider-detail-card {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.provider-detail-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.provider-detail-header {
    background: #ffffff !important;
    border-bottom: none !important;
}

.provider-detail-body {
    color: white;
}

.detail-metric {
    background: transparent !important;
    border-radius: 6px;
}

.detail-metric:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.detail-metric .metric-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

.detail-metric .metric-value {
    color: white !important;
    font-weight: 600 !important;
}

/* ========================================================================
   AI SUMMARY CARDS - ENHETLIG Glassmorphism
   ======================================================================== */

.ai-summaries {
    margin-top: 2rem;
}

.summary-card {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.summary-card .card-header.blue-card-header {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 12px 12px 0 0 !important;
}

.summary-card .card-header svg {
    stroke: white !important;
}

.summary-card .card-body {
    color: white;
}

.summary-card .card-body p {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    font-weight: 400 !important;
}

/* ========================================================================
   POLLEN & UV WIDGETS - ENHETLIG Glassmorphism
   ======================================================================== */

#pollenWidget,
#uvForecastContainer .card {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

#pollenWidget .card-header,
#uvForecastContainer .card-header {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-weight: 600 !important;
}

#pollenWidget .card-header svg,
#uvForecastContainer .card-header svg {
    stroke: white !important;
}

#pollenWidget .card-body,
#uvForecastContainer .card-body {
    color: white;
}

#pollenWidget .card-body p,
#uvForecastContainer .card-body p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ========================================================================
   FORECAST VALUES - Transparent bakgrund, endast staplar syns
   ======================================================================== */

.forecast-value.certainty-high,
.forecast-value.certainty-medium-high,
.forecast-value.certainty-medium,
.forecast-value.certainty-low,
.forecast-value.certainty-very-low {
    background-color: transparent !important;
}

/* ========================================================================
   LOADING INDICATORS - Vit styling
   ======================================================================== */

/* Spinner i day-content */
.day-content .spinner-border {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
}

.day-content p {
    color: white !important;
}

/* Weather day container */
.weather-day-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.weather-day-container .spinner-border {
    color: white !important;
}

.weather-day-container p {
    color: white !important;
}

/* Säkerställ att tabeller i day-content ser exakt likadana ut som i "Idag"-sektionen */
.day-content .weather-table,
.weather-day-container .weather-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   RESPONSIV DESIGN
   ======================================================================== */

@media (max-width: 768px) {
    .weather-container {
        padding: 1rem 0;
    }

    .location-title {
        font-size: 2rem;
    }

    body:has(.weather-container) h2 {
        font-size: 1.5rem;
    }

    .day-tab-button {
        padding: 1rem !important;
        font-size: 1rem;
    }

    /* Day preview mobil */
    .day-preview {
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
}