/*
 * meteo-modern.css
 * Weather34 / meteo.drak.pl
 *
 * Wersja 0.1 - tylko warstwa wizualna.
 * Nie zmienia układu, danych, wykresów ani logiki Weather34.
 *
 * Założenie:
 * - bardzo ciemne, lekko granatowe tło,
 * - chłodne niebiesko-cyjanowe akcenty,
 * - delikatne obramowanie i glow,
 * - zachowanie istniejących kolorów wartości pogodowych.
 */

:root {
    --mf-bg: #061116;
    --mf-panel: rgba(7, 28, 36, 0.92);
    --mf-panel-soft: rgba(9, 35, 44, 0.72);
    --mf-border: rgba(0, 184, 212, 0.42);
    --mf-border-soft: rgba(0, 184, 212, 0.22);
    --mf-border-hover: rgba(0, 210, 235, 0.72);
    --mf-text: #d0d9dc;
    --mf-text-soft: #8fa1a7;
    --mf-accent: #00b8d4;
}

/* --- Główne tło -------------------------------------------------------- */

html,
body {
    background: var(--mf-bg) !important;
}

body {
    color: var(--mf-text);
}

/* Delikatna poświata przy górnej części strony.
   Nie wpływa na układ elementów. */
body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 50%;
    width: 900px;
    height: 180px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 150, 175, 0.08) 0%,
        rgba(0, 150, 175, 0.025) 45%,
        rgba(0, 150, 175, 0) 72%
    );
    z-index: 0;
}

/* --- Główne panele Weather34 ------------------------------------------ */

.weather-item {
    background: var(--mf-panel) !important;
    border: 1px solid var(--mf-border) !important;
    border-bottom: 1px solid var(--mf-border) !important;
    border-radius: 7px !important;

    /* Zastępuje mocny, szary inset z oryginalnego CSS */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 2px 8px rgba(0, 0, 0, 0.28) !important;

    overflow: hidden;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

/* Subtelny efekt po najechaniu myszą.
   Na telefonie :hover praktycznie nie ma znaczenia. */
.weather-item:hover {
    background: rgba(8, 33, 42, 0.96) !important;
    border-color: var(--mf-border-hover) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 0 10px rgba(0, 184, 212, 0.12),
        0 3px 10px rgba(0, 0, 0, 0.32) !important;
}

/* --- Nagłówki paneli --------------------------------------------------- */

.weather-item .chartforecast {
    color: var(--mf-text);
}

/* Oryginalny pasek nagłówka jest półprzezroczysty.
   Delikatnie przesuwamy go w stronę granatu/cyanu. */
.weather-item > .chartforecast {
    background: rgba(10, 42, 52, 0.52);
}

/* --- Dolne paski/linki paneli ------------------------------------------ */

.weather-item > div:last-child,
.weather-item .weatherfooter-item {
    color: var(--mf-text-soft);
}

/* --- Paski informacji na dole strony ---------------------------------- */

.weatherfooter-container {
    background: transparent;
}

.weatherfooter-item {
    background: var(--mf-panel-soft) !important;
    border: 1px solid var(--mf-border-soft) !important;
    border-radius: 7px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 2px 7px rgba(0, 0, 0, 0.22) !important;
}

/* --- Tekst pomocniczy -------------------------------------------------- */

.heading1,
.weather-item,
.weatherfooter-item {
    color: var(--mf-text);
}

.weather-item small,
.weather-item .small,
.weatherfooter-item small {
    color: var(--mf-text-soft);
}

/* --- Linki ------------------------------------------------------------- */

a {
    color: #9fcbd4;
    transition:
        color 0.15s ease,
        text-shadow 0.15s ease;
}

a:hover {
    color: #d4f7fc;
    text-shadow: 0 0 6px rgba(0, 184, 212, 0.28);
}

/*
 * Nie zmieniamy tutaj kolorów elementów danych:
 * pomarańczowego, zielonego, niebieskiego itd.
 * Są one używane przez Weather34 do rozróżniania informacji.
 */

/* --- Menu boczne ------------------------------------------------------- */

/*
 * Menu zostawiamy prawie nietknięte. Jedynie lekko dopasowujemy jego
 * tło, żeby po otwarciu nie wyglądało jak element z innego interfejsu.
 */
.menu {
    background: rgba(5, 18, 24, 0.97) !important;
    border-right-color: rgba(0, 184, 212, 0.18) !important;
}

/* --- Telefon ----------------------------------------------------------- */

/*
 * NIE zmieniamy istniejących breakpointów Weather34.
 * Panele nadal układają się pionowo, a elementy ukrywane przez oryginalny
 * CSS pozostają ukryte. To jest celowe - wersję mobilną dopracujemy
 * osobno po obejrzeniu pierwszego efektu.
 */
@media screen and (max-width: 768px) {
    .weather-item {
        border-radius: 7px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 2px 7px rgba(0, 0, 0, 0.25) !important;
    }

    .weather-item:hover {
        background: var(--mf-panel) !important;
        border-color: var(--mf-border) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 2px 7px rgba(0, 0, 0, 0.25) !important;
    }
}


/* ======================================================================
 * WERSJA 0.2
 * Ujednolicenie elementów, które w 0.1 pozostały w oryginalnej szarości.
 * ====================================================================== */

/* Wewnętrzne kafelki / mini-panele */
.weather-item .weather-item,
.weather-item .chart,
.weather-item .forecast,
.weather-item .forecast-item {
    background: rgba(8, 32, 41, 0.68) !important;
    border-color: rgba(0, 184, 212, 0.20) !important;
}

/* Szare belki nagłówków i sekcji */
.weather-item .title,
.weather-item .header,
.weather-item .charttitle,
.weather-item .chart-title,
.weather-item .panel-title {
    background: rgba(10, 39, 49, 0.62) !important;
    color: var(--mf-text) !important;
    border-color: var(--mf-border-soft) !important;
}

/* Górne boksy: zegar / wiatr / deszcz / porada */
.weather-item.weather-top,
.weather-item.top,
.weather-top,
.top-weather-item {
    background: var(--mf-panel) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: 7px !important;
}

/* Paski czasu / stopki paneli */
.weather-item .footer,
.weather-item .chart-footer,
.weather-item .weather-item-footer {
    background: rgba(7, 27, 35, 0.76) !important;
    border-top-color: var(--mf-border-soft) !important;
}

/* Elementy prognostyczne - zachowujemy ich wewnętrzne kolory,
   ale nadajemy im wspólne tło i obwódkę. */
.weather-item .forecast-day,
.weather-item .forecast-item,
.weather-item .forecastbox {
    background: rgba(8, 30, 39, 0.72) !important;
    border-color: rgba(0, 184, 212, 0.20) !important;
    border-radius: 5px !important;
}

/* Delikatnie mocniejszy kontrast tekstu w panelach */
.weather-item .label,
.weather-item .caption,
.weather-item .info {
    color: var(--mf-text-soft);
}

/* Małe znaczniki czasu / statusu */
.weather-item .time,
.weather-item .updated,
.weather-item .timestamp {
    color: #9bb4bb;
}

/* ======================================================================
 * Telefon
 * ====================================================================== */

@media screen and (max-width: 768px) {

    /*
     * Na telefonie panele są już duże i pionowe.
     * Zwiększamy jedynie subtelność "karty", bez ingerencji w ich rozmiar.
     */
    .weather-item {
        background: rgba(7, 28, 36, 0.94) !important;
        border-width: 1px !important;
    }

    /* Wewnętrzne kafelki prognozy */
    .weather-item .forecast-day,
    .weather-item .forecast-item,
    .weather-item .forecastbox {
        background: rgba(8, 31, 40, 0.78) !important;
        border-color: rgba(0, 184, 212, 0.18) !important;
    }

    /*
     * Jeżeli Weather34 ukrywa elementy przez display:none, nie przywracamy
     * ich jeszcze. Najpierw oglądamy efekt spójności kolorystycznej.
     */
}

/* Bardzo małe ekrany - zachowujemy istniejące zachowanie Weather34 */
@media screen and (max-width: 480px) {
    .weather-item {
        border-radius: 6px !important;
    }
}


/* ======================================================================
 * WERSJA 0.3
 * Rzeczywiste klasy Weather34 - główne panele i okna Featherlight.
 * ====================================================================== */

/* --- Główne karty ----------------------------------------------------- */

/*
 * Weather34 tworzy "stary" pasek nagłówka przez inset box-shadow,
 * a dolny pasek przez border-bottom. Zerujemy oba mechanizmy i
 * zastępujemy je jedną spójną kartą.
 */
.weather-item {
    background: rgba(7, 28, 36, 0.94) !important;
    border: 1px solid rgba(0, 184, 212, 0.42) !important;
    border-bottom: 1px solid rgba(0, 184, 212, 0.42) !important;

    -webkit-box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 2px 8px rgba(0, 0, 0, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 2px 8px rgba(0, 0, 0, 0.30) !important;

    border-radius: 7px !important;
}

/* Tytuł panelu */
.moduletitle {
    color: #c4d0d4 !important;
    text-shadow: 0 0 5px rgba(0, 184, 212, 0.08);
}

/* Pasek z linkami do wykresów / szczegółów */
.chartforecast {
    background: rgba(5, 23, 30, 0.78) !important;
    border-top: 1px solid rgba(0, 184, 212, 0.16) !important;
    color: #8fa7ae !important;
}

/* Linki w dolnym pasku */
.chartforecast a {
    color: #9dbbc2 !important;
}

.chartforecast a:hover {
    color: #d9f8fc !important;
    text-shadow: 0 0 6px rgba(0, 184, 212, 0.25);
}

/* --- Górne cztery boksy ---------------------------------------------- */

.weather34box {
    background: rgba(7, 28, 36, 0.94) !important;
    border: 1px solid rgba(0, 184, 212, 0.32) !important;
    color: #c4d0d4 !important;

    -webkit-box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 2px 6px rgba(0, 0, 0, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 2px 6px rgba(0, 0, 0, 0.22) !important;
}

/* Nagłówki Zegar / Wiatr / Deszcz / Porada */
.weather34box .title {
    color: #9fb2b8 !important;
    background: rgba(10, 39, 49, 0.42) !important;
}

/* Zachowujemy znaczeniowe kolory danych */
.weather34box.alert span,
.weather34box.earthquake span {
    color: #ff8841;
}

.weather34box.indoor titlespan,
.weather34box.clock titlespan {
    color: #9aba2f;
}

/* --- Dolny panel z informacjami -------------------------------------- */

.weatherfooter-item {
    background: rgba(7, 28, 36, 0.90) !important;
    border: 1px solid rgba(0, 184, 212, 0.28) !important;

    -webkit-box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 2px 7px rgba(0, 0, 0, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 2px 7px rgba(0, 0, 0, 0.22) !important;
}

/* --- Featherlight: okno otwierane po kliknięciu linku ----------------- */

/*
 * To jest warstwa "nad" stroną. Nie zmieniamy sposobu działania popupu,
 * tylko jego oprawę.
 */
.featherlight {
    background: rgba(0, 0, 0, 0.78) !important;
    z-index: 1000 !important;
}

.featherlight:last-of-type {
    background: rgba(0, 0, 0, 0.78) !important;
}

.featherlight .featherlight-content {
    background: #071c24 !important;
    border: 1px solid rgba(0, 184, 212, 0.55) !important;
    border-radius: 8px !important;

    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;

    -webkit-box-shadow:
        0 0 0 1px rgba(0, 184, 212, 0.08),
        0 8px 35px rgba(0, 0, 0, 0.62),
        0 0 18px rgba(0, 184, 212, 0.10) !important;
    box-shadow:
        0 0 0 1px rgba(0, 184, 212, 0.08),
        0 8px 35px rgba(0, 0, 0, 0.62),
        0 0 18px rgba(0, 184, 212, 0.10) !important;

    padding: 5px !important;
}

/* iframe nie dostaje białego tła */
.featherlight iframe {
    background: #071c24 !important;
}

/* Na mniejszych ekranach popup ma się zmieścić w viewport */
@media screen and (max-width: 900px) {
    .featherlight .featherlight-content {
        width: calc(100vw - 20px) !important;
        max-width: 855px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (max-width: 600px) {
    .featherlight .featherlight-content {
        width: calc(100vw - 12px) !important;
        margin-top: 3% !important;
        border-radius: 7px !important;
        padding: 3px !important;
    }
}

.weather-item {
    position: relative !important;
}

.weather-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(0, 184, 212, 0.42);
    pointer-events: none;
    z-index: 999;
}
.weather-item:hover::after {
    background: var(--mf-border-hover);
}
body > header,
body > .header,
body > .topbar,
body > #header {
    background: rgba(7, 28, 36, 0.96) !important;
    border: none !important;
}