/*
 * METEO SANTA SUSANNA
 * Fitxer: public/assets/css/theme.css
 * Versió: 1.5.8p1
 *
 * Desenvolupament i proveïdor: SOMOSDIGITAL.NET
 * © 2026 SOMOSDIGITAL.NET
 */


/* METEO SANTA SUSANNA v1.4 – DAY / NIGHT MODE */

:root{
    --theme-transition:320ms;
}

html,
body,
.site-header-v12,
.site-header-v12 *,
main,
.card,
.status,
.page-heading,
.toolbar,
.chart-card,
.summary-card,
.contact-card,
.contact-form input,
.contact-form textarea{
    transition:
        background-color var(--theme-transition) ease,
        background var(--theme-transition) ease,
        color var(--theme-transition) ease,
        border-color var(--theme-transition) ease,
        box-shadow var(--theme-transition) ease;
}

/* Theme control – directly before flags on desktop and mobile */
.site-header-v12__theme{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:78px;
    height:32px;
    margin-right:5px;
    padding:3px 9px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:9px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font:inherit;
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
}

.site-header-v12__theme:hover,
.site-header-v12__theme:focus-visible{
    background:rgba(255,255,255,.16);
    outline:none;
}

.site-header-v12__theme-icon{
    font-size:1rem;
    line-height:1;
}

@media(max-width:760px){
    .site-header-v12__theme{
        min-width:36px;
        width:36px;
        height:30px;
        margin-right:2px;
        padding:3px;
    }

    .site-header-v12__theme-label{
        display:none;
    }

    .site-header-v12__theme-icon{
        font-size:1.05rem;
    }
}

/* Dark theme */
html[data-theme="dark"]{
    color-scheme:dark;
    --panel:#172533;
    --bg:#0d1720;
    --text:#e6f0f6;
    --muted:#9eb1be;
    --line:#304454;
    --nav:#0a2539;
    --accent:#2a9bc9;
}

html[data-theme="dark"] body{
    background:
        radial-gradient(circle at 50% -20%,#203849 0%,transparent 34rem),
        linear-gradient(180deg,#0b1721 0%,#101c25 340px,#0c151d 100%);
    color:var(--text);
}

html[data-theme="dark"] .site-header-v12{
    background:
        radial-gradient(circle at 14% -25%,rgba(70,132,171,.20),transparent 31rem),
        linear-gradient(135deg,#102638 0%,#17374d 52%,#1b4560 100%);
    color:#edf7fc;
    box-shadow:0 8px 28px rgba(0,0,0,.32);
}

html[data-theme="dark"] .site-header-v12__brand-copy{
    border-left-color:rgba(218,238,249,.20);
}

html[data-theme="dark"] .site-header-v12__brand-copy strong,
html[data-theme="dark"] .site-header-v12__clock{
    color:#f1f9fd;
}

html[data-theme="dark"] .site-header-v12__brand-copy span,
html[data-theme="dark"] #headerDateV12,
html[data-theme="dark"] .site-header-v12__clock > span{
    color:#8bc9eb;
}

html[data-theme="dark"] .site-header-v12__datetime{
    border-left-color:rgba(218,238,249,.20);
}

html[data-theme="dark"] .site-header-v12__menu-bar{
    background:linear-gradient(180deg,#082f4c 0%,#06253d 100%);
    border-color:rgba(118,203,255,.20);
    box-shadow:
        0 10px 25px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .status,
html[data-theme="dark"] .card,
html[data-theme="dark"] .page-heading,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .contact-card{
    background:#172533;
    color:#e6f0f6;
    border-color:#304454;
    box-shadow:0 5px 18px rgba(0,0,0,.24);
}

html[data-theme="dark"] .card h2,
html[data-theme="dark"] .chart-title h3,
html[data-theme="dark"] .summary-card h3,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .contact-heading h1{
    color:#d9edf8;
}

html[data-theme="dark"] .status span:not(.dot),
html[data-theme="dark"] .page-heading p,
html[data-theme="dark"] .chart-title span,
html[data-theme="dark"] .summary-row span,
html[data-theme="dark"] .value small,
html[data-theme="dark"] footer{
    color:#9eb1be;
}

html[data-theme="dark"] .stats,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .summary-row{
    border-color:#304454;
}

html[data-theme="dark"] .trend,
html[data-theme="dark"] .rain-state{
    background:#223542;
    color:#c8d9e3;
}

html[data-theme="dark"] .trend.up{
    background:#153c2b;
    color:#7ed7a7;
}

html[data-theme="dark"] .trend.down{
    background:#48272a;
    color:#f0a0a5;
}

html[data-theme="dark"] .range{
    background:#263a47;
}

html[data-theme="dark"] .compass{
    color:#1a3345;
    border-color:#7890a0;
}

html[data-theme="dark"] .contact-heading{
    background:linear-gradient(135deg,#1d3444,#203f53);
    border-bottom-color:#304454;
}

html[data-theme="dark"] .contact-heading p{
    color:#aac0cd;
}

html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea{
    background:#101d27;
    color:#edf6fb;
    border-color:#3a5262;
}

html[data-theme="dark"] .contact-form input:focus,
html[data-theme="dark"] .contact-form textarea:focus{
    background:#13232f;
    border-color:#43a7d0;
    box-shadow:0 0 0 3px rgba(67,167,208,.15);
}

html[data-theme="dark"] .contact-success{
    background:#143526;
    border-color:#38775a;
    color:#8ce2b4;
}

html[data-theme="dark"] .contact-error{
    background:#3e2225;
    border-color:#874e53;
    color:#ffb3b8;
}

/* Preserve warning severity colors in both themes */
html[data-theme="dark"] .weather-warning-v101{
    color:#fff;
}

/* Charts and SVG labels */
html[data-theme="dark"] .grid-line{
    stroke:#304454;
}

html[data-theme="dark"] .axis-label{
    fill:#9eb1be;
}

html[data-theme="dark"] .empty-chart{
    color:#9eb1be;
}

/* Light theme remains explicit for clean manual switching */
html[data-theme="light"]{
    color-scheme:light;
}


/* METEO SANTA SUSANNA v1.4.1 – NIGHT MODE VISUAL REFINEMENT */

/* Theme control spacing: same rhythm as language flags */
.site-header-v12__theme{
    margin-right:7px !important;
}

.site-header-v12__languages{
    gap:7px !important;
}

/* Desktop: shift control slightly left while keeping equal spacing */
@media (min-width:761px){
    .site-header-v12__theme{
        margin-left:-3px !important;
        margin-right:7px !important;
    }
}

/* Mobile: keep control grouped directly with flags on the right */
@media (max-width:760px){
    .site-header-v12__mobile-actions{
        justify-content:flex-end !important;
        gap:0 !important;
    }

    .site-header-v12__toggle{
        margin-right:auto !important;
    }

    .site-header-v12__theme{
        margin-left:0 !important;
        margin-right:7px !important;
    }

    .site-header-v12__languages{
        margin-left:0 !important;
    }
}

/* Richer navy header at night */
html[data-theme="dark"] .site-header-v12{
    background:
        radial-gradient(circle at 16% -28%,rgba(58,132,176,.18),transparent 31rem),
        linear-gradient(135deg,#102d42 0%,#17435f 52%,#1e5674 100%) !important;
}

/* Deep, consistent card surfaces – no grey blocks */
html[data-theme="dark"] .status,
html[data-theme="dark"] .card,
html[data-theme="dark"] .page-heading,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .dashboard-v0996 .v0996-card,
html[data-theme="dark"] .dashboard-v0996 .v0996-inner-card,
html[data-theme="dark"] .dashboard-v0996 .v0996-table,
html[data-theme="dark"] .dashboard-v0996 .v0996-chart-box,
html[data-theme="dark"] .dashboard-v0996 .v0996-history,
html[data-theme="dark"] .dashboard-v0996 .v0996-trend-box,
html[data-theme="dark"] .dashboard-v0996 .v0996-stat-box,
html[data-theme="dark"] .dashboard-v0996 .v0996-metric,
html[data-theme="dark"] .dashboard-v0996 .v0996-mini-card,
html[data-theme="dark"] .dashboard-v0996 .v0996-webcam-card{
    background:
        linear-gradient(180deg,#142838 0%,#102230 100%) !important;
    color:#eaf4f9 !important;
    border-color:#2c475a !important;
    box-shadow:
        0 8px 22px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Nested grey strips and table areas */
html[data-theme="dark"] .dashboard-v0996 table,
html[data-theme="dark"] .dashboard-v0996 thead,
html[data-theme="dark"] .dashboard-v0996 tbody,
html[data-theme="dark"] .dashboard-v0996 tr,
html[data-theme="dark"] .dashboard-v0996 td,
html[data-theme="dark"] .dashboard-v0996 th,
html[data-theme="dark"] .dashboard-v0996 .stats,
html[data-theme="dark"] .dashboard-v0996 .metric,
html[data-theme="dark"] .dashboard-v0996 .trend,
html[data-theme="dark"] .dashboard-v0996 .rain-state,
html[data-theme="dark"] .dashboard-v0996 .outlook,
html[data-theme="dark"] .dashboard-v0996 .range,
html[data-theme="dark"] .dashboard-v0996 [class*="table"],
html[data-theme="dark"] .dashboard-v0996 [class*="history"],
html[data-theme="dark"] .dashboard-v0996 [class*="trend"]{
    background-color:#102230 !important;
    border-color:#2c475a !important;
}

/* Preserve semantic trend colors */
html[data-theme="dark"] .dashboard-v0996 .trend.up,
html[data-theme="dark"] .trend.up{
    background:#153c2b !important;
    color:#84e0ad !important;
}

html[data-theme="dark"] .dashboard-v0996 .trend.down,
html[data-theme="dark"] .trend.down{
    background:#46282c !important;
    color:#f2a8ad !important;
}

/* Text contrast */
html[data-theme="dark"] .dashboard-v0996 h2,
html[data-theme="dark"] .dashboard-v0996 h3,
html[data-theme="dark"] .dashboard-v0996 h4,
html[data-theme="dark"] .dashboard-v0996 .title,
html[data-theme="dark"] .dashboard-v0996 .label,
html[data-theme="dark"] .dashboard-v0996 .value{
    color:#edf7fb !important;
}

html[data-theme="dark"] .dashboard-v0996 small,
html[data-theme="dark"] .dashboard-v0996 .muted,
html[data-theme="dark"] .dashboard-v0996 .subtitle{
    color:#9fb7c5 !important;
}

/* Inputs and controls at night */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button:not(.site-header-v12__theme):not(.site-header-v12__toggle){
    border-color:#3a5365;
}

/* Softer hover effects */
.site-header-v12__theme,
.site-header-v12__language,
.site-header-v12__link{
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.site-header-v12__theme:hover,
.site-header-v12__language:hover,
.site-header-v12__link:hover{
    transform:translateY(-1px);
}

html[data-theme="dark"] .site-header-v12__theme:hover,
html[data-theme="dark"] .site-header-v12__language:hover,
html[data-theme="dark"] .site-header-v12__link:hover{
    background:rgba(123,207,255,.13) !important;
    border-color:rgba(123,207,255,.38) !important;
}


/* METEO SANTA SUSANNA v1.4.2
   Nur zwei Korrekturen:
   1. Farbige Tendenzen/Temperaturen erhalten
   2. Graue Wind-/Regenkästen abdunkeln
*/

/* 1. Farbige Tendenzpfeile und Temperaturwerte beibehalten */
html[data-theme="dark"] .dashboard-v0996 .trend.up,
html[data-theme="dark"] .dashboard-v0996 .trend.positive,
html[data-theme="dark"] .dashboard-v0996 .change-up,
html[data-theme="dark"] .dashboard-v0996 .change-positive,
html[data-theme="dark"] .dashboard-v0996 [class*="trend-up"],
html[data-theme="dark"] .dashboard-v0996 [class*="change-up"],
html[data-theme="dark"] .dashboard-v0996 [class*="positive"]{
    color:#55d88a !important;
}

html[data-theme="dark"] .dashboard-v0996 .trend.down,
html[data-theme="dark"] .dashboard-v0996 .trend.negative,
html[data-theme="dark"] .dashboard-v0996 .change-down,
html[data-theme="dark"] .dashboard-v0996 .change-negative,
html[data-theme="dark"] .dashboard-v0996 [class*="trend-down"],
html[data-theme="dark"] .dashboard-v0996 [class*="change-down"],
html[data-theme="dark"] .dashboard-v0996 [class*="negative"]{
    color:#ff747d !important;
}

html[data-theme="dark"] .dashboard-v0996 .trend.steady,
html[data-theme="dark"] .dashboard-v0996 .change-steady,
html[data-theme="dark"] .dashboard-v0996 [class*="steady"]{
    color:#a9bbc6 !important;
}

html[data-theme="dark"] .temp-hot,
html[data-theme="dark"] .temperature-hot,
html[data-theme="dark"] .value-hot,
html[data-theme="dark"] .max-temperature{
    color:#ff6b63 !important;
}

html[data-theme="dark"] .temp-warm,
html[data-theme="dark"] .temperature-warm{
    color:#ffad57 !important;
}

html[data-theme="dark"] .temp-cold,
html[data-theme="dark"] .temperature-cold,
html[data-theme="dark"] .value-cold,
html[data-theme="dark"] .min-temperature{
    color:#58b9ff !important;
}

/* 2. Noch graue Kästen bei Wind abdunkeln */
html[data-theme="dark"] .v0996-wind .wind-overview,
html[data-theme="dark"] .v0996-wind .wind-compass-column,
html[data-theme="dark"] .v0996-wind .wind-data-column,
html[data-theme="dark"] .v0996-wind .wind-direction-line,
html[data-theme="dark"] .v0996-wind .wind-details-grid,
html[data-theme="dark"] .v0996-wind .wind-detail,
html[data-theme="dark"] .v0996-wind .widget-history-block,
html[data-theme="dark"] .v0996-wind .widget-seven-day-wind,
html[data-theme="dark"] .v0996-wind .v05-chart-wrap,
html[data-theme="dark"] .v0996-wind .v05-chart-summary{
    background:#102230 !important;
    border-color:#2c475a !important;
    box-shadow:none !important;
}

/* 2. Noch graue Kästen bei Regen abdunkeln */
html[data-theme="dark"] .v0996-rain .rain-state,
html[data-theme="dark"] .v0996-rain .mb-rain-list,
html[data-theme="dark"] .v0996-rain .mb-rain-row,
html[data-theme="dark"] .v0996-rain .widget-history-block,
html[data-theme="dark"] .v0996-rain .widget-seven-day-rain,
html[data-theme="dark"] .v0996-rain .v05-chart-wrap,
html[data-theme="dark"] .v0996-rain .v05-chart-summary{
    background:#102230 !important;
    border-color:#2c475a !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .v0996-wind table tr:nth-child(even),
html[data-theme="dark"] .v0996-rain table tr:nth-child(even){
    background:#132938 !important;
}

html[data-theme="dark"] .v0996-wind table tr:nth-child(odd),
html[data-theme="dark"] .v0996-rain table tr:nth-child(odd){
    background:#102230 !important;
}


/* METEO SANTA SUSANNA v1.4.3
   Theme-Schalter und Flaggen bilden einen gemeinsamen Werkzeugblock. */

.site-header-v12__tools{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    gap:7px;
    margin-left:auto;
}

.site-header-v12__tools .site-header-v12__theme{
    margin:0 !important;
}

.site-header-v12__tools .site-header-v12__languages{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px !important;
    margin:0 !important;
}

@media (max-width:760px){
    .site-header-v12__mobile-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
        gap:0 !important;
    }

    .site-header-v12__toggle{
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .site-header-v12__tools{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        flex:0 0 auto !important;
        gap:7px !important;
        margin-left:auto !important;
    }

    .site-header-v12__tools .site-header-v12__theme{
        margin:0 !important;
    }

    .site-header-v12__tools .site-header-v12__languages{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:7px !important;
        margin:0 !important;
    }
}


/* METEO SANTA SUSANNA v1.4.4 */

/* Temperatur: Minimum, Durchschnitt und Maximum als drei gleich breite Spalten */
.v0996-temperature .temperature-daily-stats{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    text-align:center;
}

.v0996-temperature .temperature-daily-stats > span{
    min-width:0;
}

.v0996-temperature .temperature-average-stat,
.v0996-temperature .temperature-average-stat b,
.v0996-temperature #tempAverageDaily{
    color:#7b8d98;
}

html[data-theme="dark"] .v0996-temperature .temperature-average-stat,
html[data-theme="dark"] .v0996-temperature .temperature-average-stat b,
html[data-theme="dark"] .v0996-temperature #tempAverageDaily{
    color:#9fb1bc !important;
}

/* 7-Tage-Niederschlag: Regen blau, trockene Tage neutral – in beiden Themes */
.v0996-rain #mbSevenDayRain td.rain-amount-positive,
.v0996-rain #mbSevenDayRain td.rain-amount-positive strong,
.v0996-rain #mbSevenDayRain td.rain-amount-positive span{
    color:#1687b8 !important;
    font-weight:700 !important;
}

html[data-theme="dark"] .v0996-rain #mbSevenDayRain td.rain-amount-positive,
html[data-theme="dark"] .v0996-rain #mbSevenDayRain td.rain-amount-positive strong,
html[data-theme="dark"] .v0996-rain #mbSevenDayRain td.rain-amount-positive span{
    color:#58b9ff !important;
}

.v0996-rain #mbSevenDayRain td.rain-amount-zero{
    color:#263f4f;
}

html[data-theme="dark"] .v0996-rain #mbSevenDayRain td.rain-amount-zero{
    color:#9fb1bc !important;
}

@media(max-width:420px){
    .v0996-temperature .temperature-daily-stats{
        gap:5px !important;
        font-size:.78rem;
    }
}


/* METEO SANTA SUSANNA v1.4.4h
   Durchschnitt nur im 7-Tage-Temperaturtrend. */

.v0996-temperature .seven-day-temperature-table{
    width:100% !important;
    table-layout:fixed !important;
}

.v0996-temperature .seven-day-temperature-table th,
.v0996-temperature .seven-day-temperature-table td{
    box-sizing:border-box !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    padding-left:2px !important;
    padding-right:2px !important;
    text-align:center !important;
}

.v0996-temperature .seven-day-temperature-table th:nth-child(1),
.v0996-temperature .seven-day-temperature-table td:nth-child(1){
    width:25% !important;
    text-align:left !important;
}

.v0996-temperature .seven-day-temperature-table th:nth-child(2),
.v0996-temperature .seven-day-temperature-table td:nth-child(2),
.v0996-temperature .seven-day-temperature-table th:nth-child(3),
.v0996-temperature .seven-day-temperature-table td:nth-child(3){
    width:20% !important;
}

.v0996-temperature .seven-day-temperature-table th:nth-child(4),
.v0996-temperature .seven-day-temperature-table td:nth-child(4){
    width:35% !important;
}

#mbSevenDayTemperature .temperature-seven-day-average{
    color:#7b8d98;
    font-weight:700;
}

html[data-theme="dark"] #mbSevenDayTemperature .temperature-seven-day-average{
    color:#9fb1bc !important;
}

@media(max-width:760px){
    .v0996-temperature .seven-day-temperature-table th,
    .v0996-temperature .seven-day-temperature-table td{
        font-size:.76rem !important;
    }

    .v0996-temperature .seven-day-temperature-table th:nth-child(1),
    .v0996-temperature .seven-day-temperature-table td:nth-child(1){
        width:28% !important;
    }

    .v0996-temperature .seven-day-temperature-table th:nth-child(2),
    .v0996-temperature .seven-day-temperature-table td:nth-child(2),
    .v0996-temperature .seven-day-temperature-table th:nth-child(3),
    .v0996-temperature .seven-day-temperature-table td:nth-child(3){
        width:20% !important;
    }

    .v0996-temperature .seven-day-temperature-table th:nth-child(4),
    .v0996-temperature .seven-day-temperature-table td:nth-child(4){
        width:32% !important;
    }
}

/* v1.5.1e – yellow dashboard warning readability
   Only yellow is overridden; red and orange keep their existing colors. */
html[data-theme="dark"] .weather-warning-yellow{
    color:#000 !important;
}
html[data-theme="dark"] .weather-warning-yellow *{
    color:#000 !important;
}


/* v1.6.3e – mobile theme control matches flag button dimensions */
@media (max-width:760px){
  .site-header-v12__tools .site-header-v12__theme{
    flex:0 0 36px !important;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:28px !important;
    margin-right:0 !important;
    padding:2px 3px !important;
  }
  .site-header-v12__theme-icon{font-size:1.05rem !important;}
}