/*
=========================================================
Weather Dashboard
Main styles
=========================================================
*/

/* ======================================================
LAYOUT
====================================================== */

.weather-current{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,230px)
        );

    justify-content:center;
    gap:20px;
    max-width:1200px;
    margin:0 auto 30px auto;
    padding:10px;

}

/* ======================================================
CHARTS
====================================================== */

.weather-chart{
    width:100%;
    min-height:600px;
    margin-bottom:40px;
}

/* ======================================================
CURRENT VALUES (CARDS)
====================================================== */

.weather-card{
    width:100%;
    max-width:230px;
    min-height:250px;
    background:#ffffff;
    border-radius:14px;
    padding:16px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
    transition:.25s;
    cursor:pointer;
}

.weather-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 18px rgba(0,0,0,.20);
}

.weather-card.active{
    transform:translateY(-5px);
    border:3px solid #3498db;
    box-shadow:
        0 0 15px rgba(52,152,219,.6);
}

/* ======================================================
STATION NAME
====================================================== */

.weather-card h3{
    margin:0 0 18px 0;
    font-size:24px;
    font-weight:600;
}

/* ======================================================
TEMPERATURE
====================================================== */

.weather-temperature{
    font-size:30px;
    font-weight:bold;
    margin-bottom:16px;
}

/* ======================================================
SECTION LABELS
====================================================== */

.card-label{
    margin-top:10px;
    margin-bottom:2px;
    font-size:11px;
    font-weight:600;
    color:#888;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* ======================================================
AIR QUALITY
(zmienione 13.08.2026 - 6 klas wg "Klasa jakości
powietrza.docx" zamiast poprzednich 3)
====================================================== */

.air-status{
    margin:2px 0 10px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    text-transform:uppercase;
}

/*
Tekst BEZ koloru per klasa (celowo) - dokładnie tak
jak w oryginalnym wzorze: czarny tekst + kolorowa
kropka (emoji 🟢🟡🟠🔴🟣 z air-quality.js). Same kolory
klas (#7cb242/#fecb32/#fe9701/#f34336/#aa47bb) mają za
niski kontrast na białym tle na tekst (np. żółty
#fecb32 to kontrast ok. 1.5:1 - prawie nieczytelne,
WCAG AA wymaga min. 4.5:1) - stąd tylko kropka niesie
kolor, tekst zostaje w domyślnym, czytelnym kolorze
motywu. Klasy air-bardzo-dobry/air-dobry/... zostają
jako hooki w markupie (current-values.js), gdyby kiedyś
ktoś chciał dodać np. kolorowe tło zamiast koloru
tekstu.
*/

/* ======================================================
MEASUREMENT TIME
====================================================== */

.measurement{

    margin-top:2px;
    text-align:center;
    font-size:15px;
    font-weight:bold;
}

.time-fresh{
    color:#2ecc71;

}

.time-warning{
    color:#f39c12;
}

.time-old{
    color:#e74c3c;
}

/* ==========================================
GAUGE LAYOUT
========================================== */

/* Panel-wrapper (#stationGaugePanel) NIE miał
dotąd max-width/margin:auto - w przeciwieństwie
do .weather-current (rząd kart wyżej), który ma
te dwie właściwości i dzięki temu wygląda na
wyśrodkowany. justify-content:center na
.gauges-container centruje tylko SIATKĘ gauge'ów
WEWNĄTRZ #stationGaugePanel - jeśli sam panel
rozciąga się na całą szerokość kolumny motywu
(a nie jest ograniczony/wyśrodkowany tak jak
.weather-current), efekt na oko może wyglądać
jak wyrównanie do lewej, zwłaszcza przy węższych
rzędach (2 gauge x 280px). Ta reguła naprawia to,
powielając dokładnie ten sam wzorzec co
.weather-current wyżej. */

#stationGaugePanel{
    max-width:1200px;
    margin:0 auto;
}

.gauges-container{
    display:grid;
    justify-content:center;
    justify-items:center;
    align-items:center;
    gap:0px;
    margin:0px auto;
}

/* ---------- PM ---------- */

.gauges-container:nth-child(1){
    grid-template-columns:
        repeat(3,240px);

}

/* ---------- Pressure + Humidity ---------- */

.gauges-container:nth-child(2){
    grid-template-columns:
        repeat(2,260px);
}

/* ---------- Wind ---------- */

.gauges-container:nth-child(3){
    grid-template-columns:
        repeat(2,260px);

}

.gauge-box{
    width:200px;
    height:240px;
}

/* ---------- Wiatr / porywy ----------
Semi-gauge (paneCenterY:'40%' w wind-gauge.js /
gust-gauge.js) zajmuje tylko górną część
canvasu. Wysokość poniżej MUSI się zgadzać
z height w tych dwóch plikach JS - inaczej
wykres zostanie ucięty (za niska) albo
znowu zostanie puste pole (za wysoka).
---------------------------------------- */

#windGauge,
#gustGauge{
    height:200px;
    display:grid;
    justify-content:center;
    justify-items:center;
    align-items:center;
    gap:0px;
    margin:0px auto;
}

/* ==========================================
WIND DIRECTION COMPASS
(dodane 12.08.2026)
========================================== */

.wind-direction-panel{
    text-align:center;
    margin:0px auto 0px auto;
}

.wind-direction-compass{
    position:relative;
    width:200px;
    height:200px;
    margin:0 auto;
    background:#ffffff;
    border-radius:50%;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

.wind-direction-bg{
    width:100%;
    height:100%;
    display:block;
    padding:20px;
    box-sizing:border-box;
}

.wind-direction-arrow{
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    opacity:.85;
    transform-origin:50% 50%;
    transition:transform .4s ease;
    pointer-events:none;
}

/* Chcesz inaczej wyważyć czytelność grafiki arrow.png na
tle róży kierunków (wind_d-300x300.png)? Dwa niezależne
pokrętła:
- top/left/width/height (na razie 20% / 20% / 60% / 60%) -
  zmniejsza/powiększa i centruje grafikę wewnątrz koła
  200x200px. Mniejszy % = mniej zasłania litery N/E/S/W.
- opacity (na razie .55) - im niżej, tym bardziej
  przezroczysta, tym mniej zasłania różę pod spodem. */

/* ==========================================
GAUGE RESPONSIVE
========================================== */

/* ---------- Tablet ---------- */

@media (max-width:900px){
    .gauges-container:nth-child(1){
        grid-template-columns:
            repeat(2,280px);
    }
}

/* ---------- Phone ---------- */

@media (max-width:620px){
    .gauges-container:nth-child(1),
    .gauges-container:nth-child(2),
    .gauges-container:nth-child(3){
        grid-template-columns:280px;
    }
    .gauge-box{
        width:280px;
        height:220px;
    }
}

/* ======================================================
CHART STATUS COLORS
(zostawione pod przyszłość)
====================================================== */

.pm-good{
    color:#27ae60;
}

.pm-warning{
    color:#f39c12;
}

.pm-danger{
    color:#e74c3c;
}

/* ======================================================
RESPONSIVE
====================================================== */

@media (max-width:900px){

    .weather-current{

        grid-template-columns:
            repeat(2,230px);

    }

}

@media (max-width:600px){

    .weather-current{

        grid-template-columns:230px;

    }

    .weather-card h3{

        font-size:22px;

    }

    .weather-temperature{

        font-size:28px;

    }

}

/* ==========================================
HIGHCHARTS MOBILE FIX
========================================== */

.gauge-box{
    background:#ffffff;
    border-radius:12px;
}

.gauge-box .highcharts-container{
    background:#ffffff !important;
}

.gauge-box svg{
    background:#ffffff;
}

/* ======================================================
RAIN MONTH NAVIGATION
(dodane 12.08.2026)
====================================================== */

.weather-month-navigation{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:16px;
}

.weather-month-navigation button{
    border:1px solid #ddd;
    background:#ffffff;
    border-radius:8px;
    width:36px;
    height:36px;
    font-size:16px;
    cursor:pointer;
    transition:.2s;
}

.weather-month-navigation button:hover{
    background:#f2f2f2;
}

.weather-month-navigation span{
    font-size:16px;
    font-weight:600;
    min-width:140px;
    text-align:center;
}

/* ======================================================
AIR QUALITY HEATMAP
(dodane 15.08.2026)
====================================================== */

/*
Guziki wyboru stacji nad heatmapą - CELOWO ta sama
stylistyka najeżdżania/klikania co .weather-card /
.weather-card.active wyżej (translateY + box-shadow na
hover, obramowanie + mocniejszy box-shadow na active) -
użytkownik prosił wprost o "tę samą stylistykę
najeżdżania i klikania co na dashboardzie". Guziki
budowane są dynamicznie w JS (charts.js), tak samo jak
karty stacji.

Klasa PRZEMIANOWANA 16.08.2026 z ".air-heatmap-station-
buttons" na generyczną ".station-switch-buttons" - te
same guziki przełączania stacji są teraz używane przez 4
KOLEJNE wykresy (wind_heatmap, wind_year_heatmap,
wind_thresholds, wind_gusts_month, patrz sekcja "WIND
VISUALISATIONS" niżej), więc nazwa "air-heatmap" przestała
być trafna - to czysto kosmetyczna zmiana nazwy, sam
wygląd/zachowanie bez zmian.
*/

.station-switch-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:20px;
}

.station-switch-buttons button{
    background:#ffffff;
    border-radius:14px;
    padding:10px 24px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
    transition:.25s;
}

.station-switch-buttons button:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 18px rgba(0,0,0,.20);
}

.station-switch-buttons button.active{
    transform:translateY(-5px);
    border:3px solid #3498db;
    box-shadow:
        0 0 15px rgba(52,152,219,.6);
}

/*
Układ "kalendarza" (6 wierszy-tygodni x 7 kolumn-dni)
potrzebuje więcej miejsca niż domyślne
.weather-chart{min-height:600px} zakładało dla
poprzedniej wersji (2 wiersze) - wysokość dopasowana do
chart.height (500) w createCalendarHeatmap() (chart-engine.js).
*/

#airHeatmapChart{
    min-height:500px;
}


/* ======================================================
WIND VISUALISATIONS
(dodane 16.08.2026 - cztery nowe wykresy wiatru:
wind_heatmap, wind_year_heatmap, wind_thresholds,
wind_gusts_month; guziki przełączania stacji reużywają
.station-switch-buttons wyżej, bez nowego CSS)
====================================================== */

/*
Ten sam powód co #airHeatmapChart wyżej -
createCalendarHeatmap() ma domyślne chart.height:500.
*/
#windHeatmapChart{
    min-height:500px;
}

/*
createYearHeatmap() ma domyślne chart.height:550 (12
wierszy-miesięcy potrzebuje odrobinę więcej miejsca niż
kalendarz jednego miesiąca).
*/
#windYearHeatmapChart{
    min-height:550px;
}

/*
Tabela liczby godzin powyżej progu (chart="wind_thresholds")
- pod wykresem, pokazuje WSZYSTKIE stacje naraz (patrz
renderWindThresholdsTable() w chart-renderer.js).
*/
#windThresholdsTable table{
    width:100%;
    border-collapse:collapse;
    margin-top:16px;
}

#windThresholdsTable th,
#windThresholdsTable td{
    padding:10px 14px;
    text-align:center;
    border-bottom:1px solid #eee;
}

#windThresholdsTable th{
    font-weight:700;
    background:#f7f7f7;
}

#windThresholdsTable th:first-child,
#windThresholdsTable td:first-child{
    text-align:left;
}