:root {
    --kolor-glowny: #1f4e79;
    --kolor-glowny-jasny: #2e6da4;
    --kolor-tlo: #f4f6f8;
    --kolor-obramowanie: #d8dee4;
    --kolor-tekst: #24303a;
    --kolor-ok: #1e7e34;
    --kolor-blad: #b3261e;
}

* { box-sizing: border-box; }

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

.topbar {
    background: var(--kolor-glowny);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Liczba linków w nav rośnie z każdą nową rolą/uprawnieniem (patrz
       includes/header.php — teraz też "Firmy"/"Użytkownicy" warunkowo dla
       superadmina) — przy węższych oknach/dużej liczbie linków już się nie
       mieściła w jednej linii o sztywnej wysokości (nachodziła na blok
       użytkownika). flex-wrap pozwala pasku przełamać się na więcej linii
       zamiast przycinać/nakładać treść; min-height (zamiast height)
       zachowuje dotychczasową wysokość w typowym, jednoliniowym przypadku. */
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 10px 20px;
    min-height: 56px;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: 600; font-size: 16px; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 auto; }
.topbar nav a { opacity: 0.9; font-size: 13px; }
.topbar nav a:hover, .topbar nav a.active { opacity: 1; text-decoration: underline; }
.topbar .user { font-size: 13px; opacity: 0.85; }

.container {
    max-width: 1180px;
    margin: 24px auto;
    padding: 0 20px;
}
/* Strony z szerokimi tabelami (lista płac, zestawienie ZUS) dostają więcej
   miejsca, żeby jak najwięcej kolumn mieściło się bez przewijania w bok —
   patrz $kontenerSzeroki w includes/header.php. */
.container.container-szeroki {
    max-width: 1800px;
}

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 24px 0 10px; }

.card {
    background: #fff;
    border: 1px solid var(--kolor-obramowanie);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 9px; border-bottom: 1px solid var(--kolor-obramowanie); text-align: left; white-space: nowrap; }
th { background: #eef2f6; font-weight: 600; position: sticky; top: 0; }
tr:hover td { background: #fbfcfe; }
.tabela-scroll { overflow-x: auto; }

/* Tabela rachunków zlecenia (lista_rachunkow_szczegoly.php) — kolumny z
   polami liczbowymi ("Liczba godzin", "Kwota brutto") mają nagłówek
   wyrównany do prawej (.prawa), ale samo pole <input> domyślnie ma stałą,
   węższą od kolumny szerokość i "przykleja się" do lewej krawędzi komórki —
   wizualnie nagłówek wtedy "ucieka" w prawo względem pola pod spodem.
   Rozciągnięcie inputa na całą szerokość komórki naprawia to wyrównanie. */
.tabela-rachunki input[type=number] { width: 100%; box-sizing: border-box; }

/* Tabela listy płac: szerokość każdej kolumny ustala colgroup w
   lista_plac_szczegoly.php (dopasowana do typu pola — wąsko dla liczb
   całkowitych "dni", szerzej dla kwot), a nie długość nagłówka — nagłówek
   zawija się do tej szerokości (white-space: normal) zamiast ją poszerzać.
   "overflow-wrap: break-word" (zamiast word-break: break-word) łamie wiersz
   na spacjach kiedy to możliwe i tylko w ostateczności w środku słowa —
   inaczej krótkie kolumny łamały nagłówki na pojedyncze litery. */
/* Kolumny w colgroup są w procentach (nie px), żeby ta sama tabela ładnie
   skalowała się też na wydruku (patrz @media print niżej — bez tego skrajne
   kolumny typu "Koszt pracod." po prostu znikały za krawędzią strony PDF,
   bo px-owe szerokości nie kurczyły się do węższej strony). Na ekranie
   min-width pilnuje, żeby te same procenty nie ścisnęły liczb do
   nieczytelnej szerokości na wąskim oknie — wtedy włącza się przewijanie
   w poziomie (.tabela-scroll) zamiast ściskania kolumn. */
.tabela-lista-plac { table-layout: fixed; min-width: 1750px; }
.tabela-lista-plac th, .tabela-lista-plac td { white-space: normal; overflow-wrap: break-word; word-break: normal; vertical-align: bottom; }
/* text-wrap: balance (obsługiwane w Chromium/Chrome od wersji 114) rozkłada
   WIELOWYRAZOWE nagłówki na linie równej długości zamiast "zachłannego"
   wypełniania każdej linii do granicy (co czasem samo z siebie zostawiało
   nierówne, szpetne linie) — czysty zysk, nie ma wpływu na kolumny
   poszerzane niżej wg jednostkaSzerokosciNaglowka() w lista_plac_szczegoly.php.
   Przeglądarki bez wsparcia po prostu ignorują tę własność (zwykłe zawijanie
   nadal działa). Nie rozwiązuje samo z siebie zawijania w ŚRODKU pojedynczego
   za długiego słowa — od tego jest poszerzanie kolumn w PHP. */
.tabela-lista-plac th span { text-wrap: balance; }
.tabela-lista-plac th { font-size: 11px; line-height: 1.3; }
.tabela-lista-plac input[type=number] { width: 100%; box-sizing: border-box; padding: 4px 3px; font-size: 12px; }
/* Strzałki spinnera pola liczbowego potrafiły same zająć większość i tak
   wąskiej kolumny, przez co wpisana liczba w ogóle nie była widoczna —
   usuwamy je (wpisywanie działa tak samo, klawiaturą albo myszką). */
.tabela-lista-plac input[type=number]::-webkit-inner-spin-button,
.tabela-lista-plac input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tabela-lista-plac input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Kolumna "Kwituję odbiór gotówki (data i podpis)" na końcu tabeli listy
   płac — widoczna WYŁĄCZNIE na wydruku (patrz lista_plac_szczegoly.php).
   Na ekranie w ogóle nie zajmuje miejsca: "visibility: collapse" na <col>
   usuwa całą kolumnę z tabeli (inaczej niż display:none na pojedynczych
   komórkach, które przy table-layout:fixed zostawiłyby po sobie pustą
   szczelinę) — pozostałe kolumny automatycznie zajmują zwolnione miejsce. */
.tabela-lista-plac col.kol-podpis { visibility: collapse; }

/* Kolumny pól, w których WSZYSCY pracownicy na liście mają zero (np. dodatek,
   którego akurat nikt w tym miesiącu nie dostał) — pomijane na wydruku w
   całości (nie tylko wyzerowana treść komórki, patrz .wartosc-druk niżej —
   to inny, uzupełniający się mechanizm). Na ekranie kolumna zostaje widoczna
   normalnie, żeby dało się cokolwiek do niej wpisać. */
.tabela-lista-plac col.kol-drukzero { visibility: visible; }

.btn {
    display: inline-block;
    background: var(--kolor-glowny-jasny);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
}
.btn:hover { background: var(--kolor-glowny); }
.btn.secondary { background: #6b7785; }
.btn.danger { background: var(--kolor-blad); }
.btn.small { padding: 4px 10px; font-size: 12px; }

form.formularz { max-width: 640px; }
.pole { margin-bottom: 14px; }
.pole label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; }
.pole input, .pole select, .pole textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--kolor-obramowanie);
    border-radius: 5px;
    font-size: 13px;
}
.pole .opis { font-size: 12px; color: #6b7785; margin-top: 3px; }
/* Komórki tabel z klasą "opis" (np. rachunek_szczegoly.php, firma_pit4.php,
   pracownik_kartoteka.php) zawierają zdania opisowe, a nie krótkie wartości
   liczbowe — nadpisz odziedziczone th/td { white-space: nowrap }, żeby
   dłuższy tekst zawijał się zamiast rozpychać tabelę poza jej kontener. */
td.opis { white-space: normal; }
.siatka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.siatka-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.flash.ok { background: #e5f5e8; color: var(--kolor-ok); border: 1px solid #b8e2c1; }
.flash.blad { background: #fbe9e7; color: var(--kolor-blad); border: 1px solid #f3c2bd; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.aktywny { background: #e5f5e8; color: var(--kolor-ok); }
.badge.nieaktywny { background: #eee; color: #777; }
.badge.robocza { background: #fff3cd; color: #856404; }
.badge.zatwierdzona { background: #e5f5e8; color: var(--kolor-ok); }
.badge.blad { background: #fbe9e7; color: var(--kolor-blad); }

.suma { font-weight: 700; }
.prawa { text-align: right; }
.karty-kpi { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.kpi { background: #fff; border: 1px solid var(--kolor-obramowanie); border-radius: 8px; padding: 16px 20px; min-width: 160px; }
.kpi .liczba { font-size: 24px; font-weight: 700; color: var(--kolor-glowny); }
.kpi .etykieta { font-size: 12px; color: #6b7785; margin-top: 2px; }

.login-strona { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-karta { background: #fff; border-radius: 10px; padding: 36px; width: 340px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
.login-karta h1 { text-align: center; margin-bottom: 24px; font-size: 19px; }

/* Widoczne tylko na wydruku (patrz lista_plac_szczegoly.php) — odpowiednik
   pola <input> edycyjnego, ale jako zwykły tekst, żeby nie wymuszać sztywnej
   szerokości komórki na wydruku/PDF. */
.wartosc-druk { display: none; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    .topbar, .no-print { display: none !important; }
    body { background: #fff; font-size: 10px; }
    .container, .container.container-szeroki {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .card { border: none; box-shadow: none; padding: 0; margin-bottom: 8px; }
    /* Kontener przewijania w poziomie nie ma sensu na wydruku (nie da się
       "przesunąć" papieru) — bez tego część tabeli po prostu znikała, a
       podgląd wydruku pokazywał ten sam pasek przewijania co na ekranie. */
    .tabela-scroll { overflow: visible !important; }
    table { font-size: 9px !important; width: 100% !important; }
    /* Na ekranie min-width (patrz wyżej) pilnuje czytelności i włącza
       przewijanie zamiast ściskania kolumn — na wydruku robi odwrotnie,
       bo strony nie da się przewinąć: bez zdjęcia min-width kolumny po
       prawej (Podatek, Do wypłaty, Koszt pracod.) po prostu wypadały poza
       krawędź strony PDF, mimo że reszta CSS mówiła "width: 100%". */
    .tabela-lista-plac { min-width: 0 !important; }
    /* ZMIANA ARCHITEKTONICZNA: table-layout: auto zamiast fixed na wydruku.
       Na ekranie fixed jest nadal potrzebne (patrz reguła .tabela-lista-plac
       wyżej, poza @media print) — tam kolumny muszą mieć STABILNĄ,
       przewidywalną szerokość niezależnie od tego, co akurat wpisano w pola
       <input>. Na wydruku fixed zmuszał PHP (jednostkaSzerokosciNaglowka()
       w lista_plac_szczegoly.php) do ZGADYWANIA z góry, ile miejsca zajmie
       każdy nagłówek/wartość w RZECZYWISTEJ przeglądarce użytkownika — po
       trzech kolejnych zgłoszeniach tego samego problemu (raz łamanie w
       środku słowa, potem konkretne słowa nadal za ciasno lub wychodzące
       poza kolumnę, w końcu też nazwisko pracownika i sam nagłówek
       "Pracownik" — kolumna, której PHP w ogóle nie poszerzał wg
       rzeczywistych nazwisk z tej listy, tylko wg samego słowa "Pracownik")
       stało się jasne, że dogonienie każdej możliwej kombinacji nazw
       kolumn/dodatków/nazwisk czystym zgadywaniem w PHP jest syzyfową
       pracą — silnik przeglądarki i tak zna rzeczywistą metrykę własnej
       czcionki znacznie lepiej niż jakakolwiek kalibracja zrobiona z góry.
       table-layout: auto oddaje tę decyzję przeglądarce: kolumny same
       dopasowują szerokość do RZECZYWISTEJ treści (nagłówków, nazwisk,
       kwot) w granicach dostępnej szerokości strony (width: 100% wyżej), a
       procenty z <colgroup> (patrz lista_plac_szczegoly.php) działają
       nadal, ale jako PODPOWIEDŹ/priorytet między kolumnami, a nie sztywny
       nakaz. Mechanizm ukrywania całych zerowych kolumn
       (visibility: collapse na <col class="kol-drukzero">, patrz niżej)
       działa identycznie w obu trybach layoutu. */
    .tabela-lista-plac { table-layout: auto !important; }
    /* Pionowe linie między kolumnami tylko na wydruku — przy tylu wąskich
       kolumnach samo poziome podkreślenie wiersza nie wystarczało, żeby od
       razu było widać, który nagłówek pasuje do której liczby. */
    th, td { padding: 2px 4px !important; white-space: normal !important; border-right: 1px solid var(--kolor-obramowanie); vertical-align: bottom; }
    /* Nagłówki tabeli listy płac zawijają się od góry w dół na CAŁYCH
       słowach (spacjach) — w odróżnieniu od reguły .tabela-lista-plac th
       wyżej (ekran), na wydruku ŚWIADOMIE wyłączamy łamanie w środku słowa
       (overflow-wrap: normal + word-break: keep-all niżej), na wyraźną
       prośbę użytkownika: pojedyncza/kilka ostatnich liter słowa nie mogą
       zostać "urwane" na osobną linię (np. "Wynagr." łamane na "Wynag" i
       "r."). Zamiast tego kolumna ma się poszerzyć tak, żeby całe
       najdłuższe słowo zmieściło się w jednej linii — o to dba PHP,
       patrz jednostkaSzerokosciNaglowka() w lista_plac_szczegoly.php
       (z marginesem bezpieczeństwa, bo różne przeglądarki/silniki PDF mają
       nieznacznie inną metrykę czcionki niż ta, na której to kalibrowano).
       Gdyby mimo to (np. bardzo długie pojedyncze słowo) kolumna była za
       wąska, słowo się NIE złamie w środku — zamiast tego może wystawać
       poza swoją komórkę (czytelne w całości), co jest bezpieczniejsze niż
       urwana literka. Wcześniej próbowałem obracać nagłówki "na ukos"
       (transform: rotate), żeby zmieścić dłuższe opisy na węższej stronie
       wydruku, ale efekt był nieczytelny — zwykłe zawijanie jest prostsze i
       czytelniejsze, więc z rotacji zrezygnowałem. Wysokość nagłówka jest
       automatyczna (tyle, ile potrzeba na 2-3 linie tekstu przy font-size
       9px), nie sztywna. */
    .tabela-lista-plac thead th {
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
        hyphens: none !important;
        /* Wyrównanie opisów kolumn do GÓRY komórki nagłówka (na wyraźną
           prośbę użytkownika) — w odróżnieniu od komórek z danymi (th, td
           wyżej), które zostają wyrównane do dołu (tam liczby "siedzą" tuż
           nad linią oddzielającą nagłówek od pierwszego wiersza danych;
           nagłówek jest wyższy niż jedna linia tekstu, więc bez tej reguły
           krótkie, jednowierszowe opisy "zjeżdżały" na sam dół wysokiego
           nagłówka zamiast zaczynać się od góry razem z dłuższymi,
           kilkuwierszowymi opisami w sąsiednich kolumnach). */
        vertical-align: top;
        padding: 3px 3px 4px !important;
        /* Opisy kolumn wyśrodkowane w kolumnie na wydruku (na wyraźną
           prośbę użytkownika) — zarówno gdy nagłówek zmieści się w jednej
           linii, jak i gdy się zawinie na kilka (text-align działa
           identycznie w obu przypadkach, bo wyśrodkowuje KAŻDĄ linię z
           osobna). Nadpisuje zarówno domyślne text-align:left (th, td
           wyżej), jak i .prawa (text-align:right — używane przez nagłówki
           kolumn podsumowania typu "Brutto", "ZUS prac." itd.), żeby te
           kolumny na wydruku też miały wyśrodkowany OPIS w nagłówku — same
           KWOTY w wierszach danych zostają wyrównane do prawej (patrz
           td.prawa/tfoot th.prawa niżej), zmienia się tylko nagłówek. */
        text-align: center !important;
    }
    /* Imię i nazwisko pracownika (kolumna "Pracownik") — ten sam problem i
       to samo rozwiązanie co dla nagłówków wyżej: bez tego dłuższe
       nazwiska (np. "Piątkowska") łamały się w środku, zostawiając samotne
       1-2 litery na osobnej linii. Nazwisko i imię wciąż mogą się złamać
       MIĘDZY sobą (na spacji) — to normalne i pożądane — ale każde z nich z
       osobna zostaje w całości na jednej linii; kolumna jest poszerzana wg
       RZECZYWISTYCH nazwisk z tej listy (patrz $nazwiskaNaListe w
       lista_plac_szczegoly.php), nie tylko wg słowa "Pracownik" jak
       wcześniej. */
    .tabela-lista-plac td.kol-pracownik {
        overflow-wrap: normal !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }
    /* Kwoty na wydruku listy płac NIGDY się nie zawijają (na wyraźną prośbę
       użytkownika: "Nie zawijaj kwot na wydruku listy płac") — w
       odróżnieniu od nagłówków (reguła wyżej), którym zawijanie zostaje.
       ".wartosc-druk" to kwoty/dni pól wejściowych (Wynagr. zasad., Dni
       urlopu, dodatki itd. — patrz lista_plac_szczegoly.php), a
       "td.prawa"/"tfoot th.prawa" to zawsze widoczne kolumny podsumowania
       (Brutto..Koszt pracod.) łącznie z wierszem RAZEM w stopce. Kolumny są
       dodatkowo poszerzane wg RZECZYWISTYCH wartości na danej liście
       (patrz jednostkaSzerokosciNaglowka() w lista_plac_szczegoly.php), a
       tu — jako dodatkowa rezerwa, gdyby mimo to zabrakło miejsca (np.
       nietypowo duża kwota) — używamy nieco mniejszej czcionki niż reszta
       wydruku, żeby kwota miała większą szansę zmieścić się w jednej linii
       zamiast się zawinąć; w skrajnym przypadku liczba i tak może
       "wystawać" poza kolumnę (widoczna, nie ucięta) zamiast się złamać —
       to bezpieczniejsze niż zgubienie/ucięcie cyfry z kwoty. */
    .tabela-lista-plac .wartosc-druk,
    .tabela-lista-plac td.prawa,
    .tabela-lista-plac tfoot th.prawa {
        white-space: nowrap !important;
        font-size: 8px;
    }
    /* "position: sticky" (do przypięcia nagłówka przy przewijaniu na ekranie)
       nie ma znaczenia na wydruku i w niektórych przeglądarkach potrafi
       przesunąć/zdublować wiersz nagłówka względem kolumn z danymi —
       wyłączamy jawnie, żeby nagłówek zawsze był zwykłym wierszem tabeli. */
    th { position: static !important; }
    /* Liczby na wydruku muszą być wyrównane do prawej (na wyraźną prośbę
       użytkownika: "liczby w kolumnach powinny być zawsze wyrównane do
       prawej") — mimo że <span class="wartosc-druk prawa"> od zawsze miał
       klasę .prawa (text-align:right), to nie działało: "display:
       inline-block" bez podanej szerokości sprawia, że element sam
       zawija się dokładnie do szerokości swojej treści, więc
       "text-align: right" wyrównuje tekst tylko w obrębie tego
       ciasnego pudełka, a samo pudełko i tak stoi po lewej stronie
       komórki (tam, gdzie w normalnym przepływie wierszowym wypadło
       obok ukrytego pola <input>). Rozwiązanie: na wydruku span ma
       wypełniać całą szerokość komórki (display:block; width:100%),
       dzięki czemu jego własne text-align:right w końcu realnie
       przesuwa liczbę do prawej krawędzi kolumny — dokładnie tak samo,
       jak już działało dla kolumn podsumowania (td.prawa/tfoot
       th.prawa), gdzie wyrównanie jest ustawione na samej komórce, a
       nie na wewnętrznym elemencie. */
    .wartosc-druk { display: block; width: 100%; }

    /* Kolumna podpisu (patrz reguła .kol-podpis wyżej, poza @media print) —
       na ekranie zwinięta do zera przez visibility:collapse na <col>, na
       wydruku odwijamy ją i dajemy jej sporo miejsca: to zastępuje dawny,
       zbyt ciasny wiersz "Podpis pracownika: ___" pod każdym pracownikiem —
       teraz to szeroka, pusta kolumna na końcu wiersza każdego pracownika,
       z etykietą w nagłówku, żeby było jasne do czego służy. */
    .tabela-lista-plac col.kol-podpis { visibility: visible; }
    .tabela-lista-plac td.kol-podpis { padding: 8px 6px !important; border-left: 1px solid var(--kolor-obramowanie); }

    /* Kolumna, w której WSZYSCY pracownicy na tej liście mają zero (np.
       dodatek, którego akurat nikt w danym miesiącu nie dostał) — pomijana
       na wydruku w całości, nie tylko wyzerowana treść pojedynczej komórki
       (o to explicite prosił użytkownik: "nie miałem na myśli usunięcie
       zer, tylko całej kolumny"). Reszta kolumn automatycznie poszerza się,
       żeby wypełnić zwolnione miejsce (tak działa visibility:collapse na
       <col> — jak ukrycie kolumny w Excelu). */
    .tabela-lista-plac col.kol-drukzero { visibility: collapse; }
}