/* =========================================================================
   Strony serwerowe rozbudowy z 25 września 2026: publiczny podgląd WZ (`wz-`),
   szkice przyjęć (`szkic-`) i dodatki na ekranie dokumentu i w raportach (`dok-`).

   Osobny plik linkowany po app.css, a nie `.razor.css`: bundla izolacji stylów nie
   ma w App.razor. Prefiksy trzymają te reguły z dala od reszty — plik korzysta
   wyłącznie z tokenów app.css (kolory, odstępy, promienie), więc oba motywy działają
   bez osobnego bloku `prefers-color-scheme`. Kolejność jak w app.css: mobile-first,
   `min-width` dokłada resztę.
   ========================================================================= */

/* ---------- 1. publiczny podgląd WZ (strona bez logowania, AuthLayout) ---------- */

/* Karta logowania ma 26rem — na formularz NIP-u w sam raz, na dokument za wąsko.
   `:has()` poszerza ją tylko wtedy, gdy stoi w niej dokument, bez ruszania AuthLayout.
   Przeglądarka bez `:has()` zostaje przy 26rem: ciaśniej, ale nadal czytelnie. */
.auth-card:has(.wz-dokument) {
    width: min(40rem, 100%);
}

.wz-wstep {
    margin: 0 0 var(--sp-5);
    text-align: center;
    color: var(--muted);
}

.wz-podpowiedz {
    margin: var(--sp-1) 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.wz-naglowek {
    margin-bottom: var(--sp-5);
    text-align: center;
}

.wz-rodzaj {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Numer czyta się jak na papierze: o stałej szerokości znaków, bo klient porównuje go
   z kwitem w ręce. Swoistość `.auth-card .wz-numer` przebija `.auth-card h1`. */
.auth-card .wz-numer {
    margin: var(--sp-1) 0;
    font-family: var(--font-mono);
    font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
    letter-spacing: 0.02em;
}

.wz-data {
    margin: 0;
    color: var(--muted);
}

/* Korekta nie jest błędem strony, tylko faktem o dokumencie — kolor ostrzegawczy,
   jak `.ostrzezenia`, żeby nie dało się go przeoczyć nad pozycjami. */
.wz-korekta {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    background: var(--warn-bg);
    color: var(--warn-fg);
}

.wz-korekta p {
    margin: 0;
}

.wz-strony {
    display: grid;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-5);
}

.wz-strony dt {
    font-size: 0.8125rem;
    color: var(--muted);
}

.wz-strony dd {
    display: grid;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Sprzedawca i odbiorca obok siebie od szerokości, na której obie nazwy się mieszczą;
   samochód pod nimi na całą szerokość. */
@media (min-width: 30rem) {
    .wz-strony {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wz-strony > div:nth-child(3) {
        grid-column: 1 / -1;
    }
}

.wz-sekcja {
    margin: 0 0 var(--sp-2);
    font-size: 1rem;
}

/* Pozycje jako lista, nie tabela: na telefonie 390 px cztery kolumny liczb łamałyby się
   w nieczytelne słupki. Nazwa i ilość w jednym rzędzie, wagi i korekta pod spodem. */
.wz-pozycje {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.wz-pozycja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
}

.wz-towar {
    font-weight: 650;
    overflow-wrap: anywhere;
}

.wz-ilosc,
.wz-razem strong,
.wz-po-korekcie strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wz-ilosc {
    font-weight: 650;
    text-align: right;
}

.wz-wagi,
.wz-po-korekcie {
    grid-column: 1 / -1;
    font-size: 0.875rem;
}

.wz-wagi {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-3);
    color: var(--muted);
}

.wz-po-korekcie {
    text-align: right;
}

/* Ilość sprzed korekty zostaje widoczna — klient ma ją na papierze — ale przekreślona,
   żeby nie czytać jej jako obowiązującej. */
.wz-ilosc.wz-przed-korekta,
.wz-razem.wz-przed-korekta strong {
    text-decoration: line-through;
    color: var(--muted);
}

.wz-razem.wz-przed-korekta {
    color: var(--muted);
}

.wz-razem {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-3) 0 0;
}

.wz-razem strong {
    font-size: 1.25rem;
}

.wz-stopka {
    margin: var(--sp-5) 0 var(--sp-3);
    font-size: 0.8125rem;
}

/* ---------- 2. szkice przyjęć: lista ---------- */

/* Licznik otwartych szkiców na podzakładce i na zakładce stanu: tint ostrzegawczy,
   bo to praca do zrobienia, a nie informacja. */
.szkic-licznik {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: var(--sp-2);
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--warn-bg);
    color: var(--warn-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.szkic-lista {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .szkic-lista {
        grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    }
}

/* Cała karta jest odnośnikiem — kciukiem trafia się w miniaturę albo w nazwę,
   nie w mały link „szczegóły". */
.szkic-karta {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-3);
    min-height: var(--tap-lg);
    padding: var(--sp-3);
    color: var(--fg);
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.szkic-karta:hover {
    border-color: var(--brand-600);
}

.szkic-miniatura {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.szkic-miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.szkic-bez-zdjecia {
    padding: var(--sp-1);
    font-size: 0.75rem;
    text-align: center;
    color: var(--muted);
}

.szkic-opis {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.szkic-tytul {
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.szkic-data {
    font-size: 0.875rem;
}

.szkic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-3);
    font-size: 0.8125rem;
    color: var(--muted);
}

.szkic-wynik {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-900);
    overflow-wrap: anywhere;
}

/* Kafel na panelu właściciela: odnośnik do listy, pod stanem łącznym. */
.szkic-kafel {
    display: grid;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
    background: var(--warn-bg);
    color: var(--warn-fg);
    text-decoration: none;
}

.szkic-kafel .muted {
    color: inherit;
}

.szkic-kafel.pusty {
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--line);
}

.szkic-kafel.pusty .muted {
    color: var(--muted);
}

.szkic-kafel-etykieta {
    font-weight: 600;
}

.szkic-kafel strong {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. szkic przyjęcia: zdjęcie obok formularza ---------- */

.szkic-uklad {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-4);
}

.szkic-formularz {
    padding: var(--sp-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.szkic-formularz h2 {
    margin-top: 0;
}

.szkic-bez-zdjec {
    margin: 0;
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.szkic-fakty {
    margin-top: var(--sp-4);
}

.szkic-podpowiedz {
    margin: var(--sp-1) 0 0;
    font-size: 0.8125rem;
}

.szkic-odrzucenie {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

/* Tablet w poziomie i komputer: zdjęcie po lewej, formularz po prawej, a zdjęcie
   przyklejone pod topbarem — dane przepisuje się ze zdjęcia, więc nie może uciec
   przy przewijaniu formularza. W pionie (tablet, telefon) jedno pod drugim: dwie
   kolumny po ~370 px dawałyby zdjęcie za małe do czytania i formularz za wąski.

   `align-self: start` jest warunkiem sticky w siatce (pułapka 43). Maksymalna wysokość
   z przewijaniem w środku to siatka bezpieczeństwa jak przy panelu kreatora: kolumna
   wyższa niż okno chowałaby dół pod krawędzią. Sufit ma tylko obraz i kolumna —
   jeden poziom `dvh` na każdym, żeby nie powtórzyć pułapki 61. */
@media (min-width: 48rem) and (orientation: landscape) {
    .szkic-uklad {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }

    .szkic-zdjecia {
        position: sticky;
        top: calc(var(--topbar-dol) + var(--sp-4));
        align-self: start;
        max-height: calc(100vh - var(--topbar-dol) - var(--sp-4) * 2);
        max-height: calc(100dvh - var(--topbar-dol) - var(--sp-4) * 2);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .szkic-zdjecia .dok-galeria-glowne img {
        max-height: calc(100vh - var(--topbar-dol) - 12rem);
        max-height: calc(100dvh - var(--topbar-dol) - 12rem);
    }

    /* Sticky zakłada własny kontekst nakładania, więc nakładka pełnoekranowa z
       galerii wewnątrz przegrałaby z topbarem (z-index 30) mimo swojego z-index.
       Na czas otwarcia kolumna wychodzi ponad powłokę. */
    .szkic-zdjecia:has(.dok-pelny-ekran) {
        z-index: 60;
        overflow: visible;
    }
}

/* ---------- 4. galeria zdjęć (GaleriaZdjec: szkic i dokument) ---------- */

.dok-galeria {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dok-galeria-duza {
    display: grid;
    gap: var(--sp-2);
}

.dok-galeria-glowne {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    cursor: zoom-in;
}

.dok-galeria-glowne img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    max-height: 70dvh;
    object-fit: contain;
}

.dok-galeria-miniatury {
    display: flex;
    gap: var(--sp-2);
    margin: 0;
    padding: 0 0 var(--sp-1);
    list-style: none;
    overflow-x: auto;
}

.dok-miniatura {
    display: block;
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    overflow: hidden;
    background: var(--card-2);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.dok-miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dok-miniatura.wybrana {
    border-color: var(--brand);
}

.dok-galeria-podpis {
    margin: 0;
    font-size: 0.8125rem;
}

.dok-galeria-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--sp-2);
}

.dok-galeria-siatka .dok-miniatura {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

/* Pełny ekran: nad topbarem (30) i paskiem zakładek (40), pod paskiem błędu Blazora.
   Tło zawsze ciemne, niezależnie od motywu — zdjęcie papieru czyta się na nim lepiej. */
.dok-pelny-ekran {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    padding: calc(var(--tap) + var(--sp-4)) var(--sp-2) var(--sp-4);
    background: rgb(0 0 0 / 0.92);
    overscroll-behavior: contain;
}

.dok-pelny-ekran img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dok-pelny-pasek {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: max(var(--sp-2), env(safe-area-inset-top)) var(--sp-3) var(--sp-2);
    color: #ffffff;
}

.dok-pelny-licznik {
    font-variant-numeric: tabular-nums;
}

.dok-pelny-strzalka {
    position: absolute;
    top: 50%;
    width: var(--tap-lg);
    height: var(--tap-lg);
    transform: translateY(-50%);
    font: inherit;
    font-size: 2rem;
    line-height: 1;
    color: #ffffff;
    background: rgb(255 255 255 / 0.16);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.dok-pelny-strzalka.poprzednie {
    left: var(--sp-2);
}

.dok-pelny-strzalka.nastepne {
    right: var(--sp-2);
}

/* ---------- 5. ekran dokumentu: kod kwitu, kurs, podgląd WZ ---------- */

.dok-kod-kwitu {
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.dok-kurs-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dok-kurs-lista li + li {
    margin-top: var(--sp-1);
}

.dok-adres-wz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin: var(--sp-3) 0;
}

/* Adres jest długi (26 znaków tokenu) — łamie się gdziekolwiek, zamiast rozpychać
   kartę poza ekran telefonu. */
.dok-adres-wz code {
    min-width: 0;
    padding: var(--sp-2);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.dok-qr {
    margin: var(--sp-3) 0;
}

.dok-qr:empty {
    display: none;
}

/* ---------- 6. raporty: kursy żwirownia → plac, które się nie domknęły ---------- */

.dok-kursy {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-3) 0;
}

@media (min-width: 40rem) {
    .dok-kursy {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dok-kursy > div {
    padding: var(--sp-3);
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.dok-kursy dt {
    font-size: 0.875rem;
    font-weight: 600;
}

.dok-kursy dd {
    margin: 0;
}

.dok-kursy dd:not(.muted) {
    font-size: 1.5rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.dok-kursy dd.muted {
    font-size: 0.8125rem;
}

/* Niedomknięty kurs to rzecz do sprawdzenia, nie alarm — tint jak `.ostrzezenia`. */
.dok-kursy > .dok-kursy-uwaga {
    background: var(--warn-bg);
    color: var(--warn-fg);
    border-color: transparent;
}

.dok-kursy-uwaga .muted {
    color: inherit;
}

/* ---------- 7. kartoteka: NIP kontrahenta ---------- */

.wz-nip-podpowiedz {
    max-width: 70ch;
    margin: 0 0 var(--sp-3);
    font-size: 0.875rem;
}

.wz-nip-brak {
    display: block;
    margin-top: var(--sp-1);
    font-size: 0.75rem;
    color: var(--muted);
}

.kartoteka tr.wz-nip-blad td {
    padding-top: 0;
}

.wz-nip-blad .form-error {
    margin: 0;
}

/* ---------- 8. wydruk ---------- */

@media print {
    /* Podgląd WZ drukuje klient: kartka bez tła z gradientem i bez ramki karty. */
    .auth-shell {
        display: block;
        min-height: 0;
        padding: 0;
        background: none;
    }

    .auth-card {
        width: auto;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    /* W ciemnym motywie tekst jest jasny, a przeglądarka nie drukuje tła — dokument
       klienta wyszedłby niemal pustą kartką. Na wydruk wracają ciemne litery. */
    :root:has(.wz-dokument) {
        --fg: #000000;
        --muted: #444444;
        --line: #999999;
        --warn-fg: #000000;
        --brand-900: #000000;
    }

    .wz-korekta {
        border: 1px solid #999999;
    }

    .dok-pelny-ekran,
    .dok-adres-wz .btn {
        display: none !important;
    }
}

/* Kartoteka kontrahentów: od 25 września 2026 dziewięć kolumn (adres w trzech polach).
   Bez minimalnych szerokości przeglądarka ścisnęła pola nazwy i NIP-u do kilku znaków —
   tabela i tak przewija się w poziomie (.table-scroll), a nazwa zostaje przyklejona. */
.kartoteka-kontrahenci th[scope="row"] input {
    min-width: 15rem;
}

.kartoteka-kontrahenci td input:not([type="checkbox"]) {
    min-width: 9rem;
}

.kartoteka-kontrahenci td input[size] {
    min-width: 6.5rem;
}

/* ---------- 9. ustawienia właściciela (`ust-`): kopie kwitów po zapisie ---------- */

/* Krokomierz ten sam co w panelu drukarki (`.druk-kopie`, druk.css) — właściciel
   i operator widzą jedną kontrolkę. Na telefonie opis typu nad krokomierzem, od
   40rem obok niego; każdy wiersz oddziela linia, bo typów jest pięć i to lista,
   nie tabela. */
.ust-sekcja h2 {
    margin-top: 0;
}

.ust-kopie {
    margin: var(--sp-4) 0;
    padding: 0;
    list-style: none;
}

.ust-kopie-wiersz {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
}

.ust-kopie-wiersz:last-child {
    border-bottom: 1px solid var(--line);
}

.ust-kopie-typ {
    display: grid;
    gap: var(--sp-1);
}

.ust-kopie-typ .muted {
    font-size: 0.875rem;
}

/* Wyłączony druk PW to decyzja z konsekwencją na placu, nie błąd — tint jak `.ostrzezenia`. */
.ust-uwaga {
    padding: var(--sp-2) var(--sp-3);
    background: var(--warn-bg);
    color: var(--warn-fg);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

/* `.druk-kopie > span` rozpycha etykietę — tu opis liczby stoi zaraz za „+”. */
.ust-kopie-krokomierz > .ust-kopie-opis {
    flex: none;
    min-width: 9rem;
}

@media (min-width: 40rem) {
    .ust-kopie-wiersz {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--sp-4);
    }
}