/* ============================================================
   Analizator karty kierowcy - wyglad
   Kolory aktywnosci sa wspolne dla osi czasu, legendy i tabel.
   ============================================================ */

:root {
    --tlo: #f3f5f8;
    --panel: #ffffff;
    --panel-2: #f8f9fb;
    --tekst: #1b2330;
    --tekst-2: #5a6475;
    --tekst-3: #8a93a3;
    --linia: #e2e6ed;
    --linia-2: #eef1f5;
    --akcent: #1f6feb;
    --akcent-tlo: #eaf1fe;
    --akcent-tekst: #ffffff;

    --jazda: #e5484d;
    --praca: #f2a900;
    --dyspozycja: #3b8fd9;
    --odpoczynek: #3fa45b;
    --brak-karty: #a3abb8;
    --brak-danych: #eef1f5;

    --blad: #cf2f35;
    --blad-tlo: #fdecec;
    --ostrzezenie: #a8640b;
    --ostrzezenie-tlo: #fff4e0;
    --info: #2563a8;
    --info-tlo: #e9f1fb;
    --ok: #2b7a49;
    --ok-tlo: #e7f5ec;

    --cien: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
    --r: 10px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tlo: #0f141b;
        --panel: #171d26;
        --panel-2: #1c2330;
        --tekst: #e6eaf0;
        --tekst-2: #a6afbd;
        --tekst-3: #7b8595;
        --linia: #2a3240;
        --linia-2: #222a36;
        --akcent: #4c8ff5;
        --akcent-tlo: #1b2a44;
        --brak-danych: #222a36;
        --blad-tlo: #3a1d20;
        --ostrzezenie-tlo: #3a2c12;
        --info-tlo: #172a42;
        --ok-tlo: #15301f;
        --blad: #f2777b;
        --ostrzezenie: #e6a84a;
        --info: #7fb0ec;
        --ok: #6cc28c;
        --cien: 0 1px 2px rgba(0, 0, 0, .3);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --tlo: #0f141b;
    --panel: #171d26;
    --panel-2: #1c2330;
    --tekst: #e6eaf0;
    --tekst-2: #a6afbd;
    --tekst-3: #7b8595;
    --linia: #2a3240;
    --linia-2: #222a36;
    --akcent: #4c8ff5;
    --akcent-tlo: #1b2a44;
    --brak-danych: #222a36;
    --blad-tlo: #3a1d20;
    --ostrzezenie-tlo: #3a2c12;
    --info-tlo: #172a42;
    --ok-tlo: #15301f;
    --blad: #f2777b;
    --ostrzezenie: #e6a84a;
    --info: #7fb0ec;
    --ok: #6cc28c;
    --cien: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
p { margin: 0; }
a { color: var(--akcent); }
button, select, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- naglowek ---------- */

.naglowek {
    background: var(--panel);
    border-bottom: 1px solid var(--linia);
    position: sticky;
    top: 0;
    z-index: 20;
}

.naglowek-wnetrze {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.marka { display: flex; align-items: center; gap: 10px; }
.marka h1 { font-size: 17px; }
.podtytul { color: var(--tekst-2); font-size: 12.5px; }
.marka-ikona { width: 34px; height: 34px; flex: none; }
.marka-ikona rect { fill: var(--akcent); }
.marka-ikona circle, .marka-ikona path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }

.sterowanie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pole-wyboru {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tekst-2);
    font-size: 13px;
}

select, .przycisk {
    border: 1px solid var(--linia);
    background: var(--panel);
    border-radius: 8px;
    padding: 6px 10px;
    min-height: 34px;
    cursor: pointer;
}

select:focus-visible, .przycisk:focus-visible, .zakladka:focus-visible, .upusc:focus-visible,
.dzien-wiersz:focus-visible {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
}

.przycisk { font-weight: 550; }
.przycisk:hover { background: var(--panel-2); }
.przycisk.glowny { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-tekst); }
.przycisk.glowny:hover { filter: brightness(1.06); }
.przycisk.maly { min-height: 28px; padding: 3px 9px; font-size: 12.5px; }

#wybierz-pliki { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-tekst); }

/* ---------- uklad ---------- */

main { max-width: 1320px; margin: 0 auto; padding: 16px; }

.stopka {
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 16px 28px;
    color: var(--tekst-3);
    font-size: 12px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- start ---------- */

.upusc {
    border: 2px dashed var(--linia);
    background: var(--panel);
    border-radius: 14px;
    padding: 44px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.upusc:hover, .upusc.aktywne { border-color: var(--akcent); background: var(--akcent-tlo); }
.upusc-ikona { width: 48px; height: 48px; fill: none; stroke: var(--akcent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.upusc-tytul { font-size: 18px; font-weight: 650; margin-top: 8px; }
.upusc-opis { color: var(--tekst-2); max-width: 560px; margin: 6px auto 0; }

.start-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.info-kafel {
    background: var(--panel);
    border: 1px solid var(--linia);
    border-radius: var(--r);
    padding: 14px 16px;
}

.info-kafel h2 { margin-bottom: 6px; }
.info-kafel p { color: var(--tekst-2); }

.przeciaganie {
    position: fixed;
    inset: 0;
    background: rgba(31, 111, 235, .12);
    border: 3px dashed var(--akcent);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.przeciaganie p {
    background: var(--panel);
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 650;
    box-shadow: var(--cien);
}

/* ---------- komunikaty ---------- */

.bledy-plikow { display: grid; gap: 8px; margin-bottom: 12px; }

.komunikat {
    border-radius: var(--r);
    padding: 10px 14px;
    border: 1px solid transparent;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.komunikat .znak { font-weight: 700; flex: none; width: 18px; text-align: center; }
.komunikat.blad { background: var(--blad-tlo); color: var(--blad); border-color: color-mix(in srgb, var(--blad) 30%, transparent); }
.komunikat.ostrzezenie { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); border-color: color-mix(in srgb, var(--ostrzezenie) 30%, transparent); }
.komunikat.info { background: var(--info-tlo); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.komunikat.ok { background: var(--ok-tlo); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.komunikat .tresc { color: var(--tekst); }
.komunikat .tresc b { font-weight: 650; }

/* ---------- wybor karty i naglowek karty ---------- */

.wybor-karty { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.wybor-tytul { color: var(--tekst-2); font-size: 12.5px; font-weight: 600; margin-right: 2px; }

.karta-chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--linia);
    background: var(--panel);
    border-radius: 8px;
    max-width: 100%;
}

.karta-chip.wybrana { border-color: var(--akcent); background: var(--akcent-tlo); }

.karta-chip-wybor {
    display: block;
    color: inherit;
    text-decoration: none;
    border: 0;
    background: none;
    padding: 6px 4px 6px 12px;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.karta-chip-wybor small { display: block; color: var(--tekst-2); }

.zamknij-x {
    border: 0;
    background: none;
    color: var(--tekst-2);
    font-size: 18px;
    line-height: 1;
    width: 34px;
    min-height: 34px;
    border-radius: 8px;
    cursor: pointer;
    flex: none;
    margin-left: auto;
}

.zamknij-x:hover { color: var(--blad); background: var(--blad-tlo); }
.zamknij-x:focus-visible, .karta-chip-wybor:focus-visible, .karta-dodaj:focus-visible,
.sekcja-przelacznik:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }

.karta-dodaj {
    border: 1px dashed var(--linia);
    background: none;
    border-radius: 8px;
    padding: 0 12px;
    min-height: 44px;
    cursor: pointer;
    color: var(--akcent);
    font-weight: 600;
}

.karta-dodaj:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.karta-dodaj.neutralny { color: var(--tekst-2); }
.karta-dodaj.neutralny:hover { color: var(--blad); border-color: var(--blad); background: var(--blad-tlo); }

.karta-naglowek {
    background: var(--panel);
    border: 1px solid var(--linia);
    border-radius: var(--r);
    box-shadow: var(--cien);
    padding: 14px 16px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.kierowca-nazwa { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.kierowca-dane { color: var(--tekst-2); display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 2px; }
.kierowca-dane .mono { color: var(--tekst); }

.znaczki { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.znaczek {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--panel-2);
    border: 1px solid var(--linia);
    white-space: nowrap;
}

.znaczek.gen { background: var(--akcent-tlo); color: var(--akcent); border-color: transparent; }
.znaczek.blad { background: var(--blad-tlo); color: var(--blad); border-color: transparent; }
.znaczek.ostrzezenie { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); border-color: transparent; }
.znaczek.info { background: var(--info-tlo); color: var(--info); border-color: transparent; }
.znaczek.ok { background: var(--ok-tlo); color: var(--ok); border-color: transparent; }
button.znaczek, a.znaczek { cursor: pointer; text-decoration: none; }
a.znaczek:hover { filter: brightness(.96); }

.eksport { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- zakladki ---------- */

.zakladki {
    display: flex;
    gap: 2px;
    margin: 14px 0 0;
    box-shadow: inset 0 -1px 0 var(--linia);
    overflow-x: auto;
    overflow-y: hidden;              /* bez pionowego paska przy przewijaniu w poziomie */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.zakladki::-webkit-scrollbar { display: none; }

.zakladka {
    flex: none;
    display: inline-block;
    text-decoration: none;
    border: 0;
    background: none;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--tekst-2);
    font-weight: 560;
    white-space: nowrap;
    line-height: 1.3;
}

.zakladka:hover { color: var(--tekst); }
.zakladka[aria-selected="true"] { color: var(--akcent); box-shadow: inset 0 -2px 0 var(--akcent); }
.zakladka .licznik {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    font-size: 11.5px;
    background: var(--panel-2);
    border: 1px solid var(--linia);
    color: var(--tekst-2);
}

.zakladka .licznik.alarm { background: var(--blad-tlo); color: var(--blad); border-color: transparent; }
.zakladka .licznik.uwaga { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); border-color: transparent; }

.panel { padding-top: 14px; display: grid; gap: 14px; }

/* ---------- karty tresci ---------- */

.sekcja {
    background: var(--panel);
    border: 1px solid var(--linia);
    border-radius: var(--r);
    box-shadow: var(--cien);
    overflow: hidden;
}

.sekcja-naglowek {
    border-bottom: 1px solid var(--linia-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sekcja.zwinieta .sekcja-naglowek { border-bottom: 0; }

.sekcja-przelacznik {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 0;
    background: none;
    padding: 11px 16px;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.sekcja-przelacznik:hover { background: var(--panel-2); }
.sekcja-przelacznik h2 { display: block; }
.sekcja-naglowek .opis { display: block; color: var(--tekst-2); font-size: 12.5px; font-weight: 400; }

.strzalka {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-right: 2px solid var(--tekst-2);
    border-bottom: 2px solid var(--tekst-2);
    transform: rotate(45deg);
    transition: transform .15s;
}

.sekcja.zwinieta .strzalka, [aria-expanded="false"] > .strzalka, [aria-expanded="false"] .strzalka { transform: rotate(-45deg); }

.pasek-panelu { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: -6px; }
.pokaz-wiecej-ramka { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--linia-2); }
.sekcja-tresc { padding: 14px 16px; }
.sekcja-tresc.bez-odstepu { padding: 0; }
.siatka-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }

.kafle {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.kafel {
    background: var(--panel);
    border: 1px solid var(--linia);
    border-radius: var(--r);
    padding: 11px 13px;
    box-shadow: var(--cien);
}

.kafel .etykieta { color: var(--tekst-2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.kafel .wartosc { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kafel .dopisek { color: var(--tekst-3); font-size: 12px; }

.kropka { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.kropka.jazda { background: var(--jazda); }
.kropka.praca { background: var(--praca); }
.kropka.dyspozycja { background: var(--dyspozycja); }
.kropka.odpoczynek { background: var(--odpoczynek); }
.kropka.brak_karty { background: repeating-linear-gradient(135deg, var(--brak-karty) 0 2px, transparent 2px 4px); border: 1px solid var(--brak-karty); }

/* ---------- tabele ---------- */

.tabela-ramka { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }

th, td {
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid var(--linia-2);
    vertical-align: middle;
}

th {
    font-size: 12px;
    color: var(--tekst-2);
    font-weight: 600;
    background: var(--panel-2);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

tbody tr:hover td { background: color-mix(in srgb, var(--akcent-tlo) 45%, transparent); }
td.liczba, th.liczba { text-align: right; white-space: nowrap; }
td.srodek, th.srodek { text-align: center; white-space: nowrap; }
table.stale { table-layout: fixed; min-width: 760px; }
table.stale td { overflow-wrap: anywhere; }
td.nowrap { white-space: nowrap; }
tr.wyroznij td { background: var(--blad-tlo); }
tr.przygaszony td { color: var(--tekst-3); }

.dane-tabela th { width: 38%; position: static; background: none; font-size: 13px; font-weight: 500; white-space: normal; }
.dane-tabela td { font-weight: 550; }

.mono { font-family: var(--mono); font-size: 12.5px; }
.szary { color: var(--tekst-2); }
.maly-tekst { font-size: 12px; }
.pusto { padding: 18px 16px; color: var(--tekst-2); }

/* ---------- dni i os czasu ---------- */

.legenda { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--tekst-2); font-size: 12.5px; align-items: center; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }

.filtry { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.dni { display: grid; }

.dzien-wiersz {
    display: grid;
    grid-template-columns: 112px minmax(260px, 1fr) repeat(6, 58px) 52px;
    gap: 0 10px;
    align-items: center;
    padding: 6px 16px;
    border-bottom: 1px solid var(--linia-2);
    cursor: pointer;
    background: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    width: 100%;
    text-align: left;
}

.dzien-wiersz:hover { background: color-mix(in srgb, var(--akcent-tlo) 50%, transparent); }
.dzien-wiersz.otwarty { background: var(--akcent-tlo); }
.dzien-wiersz.naglowek-dni { cursor: default; background: var(--panel-2); position: sticky; top: 0; z-index: 2; font-size: 12px; color: var(--tekst-2); font-weight: 600; }
.dzien-wiersz.luka { cursor: default; color: var(--tekst-3); font-style: italic; }
.dzien-wiersz.miesiac-wiersz { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; background: var(--panel-2); padding: 9px 16px; }
.miesiac-nazwa { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; text-transform: capitalize; }
.miesiac-nazwa .strzalka { margin-top: -3px; }
.dzien-wiersz.luka:hover { background: none; }

.dzien-data { font-weight: 600; white-space: nowrap; }
.dzien-data small { display: block; color: var(--tekst-2); font-weight: 500; }
.dzien-suma { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.dzien-suma.zero { color: var(--tekst-3); }

.os { width: 100%; height: 34px; display: block; }
.os .tlo { fill: var(--brak-danych); }
.os .godz { stroke: var(--linia); stroke-width: 1; vector-effect: non-scaling-stroke; }
.os .godz.co6 { stroke: var(--tekst-3); opacity: .5; }
.os .jazda { fill: var(--jazda); }
.os .praca { fill: var(--praca); }
.os .dyspozycja { fill: var(--dyspozycja); }
.os .odpoczynek { fill: var(--odpoczynek); }
.os .brak_karty { fill: url(#kreski); }
.os .reczny { stroke: var(--tekst); stroke-width: 1.2; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.os .zaloga { fill: var(--tekst); opacity: .55; }

.os.duza { height: 56px; }

/* najechanie: ten sam rodzaj aktywnosci w dobie wyrozniony, reszta przygaszona */
.os rect[data-rodzaj] { transition: opacity .12s; }
.os .godz, .os .zaloga, .os .nakladanie { pointer-events: none; }
.os[data-podswietl] rect[data-rodzaj] { opacity: .22; }
.os[data-podswietl="jazda"] rect[data-rodzaj="jazda"],
.os[data-podswietl="praca"] rect[data-rodzaj="praca"],
.os[data-podswietl="dyspozycja"] rect[data-rodzaj="dyspozycja"],
.os[data-podswietl="odpoczynek"] rect[data-rodzaj="odpoczynek"],
.os[data-podswietl="brak_karty"] rect[data-rodzaj="brak_karty"] { opacity: 1; }
.os rect.aktywny { stroke: var(--tekst); stroke-width: 2; vector-effect: non-scaling-stroke; }

.dymek {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    min-width: 150px;
    max-width: 280px;
    padding: 7px 10px;
    border: 2px solid var(--kolor-dymka, var(--tekst-2));
    border-radius: 7px;
    background: #22272e;
    color: #f0f3f6;
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    font-variant-numeric: tabular-nums;
    white-space: pre-wrap;
}
.dymek b { display: block; font-size: 13px; margin-bottom: 1px; }
.dymek strong { font-weight: 650; }
.dymek .dymek-data { color: #adbac7; }
.dymek .dymek-cechy { color: #d1d9e0; font-style: italic; }
.dymek .dymek-kolizja { color: #ff9492; }

/* przyblizanie osi doby w szczegolach */
.os-zoom { display: grid; gap: 4px; }
.os-zoom-pasek { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.zoom-przyciski { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.zoom-przyciski .przycisk { min-width: 30px; }
.zoom-przyciski .przycisk:disabled { opacity: .45; cursor: default; }
.zoom-poziom { min-width: 36px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--tekst-2); }
.os-zoom-siatka { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
.os-nazwy, .os-tresc { display: grid; gap: 4px; align-content: start; }
.os-nazwy-skala, .os-godziny { height: 15px; }
.os-nazwy-os { height: 56px; display: flex; align-items: center; justify-content: flex-end; }
.os-przewijanie { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.os-tresc { min-width: 100%; }
.os-godziny { position: relative; font-size: 11px; color: var(--tekst-3); }
.os-godzina { position: absolute; top: 0; transform: translateX(-50%); display: none; }
.os-godzina.co3, .os-zoom.szczegolowa .os-godzina { display: block; }
.os-godzina.pierwsza { transform: none; }
.os-godzina.ostatnia { transform: translateX(-100%); }
.tor-rzedy { display: grid; gap: 3px; }
.tor-rzad, .tor-rzedy .tor-nazwa { height: 14px; display: flex; align-items: center; }
.tor-rzedy .tor-nazwa { justify-content: flex-end; }
.tor-rzad .tor-pas { width: 100%; }
@media (hover: none) { .tylko-mysz { display: none; } }
.os .nakladanie { fill: var(--blad); opacity: .16; }

.tor-nazwa { font-size: 12px; color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.tor-nazwa.kolizja { color: var(--blad); font-weight: 600; }
.tor-pas { position: relative; height: 10px; background: var(--linia-2); border-radius: 3px; }
.tor-odcinek { position: absolute; top: 0; bottom: 0; background: var(--dyspozycja); opacity: .55; border-radius: 3px; }
.tor-odcinek.kolizja { background: var(--blad); opacity: .65; }
tr.kolizja td { background: color-mix(in srgb, var(--blad-tlo) 75%, transparent); }
.kreski-tlo { fill: var(--brak-danych); }
.kreski-linia { fill: var(--brak-karty); }

.os-skala { display: flex; justify-content: space-between; color: var(--tekst-3); font-size: 11px; padding: 0 1px; }

.dzien-szczegoly {
    padding: 10px 16px 16px;
    border-bottom: 1px solid var(--linia);
    background: var(--panel-2);
    display: grid;
    gap: 12px;
}

.dzien-szczegoly .os { height: 56px; }
.dzien-szczegoly table { background: var(--panel); border: 1px solid var(--linia-2); border-radius: 8px; }
.dzien-szczegoly h4 { font-size: 12.5px; color: var(--tekst-2); margin-bottom: 4px; }

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

.pasek { position: relative; height: 10px; background: var(--linia-2); border-radius: 999px; overflow: hidden; min-width: 120px; }
.pasek span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--jazda); border-radius: 999px; }
.pasek.praca span { background: var(--praca); }
.pasek .limit { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tekst); opacity: .6; }
.pasek.ponad span { background: var(--blad); }

/* ---------- walidacja ---------- */

.lista-uwag { display: grid; gap: 8px; padding: 14px 16px; }
.komunikat .tresc { min-width: 0; flex: 1; }
.miejsca-uwagi { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; }
.miejsca-uwagi li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding-left: 12px; position: relative; }
.miejsca-uwagi li::before { content: ''; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.miejsce-kiedy { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.miejsce-opis { color: var(--tekst-2); }
.link-przycisk { border: 0; background: none; padding: 0; color: var(--akcent); cursor: pointer; text-decoration: underline; font-size: 12.5px; }
.link-przycisk:hover { text-decoration: none; }

/* ---------- struktura pliku ---------- */

.hex {
    font-family: var(--mono);
    font-size: 12px;
    white-space: pre;
    overflow-x: auto;
    padding: 10px 14px;
    background: var(--panel-2);
    border-top: 1px solid var(--linia-2);
    margin: 0;
}

tr.klikalny { cursor: pointer; }
tr.wybrany td { background: var(--akcent-tlo); }
tr.pominiety td { background: var(--ostrzezenie-tlo); }

/* ---------- male ekrany ---------- */

@media (max-width: 900px) {
    .dzien-wiersz { grid-template-columns: 96px minmax(0, 1fr) repeat(2, 54px); }
    .dzien-wiersz .tylko-szeroki { display: none; }
    .siatka-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* Naglowek nie przykleja sie - na telefonie zabieralby pol ekranu. */
    .naglowek { position: static; }
    .naglowek-wnetrze { padding: 10px 12px; }
    .sterowanie { width: 100%; }
    .pole-wyboru { flex: 1; min-width: 0; }
    .pole-wyboru select { flex: 1; min-width: 0; width: 100%; }
    main { padding: 10px; }
    .stopka { padding: 12px 12px 24px; }
    .karta-naglowek { padding: 12px; gap: 10px; }
    .kierowca-nazwa { font-size: 18px; }
    .eksport { width: 100%; }
    .eksport .przycisk { flex: 1 1 auto; }
    .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kafel .wartosc { font-size: 18px; }
    .karta-chip { flex: 1 1 100%; }
    .karta-dodaj { flex: 1 1 auto; }
    .sekcja-przelacznik { padding: 10px 12px; }
    .sekcja-tresc { padding: 12px; }
    .pasek-panelu { justify-content: stretch; }
    .pasek-panelu .przycisk { flex: 1; }
    .upusc { padding: 30px 14px; }
    .upusc-tytul { font-size: 16px; }

    .dzien-wiersz { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 12px; }
    .dzien-wiersz > svg.os { grid-column: 1 / -1; grid-row: 2; }
    .dzien-wiersz .dzien-suma { display: none; }
    .dzien-wiersz .dzien-suma.jazda-suma { display: block; grid-column: 2; grid-row: 1; align-self: center; font-weight: 600; }
    .dzien-wiersz .dzien-suma.jazda-suma::before { content: 'jazda '; color: var(--tekst-2); font-weight: 400; }
    .dzien-wiersz.naglowek-dni { display: none; }
    .dzien-wiersz.luka { display: flex; flex-wrap: wrap; gap: 4px 10px; }
    .dzien-szczegoly { padding: 10px 12px 14px; }
    .os-zoom-siatka { grid-template-columns: 64px minmax(0, 1fr); }

    /* Tabele jako karty: kazdy wiersz to blok, kazda komorka z etykieta kolumny. */
    .tabela-ramka table:not(.dane-tabela) thead { display: none; }
    .tabela-ramka table.stale { min-width: 0; table-layout: auto; }
    .tabela-ramka table:not(.dane-tabela), .tabela-ramka table:not(.dane-tabela) tbody,
    .tabela-ramka table:not(.dane-tabela) tr, .tabela-ramka table:not(.dane-tabela) td { display: block; width: 100%; }
    .tabela-ramka table:not(.dane-tabela) tr { padding: 8px 12px; border-bottom: 1px solid var(--linia); }
    .tabela-ramka table:not(.dane-tabela) td {
        border: 0;
        padding: 2px 0;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        text-align: right;
        white-space: normal;
    }
    .tabela-ramka table:not(.dane-tabela) td::before {
        content: attr(data-etykieta);
        color: var(--tekst-2);
        font-size: 12px;
        text-align: left;
        flex: none;
        max-width: 45%;
    }
    .tabela-ramka table:not(.dane-tabela) td:not([data-etykieta])::before { content: none; }
    .tabela-ramka table:not(.dane-tabela) td:not([data-etykieta]) { justify-content: flex-start; }
    .tabela-ramka td .pasek { flex: 1; }
    /* Przedzialy doby: jeden przedzial w jednej-dwoch liniach, bez etykiet. */
    .tabela-ramka table.zwarta tr { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 6px 12px; }
    .tabela-ramka table.zwarta td { display: inline; width: auto; padding: 0; text-align: left; }
    .tabela-ramka table.zwarta td::before { content: none; }
    .tabela-ramka table.zwarta td:empty { display: none; }
    .tabela-ramka table.zwarta td:nth-child(1)::after { content: ' –'; }
    .tabela-ramka table.zwarta td:nth-child(3) { color: var(--tekst-2); }
    .tabela-ramka table.zwarta td:nth-child(5), .tabela-ramka table.zwarta td:last-child { color: var(--tekst-2); font-size: 12.5px; }
    .tabela-ramka table.zwarta tr td, .tabela-ramka table.zwarta tbody tr:hover td { background: none; }
    .tabela-ramka table.zwarta tr.kolizja { background: color-mix(in srgb, var(--blad-tlo) 75%, transparent); }
    .dane-tabela th { width: 42%; }
}

/* ---------- druk ---------- */

@media print {
    :root { --tlo: #fff; --cien: none; }
    .naglowek, .zakladki, .eksport, .filtry button, .stopka, #wybor-karty, .start, .bledy-plikow { display: none !important; }
    main { max-width: none; padding: 0; }
    /* Duze sekcje lamia sie normalnie - inaczej pierwsza strona zostaje pusta. */
    .panel, .dzien-szczegoly { display: block; }
    .panel > * + *, .dzien-szczegoly > * + * { margin-top: 10px; }
    .sekcja { box-shadow: none; break-inside: auto; overflow: visible; }
    .karta-naglowek, .kafel, .dzien-wiersz, .komunikat, tr { break-inside: avoid; box-shadow: none; }
    th { position: static; }
    body { font-size: 11px; }
    .os-zoom-pasek, .dymek { display: none !important; }
    .os-tresc { width: 100% !important; }
    .os-przewijanie { overflow: visible; }
}