/*
 * Statystyki tablicy.
 *
 * Arkusz osobny, nie dopisek do `board.css` — statystyki są innym widokiem
 * i nie dzielą z tablicą ani jednego elementu. Wspólny plik oznaczałby, że
 * każde wejście na tablicę pobiera reguły wykresów, których na niej nie ma.
 *
 * KOLOR. Wykresy są jednobarwne, zgodnie z kierunkiem całej aplikacji: barwa
 * niesie znaczenie (czerwień zaległości, odcień etykiety), a nie tożsamość
 * kolejnej serii danych. Wypełnienie słupka bierze więc jeden token, a nie
 * paletę — uzasadnienie w nagłówku `public/js/lib/charts.js`.
 */

:root {
    /*
     * Barwa wypełnień na wykresach.
     *
     * Nie jest to `--accent`: akcent jest w tej aplikacji achromatyczny
     * (czerń w motywie jasnym), a wykres złożony z czarnych plam czyta się
     * jako kod kreskowy i przytłacza tekst obok. Wypełnienie jest o krok
     * łagodniejsze — wystarczająco mocne, żeby słupki się odcinały, na tyle
     * spokojne, żeby dało się patrzeć na kilka wykresów naraz.
     */
    --chart-fill: hsl(220 12% 40%);
    --chart-track: hsl(220 20% 93%);

    /* Jasność słupka etykiety — patrz `.wykres-slupki__wypelnienie--etykieta`. */
    --label-bar-l: 50%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        /* Kierunek odwrócony, tak jak przy `--accent`: w motywie ciemnym to
           JASNOŚĆ oznacza pierwszy plan. */
        --chart-fill: hsl(0 0% 72%);
        --chart-track: hsl(0 0% 20%);
        --label-bar-l: 62%;
    }
}

:root[data-theme='dark'] {
    --chart-fill: hsl(0 0% 72%);
    --chart-track: hsl(0 0% 20%);
    --label-bar-l: 62%;
}

.statystyki {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);

    padding: var(--space-5);
    /* Szerokość ograniczona: wiersz tekstu i wykres słupkowy rozciągnięty na
       cały monitor panoramiczny wymaga wodzenia wzrokiem przez pół ekranu,
       żeby dopasować podpis do wartości. */
    max-width: 68rem;
    margin: 0 auto;
    width: 100%;
}

.statystyki__naglowek {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.statystyki__tytul {
    margin: 0;
    font-size: var(--text-lg);
}

.statystyki__podtytul {
    margin: var(--space-1) 0 0;
    max-width: 46rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.okres {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

/* --- Kafelki wskaźników --------------------------------------------------- */

.kafelki {
    display: grid;
    /* Kolumny dobierają się do szerokości — przy wąskim oknie kafelki
       układają się w dwa rzędy zamiast ściskać liczby. */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-3);
}

.kafelek {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.kafelek__etykieta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.kafelek__wartosc {
    margin-top: var(--space-1);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    /* Cyfry o stałej szerokości — inaczej sąsiadujące kafelki mają liczby
       wyrównane raz tak, raz inaczej, mimo tej samej liczby znaków. */
    font-variant-numeric: tabular-nums;
}

.kafelek__wartosc--danger { color: var(--danger); }
.kafelek__wartosc--warning { color: var(--warning); }

.kafelek__opis {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* --- Panele --------------------------------------------------------------- */

/*
 * Panele układane w KOLUMNY TEKSTOWE, nie w siatkę.
 *
 * Siatka wyrównuje wiersze: wysokość rzędu wyznacza panel najwyższy, więc pod
 * krótkim wykresem zostaje puste pole wielkości połowy panelu — wyglądające
 * na brakującą treść, a nie na odstęp. Układ wielokolumnowy pakuje panele
 * jeden pod drugim i tej dziury nie tworzy.
 *
 * Ceną jest kolejność czytania: panele biegną w dół pierwszej kolumny, potem
 * w dół drugiej, a nie wierszami. Przy zestawie niezależnych od siebie
 * wykresów, z których każdy ma własny tytuł, nie ma to znaczenia — nic tu nie
 * wynika z sąsiedztwa.
 *
 * Szerokość podana zamiast liczby kolumn: przeglądarka sama zmieści ich tyle,
 * ile wchodzi, więc układ działa i na monitorze panoramicznym, i na laptopie
 * bez osobnych zapytań o szerokość.
 */
.statystyki__siatka {
    columns: 21rem;
    column-gap: var(--space-4);
}

.statystyki__siatka > .panel {
    /* Panel nie może zostać przecięty między kolumnami. */
    break-inside: avoid;
    margin-bottom: var(--space-4);
}

.panel {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.panel__tytul {
    margin: 0;
    font-size: var(--text-md);
}

.panel__opis {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.panel__tytul + .wykres-slupki,
.panel__tytul + .przeplyw,
.panel__tytul + .macierz__opakowanie {
    margin-top: var(--space-3);
}

.panel__pusto {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-subtle);
}

/* --- Wykres słupkowy poziomy ---------------------------------------------- */

.wykres-slupki {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.wykres-slupki__wiersz {
    display: grid;
    /* Trzy kolumny: podpis, tor słupka, wartość. Podpis ma stałą szerokość,
       żeby słupki wszystkich wierszy zaczynały się w tym samym miejscu —
       bez tego porównanie długości przestaje być możliwe. */
    grid-template-columns: minmax(6rem, 9rem) 1fr auto;
    align-items: center;
    gap: var(--space-3);
}

.wykres-slupki__etykieta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wykres-slupki__tor {
    display: block;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--chart-track);
    overflow: hidden;
}

.wykres-slupki__wypelnienie {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--chart-fill);
}

/*
 * Słupek etykiety bierze jej odcień, ale własną jasność.
 *
 * Pigułka na karcie jest TŁEM POD TEKSTEM, więc musi być jasna w motywie
 * jasnym i ciemna w ciemnym — a napis na niej odwrotnie. Słupek nie ma na
 * sobie tekstu i pełni rolę odwrotną: ma się odciąć od tła panelu. Użycie
 * którejkolwiek z jasności pigułki dawało pasek prawie niewidoczny (jasny na
 * jasnym) albo wyprany (pastel na ciemnym). Stąd trzecia wartość, wspólna dla
 * wszystkich odcieni i osobna dla każdego motywu.
 */
.wykres-slupki__wypelnienie--etykieta {
    background: hsl(var(--label-hue) var(--label-sat) var(--label-bar-l));
}

.wykres-slupki__wartosc {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);

    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wykres-slupki__udzial {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* Objaśnienie pod wierszem — zajmuje szerokość toru i wartości. */
.wykres-slupki__opis {
    grid-column: 2 / -1;
    margin-top: calc(-1 * var(--space-1));
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* --- Przepływ przez kolumny ------------------------------------------------ */

.przeplyw {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.przeplyw__wiersz {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.przeplyw__wiersz:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.przeplyw__nazwa {
    font-size: var(--text-sm);
    font-weight: 600;
}

.przeplyw__liczba {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.przeplyw__czas,
.przeplyw__rekord {
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.przeplyw__rekord {
    text-align: right;
}

/* --- Wykres dzienny -------------------------------------------------------- */

.wykres-czas__plotno {
    height: 8rem;
    /* Kreska podstawy zamiast pełnej siatki — oś pionowa nie ma podziałki,
       bo dokładne wartości są w podpowiedziach, a wykres odpowiada na
       pytanie „kiedy było gęsto", nie „ile dokładnie". */
    border-bottom: 1px solid var(--border);
}

.wykres-czas__figura {
    width: 100%;
    height: 100%;
    display: block;
}

.wykres-czas__slupek {
    fill: var(--chart-fill);
}

.wykres-czas__slupek:hover {
    fill: var(--text);
}

.wykres-czas__os {
    display: flex;
    margin-top: var(--space-1);
}

.wykres-czas__podpis {
    flex: 1;
    font-size: 10px;
    color: var(--text-subtle);
    white-space: nowrap;
}

/* --- Macierz osoba × kolumna ---------------------------------------------- */

/* Przy wąskim oknie tabela przewija się w poziomie zamiast rozpychać stronę. */
.macierz__opakowanie {
    overflow-x: auto;
}

.macierz {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.macierz th,
.macierz td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

.macierz thead th {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.macierz tbody th {
    font-weight: 400;
}

.macierz tbody tr + tr th,
.macierz tbody tr + tr td {
    border-top: 1px solid var(--border);
}

/*
 * Liczby do prawej, razem z nagłówkami swoich kolumn.
 *
 * Selektor celuje w POŁOŻENIE komórki, a nie w jej klasę — `.macierz td`
 * (klasa + element) ma wyższą swoistość niż sama `.macierz__komorka`,
 * więc wyrównanie zapisane klasą przegrywało z ustawieniem domyślnym mimo
 * późniejszej pozycji w arkuszu. Ta sama pułapka co przy ukrywaniu
 * odfiltrowanych kart (patrz dziennik prac, etap 10).
 */
.macierz th:not(:first-child),
.macierz td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/*
 * Natężenie tła proporcjonalne do wartości — jeden odcień od jasnego do
 * ciemnego, nigdy tęcza. Liczba jest napisana w każdej komórce, więc tło
 * wyłącznie POMAGA odnaleźć skupiska pracy i nic nie koduje samodzielnie.
 */
.macierz__komorka {
    background: color-mix(
        in srgb,
        var(--chart-fill) calc(var(--natezenie, 0) * 26%),
        transparent
    );
    /*
     * Kreska w barwie tła na prawej krawędzi komórki.
     *
     * Bez niej sąsiednie komórki o podobnej wartości zlewają się w jeden pas
     * i wiersz czyta się jak jedna wartość rozciągnięta na kilka kolumn.
     * Cień wewnętrzny zamiast obramowania, bo tabela ma `border-collapse:
     * collapse` — obramowanie zostałoby scalone z sąsiadem i zniknęło.
     */
    box-shadow: inset -2px 0 0 var(--surface);
}

.macierz__razem {
    font-weight: 600;
}

.osoba {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

.osoba:hover {
    text-decoration: underline;
}

.osoba--brak {
    color: var(--text-subtle);
    font-style: italic;
}

@media (max-width: 40rem) {
    .statystyki {
        padding: var(--space-3);
    }

    /* Podpis słupka nad torem, nie obok — przy wąskim ekranie kolumna na
       nazwy zabierałaby połowę szerokości samemu wykresowi. */
    .wykres-slupki__wiersz {
        grid-template-columns: 1fr auto;
    }

    .wykres-slupki__etykieta {
        grid-column: 1 / -1;
    }
}