/*
    Wygląd aplikacji. Bez frameworka - zasada zerowych zależności obowiązuje
    także tutaj, a arkusz na trzysta linii nie jest powodem, żeby ją łamać.

    Paleta zdefiniowana jest raz, na :root, i przełącza się na ciemną wyłącznie
    przez prefers-color-scheme. Nie ma przełącznika motywu w interfejsie - jedno
    pokrętło mniej w narzędziu, które i tak będzie ich miało setki.
*/

:root {
    --tlo: #f6f7f9;
    --papier: #ffffff;
    --ramka: #d9dee5;
    --tekst: #1c2430;
    --tekst-slaby: #66707d;
    --akcent: #2f6f9f;
    --alarm: #b4342b;
    --ok: #2e7d54;
    --siatka: #e8ecf1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tlo: #14171c;
        --papier: #1c2027;
        --ramka: #2e343d;
        --tekst: #e6e9ee;
        --tekst-slaby: #98a2b0;
        --akcent: #6aa9d8;
        --alarm: #e0655a;
        --ok: #63b98a;
        --siatka: #262c34;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
}

/* ---- pasek górny ---- */

.pasek {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    background: var(--papier);
    border-bottom: 1px solid var(--ramka);
}

.zegar {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.zegar .dzien {
    color: var(--tekst-slaby);
}

.zegar strong {
    font-size: 20px;
    color: var(--tekst);
}

.zegar .data {
    font-variant-numeric: tabular-nums;
    color: var(--akcent);
    font-weight: 600;
}

.skoki {
    display: flex;
    gap: 6px;
}

button {
    font: inherit;
    padding: 5px 11px;
    border: 1px solid var(--ramka);
    border-radius: 5px;
    background: var(--papier);
    color: var(--tekst);
    cursor: pointer;
}

button:hover:not(:disabled) {
    border-color: var(--akcent);
    color: var(--akcent);
}

button:disabled {
    opacity: .45;
    cursor: progress;
}

.idz {
    display: flex;
    gap: 6px;
}

input[type="number"] {
    font: inherit;
    width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--ramka);
    border-radius: 5px;
    background: var(--papier);
    color: var(--tekst);
}

.znaczniki {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.znacznik {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--ramka);
    color: var(--tekst-slaby);
}

.znacznik.czysty {
    color: var(--ok);
    border-color: var(--ok);
}

.znacznik.brudny {
    color: var(--alarm);
    border-color: var(--alarm);
}

.znacznik.alarm {
    background: var(--alarm);
    border-color: var(--alarm);
    color: #fff;
    font-weight: 700;
}

.znacznik.pracuje {
    color: var(--akcent);
    border-color: var(--akcent);
}

.alarm-pasek {
    padding: 12px 18px;
    background: var(--alarm);
    color: #fff;
    font-weight: 600;
}

/*
    Blad przegladarki ma WYGLADAC inaczej niz zatrzymanie modelu. Ten sam kolor
    dla obu znaczyloby, ze uzytkownik musi czytac tresc, zeby wiedziec, czy padla
    gospodarka, czy wykres.
*/
.alarm-pasek.blad-klienta {
    background: #a8720f;
}

.ukryty {
    display: none !important;
}

/* ---- zakładki ---- */

.zakladki {
    display: flex;
    gap: 4px;
    padding: 10px 18px 0;
    border-bottom: 1px solid var(--ramka);
    background: var(--papier);
}

.zakladki button {
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px;
}

.zakladki button.aktywna {
    border-color: var(--ramka);
    background: var(--tlo);
    color: var(--akcent);
    font-weight: 600;
}

main {
    padding: 18px;
}

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

.kafelki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.kafelek {
    background: var(--papier);
    border: 1px solid var(--ramka);
    border-radius: 7px;
    padding: 10px 12px;
}

.kafelek .etykieta {
    font-size: 12px;
    color: var(--tekst-slaby);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kafelek .wartosc {
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.kafelek .jednostka {
    font-size: 12px;
    color: var(--tekst-slaby);
    font-weight: 400;
    margin-left: 3px;
}

/* ---- wykres ---- */

.wykres-panel {
    background: var(--papier);
    border: 1px solid var(--ramka);
    border-radius: 7px;
    padding: 14px;
}

.wykres-sterowanie {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.opcje {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: var(--tekst-slaby);
}

.opcje label {
    cursor: pointer;
}

.wybor summary {
    cursor: pointer;
    color: var(--akcent);
    font-size: 13px;
}

.lista-serii {
    margin-top: 8px;
    max-height: 230px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 14px;
    padding: 8px;
    border: 1px solid var(--ramka);
    border-radius: 5px;
}

.lista-serii label {
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wykres-obszar {
    position: relative;
    width: 100%;
    height: 380px;
}

#wykres {
    width: 100%;
    height: 100%;
    display: block;
}

.pusto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tekst-slaby);
}

.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 13px;
}

.legenda .pozycja {
    display: flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.legenda .probka {
    width: 13px;
    height: 3px;
    border-radius: 2px;
}

/* Próbka kwadratowa - dla wykresów powierzchniowych (słupki składane). Kreska
   13x3 czytelna przy liniach jest przy wypełnieniach za mała, żeby rozpoznać kolor. */
.legenda .probka.blok {
    width: 11px;
    height: 11px;
    border-radius: 2px;
}

/* Pole edycyjne w komórce tabeli - wąskie, wyrównane do prawej jak liczby obok. */
.produkty-tabela .pole-tabeli {
    width: 66px;
    padding: 2px 4px;
    text-align: right;
    font: inherit;
    font-variant-numeric: tabular-nums;
    background: var(--tlo);
    color: var(--tekst);
    border: 1px solid var(--ramka);
    border-radius: 3px;
}

/* Pokrętło nadpisane w sectors.xml - odróżnia DECYZJĘ autora danych od wartości
   wspólnej. Bez tego 25 liczb w widoku sektora nie znaczy nic. */
.pokretlo .pole-tabeli.nadpisana {
    border-color: var(--akcent);
    font-weight: 600;
}

/* Parametr, którego sektory nie mają wspólnego - pole zbiorcze pokazuje „różne". */
.pokretlo .pole-tabeli.rozne {
    border-style: dashed;
}

.produkty-tabela .pole-tabeli:focus {
    outline: none;
    border-color: var(--akcent);
}

/* ---- wykres kanałów sprzedaży ---- */

#wykres-kanalow,
#wykres-handlu {
    width: 100%;
    display: block;
}

#wykres-kanalow text,
#wykres-handlu text {
    fill: var(--tekst-slaby);
    font-size: 11px;
    font-family: inherit;
}

.legenda .zakres {
    color: var(--tekst-slaby);
    font-size: 12px;
}

.stopka-wykresu {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--tekst-slaby);
}

/* ---- sektor publiczny ---- */

.podzakladki {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.podzakladki button.aktywna {
    border-color: var(--akcent);
    color: var(--akcent);
    font-weight: 600;
}

.wykres-panel h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
}

.slupki {
    width: 100%;
    height: 320px;
    display: block;
}

.drzewo-i-kolo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .drzewo-i-kolo {
        grid-template-columns: 1fr;
    }
}

.drzewo {
    background: var(--papier);
    border: 1px solid var(--ramka);
    border-radius: 7px;
    padding: 6px 10px;
}

.galaz > .wiersz {
    display: grid;
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       Ostatnia kolumna szersza (150 -> 220), bo jednostki sa dlugie:
       "zl/1000 l", "kwintali zyta/ha", "% aktywow" - przy 150px sie nie miescily. */
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       Kolumny liczbowe przesuniete w LEWO (120 -> 108) i ostatnia poszerzona
       (220 -> 280), zeby miescil sie caly opis stawki razem z jednostka:
       "1529 zl/100 l", "kwintali zyta/ha", "% aktywow". */
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       Ostatnia kolumna dostaje 340 px i wolno jej ZAWIJAC. Jednostki bywaja dlugie -
       "zl powyzej 300 ha", "kwintali zyta/ha", "zl/100 l za stopien Plato" - i przy
       jednej linii i tak by sie nie zmiescily, tylko urwaly w polowie slowa. */
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       ⚠ Kolumna tytulu ma SUFIT. Wczesniej byla `1fr` i zjadala cala wolna szerokosc,
       spychajac stawke na prawa krawedz - poszerzanie samej kolumny stawki nic nie
       dawalo, bo tytul zabieral tyle samo z powrotem. Teraz tytul konczy sie najpozniej
       na 420 px, liczby stoja tuz za nim, a stawka bierze CALA reszte, minimum 500 px. */
    grid-template-columns: minmax(160px, 420px) 104px 104px minmax(500px, 1fr);
    gap: 8px;
    align-items: center;
    padding: 5px 4px;
    border-bottom: 1px solid var(--siatka);
}

.galaz .wiersz > *:not(.tytul) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* Podpis stawki ma sie ZAWIJAC, a nie urywac. Bez tego "zl powyzej 300 ha"
   konczylo sie na "zl powyzej 300 h..." i jednostka znikala. */
.galaz .sterowanie {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.galaz .tytul {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.galaz .tytul span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.galaz .strzalka {
    width: 14px;
    flex: 0 0 14px;
    color: var(--tekst-slaby);
    cursor: pointer;
    user-select: none;
}

.galaz .strzalka.pusta {
    cursor: default;
    opacity: .25;
}

.poziom-1 > .wiersz {
    font-weight: 600;
}

.poziom-2 > .wiersz .tytul {
    padding-left: 16px;
}

.poziom-3 > .wiersz .tytul {
    padding-left: 32px;
    color: var(--tekst-slaby);
}

.galaz .model {
    color: var(--akcent);
}

/* Prognoza jest ekstrapolacja, a nie pomiarem - stad slabszy kolor.
   Suma 365 dni to fakt i ma zostac wielkoscia pierwszoplanowa. */
.galaz .prognoza {
    color: var(--tekst-slaby);
    font-weight: 400;
}

.niewpiete {
    color: var(--tekst-slaby);
    font-size: 12px;
    font-style: italic;
}

.ujscie-znak {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--ramka);
    color: var(--tekst-slaby);
}

.ujscie-A { border-color: var(--ok); color: var(--ok); }
.ujscie-B { border-color: var(--akcent); color: var(--akcent); }
.ujscie-C1, .ujscie-C2 { border-color: var(--tekst-slaby); }
.ujscie-D { border-color: var(--alarm); color: var(--alarm); }

.drzewo-naglowek {
    display: grid;
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       Ostatnia kolumna szersza (150 -> 220), bo jednostki sa dlugie:
       "zl/1000 l", "kwintali zyta/ha", "% aktywow" - przy 150px sie nie miescily. */
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       Kolumny liczbowe przesuniete w LEWO (120 -> 108) i ostatnia poszerzona
       (220 -> 280), zeby miescil sie caly opis stawki razem z jednostka:
       "1529 zl/100 l", "kwintali zyta/ha", "% aktywow". */
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       Ostatnia kolumna dostaje 340 px i wolno jej ZAWIJAC. Jednostki bywaja dlugie -
       "zl powyzej 300 ha", "kwintali zyta/ha", "zl/100 l za stopien Plato" - i przy
       jednej linii i tak by sie nie zmiescily, tylko urwaly w polowie slowa. */
    /* pozycja | suma 365 dni | prognoza 365 dni | stawka+jednostka
       ⚠ Kolumna tytulu ma SUFIT. Wczesniej byla `1fr` i zjadala cala wolna szerokosc,
       spychajac stawke na prawa krawedz - poszerzanie samej kolumny stawki nic nie
       dawalo, bo tytul zabieral tyle samo z powrotem. Teraz tytul konczy sie najpozniej
       na 420 px, liczby stoja tuz za nim, a stawka bierze CALA reszte, minimum 500 px. */
    grid-template-columns: minmax(160px, 420px) 104px 104px minmax(500px, 1fr);
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--ramka);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-slaby);
}

.drzewo-naglowek > *:not(:first-child) {
    text-align: right;
}

.kolo-panel {
    background: var(--papier);
    border: 1px solid var(--ramka);
    border-radius: 7px;
    padding: 12px;
}

.kolo {
    width: 100%;
    height: 240px;
    display: block;
}

.legenda-kolo {
    margin-top: 10px;
    font-size: 12px;
}

.legenda-kolo div {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}

.legenda-kolo .probka {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 10px;
}

.legenda-kolo .kwota {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--tekst-slaby);
}

.stawka-pole {
    width: 74px;
    padding: 2px 6px;
    font-size: 13px;
    text-align: right;
}

.sterowanie {
    display: flex;
    align-items: center;

    /* Do LEWEJ, nie do prawej: pole i jednostka stoja obok siebie od poczatku kolumny,
       wiec dlugi podpis rozwija sie w wolna przestrzen zamiast napierac na krawedz. */
    justify-content: flex-start;

    /* Podpis, ktory sie nie miesci, schodzi do drugiej linii zamiast byc uciety. */
    flex-wrap: wrap;

    gap: 5px;
    font-size: 12px;
    color: var(--tekst-slaby);
}

/* ⚠ BEZ max-width i BEZ ucinania wielokropkiem.
   Stalo tu `max-width: 74px; overflow: hidden; text-overflow: ellipsis`, wiec podpis
   przycinal sie SAM, niezaleznie od szerokosci kolumny - "zl powyzej 300 ha" konczylo
   sie na "zl powyzej 300 h...". Poszerzanie siatki nie moglo tego naprawic i nie
   naprawilo, mimo trzech prob. Jednostki sa dluge z natury i maja byc czytelne
   w calosci: "kwintali zyta/ha", "zl/100 l za stopien Plato", "% aktywow". */
.jednostka-stawki {
    font-size: 11px;
    color: var(--tekst-slaby);
    white-space: normal;
    text-align: left;
}

.checkbox-wydatku {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: default;
}

/* Martwe pokretla maja WYGLADAC na martwe - inaczej sugeruja dzialanie,
   ktorego nie ma. To jest ta sama zasada co "nie wpiete" przy przychodach. */
.sterowanie input:disabled {
    opacity: .5;
}

/* ---- dziennik zdarzeń ---- */

.scenariusz {
    display: flex;
    gap: 6px;
}

/* Restart odróżnia się kolorem, bo kasuje bieg - ma nie wyglądać jak "zapisz". */
button.restart {
    border-color: var(--alarm);
    color: var(--alarm);
    font-weight: 600;
}

button.restart:hover:not(:disabled) {
    background: var(--alarm);
    color: #fff;
    border-color: var(--alarm);
}

.dziennik-filtry {
    display: flex;
    gap: 16px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--tekst-slaby);
}

.dziennik-tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--papier);
    border: 1px solid var(--ramka);
    border-radius: 7px;
    overflow: hidden;
}

.dziennik-tabela th,
.dziennik-tabela td {
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ramka);
}

.dziennik-tabela th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-slaby);
}

.dziennik-tabela td:first-child,
.dziennik-tabela td:nth-child(2) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--tekst-slaby);
}

.dziennik-tabela tr:last-child td {
    border-bottom: none;
}

.waga {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.waga-alarm {
    background: var(--alarm);
    color: #fff;
}

.waga-ostrzezenie {
    border: 1px solid var(--alarm);
    color: var(--alarm);
}

.waga-info {
    border: 1px solid var(--ok);
    color: var(--ok);
}

#licznik-zdarzen {
    font-variant-numeric: tabular-nums;
}

/* ---- daniny ---- */

.wstep {
    max-width: 70ch;
    color: var(--tekst-slaby);
}

.wstep.ostrzezenie {
    color: var(--alarm);
}

.wstep code {
    background: var(--siatka);
    padding: 1px 5px;
    border-radius: 3px;
}

.daniny-tabela {
    border-collapse: collapse;
    background: var(--papier);
    border: 1px solid var(--ramka);
    border-radius: 7px;
    overflow: hidden;
}

.daniny-tabela th,
.daniny-tabela td {
    padding: 9px 14px;
    text-align: right;
    border-bottom: 1px solid var(--ramka);
    font-variant-numeric: tabular-nums;
}

.daniny-tabela th:first-child,
.daniny-tabela td:first-child {
    text-align: left;
    font-variant-numeric: normal;
}

.daniny-tabela th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-slaby);
    font-weight: 600;
}

.daniny-tabela tr:last-child td {
    border-bottom: none;
}

.daniny-tabela .silnikowa {
    color: var(--tekst-slaby);
}

.daniny-tabela input {
    width: 92px;
    text-align: right;
}

/* ---- zakładki gospodarstw i rynku pracy ---- */

/*
    Panel pokręteł. Układ dwukolumnowy przy szerokim oknie, bo demografia ma
    dwadzieścia cztery pola i pionowa lista wymagałaby przewijania przy każdej
    zmianie dzietności.
*/
.pokretla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.pokretla-grupa {
    background: var(--papier);
    border: 1px solid var(--ramka);
    border-radius: 6px;
    padding: 12px 14px;
}

.pokretla-grupa h4 {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tekst-slaby);
}

.pokretlo {
    padding: 6px 0;
    border-top: 1px solid var(--siatka);
}

.pokretlo:first-of-type {
    border-top: none;
}

.pokretlo-nazwa {
    display: grid;
    grid-template-columns: 1fr 96px 118px 28px;
    align-items: center;
    gap: 8px;
}

.pokretlo-pole {
    padding: 4px 6px;
    border: 1px solid var(--ramka);
    border-radius: 4px;
    background: var(--tlo);
    color: var(--tekst);
    font: inherit;
    text-align: right;
}

.pokretlo-jednostka {
    color: var(--tekst-slaby);
    font-size: 12px;
}

.pokretlo-reset {
    border: 1px solid var(--ramka);
    border-radius: 4px;
    background: var(--tlo);
    color: var(--tekst-slaby);
    cursor: pointer;
    padding: 3px 0;
}

.pokretlo-reset:disabled {
    opacity: .35;
    cursor: default;
}

.pokretlo-uwaga {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--tekst-slaby);
}

.pokretlo-uwaga.ostrzezenie {
    color: var(--alarm);
}

/* ---- piramida wieku ---- */

.piramida-obszar {
    position: relative;
    margin-top: 8px;
}

#piramida {
    width: 100%;
    display: block;
}

.slupek-k { fill: #9c3a72; }
.slupek-m { fill: var(--akcent); }

.slupek-start {
    fill: none;
    stroke: var(--tekst-slaby);
    stroke-width: .8;
    opacity: .75;
}

.pasmo-praca { fill: var(--ok); opacity: .09; }
.pasmo-emeryt { fill: var(--alarm); opacity: .09; }

.os-piramidy {
    fill: var(--tekst-slaby);
    font-size: 10px;
}

.legenda-piramidy {
    color: var(--tekst-slaby);
    font-size: 12px;
    margin-left: 12px;
}

.legenda-piramidy .probka {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin: 0 3px 0 10px;
}

.probka-k { background: #9c3a72; }
.probka-m { background: var(--akcent); }

/* ---- rachunek przepływów ---- */

.przeplywy-tabela,
.produkty-tabela {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
}

.przeplywy-tabela th,
.przeplywy-tabela td,
.produkty-tabela th,
.produkty-tabela td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--siatka);
    text-align: left;
}

.przeplywy-tabela th,
.produkty-tabela th {
    color: var(--tekst-slaby);
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--ramka);
}

.przeplywy-tabela .liczba,
.produkty-tabela .liczba {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Pionowa kreska rozdziela dochody od wydatków - bez niej sześć kolumn liczb
   czyta się jak jedna tabela i strony się mylą. */
.przeplywy-tabela .rozdzielenie {
    border-left: 2px solid var(--ramka);
    padding-left: 14px;
}

.przeplywy-tabela .suma td {
    font-weight: 600;
    border-top: 1px solid var(--ramka);
    border-bottom: none;
}

.saldo-przeplywow {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--tekst-slaby);
}

/* ---- tabela produktów i sektorów ---- */

.produkty-tabela tr.tier td {
    background: var(--siatka);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .03em;
}

.produkty-tabela tr.posrednie td {
    font-weight: 400;
    color: var(--tekst-slaby);
}

.produkty-tabela .produkt,
.produkty-tabela .sektor {
    font-weight: 600;
}

.produkty-tabela .produkt {
    cursor: help;
}

/* Pełna nazwa obok kodu. Kod niesie identyfikację (CLI, pliki danych, rejestr),
   nazwa niesie znaczenie - stąd różnica wagi: kod ma się dać skanować wzrokiem
   w kolumnie trzydziestu sześciu wierszy, nazwa ma się dać przeczytać.

   ⚠ BEZ max-width i BEZ ucinania wielokropkiem - patrz .jednostka-stawki wyżej.
   Nazwy sektorów są długie z natury („Wytwarzanie i zaopatrywanie w energię
   elektryczną, gaz, parę wodną") i mają być czytelne w całości. */
.produkty-tabela .pelna {
    font-weight: 400;
    color: var(--tekst-slaby);
}

.produkty-tabela .brakujace {
    color: var(--alarm);
}

.produkty-tabela .niedobor-pracy td {
    background: rgba(180, 52, 43, .07);
}

.produkty-tabela th.sortowalna {
    cursor: pointer;
    user-select: none;
}

.produkty-tabela th.sortowalna:hover {
    color: var(--akcent);
}