/*
 * wetter-statistik.css  -  Jahres-Statistik (Tabelle)
 * Version: 1.4.1
 *
 * Ergaenzt wetter.css nur auf der Statistikseite. Enthaelt das Vollfenster-
 * Sticky-Layout (Jahres-Kopf oben, Kennwert-Spalte links) analog zur
 * Kalenderseite (wetter-kalender.css). Farben derzeit neutral - die
 * stufenweise Einfaerbung kommt spaeter.
 *
 * Changelog:
 *   1.4.1  Linksbuendigkeit der Datumsspalten haengt jetzt an der Klasse
 *          statdet-date statt an der Spaltenposition - in den Perioden-
 *          tabellen stand die Kopfzelle "Bis" sonst rechtsbuendig.
 *   1.4.0  Anklickbare Kenntag-/Zaehl-/Periodenzellen (statdet-link, fuellt die
 *          ganze Zelle ueber negative Margins) sowie Rohdaten-Modal
 *          (statdet-dlg, natives <dialog>) und die Tabelle der Detailseite
 *          (statdet-tab). Die Datei wird von wetter-statistik-detail.php
 *          mitgeladen, deshalb stehen die Detail-Styles hier und nicht in
 *          einer eigenen Datei.
 *   1.3.0  Quartalstrenner (dickere Linie nach Maerz/Juni/September, stat-qend).
 *          Zwei gleitende Mittel-Zeilen (Avg. 5y / 10y, stat-avg) unter der
 *          Jahr-Zeile, dezent abgesetzt.
 *   1.2.0  Topbar (Ortsauswahl/Titel/Info) bekommt deckenden Hintergrund; das
 *          horizontale Sticky-Verhalten wird durch die neue DOM-Position (nun
 *          direktes Kind der Scrollflaeche, siehe wetter-statistik.php) erreicht
 *          - kein Mitwandern des Blocks und kein durchscheinender blauer Grund
 *          mehr beim Rechts-Scrollen. Tabelle erhaelt deckenden Hintergrund
 *          (kein Blau hinter leeren Zellen). Schriftgroesse in der Tabelle
 *          durchgaengig 11px (vorher teils 10px).
 *   1.1.0  Kenntag-/Rekordzellen (stat-span, stat-top) linksbuendig statt
 *          zentriert. Summenzeile "Jahr" (stat-sum) mit dezenter Hervorhebung
 *          und dicker Trennlinie zu den Monaten.
 *   1.0.0  Erstfassung.
 */

/* ================================================================== *
 *  Vollfenster-Scrollflaeche (nur body.stat-page)
 *  Navi-Leiste, Ortsauswahl, Titel und Info liegen mit in dieser einen
 *  Scrollflaeche und wandern beim Scrollen nach oben weg - der Jahres-
 *  Kopf bleibt als oberste Zeile picken (Desktop & Mobile).
 * ================================================================== */
.stat-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.stat-scroll {
    height: 100vh;
    height: 100dvh;
    overflow: auto;                /* die EINZIGE Scrollflaeche (beide Achsen) */
    background: var(--wetter-bg);
    -webkit-overflow-scrolling: touch;
}
.stat-main { background: var(--wetter-surface); }

/* Navi-Leiste und Textblock scrollen mit weg; beim H-Scroll bleiben sie links */
.stat-page .wetter-header { position: sticky; left: 0; }
.stat-topbar {
    position: sticky;
    left: 0;
    padding: 16px 26px 12px;
    background: var(--wetter-surface);   /* deckt den blauen Scroll-Grund ab */
}

.stat-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.stat-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
    font-size: .82rem;
    color: var(--wetter-text-muted);
}

/* YTD-Umschalter (dezenter Textbutton in der Steuerzeile) */
.stat-ytd {
    align-self: flex-end;
    margin-bottom: 2px;
    padding: 6px 12px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--wetter-primary);
    border: 1px solid var(--wetter-primary);
    border-radius: 6px;
    white-space: nowrap;
}
.stat-ytd:hover { background: var(--wetter-primary); color: #fff; }
.stat-ytd--on { background: var(--wetter-primary); color: #fff; }

.wetter-empty--pad { padding: 16px; }

/* ================================================================== *
 *  Tabelle
 * ================================================================== */
.stat {
    border-collapse: separate;     /* Pflicht fuer position: sticky */
    border-spacing: 0;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    color: #000;
    background: var(--wetter-surface);   /* kein blauer Scroll-Grund hinter leeren Zellen */
}
.stat th,
.stat td {
    padding: 2px 7px;
    text-align: right;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: top;
}

/* --- Sticky Kopf (Jahre oben, darunter °C/So/Ni) --- */
.stat thead th {
    position: sticky;
    background: var(--wetter-primary);
    color: #fff;
    z-index: 2;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .18);
    border-bottom: none;
}
.stat thead tr.stat-years th {
    top: 0;
    height: 26px;
    font-weight: 700;
    font-size: 12px;
}
.stat thead tr.stat-metrics th {
    top: 26px;
    height: 20px;
    font-weight: 400;
    font-size: 11px;
}
.stat thead th abbr { color: #fff; text-decoration: none; }

/* --- Sticky Kennwert-Spalte links --- */
.stat .stat-row {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 92px;
    background: var(--wetter-surface);
    color: var(--wetter-text);
    text-align: left;
    font-weight: 600;
    white-space: normal;
    border-right: 2px solid #888;
}
.stat .stat-row abbr { text-decoration: none; cursor: help; color: inherit; }

/* Ecke oben-links: in beide Richtungen sticky */
.stat thead th.stat-corner {
    left: 0;
    top: 0;
    z-index: 3;
    min-width: 92px;
    border-right: 2px solid #888;
}

/* Jahres-Trennlinie: rechte Kante der jeweils letzten Jahresspalte (Ni) */
.stat .stat-yend { border-right: 3px solid #888; }
.stat thead th.stat-yend { border-right: 3px solid rgba(255, 255, 255, .5); }

/* Gruppentrenner (dicke Oberkante ueber die ganze Zeile) */
.stat tr.stat-group th,
.stat tr.stat-group td { border-top: 2px solid #b9b9b9; }

/* Summenzeile "Jahr": dicke Trennlinie zu den Monaten, dezent hervorgehoben */
.stat tr.stat-sum th,
.stat tr.stat-sum td {
    border-top: 2px solid #888;
    background: var(--wetter-surface-2);
    font-weight: 700;
}

/* Quartalstrenner: etwas dickere Linie nach Maerz/Juni/September */
.stat tr.stat-qend th,
.stat tr.stat-qend td { border-bottom: 2px solid #b9b9b9; }

/* Gleitende Mittel (Avg. 5y / 10y): mit der Jahr-Zeile ein Block, aber dezenter */
.stat tr.stat-avg th,
.stat tr.stat-avg td {
    background: var(--wetter-surface-2);
    color: var(--wetter-text-muted);
}

/* Zahlenzellen der Monats-/Jahreszeit-Matrix */
.stat .stat-num { min-width: 40px; }

/* Kenntag-/Rekord-Zellen (colspan 3) linksbuendig, kompakt */
.stat .stat-span { text-align: left; font-size: 11px; line-height: 1.25; }
.stat .stat-top  { text-align: left; }

/* Rekord-Tageslink dezent (erbt Textfarbe) */
.stat-daylink { color: inherit; text-decoration: none; }
.stat-daylink:hover { text-decoration: underline; }

/* ================================================================== *
 *  Handy (schmal): seitlichen Space wegnehmen, Bildschirm maximal nutzen
 * ================================================================== */
@media (max-width: 560px) {
    .stat-page .wetter-header__inner { padding: 10px 10px; }
    .stat-topbar { padding: 10px 12px 8px; }
    .stat th,
    .stat td { padding: 2px 5px; }
    .stat .stat-row { min-width: 78px; padding-left: 6px; }
    .stat thead th.stat-corner { min-width: 78px; }
    .stat-intro { font-size: .78rem; }
}

/* ================================================================== *
 *  Rohdaten hinter einer Zelle (wetter-statistik-detail.php)
 * ================================================================== */

/* Klickbarer Zellinhalt. Die negativen Margins ziehen den Link ueber das
   Zellpadding, damit die gesamte Zelle Trefferflaeche ist. Bewusst ohne
   Signalfarbe - die Matrix soll ruhig bleiben, der Hinweis kommt beim Hover. */
.stat .statdet-link {
    display: block;
    margin: -2px -7px;
    padding: 2px 7px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.stat .statdet-link:hover,
.stat .statdet-link:focus-visible {
    background: var(--wetter-surface-2);
    color: var(--wetter-primary);
    outline: none;
    box-shadow: inset 0 -1px 0 currentColor;
}

/* ---- Modal ---------------------------------------------------------- */
.statdet-dlg {
    width: min(680px, 94vw);
    max-height: 86vh;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: var(--wetter-surface);
    color: var(--wetter-text);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.statdet-dlg[open] {
    display: flex;
    flex-direction: column;
}
.statdet-dlg::backdrop { background: rgba(0, 0, 0, .45); }

.statdet-dlg__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 9px 12px 9px 16px;
    background: var(--wetter-primary);
    color: #fff;
}
.statdet-dlg__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.statdet-dlg__open {
    flex: 0 0 auto;
    padding: 3px 9px;
    font-size: .74rem;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 5px;
    white-space: nowrap;
}
.statdet-dlg__open:hover { background: rgba(255, 255, 255, .16); }
.statdet-dlg__close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 21px;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.statdet-dlg__close:hover { background: rgba(255, 255, 255, .16); }

.statdet-dlg__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 12px 16px 18px;
    -webkit-overflow-scrolling: touch;
}
/* Im Modal ist die Ueberschrift schon in der Titelleiste - Doppelung raus. */
.statdet-dlg__body .statdet-meta { display: none; }

.statdet-load {
    margin: 8px 0;
    font-size: .84rem;
    color: var(--wetter-text-muted);
}

/* ---- Inhaltsblock (Modal und Vollseite gleich) ---------------------- */
.statdet-page { padding: 16px 26px 40px; }
.statdet-back { margin: 0 0 10px; font-size: .84rem; }

.statdet-meta { margin: 0 0 2px; font-size: .92rem; }
.statdet-note {
    margin: 0 0 10px;
    font-size: .8rem;
    color: var(--wetter-text-muted);
}

.statdet-tab {
    border-collapse: separate;      /* Pflicht fuer position: sticky */
    border-spacing: 0;
    width: 100%;
    max-width: 620px;
    font-size: .82rem;
    line-height: 1.35;
    background: var(--wetter-surface);
}
.statdet-tab th,
.statdet-tab td {
    padding: 3px 8px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}
.statdet-tab thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 600;
    font-size: .76rem;
    line-height: 1.15;
    color: var(--wetter-text);
    background: var(--wetter-surface-2);
    border-bottom: 1px solid #ccc;
}
/* Datumsspalten links, in Kopf, Rumpf und Fuss gleichermassen. */
.statdet-tab tfoot th,
.statdet-tab .statdet-date { text-align: left; }
.statdet-tab tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .025); }
.statdet-tab tfoot th,
.statdet-tab tfoot td {
    position: sticky;
    bottom: 0;
    font-weight: 600;
    background: var(--wetter-surface-2);
    border-top: 2px solid #888;
    border-bottom: none;
}
.statdet-tab .stat-daylink { color: inherit; text-decoration: none; }
.statdet-tab .stat-daylink:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .stat .statdet-link { margin: -2px -5px; padding: 2px 5px; }
    .statdet-dlg { width: 96vw; max-height: 90vh; }
    .statdet-dlg__body { padding: 10px 10px 14px; }
    .statdet-page { padding: 12px 12px 30px; }
    .statdet-tab { font-size: .78rem; }
    .statdet-tab th,
    .statdet-tab td { padding: 3px 5px; }
}