:root {
    color-scheme: light;
    --tlo: #f4f6f9;
    --karta: #ffffff;
    --pole: #ffffff;
    --hover: #f8fafc;
    --tekst: #1f2937;
    --tekst2: #6b7280;
    --tekst3: #9ca3af;
    --naglowek: #334155;
    --ramka: #e2e6ec;
    --ramka-hover: #94a3b8;
    --akcent: #2563eb;
    --blad: #b91c1c;
    --sukces: #15803d;
    --ostrzezenie: #c2410c;
    --pasek: #1e293b;
    --pasek-hover: #334155;
    --pasek-tekst: #cbd5e1;
    --pasek-ramka: #475569;
    --postep-tlo: #e5e7eb;
    --postep-kreska: #111827;
    --kropka-opis: #334155;
    --urlop: #ff0000;
    --odpracowanie: #f4b183;
    --wolne: #c5e0b4;
    --t4d: #c9d7f0;
    --inne: #e2c6f0;
    --planowany: #ffd966;
    --korekta: #7c3aed;
    --wsk-info: #9dc3e6;
    --wsk-dobrze: #a9d18e;
    --wsk-uwaga: #ffff00;
    --wsk-zle: #ff0000;
    --wsk-kryt: #c00000;
}

/* Motyw ciemny: automatycznie wg systemu (gdy nie wybrano „jasny") albo wybrany ręcznie */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --tlo: #0f172a;
        --karta: #1e293b;
        --pole: #0f172a;
        --hover: #273449;
        --tekst: #e5e7eb;
        --tekst2: #9ca3af;
        --tekst3: #64748b;
        --naglowek: #cbd5e1;
        --ramka: #334155;
        --ramka-hover: #64748b;
        --akcent: #3b82f6;
        --blad: #f87171;
        --sukces: #4ade80;
        --ostrzezenie: #fb923c;
        --pasek: #020617;
        --pasek-hover: #1e293b;
        --pasek-tekst: #cbd5e1;
        --pasek-ramka: #334155;
        --postep-tlo: #334155;
        --postep-kreska: #f8fafc;
        --kropka-opis: #cbd5e1;
        --urlop: #dc2626;
        --odpracowanie: #9a5b2e;
        --wolne: #2f4f2a;
        --t4d: #28406b;
        --inne: #553a6e;
    --planowany: #8a6d0b;
        --korekta: #a78bfa;
        --wsk-info: #1d4f7d;
    --wsk-dobrze: #2e6b34;
        --wsk-uwaga: #facc15;
        --wsk-zle: #dc2626;
        --wsk-kryt: #991b1b;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --tlo: #0f172a;
    --karta: #1e293b;
    --pole: #0f172a;
    --hover: #273449;
    --tekst: #e5e7eb;
    --tekst2: #9ca3af;
    --tekst3: #64748b;
    --naglowek: #cbd5e1;
    --ramka: #334155;
    --ramka-hover: #64748b;
    --akcent: #3b82f6;
    --blad: #f87171;
    --sukces: #4ade80;
    --ostrzezenie: #fb923c;
    --pasek: #020617;
    --pasek-hover: #1e293b;
    --pasek-tekst: #cbd5e1;
    --pasek-ramka: #334155;
    --postep-tlo: #334155;
    --postep-kreska: #f8fafc;
    --kropka-opis: #cbd5e1;
    --urlop: #dc2626;
    --odpracowanie: #9a5b2e;
    --wolne: #2f4f2a;
    --t4d: #28406b;
    --inne: #553a6e;
    --planowany: #8a6d0b;
    --korekta: #a78bfa;
    --wsk-info: #1d4f7d;
    --wsk-dobrze: #2e6b34;
    --wsk-uwaga: #facc15;
    --wsk-zle: #dc2626;
    --wsk-kryt: #991b1b;
}

/* wydruk zawsze w jasnym motywie */
@media print {
    :root:root:root {
        color-scheme: light;
        --tlo: #f4f6f9;
        --karta: #ffffff;
        --pole: #ffffff;
        --hover: #f8fafc;
        --tekst: #1f2937;
        --tekst2: #6b7280;
        --tekst3: #9ca3af;
        --naglowek: #334155;
        --ramka: #e2e6ec;
        --ramka-hover: #94a3b8;
        --akcent: #2563eb;
        --blad: #b91c1c;
        --sukces: #15803d;
        --ostrzezenie: #c2410c;
        --pasek: #1e293b;
        --pasek-hover: #334155;
        --pasek-tekst: #cbd5e1;
        --pasek-ramka: #475569;
        --postep-tlo: #e5e7eb;
        --postep-kreska: #111827;
        --kropka-opis: #334155;
        --urlop: #ff0000;
        --odpracowanie: #f4b183;
        --wolne: #c5e0b4;
        --t4d: #c9d7f0;
        --inne: #e2c6f0;
    --planowany: #ffd966;
        --korekta: #7c3aed;
        --wsk-info: #9dc3e6;
    --wsk-dobrze: #a9d18e;
        --wsk-uwaga: #ffff00;
        --wsk-zle: #ff0000;
        --wsk-kryt: #c00000;
    }
}

* { box-sizing: border-box; }

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

h1:focus { outline: none; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

.pasek {
    display: flex; align-items: center; gap: 2rem;
    background: var(--pasek); color: #fff; padding: .6rem 1.5rem;
    position: sticky; top: 0; z-index: 50;
}
.pasek .logo { color: #fff; font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.pasek nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.pasek nav a { color: var(--pasek-tekst); text-decoration: none; padding: .35rem .8rem; border-radius: 6px; }
.pasek nav a:hover { background: var(--pasek-hover); color: #fff; }
.pasek nav a.active { background: var(--akcent); color: #fff; }

.tresc { padding: 1.25rem 1.5rem 3rem; max-width: 1700px; margin: 0 auto; }

.karta {
    background: var(--karta); border: 1px solid var(--ramka); border-radius: 10px;
    padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

button {
    font: inherit; cursor: pointer; border: 1px solid var(--ramka); background: var(--pole);
    border-radius: 6px; padding: .35rem .8rem; color: var(--tekst);
}
button:hover:not(:disabled) { border-color: var(--ramka-hover); }
a.przycisk {
    display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; color: var(--tekst);
    border: 1px solid var(--ramka); background: var(--pole); border-radius: 6px; padding: .35rem .8rem;
}
a.przycisk:hover { border-color: var(--ramka-hover); }
button:disabled { opacity: .5; cursor: default; }
button.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
button.niebezp { color: var(--blad); }
button.maly { padding: .1rem .45rem; font-size: .85rem; }

input, select, textarea {
    font: inherit; border: 1px solid var(--ramka); border-radius: 6px; padding: .3rem .5rem; background: var(--pole); color: var(--tekst);
}
input[type=number] { width: 6rem; }
label { color: var(--tekst2); font-size: .85rem; }

.wiersz { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.kolumna { display: flex; flex-direction: column; gap: .25rem; }
.odstep { flex: 1; }
.szary { color: var(--tekst2); }
.blad { color: var(--blad); }
.sukces { color: var(--sukces); }

/* ---------- Kalendarz ---------- */
.naglowek-kal { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.nawigacja-roku { display: flex; align-items: center; gap: .25rem; }
.nawigacja-roku .rok { font-size: 1.8rem; font-weight: 700; min-width: 5.5rem; text-align: center; }

.uklad-kal { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .uklad-kal { grid-template-columns: 1fr; } }

.miesiace { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: .75rem; }
.miesiac { padding: .6rem .7rem .7rem; }
.miesiac h3 { margin: 0 0 .4rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; text-align: center; color: var(--naglowek); }
.miesiac table { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.miesiac th { font-size: .72rem; color: var(--tekst2); font-weight: 600; padding: 2px 0; }
.miesiac th.tydz, .miesiac td.tydz { width: 1.7rem; font-size: .68rem; color: var(--tekst3); text-align: center; font-weight: 400; }
.miesiac th.suma, .miesiac td.suma { width: 2.1rem; text-align: center; }
.miesiac td.suma { font-weight: 700; font-size: .8rem; color: var(--blad); }
.miesiac td.suma.ujemna { color: var(--ostrzezenie); }
.miesiac td.suma .notka { cursor: help; font-size: .7rem; }

.dzien {
    height: 2rem; text-align: center; vertical-align: middle; border-radius: 5px;
    font-size: .85rem; cursor: pointer; position: relative; user-select: none;
}
.dzien:hover { outline: 2px solid var(--ramka-hover); }
.dzien.pusty { cursor: default; }
.dzien.pusty:hover { outline: none; }
.dzien.wolny { background: var(--wolne); }
.dzien.t4d { background: var(--t4d); }
.dzien.inne { background: var(--inne); }
.dzien.planowany { background: var(--planowany); font-weight: 600; }
.dzien.odpracowanie { background: var(--odpracowanie); }
.dzien.urlop { background: var(--urlop); color: #fff; font-weight: 700; }
.dzien.dzis { box-shadow: inset 0 0 0 2px var(--akcent); }
.dzien .kropka { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--korekta); }
.dzien .opis-ikona { position: absolute; bottom: 1px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--kropka-opis); opacity: .6; }
.dzien.swieto-sobota::after {
    content: "!"; position: absolute; top: 0; left: 3px; font-size: .7rem; font-weight: 700; color: var(--ostrzezenie);
}

/* pędzle */
.pedzle { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.pedzel { display: inline-flex; align-items: center; gap: .4rem; }
.pedzel.aktywny { border-color: var(--akcent); box-shadow: 0 0 0 2px rgba(37,99,235,.25); font-weight: 600; }
.probka { width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); display: inline-block; flex: none; }
.probka.urlop { background: var(--urlop); }
.probka.odpracowanie { background: var(--odpracowanie); }
.probka.t4d { background: var(--t4d); }
.probka.planowany { background: var(--planowany); }
.probka.inne { background: var(--inne); }
.probka.wolny { background: var(--wolne); }
.probka.korekta { background: var(--korekta); border-radius: 50%; }
.probka.gumka { background: repeating-linear-gradient(45deg, var(--pole) 0 3px, var(--ramka-hover) 3px 6px); }

/* podsumowanie */
.podsumowanie table { width: 100%; border-collapse: collapse; }
.podsumowanie td { padding: .35rem .3rem; border-bottom: 1px solid var(--ramka); }
.podsumowanie td.liczba { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wsk { border-radius: 4px; padding: .1rem .45rem; display: inline-block; min-width: 3.5rem; text-align: right; }
.wsk.Info { background: var(--wsk-info); color: var(--tekst); }
.wsk.Dobrze { background: var(--wsk-dobrze); color: var(--tekst); }
.wsk.Uwaga { background: var(--wsk-uwaga); color: #111827; }
.wsk.Zle { background: var(--wsk-zle); color: #fff; font-weight: 700; }
.wsk.Krytyczny { background: var(--wsk-kryt); color: #fff; font-weight: 700; }
.pasek-postepu { height: 8px; background: var(--postep-tlo); border-radius: 4px; position: relative; overflow: visible; margin: .5rem 0 .2rem; }
.pasek-postepu .zuzycie { position: absolute; left: 0; top: 0; bottom: 0; background: #ef4444; border-radius: 4px; }
/* kolor paska wg zużycia względem upływu roku: poniżej planu zielony, w granicy ±5% żółty, powyżej czerwony */
.pasek-postepu .zuzycie.Dobrze { background: #22c55e; }
.pasek-postepu .zuzycie.Uwaga { background: #eab308; }
.pasek-postepu .czas { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--postep-kreska); }

.boczny { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 4rem; }
.lista-mala { list-style: none; margin: 0; padding: 0; }
.lista-mala li { padding: .3rem 0; border-bottom: 1px dashed var(--ramka); display: flex; gap: .5rem; align-items: center; }

/* tabele */
table.tabela { width: 100%; border-collapse: collapse; }
table.tabela th { text-align: left; font-size: .8rem; color: var(--tekst2); font-weight: 600; padding: .4rem .5rem; border-bottom: 2px solid var(--ramka); white-space: nowrap; }
table.tabela td { padding: .35rem .5rem; border-bottom: 1px solid var(--ramka); vertical-align: middle; }
table.tabela td.liczba, table.tabela th.liczba { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela tr:hover td { background: var(--hover); }
table.tabela input[type=text] { width: 100%; }

.znacznik { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* modal */
.zaslona { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.okno { background: var(--karta); border-radius: 12px; padding: 1.25rem 1.5rem; width: min(600px, 94vw); max-height: 90vh; overflow: auto; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.okno .stopka { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

.komunikat { position: fixed; bottom: 1.25rem; right: 1.25rem; background: #1e293b; color: #fff; padding: .7rem 1rem; border-radius: 8px; z-index: 200; box-shadow: 0 8px 20px rgba(0,0,0,.25); max-width: 420px; }
.komunikat.blad { background: #b91c1c; }

#blazor-error-ui {
    background: lightyellow; color: #111827; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none;
    left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Wystąpił błąd."; }


/* ---------- logowanie ---------- */
.uzytkownik { display: flex; align-items: center; gap: .75rem; }
.uzytkownik a { color: var(--pasek-tekst); text-decoration: none; }
.uzytkownik a:hover { color: #fff; }
.uzytkownik form { margin: 0; }
button.wyloguj { background: transparent; color: var(--pasek-tekst); border-color: var(--pasek-ramka); padding: .25rem .7rem; }
button.wyloguj:hover { color: #fff; border-color: #94a3b8; }

.logowanie-tlo {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 55%, #2563eb 140%);
}
.okno-logowania {
    background: var(--karta); border-radius: 14px; padding: 2rem 2.25rem; width: min(400px, 100%);
    box-shadow: 0 25px 50px rgba(0,0,0,.35); text-align: center;
}
.okno-logowania form { text-align: left; margin-top: 1.25rem; }
.logo-logowania { font-size: 2.6rem; line-height: 1; }
.okno-logowania h1 { margin: .4rem 0 .25rem; font-size: 1.6rem; }
.okno-logowania p { margin: 0; }
.pole { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.pole input { padding: .55rem .7rem; font-size: 1rem; width: 100%; }
.pole input:focus { outline: 2px solid rgba(37,99,235,.35); border-color: var(--akcent); }
.zapamietaj { color: var(--tekst2); font-size: .9rem; margin-bottom: 1rem; display: flex; }
button.szeroki { width: 100%; padding: .65rem; font-size: 1rem; font-weight: 600; }
.validation-message { color: var(--blad); font-size: .85rem; }

/* ---------- przełącznik motywu ---------- */
.motyw { display: inline-flex; border: 1px solid var(--pasek-ramka); border-radius: 8px; overflow: hidden; }
.motyw button {
    background: transparent; border: none; border-radius: 0; padding: .2rem .5rem; font-size: .95rem;
    color: var(--pasek-tekst); opacity: .55; line-height: 1.2;
}
.motyw button + button { border-left: 1px solid var(--pasek-ramka); }
.motyw button:hover { opacity: 1; background: var(--pasek-hover); }
html:not([data-motyw-wybor]) .motyw button[data-m="system"],
html[data-motyw-wybor="system"] .motyw button[data-m="system"],
html[data-motyw-wybor="light"] .motyw button[data-m="light"],
html[data-motyw-wybor="dark"] .motyw button[data-m="dark"] { opacity: 1; background: var(--akcent); color: #fff; }
.motyw-logowanie { position: fixed; top: 1rem; right: 1rem; }
.motyw-logowanie .motyw, .motyw-logowanie .jezyk { border-color: rgba(255,255,255,.25); }

/* ---------- zakładki ---------- */
.zakladki { display: flex; gap: .25rem; border-bottom: 2px solid var(--ramka); margin-bottom: 1rem; }
.zakladka {
    background: transparent; border: none; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
    padding: .5rem 1rem; margin-bottom: -2px; color: var(--tekst2); font-weight: 600;
    display: inline-flex; align-items: center; gap: .45rem;
}
.zakladka:hover:not(:disabled) { color: var(--tekst); background: var(--hover); }
.zakladka.aktywna { color: var(--akcent); border-bottom-color: var(--akcent); }
.zakladka .licznik {
    background: var(--ramka); color: var(--tekst); border-radius: 999px; padding: 0 .5rem;
    font-size: .75rem; font-weight: 600; min-width: 1.5rem; text-align: center;
}
.zakladka.aktywna .licznik { background: var(--akcent); color: #fff; }

/* ---------- menu rozwijane w pasku ---------- */
.menu-rozwijane { position: relative; }
.menu-przycisk {
    background: transparent; border: none; color: var(--pasek-tekst); padding: .35rem .8rem; border-radius: 6px;
    display: inline-flex; align-items: center; gap: .3rem;
}
.menu-przycisk:hover:not(:disabled) { background: var(--pasek-hover); color: #fff; }
.menu-przycisk.active { background: var(--akcent); color: #fff; }
.menu-przycisk .strzalka { font-size: .75rem; transition: transform .15s; }
.menu-rozwijane.otwarte .strzalka { transform: rotate(180deg); }
.menu-zaslona { position: fixed; inset: 0; z-index: 60; }
.menu-lista {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 61; min-width: 11rem;
    background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px; padding: .3rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.2); display: flex; flex-direction: column;
}
.pasek nav .menu-lista a { color: var(--tekst); padding: .45rem .7rem; border-radius: 6px; }
.pasek nav .menu-lista a:hover { background: var(--hover); color: var(--tekst); }
.pasek nav .menu-lista a.active { background: var(--akcent); color: #fff; }

/* ---------- eksport ---------- */
.lata-eksport { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem; }
.rok-eksport {
    display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--ramka);
    border-radius: 8px; cursor: pointer; color: var(--tekst); font-size: .9rem; flex-wrap: wrap;
}
.rok-eksport:hover { border-color: var(--ramka-hover); }
.rok-eksport.zaznaczony { border-color: var(--akcent); background: var(--hover); }
.rok-eksport .rok-nr { font-weight: 700; font-size: 1rem; }
.rok-eksport .szary { font-size: .78rem; width: 100%; padding-left: 1.6rem; }
a.przycisk.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; font-weight: 600; }

/* ---------- wykresy (paleta kategoryczna zwalidowana: CVD/kontrast, jasny i ciemny) ---------- */
:root {
    --seria-1: #2a78d6;
    --seria-2: #eb6834;
    --seria-3: #1baf7a;
    --seria-4: #eda100;
    --wykres-siatka: #e9edf2;
    --wykres-os: #c3c2b7;
    --wykres-etykieta: #6b7280;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --seria-1: #3987e5;
        --seria-2: #d95926;
        --seria-3: #199e70;
        --seria-4: #c98500;
        --wykres-siatka: #2a3649;
        --wykres-os: #475569;
        --wykres-etykieta: #94a3b8;
    }
}
:root[data-theme="dark"] {
    --seria-1: #3987e5;
    --seria-2: #d95926;
    --seria-3: #199e70;
    --seria-4: #c98500;
    --wykres-siatka: #2a3649;
    --wykres-os: #475569;
    --wykres-etykieta: #94a3b8;
}

.wykresy { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .wykresy { grid-template-columns: 1fr; } }
.wykres { margin: 0; }
.wykres figcaption { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .5rem; }
.wykres-tytul { font-weight: 600; font-size: 1rem; color: var(--tekst); }
.wykres-podtytul { font-size: .8rem; color: var(--tekst2); }
.wykres-legenda { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--tekst2); }
.wykres-legenda li { display: inline-flex; align-items: center; gap: .35rem; }
.wykres-probka { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; flex: none; }
.wykres-probka.linia { height: 3px; width: .9rem; border-radius: 2px; }
.wykres-obszar { position: relative; }
.wykres svg { width: 100%; height: auto; display: block; overflow: visible; }
.wykres-siatka { stroke: var(--wykres-siatka); stroke-width: 1; }
.wykres-os { stroke: var(--wykres-os); stroke-width: 1; }
.wykres-etykieta-y, .wykres-etykieta-x { fill: var(--wykres-etykieta); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.wykres-etykieta-serii { fill: var(--tekst2); font-size: 10.5px; }
.wykres-linia { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wykres-punkt { stroke: var(--karta); stroke-width: 2; }
.wykres-podswietlenie { fill: var(--hover); }
.wykres-pole { fill: transparent; cursor: default; }
.wykres-dymek {
    position: absolute; top: 0; transform: translateX(12px); pointer-events: none; z-index: 5;
    background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px; padding: .45rem .6rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.18); font-size: .8rem; min-width: 10rem; color: var(--tekst);
}
.wykres-dymek.z-lewej { transform: translateX(calc(-100% - 12px)); }
.wykres-dymek-tytul { font-weight: 700; margin-bottom: .25rem; }
.wykres-dymek-wiersz { display: grid; grid-template-columns: .9rem 1fr auto; align-items: center; gap: .4rem; padding: .08rem 0; color: var(--tekst2); }
.wykres-dymek-wiersz b { color: var(--tekst); font-variant-numeric: tabular-nums; }
.wykres-dymek-wiersz.razem { border-top: 1px solid var(--ramka); margin-top: .2rem; padding-top: .25rem; }

/* ---------- liczby w polach edycyjnych do prawej ---------- */
input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- widok mobilny ---------- */
@media (max-width: 820px) {
    .pasek { flex-wrap: wrap; gap: .4rem .75rem; padding: .5rem .75rem; }
    .pasek nav { order: 3; width: 100%; gap: .15rem; }
    .pasek nav a, .menu-przycisk { padding: .3rem .55rem; font-size: .92rem; }
    .uzytkownik { gap: .5rem; }
    .uzytkownik .nazwa-uzytkownika { display: none; }
    button.wyloguj { padding: .2rem .55rem; }

    .tresc { padding: .75rem .6rem 2rem; }
    h1 { font-size: 1.25rem; }
    .naglowek-kal { gap: .5rem; margin-bottom: .6rem; }
    .naglowek-kal .odstep { display: none; }
    .nawigacja-roku .rok { font-size: 1.5rem; min-width: 4.5rem; }
    .pedzle { gap: .25rem; }
    .pedzel, .akcje button, .akcje a.przycisk { padding: .3rem .55rem; font-size: .88rem; }
    .akcje { gap: .35rem; }

    .zakladki { overflow-x: auto; }
    .zakladka { padding: .45rem .6rem; font-size: .9rem; white-space: nowrap; }

    .boczny { position: static; }
    .karta { padding: .75rem .8rem; }
    .miesiace { grid-template-columns: 1fr; }

    /* szerokie tabele przewijane w poziomie zamiast rozpychać stronę */
    table.tabela { display: block; overflow-x: auto; white-space: nowrap; }
    table.tabela input[type=text] { min-width: 9rem; }

    .okno { padding: 1rem; }
    .okno .wiersz > * { flex: 1 1 100%; }
    .okno .stopka { flex-wrap: wrap; }
    .komunikat { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }

    .wykresy { grid-template-columns: 1fr; }
    .wykres-dymek { min-width: 8rem; font-size: .75rem; }
}

.przelacz-tryb { margin: 1rem 0 0 !important; font-size: .9rem; color: var(--tekst2); }
.przelacz-tryb a { color: var(--akcent); font-weight: 600; }

/* ---------- ładowanie aplikacji ---------- */
.ladowanie { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--tekst2); }
.ladowanie-logo { font-size: 3rem; animation: puls 1.4s ease-in-out infinite; }
@keyframes puls { 50% { transform: scale(1.12); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .ladowanie-logo { animation: none; } }

/* ---------- stan synchronizacji ---------- */
.stan-sync {
    display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid var(--pasek-ramka);
    color: var(--pasek-tekst); border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; white-space: nowrap;
}
.stan-sync:hover:not(:disabled) { border-color: var(--ramka-hover); color: #fff; }
.kropka-stanu { width: .55rem; height: .55rem; border-radius: 50%; background: #94a3b8; flex: none; }
.stan-sync.ok .kropka-stanu { background: #22c55e; }
.stan-sync.trwa .kropka-stanu { background: #facc15; }
.stan-sync.offline .kropka-stanu { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148,163,184,.35); }
.stan-sync.gosc .kropka-stanu { background: #a78bfa; }
.stan-sync.blad .kropka-stanu { background: #ef4444; }

.tryb-gosc { color: var(--pasek-tekst); }
a.wyloguj-link { color: var(--pasek-tekst); border: 1px solid var(--pasek-ramka); border-radius: 6px; padding: .25rem .7rem; text-decoration: none; white-space: nowrap; }
a.wyloguj-link:hover { color: #fff; border-color: #94a3b8; }

.baner-ostrzezenie { background: #fef3c7; color: #78350f; padding: .55rem 1.5rem; font-size: .9rem; border-bottom: 1px solid #fcd34d; }
.baner-ostrzezenie a { color: #92400e; font-weight: 700; }

/* ---------- logowanie: tryb bez konta ---------- */
.separator { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0 .9rem; color: var(--tekst2); font-size: .85rem; }
.separator::before, .separator::after { content: ""; flex: 1; border-top: 1px solid var(--ramka); }
.drobny { font-size: .8rem; margin-top: .5rem !important; }
.info-logowania { background: var(--hover); border: 1px solid var(--ramka); border-radius: 8px; padding: .55rem .7rem; font-size: .85rem; margin-top: .9rem !important; text-align: left; }

@media (max-width: 820px) {
    .stan-sync .tekst-stanu { display: none; }
    .stan-sync { padding: .35rem; }
    a.wyloguj-link { padding: .2rem .5rem; font-size: .85rem; }
    .baner-ostrzezenie { padding: .5rem .75rem; }
}

/* ---------- tabele w widoku mobilnym: główne kolumny w pierwszej linii, pozostałe w dodatkowej ---------- */
@media (max-width: 820px) {
    table.tabela.mobilna { display: block; overflow: visible; white-space: normal; }
    table.tabela.mobilna thead { display: none; }
    table.tabela.mobilna tbody, table.tabela.mobilna tfoot { display: block; }
    table.tabela.mobilna tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
        padding: .55rem .25rem; border-bottom: 1px solid var(--ramka);
    }
    table.tabela.mobilna tr:hover td { background: transparent; }
    /* podział na linie: po głównych kolumnach (order 0–5) łamanie, potem dodatkowe (order 10) */
    table.tabela.mobilna tbody tr::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
    table.tabela.mobilna td { display: block; border: none; padding: 0; white-space: nowrap; }
    table.tabela.mobilna td.akcje-wiersza { order: 4; margin-left: auto; }
    table.tabela.mobilna td.dod { order: 10; font-size: .85rem; color: var(--tekst2); display: inline-flex; align-items: center; gap: .3rem; }
    table.tabela.mobilna td.dod:empty { display: none; }
    table.tabela.mobilna td.pelna { flex-basis: 100%; white-space: normal; }
    table.tabela.mobilna td.pelna input[type=text] { flex: 1; min-width: 0; width: 100%; }
    table.tabela.mobilna td.dod::before,
    table.tabela.mobilna td.glowna::before {
        content: attr(data-etykieta) ":"; color: var(--tekst3); font-size: .78rem; font-weight: 400; margin-right: .25rem;
    }
    table.tabela.mobilna td.dod input[type=number] { width: 4.8rem; padding: .2rem .35rem; }
    table.tabela.mobilna tfoot tr { border-bottom: none; }
    table.tabela.mobilna tr { gap: .3rem .6rem; }
    table.tabela.mobilna .wsk { min-width: 0; padding: .05rem .35rem; }
    table.tabela.mobilna td.akcje-wiersza button.maly { padding: .1rem .35rem; }

    /* dodatkowa linia: równe kolumny (2 w rzędzie), etykieta o stałej szerokości, wartości/pola wyrównane w pionie */
    table.tabela.mobilna td.dod {
        flex: 0 0 calc(50% - .3rem); min-width: 0;
        display: grid; grid-template-columns: 6.2rem; grid-auto-flow: column; grid-auto-columns: max-content;
        align-items: center; column-gap: .35rem; white-space: nowrap;
    }
    table.tabela.mobilna td.dod.pelna {
        flex-basis: 100%; white-space: normal;
        grid-template-columns: 6.2rem minmax(0, 1fr); grid-auto-flow: row;
    }
    table.tabela.mobilna td.dod { text-align: left; }
    table.tabela.mobilna td.dod::before { margin-right: 0; overflow: hidden; text-overflow: ellipsis; justify-self: start; }
    table.tabela.mobilna td.dod > * { justify-self: start; }
    table.tabela.mobilna td.dod input[type=number] { width: 4.8rem; }
    table.tabela.mobilna td.dod.pelna input[type=text] { justify-self: stretch; width: 100%; }
    table.tabela.mobilna tfoot td:empty { display: none; }
}

/* ---------- znajomi ---------- */
.plakietka {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    margin-left: .35rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .72rem; font-weight: 700; vertical-align: 1px;
}
.znajomi-uklad { display: grid; gap: 1rem; max-width: 760px; }
.karta-wyrozniona { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
.licznik-zaproszen { background: var(--akcent); color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .8rem; vertical-align: 2px; }
.lista-znajomych { list-style: none; margin: 0; padding: 0; }
.lista-znajomych li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--ramka); flex-wrap: wrap; }
.lista-znajomych li:last-child { border-bottom: none; }
.awatar {
    width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: var(--akcent); color: #fff; font-weight: 700; font-size: .85rem;
}
.awatar.szary-awatar { background: var(--ramka); color: var(--tekst2); }
.dane-znajomego { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 10rem; }
.dane-znajomego .szary { font-size: .82rem; overflow-wrap: anywhere; }
.akcje-znajomego { display: flex; gap: .35rem; margin-left: auto; }
.konto-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; max-width: 820px; }

/* ---------- udostępnianie kalendarzy ---------- */
.udostepnianie { flex-basis: 100%; display: flex; align-items: center; gap: .5rem; padding-left: 3.05rem; font-size: .85rem; color: var(--tekst2); flex-wrap: wrap; }
.udostepnianie select { padding: .2rem .4rem; font-size: .85rem; }
a.przycisk.maly-przycisk { padding: .1rem .5rem; font-size: .85rem; }
.pasek-znajomego {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
    padding: .6rem .8rem; border: 1px solid var(--ramka); border-radius: 10px; background: var(--karta);
}
.znacznik-poziomu { border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; font-weight: 600; }
.znacznik-poziomu.podglad { background: var(--hover); color: var(--tekst2); border: 1px solid var(--ramka); }
.znacznik-poziomu.edycja { background: var(--akcent); color: #fff; }
@media (max-width: 820px) { .udostepnianie { padding-left: 0; } }

/* ---------- nakładanie kalendarzy znajomych ---------- */
/* wpis znajomego (gdy dzień nie ma własnego wpisu): kolor rodzaju wpisu o 50% bledszy, w ukośny deseń */
.dzien.zn {
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--zn) 50%, transparent) 0 3px,
        color-mix(in srgb, var(--zn) 20%, transparent) 3px 6px);
}
/* termin nakładający się z własnym wpisem: własny kolor przeplatany bledszym kolorem wpisu znajomego */
.dzien.zn.zn-wspolny {
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--zn) 50%, var(--karta)) 0 3px,
        transparent 3px 6px);
}
.dzien.urlop.zn-wspolny { text-shadow: 0 0 2px #000, 0 0 2px #000; }
.dzien.zn-urlop { --zn: var(--urlop); }
.dzien.zn-odpracowanie { --zn: var(--odpracowanie); }
.dzien.zn-t4d { --zn: var(--t4d); }
.dzien.zn-inne { --zn: var(--inne); }
.dzien.zn-planowany { --zn: var(--planowany); }
/* po jednej kresce 3px na dole dnia dla każdego nałożonego kalendarza */
.dzien .nakladki {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
    border-radius: 0 0 5px 5px; overflow: hidden; pointer-events: none;
}
.dzien .nakladki .kreska-znajomego { display: block; width: 100%; height: 3px; border-radius: 0; }
.kreska-znajomego { width: 14px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
.menu-nakladek .licznik {
    background: var(--akcent); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; margin-left: .3rem;
}
.menu-nakladek .menu-lista.panel-nakladek { left: auto; right: 0; min-width: 17rem; padding: .6rem .7rem; gap: .2rem; }
.wiersz-nakladki { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem 0; border-bottom: 1px dashed var(--ramka); }
.wiersz-nakladki:last-child { border-bottom: none; }
.wiersz-nakladki label { color: var(--tekst); font-size: .9rem; cursor: pointer; }
.wiersz-nakladki a { font-size: .85rem; white-space: nowrap; }
.pasek-nakladek { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: -.25rem 0 .6rem; font-size: .85rem; }
.chip-nakladki {
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .3rem .15rem .55rem;
    border: 1px solid var(--ramka); border-radius: 999px; background: var(--karta);
}
.usun-nakladke { border: none; background: transparent; padding: 0 .3rem; color: var(--tekst2); font-size: .8rem; }
.usun-nakladke:hover:not(:disabled) { color: var(--blad); }
@media print { .dzien.zn, .dzien .nakladki, .kreska-znajomego { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- stopka: wersja i kompilacja ---------- */
/* przypięta do dołu okna – nie wydłuża strony (bez dodatkowego paska przewijania), zawsze widoczna */
.stopka-wersji {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; flex-wrap: nowrap; justify-content: center; gap: .9rem; overflow: hidden; white-space: nowrap;
    height: 1.5rem; align-items: center; padding: 0 1rem;
    font-size: .72rem; color: var(--tekst3); font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--tlo) 88%, transparent); backdrop-filter: blur(3px);
    border-top: 1px solid var(--ramka);
}
/* miejsce na stopkę pod treścią, żeby nie zasłaniała ostatniego wiersza */
.tresc { padding-bottom: calc(1.5rem + 1.5rem); }
.stopka-wersji .inna-wersja { color: var(--ostrzezenie); font-weight: 600; cursor: help; }
.stopka-wersji.na-tle { color: rgba(255,255,255,.6); background: transparent; backdrop-filter: none; border-top: none; }
.stopka-wersji.na-tle .inna-wersja { color: #fcd34d; }
@media print { .stopka-wersji { display: none; } }
.stopka-wersji .o-programie-link {
    all: unset; cursor: pointer; color: inherit; font: inherit; padding: 0 .25rem; border-radius: 4px;
}
.stopka-wersji .o-programie-link:hover { color: var(--akcent); text-decoration: underline; }
.stopka-wersji.na-tle .o-programie-link:hover { color: #fff; }
.stopka-wersji .o-programie-link:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }

/* ---------- okno „O programie” ---------- */
.o-programie { width: min(520px, 94vw); color: var(--tekst); }
.o-programie h2 { margin: 0; }
.o-programie-naglowek { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.o-programie-logo { font-size: 2.4rem; line-height: 1; }
.o-programie-dane { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .8rem 0 0; font-size: .9rem; }
.o-programie-dane dt { color: var(--tekst3); }
.o-programie-dane dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.o-programie .ostrzezenie-tekst { color: var(--ostrzezenie); font-weight: 600; }

/* ---------- wykres dni wolnych w podsumowaniu (pierścień) ----------
   Paleta kategoryczna zwalidowana (scripts/validate_palette.js) w kolejności pierścienia:
   jasny  #e34948, #eda100, #2a78d6, #008300, #6250d6 – wszystkie testy OK (żółty < 3:1 → wartości w legendzie)
   ciemny #d63c3c, #c98500, #3987e5, #008300, #9085e9 – wszystkie testy OK. „Pozostały” = neutralne tło toru. */
:root {
    --kolo-wykorzystany: #e34948; --kolo-planowany: #eda100; --kolo-pozostaly: #dfe3e8;
    --kolo-t4d: #2a78d6; --kolo-swieta: #008300; --kolo-inne: #6250d6;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kolo-wykorzystany: #d63c3c; --kolo-planowany: #c98500; --kolo-pozostaly: #3a4659;
        --kolo-t4d: #3987e5; --kolo-swieta: #008300; --kolo-inne: #9085e9;
    }
}
:root[data-theme="dark"] {
    --kolo-wykorzystany: #d63c3c; --kolo-planowany: #c98500; --kolo-pozostaly: #3a4659;
    --kolo-t4d: #3987e5; --kolo-swieta: #008300; --kolo-inne: #9085e9;
}
.przycisk-rozwin {
    display: block; width: 100%; margin-top: .6rem; padding: .3rem .5rem; font-size: .85rem;
    background: transparent; border: 1px dashed var(--ramka); color: var(--tekst2);
}
.przycisk-rozwin:hover { color: var(--tekst); border-color: var(--ramka-hover); }
.wykres-kolowy { margin: .75rem 0 0; }
.wykres-kolowy figcaption { font-size: .78rem; margin-bottom: .5rem; }
.kolo-obszar { position: relative; width: 170px; height: 170px; margin: 0 auto .6rem; }
.kolo-obszar svg { width: 100%; height: 100%; display: block; }
.kolo-tlo { fill: none; stroke: var(--postep-tlo); stroke-width: 20; opacity: .35; }
.kolo-odcinek { fill: none; stroke-width: 20; cursor: default; transition: opacity .15s, stroke-width .15s; }
.kolo-odcinek.aktywny { stroke-width: 24; }
.kolo-odcinek.wyciszony { opacity: .35; }
.kolo-srodek {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; pointer-events: none; padding: 0 2.2rem;
}
.kolo-liczba { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--tekst); font-variant-numeric: tabular-nums; }
.kolo-opis { font-size: .72rem; color: var(--tekst2); line-height: 1.25; }
.kolo-legenda { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.kolo-legenda li {
    display: grid; grid-template-columns: .8rem minmax(0, 1fr) auto 5.6rem; gap: .45rem; align-items: center;
    padding: .2rem .25rem; border-radius: 4px;
}
.kolo-legenda li.aktywny { background: var(--hover); }
.kolo-legenda li.zero { opacity: .55; }
.kolo-probka { width: .8rem; height: .8rem; border-radius: 3px; }
.kolo-nazwa { color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kolo-wartosc { color: var(--tekst); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.kolo-procent { color: var(--tekst3); font-size: .72rem; text-align: right; font-variant-numeric: tabular-nums; }
@media print { .przycisk-rozwin, .wykres-kolowy { display: none !important; } }

/* ---------- przełącznik języka PL / EN (wygląd jak przełącznik motywu) ---------- */
.jezyk { display: inline-flex; border: 1px solid var(--pasek-ramka); border-radius: 8px; overflow: hidden; }
.jezyk button {
    border: none; border-radius: 0; background: transparent; color: var(--pasek-tekst);
    padding: .25rem .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .03em;
}
.jezyk button + button { border-left: 1px solid var(--pasek-ramka); }
.jezyk button:hover { color: #fff; }
html[lang="pl"] .jezyk button[data-j="pl"], html[lang="en"] .jezyk button[data-j="en"] { background: var(--akcent); color: #fff; }
.motyw-logowanie { display: flex; gap: .5rem; align-items: center; }
/* komunikat błędu Blazora w obu językach – widoczny ten w języku strony */
#blazor-error-ui span[lang] { display: none; }
html[lang="pl"] #blazor-error-ui span[lang="pl"], html[lang="en"] #blazor-error-ui span[lang="en"] { display: inline; }

/* ---------- wydruk: cały rok na jednej stronie A4 (poziomo lub pionowo) ----------
   Na końcu pliku, żeby wygrywał z regułami mobilnymi (A4 pionowo ma ok. 740 px szerokości). */
.tylko-druk { display: none; }
@page { margin: 7mm; }   /* format i orientację wybiera się w oknie drukowania */
@media print {
    .pasek, .pedzle, .akcje, .zakladki, button, a.przycisk, .bez-druku, .zaslona, .baner-ostrzezenie, .komunikat, #blazor-error-ui { display: none !important; }
    .tylko-druk { display: inline; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
    html, body { background: #fff !important; font-size: 8pt; }
    .tresc { padding: 0; max-width: none; }

    .naglowek-kal { margin: 0 0 2mm; gap: 2mm; }
    .nawigacja-roku { gap: 1.5mm; align-items: baseline; }
    .nawigacja-roku .rok { font-size: 15pt; min-width: 0; }
    .tytul-wydruku { font-size: 13pt; font-weight: 600; }
    .pasek-nakladek { margin: 0 0 2mm; font-size: 7pt; }
    .chip-nakladki { padding: .3mm 1.5mm; }
    .pasek-znajomego { margin-bottom: 2mm; padding: 1.5mm 2mm; }

    .karta { padding: 1.5mm 2mm; border: .2mm solid #cbd5e1; border-radius: 1.5mm; break-inside: avoid; }
    .uklad-kal { gap: 3mm; }
    .miesiace { gap: 2mm; }
    .miesiac { padding: 1.2mm 1.5mm; }
    .miesiac h3 { font-size: 7.5pt; margin: 0 0 .6mm; }
    .miesiac table { border-spacing: .35mm; }
    .miesiac th { font-size: 5.5pt; padding: 0; }
    .miesiac th.tydz, .miesiac td.tydz { width: 3.6mm; font-size: 5pt; }
    .miesiac th.suma, .miesiac td.suma { width: 4.6mm; font-size: 6.5pt; }
    .miesiac td.suma .notka { display: none; }
    .dzien { height: var(--wysokosc-dnia, 6mm); font-size: 6.5pt; border-radius: 1mm; padding: 0; }
    .dzien.dzis { box-shadow: none !important; }
    .dzien .kropka { width: 1.2mm; height: 1.2mm; top: .3mm; right: .4mm; }
    .dzien .opis-ikona { width: 1mm; height: 1mm; }
    .dzien .nakladki .kreska-znajomego { height: .7mm; }
    .dzien.urlop.zn-wspolny { text-shadow: none; }

    .boczny { position: static; gap: 2mm; }
    .boczny h2 { font-size: 8pt; margin: 0 0 1mm; }
    .podsumowanie td { padding: .4mm .5mm; font-size: 7pt; }
    .podsumowanie .wsk { padding: 0 1mm; min-width: 0; }
    .pasek-postepu { height: 1.5mm; margin: 1mm 0 .5mm; }
    .podsumowanie .wiersz { margin-top: .5mm !important; }
    .podsumowanie .wiersz .szary { font-size: 6.5pt !important; }
    .legenda .lista-mala li { padding: .3mm 0; font-size: 6.5pt; gap: 1.2mm; border: none; }
    .legenda .probka { width: 2.6mm; height: 2.6mm; }
}
/* poziomo: 4 × 3 miesiące, podsumowanie i legenda w wąskiej kolumnie po prawej */
@media print and (orientation: landscape) {
    :root { --wysokosc-dnia: 7.4mm; }
    .uklad-kal { grid-template-columns: minmax(0, 1fr) 46mm; }
    .miesiace { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* pionowo: 3 × 4 miesiące, pod nimi podsumowanie i legenda obok siebie */
@media print and (orientation: portrait) {
    :root { --wysokosc-dnia: 6.6mm; }
    .uklad-kal { grid-template-columns: minmax(0, 1fr); }
    .miesiace { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .boczny { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
    .legenda .lista-mala { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3mm; }
}
.wiersz-planowany td { color: var(--tekst2); }
.wiersz-planowany .probka { vertical-align: -2px; margin-right: .2rem; }