/* Runda 6 (porządki w rolach/uprawnieniach) — lekki finetuning: te same
   kolory co dotąd (akcent #0a3ea3 to już "marka" tej apki, patrz przyciski/
   linki poniżej), tylko wyciągnięte do zmiennych zamiast powtarzane
   dziesiątki razy jako gołe hexy. Zastosowane na razie w NOWYCH elementach
   (sidebar, karty) — reszta istniejących komponentów (tabele, przyciski,
   status-badge) zostaje wizualnie identyczna, to porządkowanie pod spodem,
   nie nowy wygląd tego, co już działa dobrze. */
:root {
    --color-accent: #0a3ea3;
    --color-accent-hover: #08306f;
    /* Runda 11: bg a touch cooler/darker than near-white so the white
       cards (surface) actually read as raised. Border a shade deeper to
       match. Conservative — the accent / brand identity is untouched. */
    --color-bg: #eef1f5;
    --color-surface: #ffffff;
    --color-sidebar-bg: #eef1f6;
    --color-sidebar-active-bg: #dce6f7;
    --color-border: #d7dce3;
    --color-text: #1a1a1a;
    --color-text-muted: #555;
    --color-success-bg: #d1e7dd;
    --color-success-text: #0f5132;
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -6px rgba(0, 0, 0, 0.12);
}

/* max-width/margin przeniesione do .app-main (patrz sekcja "Boczny panel
   nawigacyjny" niżej) — .mobile-body (mobile.html) i .login-page
   (login.html) mają WŁASNE, w pełni samodzielne reguły wycentrowania i
   działają bez zmian niezależnie od tego, co dzieje się tutaj. */
body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background-color: var(--color-bg);
    /* Runda 11 (pkt 13): kill the double-tap-to-zoom gesture (and the
       ~300ms tap delay it implies). iOS ignores user-scalable=no in the
       viewport meta, but honours this. */
    touch-action: manipulation;
}

h1 {
    font-size: 1.5rem;
}

/* Wiersz pól filtrów pod nagłówkami kolumn — każde pole ma być wąskie
   i mieścić się w swojej kolumnie, a nie wyglądać jak zwykły nagłówek.
   padding-top: 0 (bez odpowiadającego mu padding-bottom) przyklejało pole
   do górnej krawędzi wiersza, zostawiając całą "poduszkę" pod spodem —
   input wyglądał na przesunięty do góry zamiast wyśrodkowany. Ten sam,
   mały odstęp z obu stron trzyma pole blisko nagłówka nad nim, ale już
   symetrycznie. */
.column-filters th {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background-color: var(--color-surface);
}

/* Kolumna "Aktywne role" (companies.html) — cztery checkboxy jako labele
   space-joined w JS zawijały się w środku etykiety, gdy zabrakło miejsca
   w komórce (checkbox jednej roli na końcu wiersza, jej tekst na
   początku następnego) — jedna rola na linię jest czytelna niezależnie od
   szerokości kolumny. */
.roles-cell label {
    display: block;
    white-space: nowrap;
}

.column-filters input,
.column-filters select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-weight: normal;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* border-collapse: separate + border-spacing: 0 (NOT collapse) — needed for
   border-radius to actually round the table's corners; with collapse, the
   cells' own borders paint over the container's rounded edge and the
   corners come out square regardless. tbody tr:last-child td below drops
   the last row's own bottom border, since the table's border already
   closes it off (collapse:collapse gave up on that; separate needs it
   said explicitly, else the last row prints a double line). */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Ta sama tonacja co --color-sidebar-bg — nagłówki tabel dostają ten sam
   odcień co panel boczny, żeby lista i nawigacja czytały się jako jedna,
   spójna całość, zamiast dwóch niezależnie dobranych szarości. */
th {
    background-color: var(--color-sidebar-bg);
    font-weight: 600;
}

/* Kolorowe "znaczniki" statusu — pomagają dyspozytorowi od razu zobaczyć,
   na jakim etapie jest dokument, bez czytania samego słowa. white-space:
   nowrap — bez tego dłuższe etykiety (np. "Podpisany (przewoźnik)") łamały
   się na dwie linie WEWNĄTRZ pigułki, przez co wyglądała nieproporcjonalnie
   wysoko w porównaniu do jednolinijkowych sąsiadek ("Nowy") — teraz każda
   pigułka jest zawsze jedną linią, szerokość różni się (zależnie od
   długości etykiety), ale wysokość jest zawsze taka sama. */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-draft {
    background-color: #f1f1f1;
    color: #555;
    border: 1px dashed #b5b5b5;
}

.status-new {
    background-color: #e0e0e0;
    color: #333;
}

/* PR-A1: 9 statusów (documentStatuses.js). Kolory według etapu: szary =
   przed podpisem nadawcy, fiolet = wystawiony, żółty = zeskanowany, niebieski
   = podpis przewoźnika, zielony = podpis odbiorcy, czerwony = anulowany albo
   odmowa. */
.status-issued {
    background-color: #e2d9f3;
    color: #4a2a82;
}

.status-scanned_carrier,
.status-scanned_consignee {
    background-color: #fff3cd;
    color: #7a5a00;
}

.status-signed_carrier {
    background-color: #cfe2ff;
    color: #0a3ea3;
}

.status-signed_consignee {
    background-color: #d1e7dd;
    color: #0f5132;
}

.status-cancelled,
.status-consignee_refusal {
    background-color: #f8d7da;
    color: #842029;
}

/* Wiersz zastępczy w tbody na czas ładowania / braku wyników / błędu —
   patrz renderMessageRow() w app.js. */
.table-message {
    text-align: center;
    color: #555;
    padding: 1.5rem;
}

/* --- Widok szczegółów dokumentu (document.html) --- */

/* Link nawigacyjny na górze strony — używany zarówno do "powrotu" (widok
   szczegółów -> lista), jak i do przejścia "do przodu" (lista -> historia). */
.nav-link {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: #333;
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: underline;
}

.page-description {
    color: #555;
    margin-top: 0;
}

/* Lista <dt>/<dd> z polami dokumentu — dwie kolumny: etykieta i wartość. */
.document-fields {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 1rem 0;
}

.document-fields dt {
    font-weight: 600;
    color: #555;
}

.document-fields dd {
    margin: 0;
}

/* Kolumna flagi na liście dokumentów (index.html) — wąska, sama ikona,
   żeby nie rozciągać tabeli tak jak zrobiłaby to pełna kolumna tekstowa. */
#documents-table th:first-child,
#documents-table td:first-child {
    width: 2rem;
    padding-left: 1rem;
    padding-right: 0.4rem;
    text-align: center;
}

.event-timestamp {
    color: #777;
    font-size: 0.85rem;
}

/* --- Historia zdarzeń (history.html) --- */

/* UUID jest długi i nikt go nie czyta na głos — monospace + stonowany
   kolor + mniejsza czcionka, żeby nie dominował nad resztą wiersza, ale
   dalej dało się go skopiować, gdyby był potrzebny (np. do zgłoszenia).
   Noc 4 (#4): bez kroju monospace, krój interfejsu z cyframi tabelarycznymi. */
.uuid-cell {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    color: #777;
    white-space: nowrap;
}

/* Kolumna "Kto" pokazuje trzy linie naraz (kierowca, pojazd, referencja
   klienta) — mniejsza czcionka i węższe odstępy między liniami sprawiają,
   że mieści się to czytelnie w jednej komórce, zamiast rozciągać wiersz. */
.performed-by-cell {
    font-size: 0.85rem;
    line-height: 1.5;
}

/* --- Logowanie (login.html) --- */

/* Branding Vezlink (2026-10-23): tokeny marki na .vz-login (jak .app-shell
   w back office; :root zostaje dla mobile do osobnego reskinu). Jeden
   wygląd dla wariantu web (e-mail + hasło) i mobile (telefon + PIN): na
   komputerze karta na jasnym tle, na telefonie cała szerokość ekranu. */
.vz-login {
    --vz-green: #00a878;
    --vz-green-strong: #008460;
    --vz-green-strong-hover: #0b5e44;
    --vz-ink: #111816;
    --vz-muted: #59635f;
    --vz-nav-text: #2b3532;
    --vz-border: #e3e6e6;
    --vz-control-border: #d6dada;
    --vz-sidebar: #f6f7f7;
    --vz-surface: #ffffff;
    --color-accent: var(--vz-green-strong);
    --color-text-muted: var(--vz-muted);
    min-height: 100vh;
    /* Noc 4 (4C, #4): krój PDF, cyfry tabelaryczne przy numerach. */
    font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--vz-ink);
    background-color: var(--vz-sidebar);
}

/* Okno wyboru kraju i numer kierunkowy na logowaniu: ten sam krój (bez
   IBM Plex Mono), cyfry tabelaryczne. */
.vz-login .country-dialog,
.vz-login .country-picker-dial,
.vz-login .country-dialog-dial {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

/* Noc 4 (#15), noc 5 (#110 pkt 2): na telefonie okno kraju zaczyna się pod
   strefą rozmycia (jak --vzm-top-safe). */
@media (max-width: 520px) {
    .vz-login .country-dialog {
        padding-top: calc(env(safe-area-inset-top) + min(44px, env(safe-area-inset-top)));
    }
}

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

.login-page .language-switcher {
    align-self: flex-end;
    margin-bottom: 40px;
}

.login-card {
    width: 100%;
    padding: 40px 36px 36px;
    box-sizing: border-box;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(17, 24, 22, 0.04), 0 12px 32px -16px rgba(17, 24, 22, 0.18);
}

.login-logo {
    display: block;
    width: 168px;
    height: auto;
    margin: 0 auto 28px;
}

.login-card h1 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    color: var(--vz-ink);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Runda 8: login.js swaps the field set (#login-fields) for the driver
   variant — display: contents keeps its label/input children as direct
   participants in .login-form's flex column (a plain block wrapper would
   make <label> flow inline again). */
#login-fields {
    display: contents;
}

.login-form label {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-nav-text);
}

.login-form input,
.login-phone-row .country-select {
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    color: var(--vz-ink);
    background-color: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
}

.login-form input:focus,
.login-phone-row .country-select:focus {
    outline: none;
    border-color: var(--vz-green);
    box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.18);
}

/* Runda 11 — driver step 1: country picker + national number on one row. */
.login-phone-row {
    display: flex;
    gap: 8px;
}

.login-phone-row .country-select {
    flex: 0 0 auto;
    padding: 12px 10px;
}

.login-phone-row input {
    flex: 1 1 auto;
    min-width: 0;
}

/* `> button` — only the form's own submit button. */
.login-form > button {
    min-height: 48px;
    margin-top: 24px;
    padding: 12px 20px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--vz-green-strong);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.login-form > button:hover {
    background-color: var(--vz-green-strong-hover);
}

.login-form > button:focus-visible {
    outline: 2px solid var(--vz-green);
    outline-offset: 2px;
}

.vz-login .error-message {
    margin: 16px 0 0;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #b42318;
    background-color: #fdecea;
    border-radius: 8px;
}

.vz-login .error-message[hidden] {
    display: none;
}

/* Telefon: bez karty, cała szerokość, większe odstępy pod kciuk. */
@media (max-width: 520px) {
    .vz-login {
        background-color: var(--vz-surface);
    }

    .login-page {
        padding: 16px 20px 32px;
    }

    .login-page .language-switcher {
        margin-bottom: 32px;
    }

    .login-card {
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .login-logo {
        width: 152px;
        margin-bottom: 32px;
    }
}

.error-message {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    background-color: #f8d7da;
    color: #842029;
    border-radius: 6px;
}

/* --- Logowanie mobile: ekrany startowe (noc 2, 2A; login-mobile.js) ---
   Start.dc.html: ekran z logo (odsłonięcie + pasek), PIN z kropkami i
   własną klawiaturą, ładowanie, powitanie. Ekran numeru telefonu nie ma
   pliku projektu: zbudowany z tych samych tokenów. Bez animacji przy
   prefers-reduced-motion. */
.vz-login-mobile {
    background: #f6f7f7;
}

@keyframes vzReveal {
    0% { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(6px); }
    20% { opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
}

@keyframes vzFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes vzPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes vzShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.vzs {
    /* Noc 4 (4C, #15), noc 5 (#110 pkt 2): jak --vzm-top-safe w aplikacji. */
    --vzm-top-safe: calc(env(safe-area-inset-top) + min(44px, env(safe-area-inset-top)));
    position: fixed;
    inset: 0;
    overflow-y: auto;
    font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: #111816;
}

.vzs-white {
    background: #ffffff;
}

.vzs-mist {
    background: #f6f7f7;
}

.vzs-center {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.vzs-logo {
    display: block;
    height: 28px;
    width: auto;
    align-self: center;
}

.vzs-logo-large {
    height: 44px;
}

.vzs-reveal {
    animation: vzReveal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.vzs-fade {
    animation: vzFade 0.45s ease-out both;
}

.vzs-pulse {
    animation: vzPulse 1.1s ease-in-out infinite;
}

/* Noc 3 (3A, #94): ekran ładowania to samo logo Vezlink: odsłonięcie, potem
   spokojne "oddychanie" (bez paska i bez tekstu). */
.vzs-breathe {
    animation: vzReveal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both, vzBreathe 1.6s 0.9s ease-in-out infinite;
}

@keyframes vzBreathe {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

.vzs-shake {
    animation: vzShake 0.35s ease-in-out;
}

.vzs-loading-text {
    font-size: 14px;
    color: #5b6360;
}

/* PIN (Start.dc.html): 64 px 28 px 34 px, logo 28 px, tytuł 26 px / 600. */
.vzs-pin,
.vzs-column {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(64px + env(safe-area-inset-top)) 28px calc(34px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    max-width: 440px;
    margin: 0 auto;
}

.vzs-column {
    padding-top: calc(16px + var(--vzm-top-safe));
}

.vzs-top-row {
    display: flex;
    justify-content: flex-end;
    min-height: 36px;
    margin-bottom: 12px;
}

.vzs-pin-head {
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.vzs-title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
}

.vzs-pin-number {
    font-size: 15px;
    color: #5b6360;
}

.vzs-pin-number .vzs-mono {
    white-space: nowrap;
}

.vzs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.vzs-mono {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.vzs-dots {
    margin-top: 34px;
    display: flex;
    justify-content: center;
    gap: 18px;
}

.vzs-dot {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #a9b3af;
}

.vzs-dot.is-on {
    background: #008460;
    border-color: #008460;
}

.vzs-pin-message {
    min-height: 22px;
    margin-top: 10px;
    font-size: 14px;
    color: #b42318;
    text-align: center;
}

.vzs-keypad {
    margin-top: auto;
    padding-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vzs-key {
    height: 64px;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    font-family: inherit;
    font-size: 26px;
    font-weight: 500;
    color: #111816;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 24, 22, 0.08);
    -webkit-tap-highlight-color: transparent;
}

.vzs-key:active {
    background: #e6f6f0;
}

.vzs-key-back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
}

/* Noc 3 (#94): PIN zawsze 4 cyfry, wysyłka po 4. cyfrze, więc lewe dolne
   pole projektu zostaje puste (bez klawisza OK). Usuwanie: cienka ikona
   Tabler "backspace" w kolorze tekstu. */
.vzs-key-empty {
    height: 64px;
}

.vzs-key-back {
    color: #111816;
}

.vzs-key-back svg {
    display: block;
}

.vzs-link {
    align-self: center;
    margin-top: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #008460;
    text-decoration: none;
    cursor: pointer;
}

/* Numer telefonu: kraj (okno z wyszukiwarką) + numer, pola 52 px. */
.vzs-phone-form {
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vzs-phone-row {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.vzs-input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 14px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #cdd5d1;
    border-radius: 12px;
    font-size: 18px;
    color: #111816;
}

.vzs-input:focus {
    outline: none;
    border-color: #00a878;
    box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.18);
}

.vzs-phone-row .country-picker {
    height: 52px;
    border-radius: 12px;
}

.vzs-primary {
    height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 12px;
    background: #008460;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.vzs-error {
    margin: 0;
    font-size: 14px;
    color: #b42318;
}

.vzs-error[hidden] {
    display: none;
}

/* Powitanie: data 15 px, "Cześć" 34 px / 600. */
.vzs-hello {
    gap: 8px;
}

.vzs-hello-date {
    font-size: 15px;
    color: #5b6360;
}

.vzs-hello-name {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    padding: 0 24px;
    animation-delay: 0.1s;
}

.vzs-hello-link {
    margin-top: 26px;
    animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .vzs-reveal,
    .vzs-breathe,
    .vzs-fade,
    .vzs-pulse,
    .vzs-shake {
        animation: none;
    }
}

/* --- Back office: powłoka i branding Vezlink (PR A3b-1b; shell.js buduje
   treść #user-bar i nazwę firmy w .app-main). Każdy z 10 plików back
   office ma ten sam szkielet: <div class="app-shell"><nav id="user-bar"
   class="sidebar">...<main class="app-main">.

   Tokeny marki są zdefiniowane na .app-shell, NIE na :root: style.css jest
   wspólny z mobile (mobile.html, mobile-document.html, login.html nie mają
   .app-shell), a wygląd mobile ma zostać bez zmian do osobnej decyzji. Te
   same reguły przestawiają w back office dawne tokeny (--color-accent itd.),
   więc istniejące przyciski i linki biorą zieleń bez zmian w ich regułach.
   Decyzja: docs/adr/2026-10-07-pr-a3b-1b-powloka-i-branding.md. --- */

/* IBM Plex, samodzielnie hostowany (bez Google Fonts): podzbiory latin i
   latin-ext, rozdzielone unicode-range, więc przeglądarka pobiera plik
   latin-ext dopiero, gdy na stronie jest np. "ł". Pliki pobierane są tylko,
   gdy reguła ich używa, czyli wyłącznie w back office. Licencja: fonts/OFL.txt. */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Noc 4 (#4 właściciela, 2026-10-26): IBM Plex Sans Condensed, krój z PDF, dla całego
   interfejsu (web i telefon). Pliki z @fontsource/ibm-plex-sans-condensed 5.1.0 (OFL, fonts/OFL.txt).
   Zamiany krojów w sekcjach robią zadania 4B (back office) i 4C (telefon). */
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-condensed-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-condensed-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-condensed-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-condensed-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-condensed-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.app-shell {
    /* Paleta Vezlink (decyzja właściciela). #00A878 ma na bieli kontrast
       ok. 3,1:1: tylko sygnał (pasek aktywnej pozycji, fokus, krawędzie przy
       hover), nigdy tekst ani ikony menu. Przyciski z białym tekstem i linki
       w #008460 (ok. 4,7:1). */
    --vz-green: #00a878;
    --vz-green-strong: #008460;
    --vz-ink: #111816;
    --vz-sidebar: #f6f7f7;
    --vz-surface: #ffffff;
    /* Pozostałe wartości z makiety (Main.dc.html): hover linku/przycisku,
       tekst menu, Wyloguj, tekst drugorzędny, linie, hover pozycji, ramka
       pól i awatara, tło hover kafla wyboru. */
    --vz-green-strong-hover: #0b5e44;
    --vz-nav-text: #2b3532;
    --vz-logout-text: #3d4744;
    --vz-muted: #59635f;
    --vz-border: #e3e6e6;
    --vz-sidebar-hover: #eceeee;
    --vz-control-border: #d6dada;
    --vz-green-tint: #f7fbf9;
    /* Noc 4 (#4 właściciela): cały back office w IBM Plex Sans Condensed, jak
       PDF. --vz-font-mono zostaje jako alias tego samego kroju (IBM Plex Mono
       znika z interfejsu): sekcje, które go jeszcze wołają, dostają nowy krój
       bez zmian w ich regułach. Cyfry tabelaryczne w tabelach i liczbach. */
    --vz-font-sans: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --vz-font-mono: var(--vz-font-sans);

    /* Dawne tokeny, przestawione tylko w back office. */
    --color-accent: var(--vz-green-strong);
    --color-accent-hover: var(--vz-green-strong-hover);
    --color-bg: var(--vz-surface);
    --color-surface: var(--vz-surface);
    --color-sidebar-bg: var(--vz-sidebar);
    --color-sidebar-active-bg: var(--vz-surface);
    --color-border: var(--vz-border);
    --color-text: var(--vz-ink);

    display: flex;
    /* flex-start + panel sticky na wysokość okna: stopka panelu (profil,
       Ustawienia, Wyloguj) jest widoczna także przy długiej tabeli. */
    align-items: flex-start;
    min-height: 100vh;
    font-family: var(--vz-font-sans);
    color: var(--vz-ink);
    background-color: var(--vz-surface);
}

/* Noc 4 (#4): cyfry tabelaryczne (równa szerokość) w tabelach, licznikach i
   stronicowaniu, żeby kolumny liczb dało się czytać i porównywać. */
.app-shell table,
.app-shell .dl-table,
.app-shell .dl-count,
.app-shell .dl-chip-count,
.app-shell .pagination {
    font-variant-numeric: tabular-nums;
}

/* Kontrolki formularzy nie dziedziczą kroju same z siebie. */
.app-shell button,
.app-shell input,
.app-shell select,
.app-shell textarea {
    font-family: inherit;
}

/* Linki w treści (makieta: #008460, hover #0B5E44). Tylko linki bez klasy,
   żeby nie nadpisać zakładek i przycisków z własnymi kolorami. */
.app-main a:not([class]) {
    color: var(--vz-green-strong);
}

.app-main a:not([class]):hover {
    color: var(--vz-green-strong-hover);
}

/* Przyciski z białym tekstem, dotąd z kolorem wpisanym na sztywno.
   :not(:disabled): szary stan nieaktywny z reguł wyżej zostaje. */
.app-shell .inline-form button:not(:disabled) {
    background-color: var(--vz-green-strong);
}

.app-shell .inline-form button:hover:not(:disabled) {
    background-color: var(--vz-green-strong-hover);
}

.app-shell .add-toggle-button:hover,
.app-shell .table-action-button:hover,
.app-shell .pagination-page:hover {
    color: var(--vz-green-strong-hover);
    background-color: var(--vz-green-tint);
}

/* Fokus z klawiatury: 3 px, odstęp 2 px, w #008460, nie #00A878 z makiety
   (#00A878 na tle panelu #F6F7F7 ma 2,85:1, poniżej 3:1; #008460 ok. 4,4:1). */
.app-shell :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--vz-green-strong);
    outline-offset: 2px;
}

/* --- Panel boczny: wartości z makiety (248 px / 72 px zwinięty). --- */
.sidebar {
    position: sticky;
    top: 0;
    width: 248px;
    height: 100vh;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: var(--vz-sidebar);
    border-right: 1px solid var(--vz-border);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Na górze panelu tylko przycisk zwijania (logo jest w pasku obszaru
   głównego). Stała pozycja w obu stanach: lewa krawędź 20 px od krawędzi
   ekranu (14 + 6 rozwinięty, 12 + 8 zwinięty), więc środek ikony (36 px)
   leży w tej samej kolumnie co ikony pozycji menu. */
.shell-top {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.shell-toggle {
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--vz-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.shell-toggle:hover {
    background-color: var(--vz-sidebar-hover);
}

.shell-icon {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
}

/* Ikony Tabler (icons.js) dla pozycji spoza makiety, w tym samym rozmiarze. */
.sidebar .icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.shell-nav,
.shell-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shell-section-heading {
    padding: 6px 10px;
    font-family: var(--vz-font-sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--vz-muted);
}

.shell-separator {
    display: block;
    height: 1px;
    margin: 10px 6px;
    background-color: var(--vz-border);
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--vz-nav-text);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.sidebar .nav-link:hover {
    background-color: var(--vz-sidebar-hover);
    text-decoration: none;
}

.sidebar .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Aktywna pozycja jak w makiecie: białe tło, tekst Ink 600, pasek #00A878.
   Ikony biorą kolor tekstu (currentColor), także tu. */
.sidebar .nav-link-active,
.sidebar .nav-link-active:hover {
    background-color: var(--vz-surface);
    color: var(--vz-ink);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--vz-green);
}

/* "Testowe kody QR": tymczasowy link spoza makiety, drugorzędny. */
.sidebar .nav-link-secondary {
    min-height: 36px;
    font-size: 13px;
    color: var(--vz-muted);
}

/* "Nowy dokument" w sekcji DOKUMENTY: kształt jak pozycje panelu, wyróżniony
   kolorem (feedback 2026-10-23). Po regułach .nav-link, żeby je nadpisać. */
.sidebar .shell-new-document {
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--vz-green-strong);
    background-color: var(--vz-green-tint);
    border: 1px solid var(--vz-green);
}

.sidebar .shell-new-document:hover {
    color: #ffffff;
    background-color: var(--vz-green-strong);
    border-color: var(--vz-green-strong);
}

.sidebar .shell-new-document:focus-visible {
    outline: 2px solid var(--vz-green);
    outline-offset: 2px;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--vz-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Kółko profilu (32 px) wyśrodkowane w tej samej kolumnie co ikony 16 px
   (środek 36 px od krawędzi ekranu): 14 + 6 rozwinięty, 12 + 8 zwinięty. */
.sidebar .shell-user {
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    color: var(--vz-ink);
}

.sidebar .shell-user .nav-label {
    font-weight: 600;
}

.shell-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    color: var(--vz-nav-text);
    background-color: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 16px;
}

.sidebar .shell-logout {
    color: var(--vz-logout-text);
}

/* Stan zwinięty (shell.js: localStorage ecmr_sidebar_collapsed, per
   przeglądarka): 72 px, przycisk rozwijania w tym samym miejscu, same
   ikony. Etykiety zostają w DOM ukryte tylko wizualnie, więc czytnik
   ekranu nadal słyszy nazwę linku. */
body.sidebar-collapsed .sidebar {
    width: 72px;
    padding: 18px 12px;
}

body.sidebar-collapsed .shell-toggle {
    margin-left: 8px;
}

/* Ikony pozycji w tej samej kolumnie co przy 248 px: rozwinięty 14 (panel)
   + 14 (pozycja) = 28 px do lewej krawędzi ikony; zwinięty 12 + 16. Środek
   ikony 16 px wypada na 36 px w obu stanach (kółko profilu: niżej). */
body.sidebar-collapsed .sidebar .nav-link {
    padding-left: 16px;
    padding-right: 0;
}

body.sidebar-collapsed .sidebar .shell-user {
    padding-left: 8px;
}

body.sidebar-collapsed .sidebar .shell-new-document {
    padding-left: 15px;
}

body.sidebar-collapsed .sidebar .nav-label,
body.sidebar-collapsed .shell-section-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Obszar główny jak w makiecie: bez limitu szerokości, treść z odstępem
   26px 36px 40px pod paskiem nagłówka. */
.app-main {
    flex: 1;
    min-width: 0;
    padding: 0 36px 40px;
    box-sizing: border-box;
}

/* Pasek nagłówka (shell.js): logo Vezlink po lewej, nazwa firmy po
   prawej. Ujemne marginesy: pasek i jego dolna linia biegną przez całą
   szerokość obszaru głównego. */
.app-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    box-sizing: border-box;
    min-height: 60px;
    margin: 0 -36px 26px;
    padding: 10px 36px;
    border-bottom: 1px solid var(--vz-sidebar-hover);
}

.app-topbar-logo {
    display: flex;
    align-items: center;
    border-radius: 6px;
}

.app-topbar-logo img {
    display: block;
    height: 26px;
    width: auto;
}

.app-company-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--vz-ink);
}

/* Noc 4 (#13, #102): przycisk vezpass (logo jak na telefonie) po lewej od
   nazwy firmy; okno z kodem QR paszportu (webVezpass.js). */
.app-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.app-vezpass-button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 10px;
    box-sizing: border-box;
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 10px;
    cursor: pointer;
}

.app-vezpass-button:hover {
    border-color: var(--vz-green);
    background: var(--vz-green-tint);
}

.app-vezpass-button svg {
    display: block;
}

.shell-dialog.wv-dialog {
    max-width: 380px;
}

.shell-dialog.wv-dialog[open] {
    gap: 8px;
}

.wv-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wv-logo svg {
    display: block;
}

.wv-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.wv-body[hidden] {
    display: none;
}

.wv-frame {
    padding: 16px;
    border: 1px solid var(--vz-border);
    border-radius: 16px;
    background: #ffffff;
}

.wv-code-qr {
    width: 248px;
    min-height: 248px;
}

.wv-code-qr img,
.wv-code-qr canvas {
    display: block;
    width: 248px;
    height: 248px;
}

.wv-code-text {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    user-select: all;
}

.wv-countdown {
    margin: 0;
    font-size: 14px;
    color: var(--vz-muted);
    font-variant-numeric: tabular-nums;
}

.wv-who {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.wv-name {
    font-size: 16px;
    font-weight: 600;
}

.wv-company {
    font-size: 14px;
    color: var(--vz-muted);
}

.wv-error {
    margin: 0;
    color: #991b1b;
    font-size: 14px;
}

/* Pierwszy nagłówek strony bez górnego marginesu domyślnego: odstęp od
   paska daje padding 26 px z makiety. */
.app-topbar + h1,
.app-topbar + .sub-tabs {
    margin-top: 0;
}

/* --- Ustawienia firmy (4E, Noc 4; settings.html, settings*.js) ---
   Krój z reszty back office (--vz-font-sans; od Nocy 4 IBM Plex Sans
   Condensed), przyciski 40 px z promieniem 10 px jak pasek akcji (#102, #6),
   liczby wyrównane cyframi tabelarycznymi. */
.app-shell .settings-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 1200px;
    font-variant-numeric: tabular-nums;
}

.app-shell .settings-heading {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #3d4744;
}

/* Night 6 (#116 pt 12, board Ustawienia-zakladki): the tabs share the
   full width equally, 48 px high, 16 px text. */
.app-shell .settings-tabs {
    display: flex;
    border-bottom: 1px solid var(--vz-border);
    overflow-x: auto;
}

.app-shell .settings-tab {
    flex: 1 1 0;
    min-width: max-content;
    min-height: 48px;
    padding: 0 16px;
    margin-bottom: -1px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--vz-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.app-shell .settings-tab:hover {
    color: var(--vz-ink);
}

.app-shell .settings-tab[aria-selected='true'] {
    color: var(--vz-ink);
    border-bottom-color: var(--vz-green);
}

.app-shell .settings-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.app-shell .settings-panel[hidden] {
    display: none;
}

.app-shell .settings-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--vz-border);
    border-radius: 10px;
    background: var(--vz-surface);
}

.app-shell .settings-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.app-shell .settings-card-title:not(:first-child) {
    margin-top: 8px;
}

.app-shell .settings-readonly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
    margin: 0;
}

.app-shell .settings-readonly dt {
    font-size: 13px;
    color: var(--vz-muted);
}

.app-shell .settings-readonly dd {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 500;
    min-height: 20px;
}

.app-shell .settings-note {
    margin: 0;
    font-size: 13px;
    color: var(--vz-muted);
}

.app-shell .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.app-shell .settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.app-shell .settings-field[hidden] {
    display: none;
}

.app-shell .settings-field-wide {
    grid-column: 1 / -1;
}

.app-shell .settings-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--vz-nav-text);
}

.app-shell .settings-required {
    margin-left: 2px;
    color: #b42318;
}

.app-shell .settings-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    color: var(--vz-ink);
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 10px;
}

.app-shell select.settings-input {
    padding-right: 8px;
}

.app-shell .settings-input:hover {
    border-color: var(--vz-green);
}

.app-shell .settings-input-invalid {
    border-color: #b42318;
}

.app-shell .settings-number {
    font-variant-numeric: tabular-nums;
}

.app-shell .settings-form-actions,
.app-shell .settings-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.app-shell .settings-dialog-actions {
    justify-content: flex-end;
    margin-top: 4px;
}

.app-shell .settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--vz-ink);
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 10px;
    cursor: pointer;
}

.app-shell .settings-button:hover:not(:disabled) {
    border-color: var(--vz-green);
    background: var(--vz-green-tint);
}

.app-shell .settings-button-primary {
    color: #ffffff;
    background: var(--vz-green-strong);
    border-color: var(--vz-green-strong);
}

.app-shell .settings-button-primary:hover:not(:disabled) {
    background: var(--vz-green-strong-hover);
    border-color: var(--vz-green-strong-hover);
}

.app-shell .settings-button-danger {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.app-shell .settings-button-danger:hover:not(:disabled) {
    background: #8f1c13;
    border-color: #8f1c13;
}

.app-shell .settings-button:disabled {
    color: #7a837f;
    background: #eef1f0;
    border-color: #eef1f0;
    cursor: not-allowed;
}

.app-shell .settings-button-small {
    font-size: 14px;
    padding: 0 12px;
}

.app-shell .settings-status {
    font-size: 14px;
    color: var(--vz-green-strong);
}

.app-shell .settings-error {
    margin: 0;
    font-size: 14px;
    color: #b42318;
}

.app-shell .settings-error[hidden] {
    display: none;
}

.app-shell .settings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-shell .settings-table-wrap {
    /* relative: the visually hidden header text (absolute) stays inside the
       scrolling box instead of widening the page. */
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--vz-border);
    border-radius: 10px;
}

.app-shell .settings-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-collapse: collapse;
    font-size: 14px;
}

.app-shell .settings-table td:not(:last-child) {
    white-space: nowrap;
}

.app-shell .settings-table th {
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--vz-muted);
    background: var(--vz-sidebar);
    border-bottom: 1px solid var(--vz-border);
    white-space: nowrap;
}

.app-shell .settings-table td {
    padding: 8px 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--vz-border);
}

.app-shell .settings-table tbody tr:last-child td {
    border-bottom: 0;
}

.app-shell .settings-row-inactive td {
    color: var(--vz-muted);
}

.app-shell .settings-cell-name {
    font-weight: 600;
}

.app-shell .settings-self {
    font-weight: 400;
    color: var(--vz-muted);
}

.app-shell .settings-sub {
    display: block;
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .settings-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.app-shell .settings-chip {
    display: inline-block;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.app-shell .settings-chip-active {
    color: #00694c;
    background: #e6f6f0;
}

.app-shell .settings-chip-inactive {
    color: #5b6360;
    background: #eef1f0;
}

.app-shell .settings-online {
    font-weight: 600;
    color: var(--vz-green-strong);
}

.app-shell .settings-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--vz-muted);
}

/* My profile (Night 6, #116 pt 13): three cards side by side as on the
   board, one column on narrow screens. */
.app-shell .settings-profile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.app-shell .settings-kv {
    display: grid;
    grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
    gap: 10px 24px;
    margin: 0;
    font-size: 15px;
}

.app-shell .settings-kv dt {
    color: #3d4744;
}

.app-shell .settings-kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.app-shell .settings-lang-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-shell .settings-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    font: inherit;
    font-size: 15px;
    color: var(--vz-ink);
    text-align: left;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 10px;
    cursor: pointer;
}

.app-shell .settings-lang:hover {
    border-color: var(--vz-green);
}

.app-shell .settings-lang-selected {
    font-weight: 600;
    background: #f1faf6;
    border-color: #9fd8c3;
}

.app-shell .settings-lang svg {
    color: var(--vz-green-strong);
}

/* Column search (Night 6, #116 pt 14): a row of fields under the headers. */
.app-shell .settings-filter-row td {
    padding: 8px 6px;
    background: var(--vz-surface);
    border-bottom: 1px solid var(--vz-border);
}

.app-shell .settings-filter-row td:first-child {
    padding-left: 10px;
}

.app-shell .settings-filter-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 80px;
    height: 32px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: var(--vz-ink);
    background: var(--vz-surface);
    border: 1px solid #cdd5d1;
    border-radius: 6px;
}

.app-shell .settings-filter-input:hover,
.app-shell .settings-filter-input:focus {
    border-color: var(--vz-green);
}

.app-shell .settings-filter-select {
    padding-right: 4px;
    color: #3d4744;
}

/* Company details, "Masterdata" (Night 6, #116 pt 16): the switch 44 x 26
   of the board. */
.app-shell .settings-masterdata {
    max-width: 760px;
}

.app-shell .settings-switch-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.app-shell .settings-switch-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.app-shell .settings-switch-label {
    font-size: 16px;
}

.app-shell .settings-switch-description {
    font-size: 14px;
    color: #3d4744;
}

.app-shell .settings-switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    padding: 0;
    background: #cdd5d1;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.app-shell .settings-switch[aria-checked='true'] {
    background: var(--vz-green-strong);
}

.app-shell .settings-switch[aria-busy='true'] {
    cursor: progress;
}

.app-shell .settings-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.app-shell .settings-switch[aria-checked='true'] .settings-switch-knob {
    transform: translateX(18px);
}

.app-shell .settings-switch:focus-visible,
.app-shell .settings-lang:focus-visible {
    outline: 2px solid var(--vz-green);
    outline-offset: 2px;
}

.settings-dialog {
    font-variant-numeric: tabular-nums;
}

.settings-dialog .settings-dialog-body,
.settings-dialog .settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-dialog .settings-dialog-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.settings-dialog .settings-phone,
.settings-dialog .settings-secret-row {
    display: flex;
    gap: 8px;
}

.settings-dialog .settings-phone .country-picker {
    min-height: 40px;
}

.settings-dialog .settings-secret {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
    padding: 14px 16px;
    background: var(--vz-sidebar);
    border-radius: 10px;
}

.settings-dialog .settings-secret dt {
    font-size: 13px;
    color: var(--vz-muted);
}

.settings-dialog .settings-secret dd {
    margin: 0;
    font-weight: 600;
    word-break: break-all;
}

.settings-dialog .settings-secret-value {
    font-family: inherit;
    font-size: 22px;
    letter-spacing: 0.08em;
}

@media (max-width: 1100px) {
    .app-shell .settings-profile {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .app-shell .settings-grid,
    .app-shell .settings-profile {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Okno "W jakiej roli tworzysz dokument?" (natywny <dialog>, shell.js),
   wartości z makiety. */
.shell-dialog {
    box-sizing: border-box;
    width: calc(100% - 48px);
    max-width: 560px;
    padding: 24px;
    color: var(--vz-ink);
    background-color: var(--vz-surface);
    border: 0;
    border-radius: 8px;
}

.shell-dialog[open] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shell-dialog::backdrop {
    background-color: rgba(17, 24, 22, 0.5);
}

.shell-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.shell-dialog-eyebrow {
    display: block;
    font-family: var(--vz-font-sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vz-green-strong);
}

.shell-dialog-title {
    margin: 4px 0 0;
    font-size: 20px;
}

.shell-dialog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--vz-ink);
    background-color: var(--vz-sidebar);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.shell-dialog-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shell-dialog-option {
    display: flex;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--vz-ink);
    text-align: left;
    background-color: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    cursor: pointer;
}

.shell-dialog-option:hover {
    background-color: var(--vz-green-tint);
    border-color: var(--vz-green);
}

/* --- Zakładki "Użytkownicy / Kierowcy / Magazynierzy" (Runda 6) —
   users.js/drivers.js/warehouse-keepers.js: renderSubTabs. Te same trzy
   strony co dotąd, tylko spięte wspólnym paskiem, żeby dało się między
   nimi przełączać bez powrotu do panelu bocznego. --- */
.sub-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
}

.sub-tab-link {
    padding: 0.6rem 1rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.sub-tab-link:hover {
    color: var(--color-text);
}

.sub-tab-link-active {
    color: var(--color-accent);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

/* --- Przyciski "+ Dodaj..." (Runda 6) — formularz jest teraz domyślnie
   schowany (`hidden`), ten przycisk go pokazuje. Styl "drugorzędny" (obrys,
   nie wypełnienie) — ten sam wzorzec co .mobile-secondary-button, żeby nie
   konkurował wizualnie z głównym przyciskiem submit wewnątrz formularza. --- */
.add-toggle-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    background-color: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.add-toggle-button:hover {
    background-color: #eef3fc;
}

/* --- "Szczegóły" w tabelach (Runda 7; "Wyloguj" jest od PR A3b-1b pozycją
   panelu, shell.js) — oba były
   zwykłymi linkami tekstowymi (.nav-link: bez obrysu, bez tła), przez co
   nie było widać, że to klikalne AKCJE, nie nawigacja do innej strony w
   ramach tej samej hierarchii. Ten sam "drugorzędny" obrys co
   .add-toggle-button powyżej — spójny język wizualny dla każdego przycisku
   w apce, tylko bez jego margin-top (tu button stoi W WIERSZU tabeli /
   W KOLUMNIE stopki panelu, nie nad formularzem). --- */
.table-action-button {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    background-color: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
}

.table-action-button:hover {
    background-color: #eef3fc;
    text-decoration: none;
}

/* --- Strona firmy admina platformy (Noc 6, #116 pkt 17-18; company.html,
   plansza Admin-firma): nagłówek z nazwą i znaczkami ról, formularz i
   historia zmian obok siebie (pod 1200 px jedno pod drugim). Pola, karty i
   przyciski z sekcji ustawień (.settings-*). --- */
.app-shell .company-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    max-width: 1400px;
    font-variant-numeric: tabular-nums;
}

.app-shell .company-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.app-shell .company-head[hidden],
.app-shell .company-columns[hidden],
.app-shell .company-warning[hidden] {
    display: none;
}

.app-shell .company-head-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.app-shell .company-back {
    display: inline-flex;
    color: var(--vz-green-strong);
}

.app-shell .company-back:hover {
    color: var(--vz-green-strong-hover);
}

.app-shell .company-name {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.app-shell .company-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.app-shell .company-chip {
    display: inline-block;
    padding: 0 10px;
    font-size: 12px;
    line-height: 22px;
    color: #00694c;
    background: #e6f6f0;
    border-radius: 999px;
}

.app-shell .company-head-actions {
    display: flex;
    gap: 8px;
}

.app-shell .company-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.app-shell .company-form,
.app-shell .company-history {
    padding: 20px 24px;
    border-radius: 12px;
}

.app-shell .company-form .settings-card-title,
.app-shell .company-history .settings-card-title {
    font-size: 18px;
}

.app-shell .company-grid {
    display: grid;
    gap: 12px;
}

.app-shell .company-grid-vat {
    grid-template-columns: minmax(0, 1fr) 180px;
}

.app-shell .company-grid-postal {
    grid-template-columns: 130px minmax(0, 1fr);
}

.app-shell .company-grid-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-shell .company-section {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--vz-muted);
}

.app-shell .company-input-changed {
    background: #fffbf2;
    border-color: #e8a23a;
}

.app-shell .company-input-changed.settings-input-invalid {
    border-color: #b42318;
}

.app-shell .company-warning {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #5c3d00;
    background: #fff6e5;
    border: 1px solid #f3d19c;
    border-radius: 10px;
}

.app-shell .company-warning svg {
    flex: none;
    color: #b7791f;
}

.app-shell .company-history-table {
    min-width: 0;
    font-size: 13px;
}

/* Values wrap between words rather than being cut (the full value is
   readable without hovering), the date too (after the comma). */
.app-shell .company-history-table th,
.app-shell .company-history-table td,
.app-shell .company-history-table td:not(:last-child) {
    padding: 8px;
    white-space: normal;
    vertical-align: top;
}

.app-shell .company-history-old {
    color: #3d4744;
}

.app-shell .company-actions {
    margin: 0;
}

/* The users table (Runda 6 styles) scrolls inside the page on narrow
   screens instead of widening it. */
.app-shell .company-users-scroll {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 1200px) {
    .app-shell .company-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .app-shell .company-grid-vat,
    .app-shell .company-grid-postal,
    .app-shell .company-grid-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Przyciski akcji na company.html (Runda 6): dezaktywuj/aktywuj/usuń
   firmę lub użytkownika. .danger-button (usuń): kolory dawnego przycisku
   flagi z document.html (#a33 / #822), semantyka "nieodwracalne/wymaga
   uwagi". --- */
#company-actions {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0;
}

#company-actions button,
.user-actions-cell button {
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

#toggle-active-button,
.toggle-user-active-button {
    background-color: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

#toggle-active-button:hover,
.toggle-user-active-button:hover {
    background-color: #eef3fc;
}

/* border: 1px solid transparent, NOT none — every other action button next
   to this one (#toggle-active-button, .toggle-user-active-button,
   .add-toggle-button) has a real 1px border, and since none of these
   buttons set an explicit width, that border adds to their intrinsic size.
   A borderless .danger-button ended up 2px shorter/narrower than its
   neighbors — "przycisk usuń jest nierówny". A transparent border keeps
   the same footprint without adding a visible outline. */
.danger-button {
    background-color: #a33;
    color: white;
    border: 1px solid transparent;
}

.danger-button:hover:not(:disabled) {
    background-color: #822;
}

.danger-button:disabled {
    background-color: #ccc;
    color: #777;
    cursor: not-allowed;
}

.user-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.user-actions-cell .reset-credentials-form {
    flex-basis: 100%;
    margin-top: 0.4rem;
}

/* --- Karty (Runda 6) — sekcje na nowych stronach (profile.html, przyszła
   company.html) dostają lekkie obramowanie/cień zamiast gołego bloku
   tekstu, bez zmiany istniejących komponentów (tabele/status-badge
   zostają, jak były). --- */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
}

/* .form-message.form-message-success (combined selector, not a lone
   class) — deliberately higher specificity than the plain .form-message
   rule further down (line ~551, color: red), which otherwise wins on
   source order alone since both are single-class selectors of equal
   specificity. Caught by checking getComputedStyle in the browser, not by
   eye — the two colors look close enough at normal text size to miss. */
.form-message.form-message-success {
    color: var(--color-success-text);
}

/* --- Przełącznik języka (i18n.js: renderLanguageSwitcher) ---
   Mały, tekstowy — nie ma konkurować wizualnie z resztą paska. Aktywny
   język jest po prostu wyszarzony/disabled, więc "co jest teraz wybrane"
   widać bez dodatkowego oznaczenia. */
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: #777;
}

/* Language picker (i18n.js renderLanguageSwitcher): a round flag + the
   language name; a button with a listbox, the same on every page. */
.lang-picker {
    position: relative;
    display: inline-block;
}

.lang-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 10px 4px 6px;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    color: var(--vz-ink, #1d2321);
    background: #fff;
    border: 1px solid var(--vz-control-border, #d6dada);
    border-radius: 999px;
    cursor: pointer;
}

.lang-button:hover {
    border-color: #b8bebc;
}

.lang-button:focus-visible {
    outline: 2px solid var(--vz-focus, #00a878);
    outline-offset: 2px;
}

.lang-flag {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(17, 24, 22, 0.14);
}

.lang-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lang-chevron {
    width: 14px;
    height: 14px;
    color: #6b7370;
}

.lang-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 100%;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--vz-border, #e3e6e5);
    border-radius: 10px;
    box-shadow: 0 12px 32px -12px rgba(17, 24, 22, 0.25);
    outline: none;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 14px;
    color: var(--vz-ink, #1d2321);
    white-space: nowrap;
    border-radius: 6px;
    cursor: pointer;
}

.lang-option.is-active {
    background: #eef3f1;
}

.lang-option[aria-selected="true"] {
    font-weight: 600;
}

/* --- Formularz dodawania kierowcy (drivers.html) --- */

/* :not([hidden]) — Runda 6: these forms now start `hidden` (see
   drivers.html/warehouse-keepers.html/users.html/companies.html's
   "+ Dodaj..." toggle) — a plain `.inline-form { display: flex }` would
   outrank the browser's own `[hidden] { display: none }` rule (same class-
   beats-attribute-selector issue already documented on .scan-modal/
   .qr-display in this file, camera_qr round) and show the form anyway
   despite `hidden` being set. Caught the same way that one was: it
   rendered open on page load before any click. */
.inline-form:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1rem;
}

.inline-form input {
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* --- Wybór kraju (countries.js, noc 2, 2A): przycisk z okrągłą flagą
   i numerem kierunkowym, okno z wyszukiwarką. Ten sam w logowaniu mobile
   i w formularzach kierowcy/magazyniera (back office). --- */
.country-picker {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #cdd5d1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    color: #111816;
    cursor: pointer;
}

.country-picker .lang-flag {
    width: 22px;
    height: 22px;
}

.country-picker-dial {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.country-picker-chevron {
    width: 14px;
    height: 14px;
    color: #5b6360;
}

.inline-form .country-picker {
    padding: 0 0.6rem;
    font-size: 0.95rem;
    border-color: #ccc;
    border-radius: 6px;
}

.country-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 64px));
    padding: 0;
    border: 1px solid #e2e6e4;
    border-radius: 16px;
    background: #ffffff;
    color: #111816;
    font-family: var(--vz-font-sans, 'IBM Plex Sans Condensed', system-ui, sans-serif);
    box-shadow: 0 20px 48px -16px rgba(17, 24, 22, 0.35);
}

.country-dialog[open] {
    display: flex;
    flex-direction: column;
}

.country-dialog::backdrop {
    background: rgba(17, 24, 22, 0.4);
}

.country-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 4px 20px;
}

.country-dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.country-dialog-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 10px;
    color: #111816;
    cursor: pointer;
}

.country-dialog-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    margin: 8px 16px 8px;
    padding: 0 14px;
    border: 1px solid #e2e6e4;
    border-radius: 12px;
    color: #5b6360;
}

.country-dialog-search:focus-within {
    border-color: #00a878;
}

.country-dialog-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: #111816;
}

.country-dialog-list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0 8px 12px;
    list-style: none;
}

.country-dialog-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

.country-dialog-option .lang-flag {
    width: 24px;
    height: 24px;
}

.country-dialog-option:hover,
.country-dialog-option:focus-visible {
    background: #eef1f0;
    outline: none;
}

.country-dialog-option[aria-selected="true"] {
    font-weight: 600;
}

.country-dialog-name {
    flex: 1;
}

.country-dialog-dial {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #5b6360;
}

.country-dialog-empty {
    margin: 0;
    padding: 12px 20px 24px;
    font-size: 15px;
    color: #5b6360;
}

.country-dialog-empty[hidden] {
    display: none;
}

/* Telefon: okno na pełny ekran. */
@media (max-width: 520px) {
    .country-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
        box-sizing: border-box;
    }
}

.inline-form button {
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    background-color: #0a3ea3;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.inline-form button:hover {
    background-color: #08306f;
}

.form-message {
    margin-top: 0.6rem;
    color: #842029;
}

/* --- Stronicowanie (Runda 7) — pagination.js. Renderowane pod tabelą,
   TYLKO gdy wyników jest więcej niż jedna strona (patrz renderPagination:
   pusty div, gdy wszystko mieści się na jednej) — nie zajmuje miejsca,
   kiedy nie jest potrzebne. --- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1rem;
}

.pagination-page {
    min-width: 2.2rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    text-align: center;
    background-color: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pagination-page:hover {
    background-color: #eef3fc;
}

.pagination-page-active {
    background-color: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    cursor: default;
}

/* --- Widok mobilny (mobile.html, mobile-document.html) ---
   Węższy niż back-office (telefon, nie biurkowy monitor), większe cele
   dotyku (przyciski, karty), mniej informacji naraz — patrz mobile.js po
   uzasadnienie, dlaczego to osobne strony, a nie "responsywna" wersja
   index.html/document.html. */

/* Noc 2, zadanie 2A (docs/adr/2026-10-25-mobile-wg-projektu-i-logowanie.md,
   zastępuje wygląd z reskinu nocy 1): wartości wprost z projektu właściciela
   (docs/design/mobile/*.dc.html) i tokenów z jego README. Tokeny na
   .mobile-body, nie na :root (back office i logowanie web bez zmian). Dawne
   tokeny (--color-accent itd.) przestawione tutaj dla podwidoków (podpis,
   notatka, historia, modale), które ich używają. Noc 4 (4C, #4): cały
   telefon w IBM Plex Sans Condensed (krój PDF), także numery, tablice i
   daty; .vzm-mono zostaje jako znacznik liczb: cyfry tabelaryczne. IBM Plex
   Mono nie ma już na telefonie (--vz-font-mono wskazuje ten sam krój). */
.mobile-body {
    --vz-green: #00a878;          /* znak vezpass, sygnał (fokus, linia skanu) */
    --vz-green-strong: #008460;   /* główny przycisk i akcenty */
    --vz-green-strong-hover: #00694c;
    --vz-green-tint: #e6f6f0;     /* aktywna zakładka: tło */
    --vz-green-text: #00694c;     /* aktywna zakładka: tekst, plakietka "zakończony" */
    --vz-ink: #111816;
    --vz-ink-2: #2b3330;          /* ciemniejszy drugorzędny */
    --vz-muted: #5b6360;
    --vz-mist: #f6f7f7;           /* tło aplikacji */
    --vz-surface: #ffffff;
    --vz-border: #e2e6e4;         /* obwódka kart */
    --vz-control-border: #cdd5d1; /* obwódki pól */
    --vz-line: #eef1f0;           /* linie w kartach, plakietka "w trakcie" */
    --vz-font-sans: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --vz-font-mono: var(--vz-font-sans);
    /* Noc 5 (5A, #110 pkt 2): gdzie zaczynają się nagłówki ekranów. Na
       iPhonie (wcięcie > 0) wysokość paska statusu plus 44 px, a nagłówek ma
       jeszcze 16 px u góry, więc pierwszy wiersz tekstu jest co najmniej
       ok. 56-60 px pod paskiem statusu (Dynamic Island 59 pt: 115-119 pt od góry),
       poniżej strefy rozmycia, którą iOS rysuje w PWA (ok. 95-100 pt). Bez
       wcięcia (Android, komputer) 0. */
    --vzm-top-safe: calc(env(safe-area-inset-top) + min(44px, env(safe-area-inset-top)));
    --color-accent: var(--vz-green-strong);
    --color-accent-hover: var(--vz-green-strong-hover);
    --color-bg: var(--vz-mist);
    --color-surface: var(--vz-surface);
    --color-border: var(--vz-border);
    --color-text: var(--vz-ink);
    --color-text-muted: var(--vz-muted);
    --shadow-card: none;
    /* Belka (noc 5, #110 pkt 1): 56 px, 22 px od dolnej krawędzi ekranu
       (bez wcięcia na wskaźnik home, jak paski iOS 26); treść ma u dołu
       56 + 22 + 26 px, więc ostatnia karta przewija się nad belkę. */
    --mobile-nav-height: 56px;
    --mobile-nav-bottom: 22px;
    max-width: 480px;
    margin: 0 auto;
    font-family: var(--vz-font-sans);
    color: var(--vz-ink);
    background-color: var(--vz-mist);
    padding: 0 0 calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + 26px);
    /* Noc 3 (B2): pociągnięcie w dół odświeża listę w aplikacji; przeglądarka
       nie przeładowuje przy tym całej strony. */
    overscroll-behavior-y: contain;
}

/* Noc 5 (5A, #110 pkt 2): bez pasa pod paskiem statusu. Pas nocy 3 i 4
   (.mobile-body::before) był w PWA widoczny jako jaśniejszy prostokąt z
   miękką krawędzią (iOS rysuje nad nim własne rozmycie), a po zejściu
   nagłówków niżej (--vzm-top-safe) nie ma już czego zasłaniać: treść w
   spoczynku zaczyna się pod strefą rozmycia, a przewijana chowa się pod
   paskiem statusu jak w aplikacjach iOS. Baner offline ma tekst pod
   --vzm-top-safe, a jego tło sięga górnej krawędzi. */
.mobile-body .offline-banner {
    padding-top: calc(16px + var(--vzm-top-safe));
}

.mobile-body button,
.mobile-body input,
.mobile-body select,
.mobile-body textarea {
    font-family: inherit;
}

/* Ekran dokumentu bez paska zakładek (README pkt 1). */
.mobile-body-detail {
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
}

.mobile-body :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--vz-green);
    outline-offset: 2px;
}

.vzm-mono {
    font-family: var(--vz-font-mono);
    font-variant-numeric: tabular-nums;
}

.vzm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Nagłówek ekranu (projekt .hdr): 16 px 20 px 8 px, od góry pod
   --vzm-top-safe (noc 5, #110 pkt 2). */
.vzm-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: calc(16px + var(--vzm-top-safe)) 20px 8px;
    background: var(--vz-mist);
}

body.offline-banner-visible .vzm-hdr {
    padding-top: 16px;
}

.vzm-h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Treść ekranu (projekt .body): 10 px 20 px, kolumna z odstępem 12 px. */
.vzm-body,
.mobile-main.vzm-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 20px 0;
}

.vzm-stack,
#document-detail:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* "Cześć, {imię}" (Dokumenty.dc.html): data 14 px szara nad powitaniem
   24 px / 600. */
.vzm-greeting {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.vzm-greeting-date {
    margin: 0;
    font-size: 14px;
    color: var(--vz-muted);
}

.vzm-greeting-hello {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Przycisk vezpass (projekt .vp, poprawka README pkt 4: samo logo, bez
   tablicy, mniejsze): obwódka #CDD5D1, promień 10 px, cel dotyku 44 px. */
.vzm-vezpass-button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 11px;
    box-sizing: border-box;
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 10px;
    cursor: pointer;
}

.vzm-vezpass-button svg {
    display: block;
}

/* Noc 3 (B2): odśwież obok przycisku vezpass (ten sam kształt, 44 px);
   kręci się, póki lista się ładuje. */
.vzm-hdr-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vzm-refresh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    background: var(--vz-surface);
    color: var(--vz-ink-2);
    border: 1px solid var(--vz-control-border);
    border-radius: 10px;
    cursor: pointer;
}

.vzm-refresh-button svg {
    display: block;
}

.vzm-refresh-button.is-spinning svg,
.vzm-pull.is-spinning svg {
    animation: vzSpin 0.8s linear infinite;
}

@keyframes vzSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Pociągnięcie w dół (mobile-refresh.js): kółko z ikoną odświeżania
   wysuwa się zza górnej krawędzi. */
.vzm-pull {
    position: fixed;
    top: var(--vzm-top-safe);
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--vz-surface);
    color: var(--vz-muted);
    border: 1px solid var(--vz-border);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(17, 24, 22, 0.12);
    transform: translate(-50%, -48px);
    opacity: 0;
    pointer-events: none;
}

.vzm-pull.is-visible,
.vzm-pull.is-spinning {
    opacity: 1;
}

.vzm-pull.is-ready,
.vzm-pull.is-spinning {
    color: var(--vz-green-strong);
}

@media (prefers-reduced-motion: reduce) {
    .vzm-refresh-button.is-spinning svg,
    .vzm-pull.is-spinning svg {
        animation: none;
    }
}

/* Przycisk skanu. Noc 3 (#94): standardowy rozmiar przycisku jak
   .vzm-primary (52 px, promień 12 px, 16 px / 600, ikona 24 px) zamiast
   kafla 88 px z projektu. */
.vzm-scan-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--vz-green-strong);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.vzm-scan-button svg {
    flex: none;
}

.vzm-scan-button:active {
    background: var(--vz-green-strong-hover);
}

/* Nagłówek sekcji listy: zwykły tekst 15 px / 600 z liczbą w nawiasie. */
.vzm-section-title {
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--vz-ink-2);
}

.vzm-section-title-first {
    margin-top: 0;
}

/* Karta (README): biała, obwódka #E2E6E4, promień 12 px, padding 16 px. */
.vzm-card {
    display: block;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 12px;
    color: var(--vz-ink);
    text-decoration: none;
}

.vzm-doc-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
}

.vzm-doc-card:active {
    background: #fafbfb;
}

.vzm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.vzm-card-ref {
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vzm-card-number {
    font-size: 12px;
    color: var(--vz-muted);
    overflow-wrap: anywhere;
}

/* Plakietka statusu: 13 px, 3 px 10 px, pełne zaokrąglenie; dwa kolory
   z README. */
.vzm-chip {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.vzm-chip-progress {
    background: var(--vz-line);
    color: var(--vz-ink-2);
}

.vzm-chip-done {
    background: var(--vz-green-tint);
    color: var(--vz-green-text);
}

/* Trasa: firma i miasto załadunku, strzałka 28 px, firma i miasto
   rozładunku (siatka 1fr 28px 1fr), nad nią linia #EEF1F0. */
.vzm-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--vz-line);
}

.vzm-route-end {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vzm-route-to {
    text-align: right;
}

.vzm-route-company {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.vzm-route-company-long {
    font-size: 13px;
}

.vzm-route-city {
    overflow: hidden;
    font-size: 14px;
    color: var(--vz-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vzm-route-arrow {
    display: block;
}

/* Wyszukiwarka Archiwum (Archiwum.dc.html): 52 px, obwódka #E2E6E4,
   promień 12 px, lupa 20 px, tekst 16 px; podpowiedź z projektu. */
.vzm-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 12px;
}

.vzm-search:focus-within {
    border-color: var(--vz-green);
}

.vzm-search svg {
    flex: none;
}

.vzm-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--vz-ink);
}

.vzm-search-input::placeholder {
    color: var(--vz-muted);
}

/* Profil (Ustawienia.dc.html): wiersze 52 px, 0 16 px, linia #E2E6E4,
   15 px, klucz #5B6360. */
.vzm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid var(--vz-border);
    font-size: 15px;
}

.vzm-row:last-child {
    border-bottom: 0;
}

.vzm-row-key {
    flex: none;
    color: var(--vz-muted);
}

.vzm-row-key-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vzm-row-value {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Noc 4 (#21): wiersz "Język" (flaga, nazwa, strzałka) otwiera arkusz z
   listą języków; bieżący z ptaszkiem. */
.vzm-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vzm-lang-current .lang-flag,
.vzm-lang-option .lang-flag {
    width: 22px;
    height: 22px;
}

.vzm-lang-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vzm-lang-option {
    width: 100%;
}

.vzm-lang-option .vzm-sheet-label {
    flex: 1;
    text-align: left;
}

/* Link-wiersz "Mój vezpass" pod kartą: 56 px, promień 12 px. */
.vzm-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
    box-sizing: border-box;
    width: 100%;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 12px;
    color: var(--vz-ink);
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

/* Noc 5 (#110 pkt 7): "PIN przy podpisie" w Profilu, wiersz jak "Zmień
   PIN" z przełącznikiem 44 x 26 px (włączony: zieleń przycisków). */
.vzm-switch-row:disabled {
    cursor: default;
}

.vzm-switch {
    flex: none;
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--vz-control-border);
    transition: background-color 0.15s ease-out;
}

.vzm-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(17, 24, 22, 0.25);
    transition: transform 0.15s ease-out;
}

.vzm-switch-row[aria-checked='true'] .vzm-switch {
    background: var(--vz-green-strong);
}

.vzm-switch-row[aria-checked='true'] .vzm-switch-knob {
    transform: translateX(18px);
}

.vzm-switch-row:disabled .vzm-switch {
    opacity: 0.5;
}

/* Wyloguj: 48 px, 0 18 px, promień 10 px, obwódka #CDD5D1, 15 px. */
/* Noc 4 (#18): na całą szerokość, treść wyśrodkowana. */
.vzm-logout {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin-top: 6px;
    padding: 0 18px;
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--vz-ink);
    cursor: pointer;
}

/* Belka (noc 4, #16, wariant A; noc 5, #110 pkt 1, wariant 3 z kanwy
   "Belka: szkło i położenie"): same ikony, 56 px, promień 28 px,
   wyśrodkowana, szerokość wg treści, dolna krawędź 22 px od dolnej
   krawędzi ekranu (BEZ env(safe-area-inset-bottom): belka nachodzi na
   strefę wskaźnika home jak paski iOS 26), padding 0 6 px, odstęp 4 px;
   przyciski 64 x 44, promień 22 px. Aktywny: tło rgba(0,132,96,.14), ikona
   #00694C 2,1; nieaktywne #2B3330 1,8. Mocne szkło: gradient, rozmycie
   28 px z nasyceniem 210 % i jasnością 1,05, obwódka i cień z połyskami
   wg #110. Jedyne rozmycie w stylach telefonu (test mobileScripts). */
.mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: var(--mobile-nav-bottom);
    transform: translateX(-50%);
    height: var(--mobile-nav-height);
    padding: 0 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.38) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(210%) brightness(1.05);
    backdrop-filter: blur(28px) saturate(210%) brightness(1.05);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(17, 24, 22, 0.18), 0 0 0 0.5px rgba(17, 24, 22, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.25);
    z-index: 20;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 22px;
    color: #2b3330;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-icon,
.mobile-nav-icon .icon {
    display: block;
    width: 24px;
    height: 24px;
}

.mobile-nav-item .icon {
    stroke-width: 1.8;
}

.mobile-nav-item.active {
    background: rgba(0, 132, 96, 0.14);
    color: #00694c;
}

.mobile-nav-item.active .icon {
    stroke-width: 2.1;
}

/* Pusta lista "Bieżące" (Runda 11 pkt 6): przycisk i komunikat w pionie
   na środku. */
#tab-current.tab-empty:not([hidden]) .vzm-body {
    justify-content: center;
    min-height: 60vh;
}

/* --- Ekran dokumentu (Dokument.dc.html) --- */
.vzm-hdr-detail {
    padding-bottom: 8px;
}

.vzm-back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 17px;
    font-weight: 500;
    color: var(--vz-ink);
    text-decoration: none;
}

.vzm-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.vzm-doc-ref {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vzm-doc-ref-value {
    font-size: 20px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vzm-doc-ref-meta {
    font-size: 13px;
    color: var(--vz-muted);
}

.vzm-doc-ref-meta .vzm-mono {
    white-space: nowrap;
}

/* Etykieta (projekt .lbl): 12 px / 600, odstęp 0.06em, wersaliki, #5B6360. */
.vzm-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vz-muted);
}

.vzm-action-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vzm-label-section {
    margin-top: 6px;
}

/* Główna akcja etapu: pełny przycisk #008460, 52 px, promień 12 px,
   16 px / 600 (jak główny przycisk projektu). */
.vzm-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--vz-green-strong);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.vzm-primary:active:not(:disabled) {
    background: var(--vz-green-strong-hover);
}

.vzm-primary:disabled {
    opacity: 0.55;
}

/* Kafle akcji (projekt .tile): siatka 3 kolumn, odstęp 10 px, kafel 88 px,
   12 px 8 px, ikona 24 px, 14 px. */
.vzm-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vzm-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 8px;
    box-sizing: border-box;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.25;
    color: var(--vz-ink);
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.vzm-tile:active {
    background: var(--vz-green-tint);
}

.vzm-tile svg {
    flex: none;
}

.vzm-tile-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

.vzm-detail-message {
    padding: 8px 0;
}

/* Karta Załadunek / Rozładunek: dwie części po 16 px, linia #E2E6E4,
   nazwa 17 px / 600, adres 14 px, data Mono 14 px #008460. */
.vzm-legs {
    margin-top: 4px;
}

.vzm-leg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px;
}

.vzm-leg + .vzm-leg {
    border-top: 1px solid var(--vz-border);
}

.vzm-leg-name {
    font-size: 17px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vzm-leg-address {
    font-size: 14px;
    color: var(--vz-muted);
}

.vzm-leg-date {
    font-size: 14px;
    color: var(--vz-green-strong);
}

/* Karta Szczegóły ładunku: etykieta i "Pozycje: n" w wierszu, trzy sumy
   22 px / 600 z podpisem 13 px, środkowa kolumna między liniami. */
.vzm-cargo-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    list-style: none;
    cursor: pointer;
}

.vzm-cargo-summary::-webkit-details-marker {
    display: none;
}

.vzm-cargo-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vzm-cargo-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--vz-muted);
}

.vzm-cargo-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.vzm-cargo[open] .vzm-cargo-chevron {
    transform: translateY(1px) rotate(-135deg);
}

.vzm-cargo-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
}

.vzm-cargo-mid {
    border-left: 1px solid var(--vz-border);
    border-right: 1px solid var(--vz-border);
}

.vzm-cargo-num {
    font-size: 22px;
    font-weight: 600;
}

.vzm-cargo-unit {
    font-size: 13px;
    color: var(--vz-muted);
}

/* --- Noc 2 (2A, PR 2): Przekaż, Mój vezpass, okna --- */

/* Noc 3 (#94): jeden przycisk "Przekaż odbiorcy" / "Przekaż kierowcy"
   i arkusz z opcjami (zastępuje dwa kafle sekcji "Przekaż"). Gdy na
   ekranie jest też podpis, przycisk przekazania jest drugorzędny. */
.vzm-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--vz-surface);
    color: var(--vz-green-strong);
    border: 1.5px solid var(--vz-green-strong);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.vzm-sheet-option {
    gap: 12px;
}

.vzm-sheet-option:disabled {
    color: var(--vz-muted);
    background: var(--vz-mist);
    cursor: default;
}

.vzm-sheet-logo,
.vzm-sheet-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
}

.vzm-sheet-logo svg,
.vzm-sheet-icon svg {
    display: block;
}

.vzm-sheet-label {
    flex: 1;
}

.vzm-sheet-soon {
    flex: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--vz-muted);
}

/* Licznik ważności kodu vezpass (#94): "Ważny jeszcze 1:45". */
.vzm-vezpass-countdown {
    margin: 0;
    font-size: 15px;
    color: var(--vz-ink-2);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Wiersz tablicy w Profilu: cały wiersz to przycisk edycji. */
.vzm-row-button {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--vz-border);
    color: var(--vz-ink);
    text-align: left;
    cursor: pointer;
}

.vzm-row-end {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Mój vezpass (Vezpass.dc.html): pełny ekran, białe tło, pasek 64 px z
   logo 120 x 36 i zamknięciem 44 px, kod 248 px w ramce 16 px / promień
   16 px, imię 22 px / 600, kafle tablic na #F6F7F7. */
body.vzm-vezpass-open {
    background: #ffffff;
}

body.vzm-vezpass-open .mobile-main,
body.vzm-vezpass-open .mobile-bottom-nav {
    display: none;
}

.vzm-vezpass:not([hidden]) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ffffff;
}

.vzm-vezpass-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(64px + var(--vzm-top-safe));
    box-sizing: border-box;
    padding: var(--vzm-top-safe) 12px 0 20px;
    border-bottom: 1px solid var(--vz-border);
}

.vzm-vezpass-logo svg {
    display: block;
}

.vzm-vezpass-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 10px;
    color: var(--vz-ink);
    cursor: pointer;
}

.vzm-vezpass-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
}

.vzm-vezpass-frame {
    padding: 16px;
    border: 1px solid var(--vz-border);
    border-radius: 16px;
    background: #ffffff;
}

.vzm-vezpass-code {
    width: 248px;
    min-height: 248px;
}

.vzm-vezpass-code img {
    display: block;
    width: 248px;
    height: 248px;
}

.vzm-vezpass-who {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.vzm-vezpass-name {
    font-size: 22px;
    font-weight: 600;
}

.vzm-vezpass-role {
    font-size: 15px;
    color: var(--vz-muted);
}

/* Noc 4 (#19): firma w szarej ramce: nazwa, adres, NIP. */
.vzm-vezpass-company {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--vz-mist);
    border: 1px solid var(--vz-border);
    border-radius: 12px;
    font-size: 15px;
    text-align: center;
}

.vzm-vezpass-company-name {
    font-weight: 600;
}

.vzm-vezpass-company-lines {
    color: var(--vz-ink-2);
    font-variant-numeric: tabular-nums;
}

.vzm-vezpass-company-lines:empty {
    display: none;
}

.vzm-vezpass-plates:not([hidden]) {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vzm-vezpass-plate {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--vz-mist);
    border-radius: 12px;
}

.vzm-vezpass-plate-value {
    min-height: 1.3em;
    font-size: 18px;
    font-weight: 500;
}

.vzm-vezpass-hint {
    max-width: 320px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--vz-ink-2);
    text-align: center;
}

/* Okna (pytanie D6, potwierdzenie przekazania, edycja tablicy): natywny
   <dialog>, karta z promieniem 16 px; na telefonie przyklejone do dołu. */
.vzm-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--vz-border, #e2e6e4);
    border-radius: 16px;
    background: #ffffff;
    color: #111816;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    box-shadow: 0 20px 48px -16px rgba(17, 24, 22, 0.35);
}

.vzm-dialog[open] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vzm-dialog::backdrop {
    background: rgba(17, 24, 22, 0.4);
}

.vzm-dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.vzm-dialog-receiver {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: #f6f7f7;
    border-radius: 12px;
}

.vzm-dialog-name {
    font-size: 17px;
    font-weight: 600;
}

.vzm-dialog-company,
.vzm-dialog-plates {
    font-size: 14px;
    color: #5b6360;
}

.vzm-dialog-fields {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.vzm-dialog-fields div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.vzm-dialog-fields dt {
    flex: none;
    color: #5b6360;
    white-space: nowrap;
}

.vzm-dialog-fields dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.vzm-dialog-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vzm-dialog-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: #ffffff;
    border: 1.5px solid #00a878;
    border-radius: 12px;
    color: #111816;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.vzm-dialog-option:active {
    background: #e6f6f0;
}

.vzm-dialog-option-title {
    font-size: 16px;
    font-weight: 600;
}

.vzm-dialog-cancel {
    min-height: 48px;
    background: #ffffff;
    border: 1px solid #cdd5d1;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    color: #111816;
    cursor: pointer;
}

.vzm-dialog-done-anim {
    align-self: center;
    line-height: 0;
}

.vzm-dialog-done-icon {
    align-self: center;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #008460;
}

.vzm-plate-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vzm-field-label {
    font-size: 14px;
    font-weight: 600;
    color: #2b3330;
}

.vzm-input {
    height: 52px;
    padding: 0 14px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #cdd5d1;
    border-radius: 12px;
    font-size: 18px;
    color: #111816;
    text-transform: uppercase;
}

.vzm-input:focus {
    outline: none;
    border-color: #00a878;
    box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.18);
}

.vzm-field-error {
    margin: 0;
    font-size: 14px;
    color: #b42318;
}

.vzm-field-error[hidden] {
    display: none;
}

@media (max-width: 520px) {
    .vzm-dialog {
        width: 100vw;
        max-width: 100vw;
        margin: auto 0 0;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* Ikony w opcjach arkusza "Kontrola drogowa". */
.action-tile-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

/* --- Noc 4 (4C): ikona podpisu, animacja potwierdzenia, komunikaty --- */

/* Ikona podpisu (#102, wariant 3) na przyciskach podpisu. */
.vzm-sign-button .icon {
    flex: none;
    width: 22px;
    height: 22px;
}

/* Zielone kółko z ptaszkiem, które się rysuje (#23): obwód kółka r 26 to
   ok. 163, ptaszek ok. 34; 1,2 s razem. */
.vzm-check {
    display: block;
}

.vzm-check-circle {
    fill: #008460;
    stroke: #008460;
    stroke-width: 2;
    stroke-dasharray: 164;
    stroke-dashoffset: 164;
    fill-opacity: 0;
    animation: vzmCheckCircle 0.55s ease-out forwards, vzmCheckFill 0.25s 0.5s ease-out forwards;
}

.vzm-check-tick {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: vzmCheckTick 0.35s 0.7s ease-out forwards;
}

@keyframes vzmCheckCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes vzmCheckFill {
    to { fill-opacity: 1; }
}

@keyframes vzmCheckTick {
    to { stroke-dashoffset: 0; }
}

.vzm-success {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(246, 247, 247, 0.92);
    animation: vzFade 0.15s ease-out both;
    transition: opacity 0.18s ease-in;
}

.vzm-success.is-leaving {
    opacity: 0;
}

.vzm-success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.vzm-success-label {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--vz-ink, #111816);
}

/* Archiwizacja i przywracanie przesunięciem (#22; noc 5, #110 pkt 3,
   mobile-swipe.js): pod kartą warstwa akcji po stronie, z której karta
   odjeżdża ("Archiwizuj" po prawej w Bieżących, "Przywróć" po lewej w
   Archiwum); karta jedzie za palcem tylko w poziomie i tylko w kierunku
   listy (touch-action: pan-y zostawia przewijanie przeglądarce). Za
   progiem warstwa ciemnieje. */
.vzm-swipe {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.vzm-swipe-action {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    background: var(--vz-ink-2, #2b3330);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
}

.vzm-swipe-action-left {
    justify-content: flex-start;
}

.vzm-swipe-action-right {
    justify-content: flex-end;
}

.vzm-swipe.is-right .vzm-swipe-action-left,
.vzm-swipe.is-left .vzm-swipe-action-right {
    display: flex;
}

.vzm-swipe.is-ready .vzm-swipe-action {
    background: var(--vz-ink, #111816);
}

.vzm-swipe-card {
    position: relative;
    touch-action: pan-y;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
}

.vzm-swipe.is-dragging .vzm-swipe-card {
    box-shadow: 0 6px 18px rgba(17, 24, 22, 0.12);
}

/* Zmiana PIN-u (#20, mobile-pin.js): ekran jak PIN przy logowaniu, nad
   aplikacją, z powrotem i krokiem "Krok 1 z 3". */
.vzm-pin-screen {
    z-index: 55;
}

.vzm-pin-screen .vzs-pin {
    padding-top: calc(12px + var(--vzm-top-safe));
}

.vzm-pin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

.vzm-pin-bar .mobile-back-arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vz-ink, #111816);
}

.vzm-pin-steps {
    font-size: 15px;
    color: var(--vz-muted, #5b6360);
    font-variant-numeric: tabular-nums;
}

.vzm-pin-screen .vzs-pin-head {
    margin-top: 28px;
}

body.vzm-pin-open .mobile-bottom-nav {
    display: none;
}

/* Podpis nadawcy na telefonie (#24): miejsce i data wystawienia. */
.mobile-sign-issue {
    margin-top: 12px;
}

/* Komunikat na ekranie (#22): nad belką, ciemny, z akcją "Cofnij". */
.vzm-toast-host {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--mobile-nav-height, 0px) + var(--mobile-nav-bottom, 0px) + 12px);
    z-index: 50;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.mobile-body-detail .vzm-toast-host {
    bottom: calc(20px + env(safe-area-inset-bottom));
}

.vzm-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 448px;
    min-height: 48px;
    padding: 8px 8px 8px 16px;
    box-sizing: border-box;
    background: var(--vz-ink, #111816);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(17, 24, 22, 0.24);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    pointer-events: auto;
    animation: vzFade 0.2s ease-out both;
    transition: opacity 0.18s ease-in;
}

.vzm-toast.is-leaving {
    opacity: 0;
}

.vzm-toast-text {
    flex: 1;
    padding: 6px 0;
}

.vzm-toast-action {
    flex: none;
    min-height: 36px;
    padding: 0 12px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #7fd8b7;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .vzm-check-circle,
    .vzm-check-tick {
        animation: none;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }

    .vzm-success,
    .vzm-toast {
        animation: none;
    }
}

/* Runda 17 — offline strip. In normal flow at the very top of <body>
   (offline-banner.js inserts it there), so no sticky/safe-area juggling
   with .mobile-header. Amber, not red — it's a "heads up", not an error;
   the data on screen is still usable, just possibly stale. */
.offline-banner {
    max-width: 480px;
    margin: 0 auto;
    padding: calc(0.45rem + env(safe-area-inset-top)) 1rem 0.45rem;
    background: #92400e;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

/* Reskin Vezlink: ten sam bursztyn (ostrzeżenie, nie błąd), ale ciemniejsze
   tło ink i bursztynowa kropka, żeby pasek pasował do neutralnego tła. */
.mobile-body .offline-banner {
    background: var(--vz-ink);
}

.mobile-body .offline-banner::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: #f59e0b;
    vertical-align: 1px;
}

/* Runda 17: network-only action buttons, dimmed while offline. Still
   tappable — the tap shows a "needs a connection" note (mobile-document.js). */
.offline-disabled {
    opacity: 0.45;
}

/* Inline SVG icons (icons.js) — currentColor stroke, sized by context.
   Base: block so there's no inline-baseline gap; each wrapper sets the box. */
.icon {
    display: block;
    width: 100%;
    height: 100%;
}

/* Two classes (.mobile-action-button.mobile-button-with-icon) — beats the
   plain .mobile-action-button { display: block } that follows later in the
   file, so the flex row (and its gap) actually applies. */
.mobile-action-button.mobile-button-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.mobile-button-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    flex-shrink: 0;
}

.mobile-datetime-icon {
    width: 18px;
    height: 18px;
    color: #8b8f98;
    flex-shrink: 0;
}

.mobile-back-arrow .icon {
    width: 24px;
    height: 24px;
}

.mobile-sheet-close .icon {
    width: 20px;
    height: 20px;
}

.mobile-sheet-option .action-tile-icon {
    width: 22px;
    height: 22px;
}

.mobile-main {
    padding: 0;
}

.mobile-message {
    color: var(--vz-muted, #555);
    text-align: center;
    padding: 2rem 0;
}

/* Step 7 waiting screen (Scenario B) — deliberately plain per CONTEXT.md
   ("bez rozbudowanego UI statusów"), just a subtle italic to hint that
   something is quietly happening in the background (the poll in
   mobile-document.js), without a spinner or progress bar. */
.mobile-waiting {
    font-style: italic;
}

/* Runda 11 (pkt 14): the mobile view leaned on one very light grey
   (#8b8f98) for every label — too faint on the cooler background. Darken
   the section/label greys inside the mobile view only (the back office
   keeps its own). */
.mobile-body .route-leg-label,
.mobile-body .cargo-card-title,
.mobile-body .cargo-agg-label,
.mobile-body .cargo-line-qty,
.mobile-body .cargo-line-meta,
.mobile-body .mobile-settings-label,
.mobile-body .mobile-vehicle-badge-label {
    color: var(--vz-muted, #5b6472);
}

/* Duży, kciukiem-przyjazny przycisk akcji — na całą szerokość, wysoki. */
.mobile-action-button {
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 1.5rem;
    padding: 1rem;
    font-size: 1.05rem;
    font-family: inherit;
    font-weight: 600;
    background-color: var(--color-accent, #0a3ea3);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.mobile-action-button:hover:not(:disabled) {
    background-color: var(--color-accent-hover, #08306f);
}

.mobile-action-button:disabled {
    background-color: #999;
}

/* camera_qr round: full-screen camera modal (mobile.js) — fixed overlay,
   not an in-flow section, since it has to sit above the whole page
   (including the header) while the camera is active.
   :not([hidden]) — NOT just `.scan-modal { display: flex }`: a plain class
   selector setting `display` outranks the browser's own `[hidden]{display:
   none}` UA rule (both are single selectors, but the UA stylesheet is
   always lower priority than the page's own CSS), so the modal would stay
   visible even while the `hidden` attribute is set. Conditioning the
   selector on :not([hidden]) means our rule simply doesn't match at all
   while hidden, letting the UA rule apply instead — caught during manual
   testing (the modal rendered open on page load, before any click). Same
   fix applied to .scan-manual-entry below, which has the same shape. */
.scan-modal:not([hidden]) {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.scan-modal-content {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Positioning context for the viewfinder overlay below — the overlay is
   absolutely positioned against THIS box, not the video itself, so it
   stays correctly sized/centered regardless of the video's own intrinsic
   aspect ratio. */
.scan-video-wrapper {
    position: relative;
    line-height: 0; /* avoids a few stray px of inline-element gap under the video */
}

.scan-video {
    width: 100%;
    border-radius: 10px;
    background-color: #000;
}

/* Feedback (2026-08-25): the scanning area was the ENTIRE camera frame —
   easy to accidentally scan the wrong QR code when more than one is
   visible in shot (e.g. a phone screen with several codes listed). The
   bracketed square below is not just decoration: mobile.js crops the
   actual jsQR decode to this exact region (VIEWFINDER_FRACTION,
   in sync with the 65% width here), so a code outside the brackets
   genuinely can't be picked up by accident. Centered square via
   aspect-ratio: 1 — width alone is enough to size a square in both CSS
   and mobile.js's crop math (see that file's comment on why the video's
   uniform CSS scaling makes this correspondence exact). box-shadow with
   an oversized spread is the standard trick for a "spotlight" mask: the
   frame casts a huge shadow everywhere BUT its own box, dimming the rest
   of the video without needing a separate mask element. */
.scan-viewfinder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.55);
    border-radius: 12px;
    pointer-events: none;
}

.scan-viewfinder-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 3px solid #ffffff;
}

.scan-viewfinder-corner-tl {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 10px;
}

.scan-viewfinder-corner-tr {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 10px;
}

.scan-viewfinder-corner-bl {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 10px;
}

.scan-viewfinder-corner-br {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 10px;
}

/* Scanning-line animation — purely cosmetic, signals "actively looking"
   the same way the reference mockup's red sweep did. Bounces top<->bottom
   INSIDE the viewfinder box only (0 to 100% of its own height), not the
   whole video, so it visually confirms the same bounded area the crop
   math actually reads from. */
.scan-viewfinder-line {
    position: absolute;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00a878, transparent);
    box-shadow: 0 0 6px 1px rgba(0, 168, 120, 0.8);
    animation: scan-line-sweep 2.2s ease-in-out infinite;
}

@keyframes scan-line-sweep {
    0% {
        top: 4%;
    }
    50% {
        top: 94%;
    }
    100% {
        top: 4%;
    }
}

.scan-status {
    color: white;
    text-align: center;
    min-height: 1.2em;
    margin: 0;
}

.mobile-action-button.scan-cancel-button {
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.mobile-action-button.scan-cancel-button:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

/* Generated QR display (mobile-document.js: "Pokaż QR do odbioru" and the
   road-inspection button; test-qr-codes.js's table) — QRCode (vendor/
   qrcode.js) renders its own canvas/table inside this element, this class
   just centers and frames whatever it produces. :not([hidden]) — same
   `hidden`-vs-class-display fix as .scan-modal above; #road-inspection-qr
   toggles the `hidden` attribute on this exact class. */
.qr-display:not([hidden]) {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 1rem;
}

.qr-display-compact {
    padding: 0.3rem;
    margin-top: 0;
    display: inline-flex;
}

#road-inspection-section {
    margin-top: 1rem;
}

.mobile-secondary-button {
    background-color: white;
    color: var(--color-accent, #0a3ea3);
    border: 1px solid var(--color-accent, #0a3ea3);
}

.mobile-secondary-button:hover:not(:disabled) {
    background-color: var(--vz-green-tint, #eef3fc);
}

.cargo-line-list {
    border-top: 1px solid var(--vz-border, #eee);
    padding: 0.75rem 1rem;
}

.cargo-line {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.5rem;
}

.cargo-line:last-child {
    margin-bottom: 0;
}

.cargo-line-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.cargo-line-name {
    font-weight: 600;
}

.cargo-line-qty {
    color: var(--vz-muted, #8b8f98);
}

.cargo-line-desc {
    font-size: 0.8rem;
    color: var(--vz-muted, #666);
    margin-bottom: 0.25rem;
}

.cargo-line-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--vz-muted, #8b8f98);
}

/* Runda 11 (pkt 11) / Runda 15 — sekcja "Zastrzeżenia dokumentu": osobna
   lista, żeby kierowca nie roluł rosnącej Historii. Renderowana tylko gdy
   jakieś są (mobile-document.js). Runda 15: <details> — domyślnie zwinięta,
   licznik widoczny w summary. */
.objections-card {
    padding: 0;
    border-left: 3px solid #d97706;
    /* Runda 16: nie kleić się do przycisku "Zgłoś zastrzeżenia" wyżej. */
    margin-top: 1.25rem;
}

.objections-summary {
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.objections-summary::-webkit-details-marker {
    display: none;
}

.objections-summary::after {
    content: '▾';
    color: var(--vz-muted, #8b8f98);
}

.objections-card[open] .objections-summary::after {
    content: '▴';
}

.objections-title {
    margin: 0;
    font-weight: 600;
    color: #b45309;
}

.objections-list {
    list-style: none;
    margin: 0;
    padding: 0 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.objection-item + .objection-item {
    border-top: 1px solid var(--color-border, #e0e0e0);
    padding-top: 0.75rem;
}

.objection-note {
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

/* Runda 14/16: grupa miniatur pod jednym wpisem (zastrzeżenie / wiersz
   historii). Jedna linia, zawijana. */
.event-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.event-photos .event-photo-thumb {
    margin-top: 0;
    width: 72px;
    height: 72px;
    object-fit: cover;
}

/* Runda 16 — pełnoekranowa Historia zdarzeń (osobny widok). Wiersz:
   ikona + mały tekst + timestamp, potem "kto", notatka, miniatury. */
.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.history-entry {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.history-entry:last-child {
    border-bottom: none;
}

.history-entry-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.history-entry-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #5b6472;
}

.history-entry-icon .icon {
    width: 16px;
    height: 16px;
}

.history-entry-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
}

.history-entry-head .event-timestamp {
    margin-left: auto;
    white-space: nowrap;
}

/* Runda 11 (pkt 12) — modal QR: pełny ekran, jasne białe tło + duży kod.
   Przeglądarka nie wymusi jasności ekranu — białe tło pełnoekranowe +
   wake lock (mobile-document.js) to maksimum. */
.qr-modal:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(20, 24, 33, 0.55);
}

.qr-modal-card {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    background: #ffffff;
    border-radius: 16px;
}

.qr-modal-title {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-text, #1a1a1a);
}

.qr-modal-code {
    display: flex;
    padding: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
}

.qr-modal-code img,
.qr-modal-code canvas {
    display: block;
}

.qr-modal-hint {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted, #555);
}

.qr-modal-card .mobile-action-button {
    width: 100%;
}

/* Runda 16: historia to teraz osobny pełnoekranowy widok (patrz
   .history-list / .history-entry wyżej), nie rozwijany akordeon —
   przycisk "Historia (N)" w #document-detail używa .mobile-button-with-icon. */

.event-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.event-who {
    font-size: 0.82rem;
    color: var(--vz-muted, #666);
    margin-top: 0.15rem;
}

.event-note {
    margin-top: 0.3rem;
    padding: 0.4rem 0.6rem;
    background-color: #fff;
    border-left: 3px solid var(--warn-text, #92400e);
    border-radius: 4px;
    font-size: 0.85rem;
    color: #444;
}

.event-photo-thumb {
    display: block;
    margin-top: 0.4rem;
    max-width: 140px;
    max-height: 140px;
    border-radius: 8px;
    border: 1px solid var(--vz-border, #ddd);
    object-fit: cover;
    cursor: pointer; /* Runda 15: tap to open the lightbox */
}

/* Runda 15 — powiększone zdjęcie (History / Zastrzeżenia). */
.photo-lightbox:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.92);
}

.photo-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.photo-lightbox-close {
    position: absolute;
    top: calc(0.6rem + var(--vzm-top-safe, env(safe-area-inset-top)));
    right: 0.8rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.16);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.photo-lightbox-close .icon {
    width: 22px;
    height: 22px;
}

/* Ekrany pełnoekranowe: potwierdzenie podpisu + formularz notatki. */
.mobile-fullscreen {
    padding-bottom: 2rem;
}

.mobile-fullscreen-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.mobile-fullscreen-header h1 {
    font-size: 1.1rem;
    margin: 0;
}

.mobile-back-arrow {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--vz-muted, #555);
    cursor: pointer;
    padding: 0.2rem 0.4rem 0.2rem 0;
}

.mobile-field-label {
    display: block;
    font-size: 0.8rem;
    color: var(--vz-muted, #666);
    margin: 0.6rem 0 0.3rem;
}

.mobile-datetime-field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--vz-border, #ddd);
    border-radius: 12px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    background-color: #fff;
}

.mobile-datetime-field input {
    flex: 1;
    border: none;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
}

.mobile-datetime-field input:focus {
    outline: none;
}

.mobile-datetime-icon {
    color: var(--vz-muted, #8b8f98);
}

.mobile-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--vz-border, #ddd);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

/* 2B: ekran podpisu pól 23/24 i odmowy (mobile-sign.js). Karta i wiersze
   to .vzm-card / .vzm-row z projektu (2A); tu tylko numer dokumentu nad
   wierszami, zdanie o tym, co jest podpisywane, i czerwony przycisk odmowy. */
.mobile-sign-summary {
    margin: 0 0 12px;
}

.mobile-sign-number {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vz-border, #e2e6e4);
    font-size: 15px;
    font-weight: 500;
}

.mobile-sign-statement {
    margin: 0 0 14px;
    color: var(--vz-ink-2, #2b3330);
    font-size: 14px;
}

.vzm-primary.mobile-sign-danger {
    background: #b42318;
}

.vzm-primary.mobile-sign-danger:active:not(:disabled) {
    background: #912018;
}

/* Runda 11 (pkt 9) — dwa przyciski wyboru zdjęcia (aparat / plik). */
.note-photo-buttons {
    display: flex;
    gap: 0.5rem;
    margin: 0.4rem 0;
}

.note-photo-buttons .mobile-action-button {
    flex: 1;
    margin: 0;
}

/* Runda 14: grid of photo thumbnails (each with its own remove ×).
   :not([hidden]) — a bare `display: flex` would outrank the UA [hidden]
   rule and show an empty box before any photo is picked. */
.note-photo-previews:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.6rem 0;
}

.note-photo-thumb {
    position: relative;
    width: 84px;
    height: 84px;
}

.note-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border, #ddd);
}

.note-photo-thumb-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid var(--color-border, #d7dce3);
    border-radius: 50%;
    color: #b45309;
    cursor: pointer;
}

.note-photo-thumb-remove .icon {
    width: 14px;
    height: 14px;
}

/* "Kontrola drogowa" — bottom sheet (CONTEXT.md pkt 10).
   :not([hidden]) — ta sama pułapka co .scan-modal (patrz komentarz wyżej):
   zwykła reguła display: flex miałaby wyższy priorytet niż [hidden]. */
.mobile-sheet:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.mobile-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    /* Runda 10: bottom padding clears the iOS home indicator (the sheet is
       anchored to the bottom edge). */
    padding: 1rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
}

.mobile-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.mobile-sheet-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.mobile-sheet-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--vz-muted, #8b8f98);
    cursor: pointer;
}

.mobile-sheet-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 52px;
    padding: 0 0.9rem;
    margin-top: 0.5rem;
    background-color: #fff;
    border: 1px solid var(--vz-border, #ddd);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    color: var(--color-text, #1a1a1a);
    cursor: pointer;
}

.mobile-sheet-option:hover {
    background-color: var(--vz-green-tint, #f6f8fc);
}

/* ============================================================
   Runda 8/11 — dwuetapowe logowanie kierowcy
   (klawiatura ekranowa i przełącznik roli usunięte w Rundzie 11)
   ============================================================ */

/* Krok "telefon" pokazuje pola numeru, krok "PIN" drugie. Ten przycisk cofa
   do kroku telefonu i pokazuje wpisany numer jako kontekst. */
.login-step-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text-muted, #555);
    cursor: pointer;
}

.login-step-back .icon {
    width: 18px;
    height: 18px;
}

/* --- Lista dokumentów back office (A3b-1d, documentList.js) ----------------
   Wartości 1:1 z makiety brand-assets/mockup/Main.dc.html (klasy .hdr, .flt,
   .fltbtn, .iconbtn, .menuitem, .fmt, .colrow, .trow, .num i style inline).
   Wszystko w zakresie .app-shell i z prefiksem dl-: mobile i inne strony
   back office bez zmian. Tabela to siatka CSS (jak w makiecie) z rolami
   ARIA table/row/columnheader/cell; ścieżki kolumn w --dl-grid
   (documentListColumns.js gridTemplate). */

.app-shell .dl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Noc 4 (#11, #102): ekran listy wypełnia okno. Obszar główny to kolumna o
   wysokości okna: pasek nagłówka, potem .dl-page; w niej nagłówek i narzędzia
   mają swoją wysokość, a tabela (.dl-table-wrap) bierze resztę i przewija się
   w środku w obu kierunkach. Poziomy pasek przewijania jest więc zawsze u
   dołu okna (nie dopiero na końcu strony), a nagłówki kolumn są przyklejone
   (sticky) u góry tabeli. Przy kilku wierszach tabela kurczy się do treści.
   Bardzo niskie okno (poniżej min-height) przewija się jako cała strona. */
.app-shell .app-main.dl-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 520px;
    padding-bottom: 16px;
}

.app-shell .app-main.dl-main > .app-topbar {
    flex: none;
    margin-bottom: 14px;
}

.app-shell .dl-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

.app-shell .dl-page > * {
    flex: none;
}

.app-shell .dl-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Mały nagłówek wersalikami ("DOKUMENTY / NADAWANE"), w stylu nagłówka
   sekcji panelu: sekcja przygaszona, widok w kolorze tekstu. Wersaliki z CSS,
   tekst w DOM zwykły (czytnik ekranu czyta słowa, nie litery). */
.app-shell .dl-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vz-ink);
}

.app-shell .dl-title-section {
    color: var(--vz-muted);
    font-weight: 500;
    white-space: pre;
}

/* Wyszukiwarka z umiarem: stała szerokość po prawej, pod nazwą firmy. */
.app-shell .dl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 380px;
    max-width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    background: var(--vz-surface);
    box-sizing: border-box;
}

.app-shell .dl-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--vz-ink);
    background: transparent;
}

/* Obrys fokusu na całym polu (ramce z lupą), nie na samym <input> w środku. */
.app-shell .dl-search:focus-within {
    outline: 3px solid var(--vz-green-strong);
    outline-offset: 2px;
}

.app-shell .dl-search input:focus-visible {
    outline: none;
}

.app-shell .dl-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.app-shell .dl-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-shell .dl-quick[hidden] {
    display: none;
}

.app-shell .dl-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--vz-control-border);
    border-radius: 18px;
    background: var(--vz-surface);
    color: var(--vz-nav-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.app-shell .dl-chip[aria-pressed='true'] {
    border-color: var(--vz-ink);
    background: var(--vz-ink);
    color: #ffffff;
}

/* Licznik dokumentów w filtrze szybkim (A3b-1e): mono 12 px, przygaszony
   przez opacity, więc dziedziczy kolor przycisku (także wciśniętego). */
.app-shell .dl-chip-count {
    font-family: var(--vz-font-sans);
    font-size: 12px;
    opacity: 0.8;
}

.app-shell .dl-chip-count:empty {
    display: none;
}

/* Dymki aktywnych filtrów nad tabelą (A3b-1e): "Kolumna: wartość" i ×. */
.app-shell .dl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-shell .dl-chips[hidden] {
    display: none;
}

.app-shell .dl-fchip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 32px;
    padding: 0 2px 0 12px;
    border: 1px solid #bfe3d2;
    border-radius: 16px;
    background: var(--vz-green-tint);
    color: var(--vz-ink);
    font-size: 13px;
}

.app-shell .dl-fchip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .dl-fchip-x {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--vz-green-strong);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.app-shell .dl-fchip-x:hover {
    background: #d5efe3;
    color: var(--vz-green-strong-hover);
}

.app-shell .dl-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.app-shell .dl-count {
    font-size: 13px;
    color: var(--vz-muted);
}

.app-shell .dl-textbtn {
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: var(--vz-green-strong);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.app-shell .dl-textbtn:hover {
    color: var(--vz-green-strong-hover);
}

.app-shell .dl-textbtn[hidden] {
    display: none;
}

.app-shell .dl-pop-anchor {
    position: relative;
    display: inline-flex;
}

.app-shell .dl-iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    background: var(--vz-surface);
    color: var(--vz-nav-text);
    cursor: pointer;
}

.app-shell .dl-iconbtn:hover,
.app-shell .dl-iconbtn[aria-expanded='true'] {
    border-color: var(--vz-green);
    color: var(--vz-green-strong);
}

.app-shell .dl-pop {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 22;
    box-sizing: border-box;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    background: var(--vz-surface);
    box-shadow: 0 12px 28px rgba(17, 24, 22, 0.14);
    display: flex;
    flex-direction: column;
    white-space: normal;
}

.app-shell .dl-pop[hidden] {
    display: none;
}

/* Filtry pod nagłówkami: panel w układzie okna (top/left z JS), żeby
   przewijanie tabeli w bok go nie przycinało (makieta: position fixed). */
.app-shell .dl-pop.dl-pop-fixed {
    position: fixed;
    right: auto;
}

.app-shell .dl-pop-separator {
    height: 1px;
    background: var(--vz-sidebar-hover);
    margin: 8px 0 4px;
}

/* Eksport */
.app-shell .dl-export-pop {
    width: 220px;
    padding: 6px;
    gap: 2px;
}

.app-shell .dl-export-heading {
    padding: 6px 8px 4px;
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .dl-menuitem {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--vz-ink);
    cursor: pointer;
    text-align: left;
}

.app-shell .dl-menuitem:hover {
    background: var(--vz-sidebar);
}

.app-shell .dl-fmt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 22px;
    border-radius: 4px;
    background: var(--vz-sidebar-hover);
    color: var(--vz-nav-text);
    font-family: var(--vz-font-sans);
    font-size: 11px;
    font-weight: 500;
}

.app-shell .dl-fmt-xlsx {
    background: #e3f4ec;
    color: var(--vz-green-strong-hover);
}

/* Okienko Kolumny */
.app-shell .dl-cols-pop {
    width: 320px;
    max-height: 560px;
    overflow-y: auto;
    padding: 14px;
    gap: 4px;
}

.app-shell .dl-cols-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.app-shell .dl-cols-title {
    font-size: 13px;
    font-weight: 600;
}

.app-shell .dl-cols-count {
    font-family: var(--vz-font-sans);
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .dl-cols-hint {
    font-size: 12px;
    color: var(--vz-muted);
    margin-bottom: 6px;
}

.app-shell .dl-cols-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-shell .dl-colrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 6px;
    background: #f9fafa;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.app-shell .dl-colrow:hover {
    background: #f1f3f3;
}

/* Uchwyt: większy obszar trafienia palcem bez zmiany wyglądu; touch-action:
   none tylko tu, więc reszta wiersza przewija listę pod palcem. */
.app-shell .dl-grip {
    display: flex;
    flex: none;
    padding: 11px 6px;
    margin: -11px -6px;
    opacity: 0.45;
    touch-action: none;
}

.app-shell .dl-colrow:hover .dl-grip {
    opacity: 1;
}

.app-shell .dl-colrow-label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    font-size: 14px;
    color: var(--vz-nav-text);
    cursor: grab;
}

.app-shell .dl-colrow-label input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--vz-green-strong);
}

/* Numer: zawsze widoczny (A3b-1e), pole zaznaczone i nieaktywne. */
.app-shell .dl-colrow-label input[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-shell .dl-colrow-over {
    box-shadow: inset 3px 0 0 var(--vz-green);
    background: #e3f4ec;
}

.app-shell .dl-colrow-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.app-shell .dl-cols-note {
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .dl-cols-pop .dl-textbtn {
    align-self: flex-start;
    min-height: 32px;
    padding: 4px 0;
}

/* Komunikaty: Odbierane (info), kopia i eksport. */
.app-shell .dl-info,
.app-shell .dl-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--vz-sidebar);
    color: var(--vz-nav-text);
    font-size: 14px;
}

.app-shell .dl-info svg {
    flex: none;
    margin-top: 1px;
}

.app-shell .dl-info[hidden],
.app-shell .dl-message[hidden] {
    display: none;
}

.app-shell .dl-message {
    background: #e3f4ec;
    color: var(--vz-green-strong-hover);
}

.app-shell .dl-message-error {
    background: #fdecec;
    color: #991b1b;
}

/* Tabela. Noc 4 (#11): kontener przewija się w obu kierunkach i bierze
   resztę wysokości okna (flex: 0 1 auto + min-height: 0 kurczy go do treści
   przy kilku wierszach). Bez transform/filter/contain na kontenerze i
   nagłówku: panele filtrów są position: fixed względem okna. */
.app-shell .dl-page > .dl-table-wrap {
    flex: 0 1 auto;
    min-height: 0;
}

.app-shell .dl-table-wrap {
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 8px;
    overflow: auto;
    /* Fokus klawiatury w wierszach nie chowa się pod przyklejonym
       nagłówkiem (wiersz nagłówków + wiersz filtrów). */
    scroll-padding-top: 96px;
}

/* Nagłówki kolumn i filtry przyklejone u góry kontenera, nad wierszami,
   pod panelami (.dl-pop ma z-index 22). */
.app-shell .dl-table-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f9fafa;
}

.app-shell .dl-grid {
    display: grid;
    grid-template-columns: var(--dl-grid);
    gap: 14px;
}

.app-shell .dl-head-row {
    align-items: center;
    padding: 8px 20px 2px;
    background: #f9fafa;
}

.app-shell .dl-filter-row {
    padding: 4px 20px 10px;
    background: #f9fafa;
    border-bottom: 1px solid var(--vz-border);
}

.app-shell .dl-hcell {
    display: flex;
    align-items: center;
    min-width: 0;
}

.app-shell .dl-hdr {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--vz-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vz-muted);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

/* Makieta: #008460, na tle nagłówka #F9FAFA 4,49:1 (minimalnie poniżej
   4,5:1); ciemniejsza zieleń hover z palety. */
.app-shell button.dl-hdr:hover {
    color: var(--vz-green-strong-hover);
}

.app-shell .dl-hdr-static {
    cursor: default;
}

.app-shell .dl-hdr-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .dl-hdr-arrow {
    font-size: 12px;
    color: var(--vz-green-strong);
}

.app-shell .dl-fcell {
    position: relative;
    min-width: 0;
}

/* Noc 5 (#110 pkt 10): wszystkie kolumny listy, także Status, do lewej
   (A3b-1e wyśrodkowało Status; ta klasa jest usunięta). */

.app-shell .dl-flt,
.app-shell .dl-fltbtn {
    width: 100%;
    box-sizing: border-box;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--vz-control-border);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--vz-ink);
    background: var(--vz-surface);
}

.app-shell .dl-fltbtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.app-shell .dl-fltbtn-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .dl-filter-pop {
    width: 250px;
    padding: 10px;
    gap: 2px;
}

.app-shell .dl-filter-pop .dl-pop-separator {
    margin: 6px 0;
}

.app-shell .dl-filter-pop .dl-textbtn {
    align-self: flex-start;
    min-height: 30px;
    padding: 2px 4px;
}

.app-shell .dl-check-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-shell .dl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--vz-nav-text);
    cursor: pointer;
}

.app-shell .dl-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--vz-green-strong);
}

.app-shell .dl-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    font-size: 13px;
    color: var(--vz-nav-text);
}

/* Wiersze. Noc 4 (#11): 13 px i 44 px (dotąd 14 i 56), więcej wierszy na
   ekranie. */
.app-shell .dl-trow {
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-bottom: 1px solid #eff1f1;
    font-size: 13px;
    line-height: 1.3;
}

.app-shell .dl-trow:hover {
    background: #f9fafa;
}

.app-shell .dl-table[aria-busy='true'] .dl-trow {
    opacity: 0.6;
}

/* padding + ujemny margines: komórka ucina tekst wielokropkiem
   (overflow: hidden), a obrys fokusu (3 px + odstęp 2 px) linku dokumentu
   i przycisku kopii musi się zmieścić w niej cały. Pole wychodzi 6 px w
   odstęp siatki (14 px), więc układ kolumn się nie zmienia. */
.app-shell .dl-cell {
    min-width: 0;
    padding: 6px;
    margin: -6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.app-shell .dl-message-row [role='cell'] {
    padding: 28px 20px;
    font-size: 13px;
    color: var(--vz-muted);
}

.app-shell .dl-link {
    font-family: var(--vz-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--vz-green-strong);
    text-decoration: none;
    border-bottom: 1px solid #bfe3d2;
}

.app-shell .dl-link:hover {
    color: var(--vz-green-strong-hover);
}

.app-shell .dl-link.dl-link-wrap {
    display: inline-flex;
    border-bottom: 0;
}

.app-shell .dl-tone-muted {
    color: var(--vz-logout-text);
}

.app-shell .dl-tone-mono {
    font-family: var(--vz-font-sans);
    font-size: 13px;
    color: var(--vz-logout-text);
}

.app-shell .dl-tone-party {
    color: var(--vz-ink);
    font-weight: 500;
}

.app-shell .dl-tone-successive {
    color: var(--vz-ink);
}

/* Miasto załadunku / dostawy (A3b-1e): jak dawna trasa, zwykły tekst. */
.app-shell .dl-tone-city {
    color: var(--vz-ink);
}

.app-shell .dl-tone-driver,
.app-shell .dl-tone-date {
    color: var(--vz-nav-text);
}

.app-shell .dl-tone-datetime {
    color: var(--vz-logout-text);
    font-size: 13px;
}

.app-shell .dl-empty {
    color: #b4bbb9;
}

.app-shell .dl-iconed {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
}

.app-shell .dl-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell .dl-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.app-shell .dl-country-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid var(--vz-control-border);
    border-radius: 4px;
    font-family: var(--vz-font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--vz-nav-text);
}

.app-shell .dl-country-name {
    color: var(--vz-logout-text);
}

.app-shell .dl-tone-vehicle {
    color: var(--vz-nav-text);
}

.app-shell .dl-tone-place {
    color: var(--vz-ink);
}

.app-shell .dl-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--vz-sidebar-hover);
    color: var(--vz-nav-text);
    font-size: 10px;
    font-weight: 600;
}

.app-shell .dl-person {
    color: var(--vz-nav-text);
}

.app-shell .dl-adr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.app-shell .dl-adr-class {
    font-family: var(--vz-font-sans);
}

.app-shell .dl-adr-un {
    font-family: var(--vz-font-sans);
    font-size: 12px;
    color: #7c4a03;
}

/* Status: kolory z makiety (statusMap). */
.app-shell .dl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.app-shell .dl-badge-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: currentColor;
}

.app-shell .dl-badge-draft { background: #ecefee; color: var(--vz-logout-text); }
.app-shell .dl-badge-draft .dl-badge-dot { background: #8a9391; }
.app-shell .dl-badge-new { background: #e7ecf3; color: #2a3f57; }
.app-shell .dl-badge-new .dl-badge-dot { background: #4a6a8f; }
.app-shell .dl-badge-issued { background: #ffffff; color: var(--vz-green-strong-hover); box-shadow: inset 0 0 0 1px var(--vz-green); }
.app-shell .dl-badge-issued .dl-badge-dot { background: var(--vz-green); }
.app-shell .dl-badge-scanned_carrier,
.app-shell .dl-badge-scanned_consignee { background: #fef3e2; color: #8a3a0c; }
.app-shell .dl-badge-scanned_carrier .dl-badge-dot,
.app-shell .dl-badge-scanned_consignee .dl-badge-dot { background: #e07b1a; }
.app-shell .dl-badge-signed_carrier { background: #e3f4ec; color: var(--vz-green-strong-hover); }
.app-shell .dl-badge-signed_carrier .dl-badge-dot { background: var(--vz-green); }
.app-shell .dl-badge-signed_consignee { background: var(--vz-green-strong); color: #ffffff; }
.app-shell .dl-badge-signed_consignee .dl-badge-dot { background: #ffffff; }
.app-shell .dl-badge-consignee_refusal,
.app-shell .dl-badge-cancelled { background: #fdecec; color: #991b1b; }
.app-shell .dl-badge-consignee_refusal .dl-badge-dot,
.app-shell .dl-badge-cancelled .dl-badge-dot { background: #dc2626; }

/* Kropki w filtrze statusów (makieta: biała kropka "Podpisany (odbiorca)"
   jest tu zielona, żeby była widoczna na białym tle). */
.app-shell .dl-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 22, 0.25);
}

.app-shell .dl-dot-draft { background: #8a9391; }
.app-shell .dl-dot-new { background: #4a6a8f; }
.app-shell .dl-dot-issued,
.app-shell .dl-dot-signed_carrier { background: var(--vz-green); }
.app-shell .dl-dot-scanned_carrier,
.app-shell .dl-dot-scanned_consignee { background: #e07b1a; }
.app-shell .dl-dot-signed_consignee { background: var(--vz-green-strong); }
.app-shell .dl-dot-consignee_refusal,
.app-shell .dl-dot-cancelled { background: #dc2626; }

/* Usunięte: kolumna "Utwórz kopię" jest pierwsza (A3b-1e), więc widać ją
   bez przewijania w bok i nie musi być przypięta do krawędzi. */
.app-shell .dl-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--vz-green-strong);
    border-radius: 8px;
    background: var(--vz-surface);
    color: var(--vz-green-strong);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.app-shell .dl-copy-button:hover:not([aria-disabled='true']) {
    background: var(--vz-green-tint);
    color: var(--vz-green-strong-hover);
}

.app-shell .dl-copy-button[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Stronicowanie: przyciski .pagination-page jak na innych listach back office. */
.app-shell .dl-pagination {
    margin-top: 0;
    align-items: center;
}

.app-shell .dl-pagination[hidden] {
    display: none;
}

.app-shell .dl-pagination .pagination-page:disabled {
    color: #b4bbb9;
    cursor: default;
}

.app-shell .dl-page-gap {
    padding: 0 4px;
    color: var(--vz-muted);
}

.app-shell .dl-export-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- Strona dokumentu (A3b-2v-b1, document.js) -----------------------------
   Nagłówek, pasek akcji, stany strony, blok anulowania. Wszystko w zakresie
   .app-shell z prefiksem dv-; plakietka statusu to .dl-badge listy. */

.app-shell .dv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.app-shell .dv-page,
.app-shell .dv-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.app-shell .dv-page {
    padding-top: 24px;
}

.app-shell .dv-content[hidden],
.app-shell .dv-state[hidden],
.app-shell .dv-skeleton[hidden],
.app-shell .dv-banner[hidden],
.app-shell .dv-message[hidden],
.app-shell .dv-cancellation[hidden],
.app-shell .dv-actions[hidden] {
    display: none;
}

.app-shell .dv-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.app-shell .dv-head-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.app-shell .dv-head-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Numer referencyjny pod numerem dokumentu (feedback 2026-10-23, druga
   runda: mniejsza czcionka, bez pogrubienia, pod numerem Vezlink). Opis
   pola, za nim pole. W edycji pole jest przyciskiem (puste = sama ramka,
   bez placeholdera); poza edycją sama wartość. */
.app-shell .dv-reference {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.app-shell .dv-reference[hidden] {
    display: none;
}

.app-shell .dv-reference-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--vz-muted);
}

.app-shell .dv-reference-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--vz-ink);
    overflow-wrap: anywhere;
}

.app-shell .dv-reference-field {
    display: inline-flex;
    align-items: center;
    min-width: 240px;
    max-width: 100%;
    min-height: 34px;
    padding: 4px 12px;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    background: var(--vz-surface);
    color: var(--vz-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.app-shell .dv-reference-field:hover {
    border-color: var(--vz-green);
    background: var(--vz-green-tint);
}

.app-shell .dv-reference-field:focus-visible {
    outline: 2px solid var(--vz-green);
    outline-offset: 2px;
}

/* Numer krojem mono, grupowany jak w PDF ("VZL 000 000 0318", A3b-2v-b2). */
.app-shell .dv-number {
    margin: 0;
    font-family: var(--vz-font-mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.app-shell .dv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-shell .dv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    background: var(--vz-surface);
    color: var(--vz-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.app-shell .dv-button:hover:not(:disabled) {
    background: var(--vz-green-tint);
    border-color: var(--vz-green-strong);
    color: var(--vz-green-strong-hover);
}

.app-shell .dv-button-primary {
    background: var(--vz-green-strong);
    border-color: var(--vz-green-strong);
    color: #ffffff;
}

.app-shell .dv-button-primary:hover:not(:disabled) {
    background: var(--vz-green-strong-hover);
    border-color: var(--vz-green-strong-hover);
    color: #ffffff;
}

/* "Usuń szkic": przycisk i okno potwierdzenia. */
.app-shell .dv-button-danger {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.app-shell .dv-button-danger:hover:not(:disabled) {
    background: #8f1c13;
    border-color: #8f1c13;
}

.app-shell .dv-confirm-dialog {
    max-width: 440px;
}

.app-shell .dv-confirm-text {
    margin: 0;
    font-family: var(--vz-font-mono);
    font-size: 15px;
}


.app-shell .dv-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Dokument z innej platformy, komunikaty (PDF, historia). */
.app-shell .dv-banner,
.app-shell .dv-message {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.app-shell .dv-banner {
    background: var(--vz-sidebar);
    color: var(--vz-nav-text);
    border-left: 3px solid var(--vz-green-strong);
}

.app-shell .dv-message {
    background: #e3f4ec;
    color: var(--vz-green-strong-hover);
}

.app-shell .dv-message-error {
    background: #fdecec;
    color: #991b1b;
}

.app-shell .dv-state {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
}

.app-shell .dv-state-text {
    margin: 0;
    font-size: 16px;
}

.app-shell .dv-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Szkielet na czas ładowania (main ma aria-busy="true"). */
.app-shell .dv-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-shell .dv-skeleton-bar,
.app-shell .dv-skeleton-box {
    border-radius: 6px;
    background: linear-gradient(90deg, #eef0f0 0%, #f6f7f7 50%, #eef0f0 100%);
    background-size: 200% 100%;
    animation: dv-shimmer 1.4s ease-in-out infinite;
}

.app-shell .dv-skeleton-title {
    width: 260px;
    height: 32px;
}

.app-shell .dv-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.app-shell .dv-skeleton-box {
    height: 120px;
}

@keyframes dv-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .dv-skeleton-bar,
    .app-shell .dv-skeleton-box {
        animation: none;
    }
}

/* Anulowany: kto, kiedy, dlaczego, z jakiej fazy. */
.app-shell .dv-cancellation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 24px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #f3c7c4;
    border-left: 3px solid #b42318;
    border-radius: 8px;
    background: #fffafa;
}

.app-shell .dv-fact dt {
    font-family: var(--vz-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vz-muted);
}

.app-shell .dv-fact dd {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--vz-ink);
    overflow-wrap: anywhere;
}

/* "Wróć do listy" nad numerem dokumentu: sama strzałka (nazwa w
   aria-label i title), pole kliknięcia 36 px. */
.app-shell .dv-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 36px;
    height: 36px;
    margin: 0 0 -8px -8px;
    border-radius: 8px;
    color: var(--vz-green-strong);
}

.app-shell .dv-back:hover {
    background: var(--vz-green-tint);
    color: var(--vz-green-strong-hover);
}

/* Zakładki Dokument | Historia zdarzeń (role="tablist"). */
.app-shell .dv-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--vz-border);
}

.app-shell .dv-tab {
    margin-bottom: -1px;
    padding: 10px 2px 9px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--vz-muted);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.app-shell .dv-tab:hover {
    color: var(--vz-ink);
}

.app-shell .dv-tab[aria-selected='true'] {
    border-bottom-color: var(--vz-green-strong);
    color: var(--vz-ink);
}

.app-shell .dv-panel:focus {
    outline: none;
}

.app-shell .dv-panel:focus-visible {
    outline: 3px solid var(--vz-green-strong);
    outline-offset: 2px;
}

.app-shell .dv-panel[hidden] {
    display: none;
}

/* Historia zdarzeń: tabela Data i godzina | Akcja | Kto wykonał, w stylu
   listy dokumentów (nagłówki małe, wersalikami, mono). */
.app-shell .dv-events-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.app-shell .dv-events-table th,
.app-shell .dv-events-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--vz-border);
    background: none;
    text-align: left;
    vertical-align: top;
}

.app-shell .dv-events-table th {
    padding-top: 14px;
    border-bottom-color: var(--vz-control-border);
    font-family: var(--vz-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vz-muted);
}

.app-shell .dv-event-time {
    width: 170px;
    font-family: var(--vz-font-mono);
    font-size: 13px;
    white-space: nowrap;
    color: var(--vz-nav-text);
}

.app-shell .dv-event-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.app-shell .dv-event-icon {
    display: inline-flex;
    color: var(--vz-muted);
}

.app-shell .dv-event-icon .icon {
    width: 16px;
    height: 16px;
}

.app-shell .dv-event-note {
    margin: 4px 0 0 24px;
    white-space: pre-line;
    color: var(--vz-logout-text);
}

.app-shell .dv-event-who {
    width: 34%;
    color: var(--vz-nav-text);
}

.app-shell .dv-events-empty {
    margin: 16px 0 0;
    color: var(--vz-muted);
}

/* --- Strona dokumentu, A3b-2v-b2: fakty nagłówka, oś etapów, zmiany pól ---
   Tło bloków jasnoszare, prawie białe (zasada właściciela); barwy z tokenów
   marki. Oś pokazuje stan, bez podpowiedzi "co dalej". */
.app-shell .dv-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 0;
}

.app-shell .dv-facts[hidden],
.app-shell .dv-timeline[hidden] {
    display: none;
}

.app-shell .dv-facts .dv-fact dd {
    min-height: 1.4em;
}

/* Noc 4 (#102, decyzja #7, zestaw 1): oś czasu z trzech podpisów na całą
   szerokość. Kółko 48 px; zrobione: tło #008460, ikona biała; czekające:
   białe, obwódka 2 px #CDD5D1, ikona #5B6360; łączniki 3 px, zielone między
   zrobionymi, szare dalej; odmowa w kolorze ostrzegawczym. Nazwa 16/600,
   pod nią strona i osoba, data i godzina (14, #5B6360) albo "Oczekuje". */
.app-shell .dv-timeline {
    padding: 18px 12px 16px;
    border: 1px solid var(--vz-border);
    border-radius: 10px;
    background: #fafbfb;
}

.app-shell .dv-stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .dv-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 8px;
    text-align: center;
}

/* Łącznik do następnego etapu: od brzegu kółka do brzegu następnego kółka. */
.app-shell .dv-stage::before {
    content: '';
    position: absolute;
    top: 22.5px;
    left: calc(50% + 32px);
    right: calc(-50% + 32px);
    height: 3px;
    border-radius: 2px;
    background: #cdd5d1;
}

.app-shell .dv-stage:last-child::before {
    display: none;
}

.app-shell .dv-stage-link-done::before {
    background: #008460;
}

.app-shell .dv-stage-link-refused::before {
    background: #b42318;
}

.app-shell .dv-stage-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border: 2px solid #cdd5d1;
    border-radius: 50%;
    background: #ffffff;
    color: #5b6360;
    box-sizing: border-box;
}

.app-shell .dv-stage-done .dv-stage-marker {
    border-color: #008460;
    background: #008460;
    color: #ffffff;
}

.app-shell .dv-stage-refused .dv-stage-marker {
    border-color: #b42318;
    background: #b42318;
    color: #ffffff;
}

.app-shell .dv-stage-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

.app-shell .dv-stage-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vz-ink);
    overflow-wrap: anywhere;
}

.app-shell .dv-stage-refused .dv-stage-label {
    color: #b42318;
}

.app-shell .dv-stage-meta {
    font-size: 14px;
    line-height: 1.35;
    color: #5b6360;
    overflow-wrap: anywhere;
}

.app-shell .dv-stage-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Wąski ekran: etapy jeden pod drugim, łącznik pionowy przy kółkach. */
@media (max-width: 640px) {
    .app-shell .dv-stages {
        grid-template-columns: 1fr;
    }

    .app-shell .dv-stage {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 0 0 16px;
        text-align: left;
    }

    .app-shell .dv-stage::before {
        top: 52px;
        bottom: 4px;
        left: 22.5px;
        right: auto;
        width: 3px;
        height: auto;
    }

    .app-shell .dv-stage-body {
        align-items: flex-start;
        padding-top: 4px;
    }
}

/* Okno anulowania: pole powodu na całą szerokość. */
.app-shell .dv-cancel-dialog {
    max-width: 520px;
}

.app-shell .dv-cancel-reason {
    resize: vertical;
}

/* Zakładka "Zmiany pól": tabela w stylu historii zdarzeń. */
.app-shell .dv-changes-table td {
    overflow-wrap: anywhere;
}

.app-shell .dv-changes-field {
    font-weight: 500;
}

.app-shell .dv-changes-old {
    color: var(--vz-logout-text);
}

.app-shell .dv-changes-summary .dv-changes-field {
    font-weight: 600;
}

/* Wąski ekran: każdy wiersz zmian jako blok, nazwa kolumny nad wartością
   (data-label z documentViewChanges.js); puste wartości bez etykiety. */
@media (max-width: 900px) {
    .app-shell .dv-changes-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .app-shell .dv-changes-table,
    .app-shell .dv-changes-table tbody,
    .app-shell .dv-changes-table tr,
    .app-shell .dv-changes-table td {
        display: block;
        width: auto;
    }

    .app-shell .dv-changes-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 16px;
        padding: 12px 0;
        border-bottom: 1px solid var(--vz-border);
    }

    .app-shell .dv-changes-table td {
        padding: 0;
        border: 0;
    }

    .app-shell .dv-changes-table td.dv-changes-field {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .app-shell .dv-changes-table td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--vz-font-mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--vz-muted);
    }

    .app-shell .dv-changes-table td.dv-changes-field::before {
        display: none;
    }

    .app-shell .dv-changes-table td:empty {
        display: none;
    }
}

/* --- Strona dokumentu, 2C: Vezpass (skaner USB) i przekazania ----------------
   Przycisk wg docs/design/mobile/Przycisk.dc.html (wariant C8: postać w ramce
   z zieloną plakietką), w kształcie przycisków back office. */
.app-shell .dv-button-vezpass {
    gap: 8px;
    font-weight: 500;
}

.app-shell .dv-vezpass-icon {
    flex: none;
}

.app-shell .dv-vezpass-dialog {
    max-width: 520px;
}

.app-shell .dv-vezpass-code {
    font-family: var(--vz-font-mono);
    font-size: 18px;
    letter-spacing: 0.04em;
}

.app-shell .dv-vezpass-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-shell .dv-vezpass-heading {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Nagłówek pytania dostaje fokus tylko po to, żeby Enter skanera nie wybrał
   opcji; to nie jest kontrolka, więc bez obrysu. */
.app-shell .dv-vezpass-heading:focus {
    outline: none;
}

.app-shell .dv-vezpass-done {
    color: var(--vz-green-strong);
}

.app-shell .dv-vezpass-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
}

.app-shell .dv-vezpass-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-shell .dv-vezpass-fact dt {
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .dv-vezpass-fact dd {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Puste pole = pusta ramka (zasada właściciela). */
.app-shell .dv-vezpass-fact dd.dv-vezpass-empty {
    min-height: 20px;
    border: 1px solid var(--vz-control-border);
    border-radius: 4px;
}

.app-shell .dv-vezpass-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-shell .dv-vezpass-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    background: var(--vz-surface);
    color: var(--vz-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.app-shell .dv-vezpass-option:hover:not(:disabled) {
    background: var(--vz-green-tint);
    border-color: var(--vz-green-strong);
}

.app-shell .dv-vezpass-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.app-shell .dv-vezpass-option-label {
    font-size: 14px;
    font-weight: 600;
}

.app-shell .dv-vezpass-option-change {
    font-size: 13px;
    color: var(--vz-logout-text);
    overflow-wrap: anywhere;
}

/* Przekazania nad historią zdarzeń. */
.app-shell .dv-handovers[hidden] {
    display: none;
}

.app-shell .dv-handovers {
    margin-bottom: 28px;
}

.app-shell .dv-section-title {
    margin: 16px 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.app-shell .dv-handovers-table td {
    overflow-wrap: break-word;
}

.app-shell .dv-handovers-method {
    white-space: nowrap;
}

.app-shell .dv-handovers-plates {
    font-family: var(--vz-font-mono);
    font-size: 13px;
    white-space: nowrap;
}

.app-shell .dv-handover-reverted td {
    color: var(--vz-muted);
    text-decoration: line-through;
}

.app-shell .dv-handover-note {
    display: block;
    font-size: 12px;
}

@media (max-width: 900px) {
    .app-shell .dv-vezpass-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .dv-handovers-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .app-shell .dv-handovers-table,
    .app-shell .dv-handovers-table tbody,
    .app-shell .dv-handovers-table tr,
    .app-shell .dv-handovers-table td {
        display: block;
        width: auto;
    }

    .app-shell .dv-handovers-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 16px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--vz-border);
    }

    .app-shell .dv-handovers-table td {
        padding: 0;
        border: 0;
    }

    .app-shell .dv-handovers-table td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--vz-font-mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--vz-muted);
    }

    .app-shell .dv-handovers-table td:empty {
        display: none;
    }
}

/* --- Szablon CMR (A3b-2v-b1, cmrTemplateView.js) ---------------------------
   Siatka odwzorowuje układ IRU 2007: lewa kolumna 1-5, prawa 6-9 (8 obok 3 i
   4), towar, 16|17, 18|19, 20, 21, 22|23|24. Linie między polami to tło
   arkusza widoczne w 1-pikselowej szczelinie siatki. Grube ramki (6, 7, 8,
   17, 21, 23) jak na wzorze. Poniżej 1100 px jedna kolumna w kolejności
   numerów (kolejność w DOM). A3b-2c dopisze .cmr-edit-* na końcu pliku. */

/* 90% szerokości, wyśrodkowany (uwagi właściciela): na dużym ekranie pola
   nie rozjeżdżają się na całą szerokość. */
.app-shell .cmr-template {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 90%;
    min-width: 0;
    margin: 0 auto;
}

.app-shell .cmr-slot:empty {
    display: none;
}

.app-shell .cmr-sheet {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
        'hd hd hd hd hd hd'
        'b1 b1 b1 b6 b6 b6'
        'b2 b2 b2 b7 b7 b7'
        'b3 b3 b3 b8 b8 b8'
        'b4 b4 b4 b8 b8 b8'
        'b5 b5 b5 b9 b9 b9'
        'gd gd gd gd gd gd'
        'b16 b16 b16 b17 b17 b17'
        'b18 b18 b18 b19 b19 b19'
        'b20 b20 b20 b20 b20 b20'
        'b21 b21 b21 b21 b21 b21'
        'b22 b22 b23 b23 b24 b24';
    gap: 1px;
    /* Zewnętrzna ramka jako prawdziwy border (2 px, szary), bez zaokrągleń:
       przy szerokości 90% (ułamkowe piksele) Firefox gubił boczną linię
       rysowaną 1-pikselowym paddingiem. Linie wewnętrzne: tło w szczelinie. */
    border: 2px solid #8a9391;
    background: #8a9391;
    overflow: hidden;
}

.app-shell .cmr-sheet > [data-box='header'] { grid-area: hd; }
.app-shell .cmr-sheet > [data-box='1'] { grid-area: b1; }
.app-shell .cmr-sheet > [data-box='2'] { grid-area: b2; }
.app-shell .cmr-sheet > [data-box='3'] { grid-area: b3; }
.app-shell .cmr-sheet > [data-box='4'] { grid-area: b4; }
.app-shell .cmr-sheet > [data-box='5'] { grid-area: b5; }
.app-shell .cmr-sheet > [data-box='6'] { grid-area: b6; }
.app-shell .cmr-sheet > [data-box='7'] { grid-area: b7; }
.app-shell .cmr-sheet > [data-box='8'] { grid-area: b8; }
.app-shell .cmr-sheet > [data-box='9'] { grid-area: b9; }
.app-shell .cmr-sheet > [data-box='goods'] { grid-area: gd; }
.app-shell .cmr-sheet > [data-box='16'] { grid-area: b16; }
.app-shell .cmr-sheet > [data-box='17'] { grid-area: b17; }
.app-shell .cmr-sheet > [data-box='18'] { grid-area: b18; }
.app-shell .cmr-sheet > [data-box='19'] { grid-area: b19; }
.app-shell .cmr-sheet > [data-box='20'] { grid-area: b20; }
.app-shell .cmr-sheet > [data-box='21'] { grid-area: b21; }
.app-shell .cmr-sheet > [data-box='22'] { grid-area: b22; }
.app-shell .cmr-sheet > [data-box='23'] { grid-area: b23; }
.app-shell .cmr-sheet > [data-box='24'] { grid-area: b24; }

.app-shell .cmr-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 72px;
    padding: 10px 12px 12px;
    background: var(--vz-surface);
    box-sizing: border-box;
}

.app-shell .cmr-thick {
    box-shadow: inset 0 0 0 2px var(--vz-ink);
}

/* Pola 6, 7 i 8 (feedback 2026-10-24): jedna gruba ramka na zewnątrz
   całej grupy, między polami cienkie linie siatki. Ramka to osobny element
   nad komórkami b6..b8 (nazwane linie obszarów), bez reakcji na klik. */
.app-shell .cmr-sheet > .cmr-thick-group {
    grid-row: b6-start / b8-end;
    grid-column: b6-start / b6-end;
    z-index: 1;
    border: 2px solid var(--vz-ink);
    pointer-events: none;
    box-sizing: border-box;
}

.app-shell .cmr-sheet > [data-box='6'].cmr-thick,
.app-shell .cmr-sheet > [data-box='7'].cmr-thick,
.app-shell .cmr-sheet > [data-box='8'].cmr-thick {
    box-shadow: none;
}

.app-shell .cmr-box:focus {
    outline: none;
}

.app-shell .cmr-box:focus-visible {
    outline: 3px solid var(--vz-green-strong);
    outline-offset: -3px;
}

.app-shell .cmr-box-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vz-ink);
}

.app-shell .cmr-box-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 3px;
    box-sizing: border-box;
    border: 1px solid var(--vz-ink);
    border-radius: 3px;
    font-family: var(--vz-font-mono);
    font-size: 11px;
    font-weight: 600;
}

.app-shell .cmr-box-iru {
    font-size: 11px;
    font-weight: 400;
    color: var(--vz-muted);
}

.app-shell .cmr-box-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 14px;
    color: var(--vz-ink);
}

.app-shell .cmr-row {
    margin: 0;
    overflow-wrap: anywhere;
}

.app-shell .cmr-name {
    font-size: 15px;
    font-weight: 600;
}

.app-shell .cmr-text {
    white-space: pre-line;
}

.app-shell .cmr-labeled {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 13px;
}

.app-shell .cmr-labeled + .cmr-labeled,
.app-shell .cmr-line + .cmr-labeled,
.app-shell .cmr-country + .cmr-labeled {
    margin-top: 1px;
}

.app-shell .cmr-label {
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .cmr-value {
    white-space: pre-line;
}

.app-shell .cmr-mono {
    font-family: var(--vz-font-mono);
    font-size: 13px;
}

.app-shell .cmr-country {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-shell .cmr-country-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid var(--vz-control-border);
    border-radius: 4px;
    font-family: var(--vz-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--vz-nav-text);
}

.app-shell .cmr-flag {
    font-weight: 600;
    color: #8a3a0c;
}

.app-shell .cmr-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-shell .cmr-group + .cmr-group,
.app-shell .cmr-box-body > .cmr-row + .cmr-group {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--vz-border);
}

.app-shell .cmr-group-title {
    font-family: var(--vz-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vz-muted);
}

/* Zastrzeżenia (8, 24): pod uwagami z wystawienia, z etapem i czasem. */
.app-shell .cmr-objection {
    margin-top: 4px;
    padding: 6px 0 6px 10px;
    border-left: 3px solid #e07b1a;
}

.app-shell .cmr-objection-refusal {
    border-left-color: #b42318;
}

.app-shell .cmr-objection-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

.app-shell .cmr-objection-time {
    font-family: var(--vz-font-mono);
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .cmr-objection-text {
    margin: 2px 0 0;
    white-space: pre-line;
}

/* Pole 20: stała klauzula, najpierw EN, potem FR. */
.app-shell .cmr-clause {
    font-size: 12px;
    color: var(--vz-logout-text);
}

.app-shell .cmr-clause-fr {
    font-style: italic;
}

/* Podpisy (7, 22-24). Odmowa przyjęcia na czerwono. */
.app-shell .cmr-signature {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid #b8d8ca;
    border-radius: 6px;
    background: var(--vz-green-tint);
}

.app-shell .cmr-signer {
    font-weight: 600;
}

.app-shell .cmr-signed-for {
    font-size: 13px;
    color: var(--vz-logout-text);
}

.app-shell .cmr-signed-at {
    font-family: var(--vz-font-mono);
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .cmr-signature-refused {
    border-color: #b42318;
    background: #fdecec;
}

.app-shell .cmr-refusal {
    color: #b42318;
    font-weight: 600;
}

/* Góra formularza: owal CMR, kraj wystawienia, numer, referencja. */
.app-shell .cmr-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    min-height: 0;
}

.app-shell .cmr-oval {
    display: inline-flex;
    align-items: center;
    padding: 2px 14px;
    border: 2px solid var(--vz-ink);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.app-shell .cmr-header .cmr-box-title {
    font-size: 14px;
}

.app-shell .cmr-header-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 0 auto;
}

.app-shell .cmr-header-fact dd {
    margin: 2px 0 0;
}

/* Towar: kolumny 10-15, pod pozycją drobniej kod, ilość, netto, nr
   statystyczny i blok ADR; wiersz sumy ze wszystkich pozycji. */
.app-shell .cmr-goods-wrap {
    overflow-x: auto;
}

.app-shell .cmr-goods {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

/* Kolumny liczbowe 11, 14, 15 węższe; reszta dla opisów (13 najszersza). */
.app-shell .cmr-goods .cmr-colw-10 { width: 14%; }
.app-shell .cmr-goods .cmr-colw-11 { width: 11%; }
.app-shell .cmr-goods .cmr-colw-12 { width: 17%; }
.app-shell .cmr-goods .cmr-colw-14 { width: 12%; }
.app-shell .cmr-goods .cmr-colw-15 { width: 10%; }

/* Bez globalnego tła i linii tabel (th, td na górze pliku). */
.app-shell .cmr-goods th,
.app-shell .cmr-goods td {
    background: none;
    border-bottom: 0;
}

.app-shell .cmr-goods thead th {
    border-bottom: 1px solid var(--vz-ink);
}

.app-shell .cmr-goods th {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    font-size: 12px;
    font-weight: 600;
}

.app-shell .cmr-goods thead th > span {
    display: block;
}

.app-shell .cmr-goods thead th > .cmr-box-no {
    display: inline-flex;
    margin-bottom: 4px;
}

.app-shell .cmr-goods td {
    padding: 8px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* Liczby (11, 14, 15) wyśrodkowane pod nagłówkiem, także w wierszu sumy. */
.app-shell .cmr-goods .cmr-col-11,
.app-shell .cmr-goods .cmr-col-14,
.app-shell .cmr-goods .cmr-col-15 {
    text-align: center;
}

.app-shell .cmr-goods td.cmr-col-11,
.app-shell .cmr-goods td.cmr-col-14,
.app-shell .cmr-goods td.cmr-col-15 {
    font-family: var(--vz-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Pozycje oddzielone ciemną linią (jak pod nagłówkiem); wiersz z danymi
   dodatkowymi należy do swojej pozycji, bez linii nad nim. */
.app-shell .cmr-goods-line + .cmr-goods-line td,
.app-shell .cmr-goods-extra + .cmr-goods-line td {
    border-top: 1px solid var(--vz-ink);
}

.app-shell .cmr-goods-extra td {
    padding-top: 0;
}

.app-shell .cmr-goods-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
}

.app-shell .cmr-adr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #f5c26b;
    border-radius: 6px;
    background: #fff8eb;
}

.app-shell .cmr-adr-diamond {
    flex: none;
}

.app-shell .cmr-adr-rows {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 2px 18px;
    min-width: 0;
}

.app-shell .cmr-goods-total th,
.app-shell .cmr-goods-total td {
    border-top: 2px solid var(--vz-ink);
    font-weight: 600;
}

/* Znaki wodne SZKIC / ANULOWANY: dekoracja (aria-hidden), status czyta się
   z nagłówka strony. */
.app-shell .cmr-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    font-size: clamp(64px, 11vw, 168px);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(17, 24, 22, 0.07);
    transform: rotate(-24deg);
    user-select: none;
}

.app-shell .cmr-watermark-cancelled {
    color: rgba(180, 35, 24, 0.12);
}

/* Tryb edycji (kontrakt dla A3b-2c): pole jako przycisk. */
.app-shell .cmr-activatable {
    cursor: pointer;
}

.app-shell .cmr-activatable:hover {
    background: var(--vz-green-tint);
}

/* Braki: bez podświetlania pól na szablonie (decyzja 2026-10-23); zostają
   gwiazdki i pasek braków nad szablonem. Klasa cmr-missing bez wyglądu. */

.app-shell .cmr-required {
    color: #b42318;
}

/* A3b-2c1: okno pola formularza (documentFormDialog.js), natywny <dialog>
   w .app-shell, wygląd jak okno wyboru roli (shell-dialog). */
.app-shell .cmr-form-dialog {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 720px;
    max-height: calc(100% - 32px);
    padding: 0;
    color: var(--vz-ink);
    background-color: var(--vz-surface);
    border: 0;
    border-radius: 8px;
}

.app-shell .cmr-form-dialog::backdrop {
    background-color: rgba(17, 24, 22, 0.5);
}

.app-shell .cmr-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.app-shell .cmr-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.app-shell .cmr-form-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 20px;
}

.app-shell .cmr-form-no {
    font-family: var(--vz-font-mono);
    font-size: 15px;
    color: var(--vz-green-strong);
}

.app-shell .cmr-form-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-shell .cmr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.app-shell .cmr-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Nagłówek drugiej części okna (pole 18: podwykonawca). */
.app-shell .cmr-form-section {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--vz-border);
    font-size: 15px;
    font-weight: 600;
    color: var(--vz-ink);
}

/* Pola wieloliniowe i pole wyboru na całą szerokość. */
.app-shell .cmr-form-textarea,
.app-shell .cmr-form-checkbox {
    grid-column: 1 / -1;
}

.app-shell .cmr-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-nav-text);
}

.app-shell .cmr-form-checkbox .cmr-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--vz-ink);
    cursor: pointer;
}

.app-shell .cmr-form-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--vz-green-strong);
}

.app-shell .cmr-form-field :is(input:not([type='checkbox']), select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--vz-ink);
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 6px;
}

.app-shell .cmr-form-field textarea {
    min-height: 72px;
    resize: vertical;
}

.app-shell .cmr-form-field [aria-invalid='true'] {
    border-color: #b42318;
    box-shadow: inset 0 0 0 1px #b42318;
}

.app-shell .cmr-form-error,
.app-shell .cmr-form-message {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #b42318;
}

.app-shell .cmr-form-message {
    padding: 10px 12px;
    background: #fdecea;
    border-radius: 6px;
}

.app-shell .cmr-form-error[hidden],
.app-shell .cmr-form-message[hidden],
.app-shell .cmr-form-discard[hidden] {
    display: none;
}

.app-shell .cmr-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.app-shell .cmr-form-discard {
    margin-right: auto;
}

/* Pasek brakujących pól nad szablonem (tryb edycji). */
.app-shell .cmr-missing-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fdf3f2;
    border-left: 3px solid #b42318;
    border-radius: 8px;
}

.app-shell .cmr-missing-label {
    font-size: 13px;
    font-weight: 600;
    color: #b42318;
}

.app-shell .cmr-missing-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.app-shell .cmr-missing-item {
    min-height: 32px;
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-ink);
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 999px;
    cursor: pointer;
}

.app-shell .cmr-missing-item:hover:not(:disabled) {
    background: var(--vz-green-tint);
    border-color: var(--vz-green-strong);
}

.app-shell .cmr-missing-item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A3b-2c2: pasek braków i "Utwórz" w jednym wierszu nad szablonem. */
.app-shell .cmr-form-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.app-shell .cmr-form-toolbar .cmr-missing-bar {
    flex: 1 1 320px;
    margin-bottom: 0;
}

.app-shell .cmr-form-toolbar .cmr-create-button {
    margin-left: auto;
}

/* A3b-2c2: okno Towar (cargoLinesEditor.js), pozycje jako karty. */
/* A3b-2c3: okno Towar jako szeroka tabela w kolejności formularza CMR
   (feedback 2026-10-23): wiersz = pozycja z polami 10-15 obok siebie,
   nagłówki kolumn z numerem pola i nazwą jak na szablonie; pod wierszem
   "Towar niebezpieczny" i nr statystyczny, po zaznaczeniu pola ADR na całą
   szerokość. Poniżej ok. 1024 px pola idą pod siebie z własnymi etykietami. */
.app-shell .cmr-goods-dialog {
    width: calc(100% - 32px);
    max-width: 1480px;
}

.app-shell .cmr-goods-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
}

.app-shell .cmr-goods-grid {
    display: grid;
    grid-template-columns: 28px minmax(150px, 1.2fr) minmax(110px, 0.75fr) minmax(140px, 1fr) minmax(220px, 2.3fr) minmax(120px, 0.85fr) minmax(110px, 0.75fr) 36px;
    gap: 12px;
    align-items: start;
}

.app-shell .cmr-goods-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: var(--vz-sidebar);
    border-bottom: 1px solid var(--vz-control-border);
    border-radius: 8px 8px 0 0;
}

.app-shell .cmr-goods-head-cell {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vz-nav-text);
}

.app-shell .cmr-goods-list {
    display: flex;
    flex-direction: column;
}

.app-shell .cmr-goods-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.app-shell .cmr-goods-row + .cmr-goods-row {
    border-top: 1px solid var(--vz-control-border);
}

.app-shell .cmr-goods-index {
    padding-top: 10px;
    font-family: var(--vz-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-muted);
    text-align: center;
}

/* W wierszu tabeli etykieta pola jest w nagłówku kolumny: tu tylko dla
   czytników ekranu (widoczna, gdy pola idą pod siebie). */
.app-shell .cmr-goods-cells .cmr-form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.app-shell .cmr-goods-cells .cmr-form-field {
    grid-column: auto;
    gap: 4px;
}

.app-shell .cmr-goods-cells .cmr-form-field textarea {
    min-height: 40px;
    resize: vertical;
}

.app-shell .cmr-goods-cells .cmr-form-packages input,
.app-shell .cmr-goods-cells .cmr-form-measure input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.app-shell .cmr-goods-label-text {
    min-width: 0;
    padding-top: 2px;
}

.app-shell .cmr-goods-head-cell .cmr-required {
    padding-top: 2px;
}

.app-shell .cmr-goods .cmr-box-no,
.app-shell .cmr-goods-dialog .cmr-box-no {
    flex: none;
}

.app-shell .cmr-goods-row-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding-left: 40px;
}

/* Pole 10: znaki i numery, pod nimi nr statystyczny z własną etykietą. */
.app-shell .cmr-goods-dialog .cmr-goods-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.app-shell .cmr-goods-cells .cmr-goods-sub-field .cmr-form-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .cmr-goods-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    padding: 0;
    color: var(--vz-nav-text);
    background: transparent;
    border: 1px solid var(--vz-control-border);
    border-radius: 6px;
    cursor: pointer;
}

.app-shell .cmr-goods-remove:hover {
    color: #b42318;
    border-color: #b42318;
}

.app-shell .cmr-goods-adr-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--vz-ink);
    cursor: pointer;
}

.app-shell .cmr-goods-adr-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--vz-green-strong);
}

.app-shell .cmr-goods-adr .cmr-form-field {
    grid-column: auto;
}

.app-shell .cmr-goods-adr {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    gap: 10px 12px;
    margin-left: 40px;
    padding: 12px;
    background: var(--vz-green-tint);
    border: 1px dashed var(--vz-control-border);
    border-radius: 6px;
}

.app-shell .cmr-goods-adr[hidden] {
    display: none;
}

@media (max-width: 1024px) {
    .app-shell .cmr-goods-head {
        display: none;
    }

    .app-shell .cmr-goods-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .app-shell .cmr-goods-cells .cmr-goods-index {
        grid-column: 1;
        padding-top: 0;
        text-align: left;
    }

    .app-shell .cmr-goods-cells .cmr-goods-remove {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .app-shell .cmr-goods-cells .cmr-form-field.cmr-goods-cell-13 {
        grid-column: 1 / -1;
    }

    .app-shell .cmr-goods-cells .cmr-form-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .app-shell .cmr-goods-row-extra {
        padding-left: 0;
    }

    .app-shell .cmr-goods-adr {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-left: 0;
    }
}

/* A3b-2b: import towaru z pliku (okno nad oknem Towar). */
.app-shell .cmr-import-dialog {
    /* Noc 3 (#94): almost the whole screen width for many columns. */
    max-width: min(1600px, calc(100vw - 32px));
    width: calc(100vw - 32px);
}

.app-shell .cmr-import-template {
    margin-left: auto;
}

.app-shell .cmr-import-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.app-shell .cmr-import-file-name {
    font-size: 14px;
    color: var(--vz-ink);
    overflow-wrap: anywhere;
}

.app-shell .cmr-import-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.app-shell .cmr-import-preview[hidden] {
    display: none;
}

.app-shell .cmr-import-summary {
    margin: 0;
    font-size: 14px;
    color: var(--vz-muted);
}

.app-shell .cmr-import-scroll {
    max-height: 62vh;
    overflow: auto;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
}

.app-shell .cmr-import-table {
    /* separate: with collapse a sticky cell lets the rows under it show
       through at its top edge. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    min-width: 100%;
    /* A shared table rule clips (overflow: hidden), which turned the sticky
       header rows off: the scroller above must be their scroll box. */
    overflow: visible;
}

.app-shell .cmr-import-table th,
.app-shell .cmr-import-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--vz-border);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.app-shell .cmr-import-table thead th {
    position: sticky;
    background: var(--vz-surface);
    z-index: 1;
}

.app-shell .cmr-import-mapping th {
    top: 0;
}

.app-shell .cmr-import-names th {
    top: 41px;
    font-family: var(--vz-font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .cmr-import-mapping select {
    min-width: 150px;
    height: 30px;
    border: 1px solid var(--vz-control-border);
    border-radius: 6px;
    background: var(--vz-surface);
    font: inherit;
}

.app-shell .cmr-import-line {
    font-family: var(--vz-font-mono);
    color: var(--vz-muted);
    text-align: right;
    /* The row number stays visible while the table scrolls sideways. */
    position: sticky;
    left: 0;
    background: var(--vz-surface);
}

.app-shell .cmr-import-table thead .cmr-import-line {
    z-index: 2;
}

.app-shell .cmr-import-unmapped,
.app-shell .cmr-import-skipped td {
    color: var(--vz-muted);
    opacity: 0.6;
}

.app-shell .cmr-import-error {
    background: #fef3f2;
}

.app-shell .cmr-import-error-text {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #b42318;
    white-space: normal;
    max-width: 220px;
}

.app-shell .cmr-import-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    border: 0;
}

.app-shell .cmr-import-modes[hidden] {
    display: none;
}

.app-shell .cmr-import-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* A3b-2c4: okno pola 7, kolejni przewoźnicy jako karty. */
.app-shell .cmr-carriers-dialog {
    max-width: 840px;
}

.app-shell .cmr-carriers-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-shell .cmr-carriers-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
}

.app-shell .cmr-carriers-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-shell .cmr-carriers-card-title {
    margin: 0;
    font-size: 15px;
}

/* A3b-2c4: uwagi nadawcy przy polu 22 (lista, okno ze zdjęciami). */
.app-shell .cmr-remarks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.app-shell .cmr-remarks-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .cmr-remarks-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 6px 8px;
    font: inherit;
    text-align: left;
    color: var(--vz-ink);
    background: var(--vz-green-tint);
    border: 1px solid var(--vz-border);
    border-radius: 6px;
    cursor: pointer;
}

.app-shell .cmr-remarks-item:hover {
    border-color: var(--vz-green);
}

.app-shell .cmr-remarks-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
}

.app-shell .cmr-remarks-meta {
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .cmr-remarks-add {
    align-self: flex-start;
}

/* Noc 6 (#116 pkt 2, 4; plansza "Pasek-akcji-n6", sekcja 5): uwaga jako
   karta (tekst, kto i kiedy, kosz po prawej), miniatury 72 px z krzyżykiem
   w rogu. Kosz i krzyżyk tylko przy `can_delete` (przed podpisem nadawcy). */
.app-shell .cmr-remarks-list {
    gap: 8px;
}

.app-shell .cmr-remarks-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--vz-surface);
    border: 1px solid #e3e6e6;
    border-radius: 10px;
}

.app-shell .cmr-remarks-entry:hover {
    border-color: var(--vz-green);
}

.app-shell .cmr-remarks-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.app-shell .cmr-remarks-entry .cmr-remarks-item {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.app-shell .cmr-remarks-entry .cmr-remarks-text {
    font-size: 15px;
}

.app-shell .cmr-remarks-entry .cmr-remarks-meta {
    font-size: 13px;
    color: #3d4744;
}

.app-shell .cmr-remarks-delete {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #b42318;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.app-shell .cmr-remarks-delete:hover {
    background: #fef3f2;
}

.app-shell .cmr-remarks-entry .dv-thumbs {
    gap: 14px;
    margin: 0;
    padding-top: 4px;
}

.app-shell .cmr-remarks-entry .dv-thumb {
    width: 72px;
    height: 72px;
    background: #dde3e0;
}

.app-shell .dv-thumb-item {
    position: relative;
}

.app-shell .dv-thumb-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    color: #3d4744;
    background: #ffffff;
    border: 1px solid #cdd5d1;
    border-radius: 50%;
    cursor: pointer;
}

.app-shell .dv-thumb-remove:hover {
    color: #b42318;
    border-color: #b42318;
}

.app-shell .cmr-remark-dialog {
    max-width: 720px;
}

.app-shell .cmr-remark-meta {
    margin: 0;
    font-size: 13px;
    color: var(--vz-muted);
}

.app-shell .cmr-remark-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.app-shell .cmr-remark-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.app-shell .cmr-remark-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--vz-sidebar);
    border: 1px solid var(--vz-border);
    border-radius: 6px;
}

.app-shell .cmr-remark-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-shell .cmr-remark-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    background: rgba(17, 24, 22, 0.7);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* A3b-2c2: podpis nadawcy w polu 22 i jego okno. */
.app-shell .cmr-sign-button {
    margin-top: 8px;
}

.app-shell .cmr-sign-dialog {
    max-width: 480px;
}

.app-shell .cmr-sign-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.app-shell .cmr-sign-facts .dv-fact {
    display: flex;
    gap: 8px;
}

.app-shell .cmr-sign-facts dt {
    min-width: 160px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-nav-text);
}

.app-shell .cmr-sign-facts dd {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 640px) {
    .app-shell .cmr-form {
        padding: 16px;
    }

    .app-shell .cmr-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .app-shell .cmr-template {
        width: 100%;
    }

    .app-shell .cmr-sheet {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
    }

    .app-shell .cmr-sheet > [data-box] {
        grid-area: auto;
    }

    /* Jedna kolumna: bez nakładki; 6, 7 i 8 leżą jedno pod drugim, więc
       każde dostaje swoje boki grubej ramki (6 górę, 8 dół). */
    .app-shell .cmr-sheet > .cmr-thick-group {
        display: none;
    }

    .app-shell .cmr-sheet > [data-box='6'].cmr-thick {
        box-shadow: inset 2px 0 0 var(--vz-ink), inset -2px 0 0 var(--vz-ink), inset 0 2px 0 var(--vz-ink);
    }

    .app-shell .cmr-sheet > [data-box='7'].cmr-thick {
        box-shadow: inset 2px 0 0 var(--vz-ink), inset -2px 0 0 var(--vz-ink);
    }

    .app-shell .cmr-sheet > [data-box='8'].cmr-thick {
        box-shadow: inset 2px 0 0 var(--vz-ink), inset -2px 0 0 var(--vz-ink), inset 0 -2px 0 var(--vz-ink);
    }

    .app-shell .dv-skeleton-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Strona dokumentu, Noc 3 (#94): pasek akcji, menu ⋮, "Przekaż", kod QR --
   Pasek w jednej linii z numerem; akcja główna zielona, reszta zwykła. */
.app-shell .dv-actions {
    align-items: center;
}

.app-shell .dv-menu {
    position: relative;
    display: inline-flex;
}

.app-shell .dv-button-icon {
    min-width: 40px;
    padding: 8px 10px;
}

.app-shell .dv-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
    background: var(--vz-surface);
    box-shadow: 0 8px 24px rgba(17, 24, 22, 0.12);
}

.app-shell .dv-menu-list[hidden] {
    display: none;
}

.app-shell .dv-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vz-ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.app-shell .dv-menu-item:hover:not([aria-disabled="true"]),
.app-shell .dv-menu-item:focus-visible {
    background: var(--vz-sidebar-hover);
}

.app-shell .dv-menu-item[aria-disabled="true"] {
    color: var(--vz-muted);
    cursor: not-allowed;
}

.app-shell .dv-menu-icon {
    display: inline-flex;
    flex: none;
}

.app-shell .dv-menu-icon svg {
    width: 18px;
    height: 18px;
}

.app-shell .dv-menu-label {
    flex: 1;
}

.app-shell .dv-menu-note {
    font-size: 12px;
    color: var(--vz-muted);
}

.app-shell .dv-qr-dialog {
    max-width: 360px;
}

/* The ⋮ menu is the last on the right: its list opens to the left. */
.app-shell [data-action="more"] + .dv-menu-list {
    left: auto;
    right: 0;
}

.app-shell .dv-qr-code {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.app-shell .dv-qr-number {
    margin: 0;
    text-align: center;
    font-family: var(--vz-font-mono);
    font-size: 16px;
}

/* --- Noc 3 (#94): pole z listą wartości (combobox.js) --------------------------
   Lista "fixed" pod polem, w warstwie okna (<dialog>), więc nie ucina jej
   przewijanie okna; przy przewinięciu lista się zamyka. */
.app-shell .combobox-list {
    position: fixed;
    z-index: 50;
    max-height: 260px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    background: var(--vz-surface);
    box-shadow: 0 8px 24px rgba(17, 24, 22, 0.12);
    box-sizing: border-box;
}

.app-shell .combobox-list[hidden] {
    display: none;
}

.app-shell .combobox-option {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.app-shell .combobox-option:hover,
.app-shell .combobox-option[aria-selected="true"] {
    background: var(--vz-sidebar-hover);
}

.app-shell .combobox-option[aria-selected="true"] {
    box-shadow: inset 3px 0 0 var(--vz-green);
}

/* Okna potwierdzenia ("Odrzucić zmiany?", "Usuń szkic") węższe niż okna pól. */
.app-shell .cmr-form-dialog.dv-confirm-dialog {
    max-width: 440px;
}

/* --- Noc 6 (6F, #116 F): Masterdata (masterdata.html, masterdata*.js) i
   Masterdata w formularzu dokumentu (masterdataLookup.js). Plansze
   Masterdata-partnerzy, Masterdata-okna, Formularz-masterdata: kolory,
   rozmiary i kolejność wiążące. Prefiks md-. ---------------------------------- */
.app-shell .md-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.app-shell .md-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vz-nav-text);
}

.app-shell .md-icon-holder {
    display: inline-flex;
    flex: none;
}

/* Zakładki na całą szerokość, równe (#116 pkt 19). */
.app-shell .md-tabs {
    display: flex;
    border-bottom: 1px solid var(--vz-border);
}

.app-shell .md-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    margin-bottom: -1px;
    padding: 0 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--vz-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.app-shell .md-tab:hover {
    color: var(--vz-ink);
}

.app-shell .md-tab[aria-selected='true'] {
    color: var(--vz-ink);
    border-bottom-color: var(--vz-green);
}

.app-shell .md-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Pasek nad tabelą: licznik, zaznaczenie (Scal, Usuń), Importuj, Dodaj. */
.app-shell .md-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.app-shell .md-count {
    font-size: 18px;
    font-weight: 600;
    color: var(--vz-ink);
}

.app-shell .md-selection {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 14px;
    background: #f1faf6;
    border: 1px solid #cfe9de;
    border-radius: 10px;
    font-size: 15px;
    color: var(--vz-nav-text);
}

.app-shell .md-selection[hidden] {
    display: none;
}

.app-shell .md-selection .dv-button {
    min-height: 32px;
    padding: 0 12px;
    gap: 6px;
}

.app-shell .md-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.app-shell .md-toolbar .dv-button {
    gap: 8px;
    border-radius: 10px;
}

.app-shell .md-danger-button {
    color: #b42318;
}

.app-shell .md-danger-button:hover:not(:disabled) {
    color: #8f1c13;
    border-color: #b42318;
    background: #fdecea;
}

/* Tabela: przewija się w bok na wąskim ekranie. */
.app-shell .md-table-scroll {
    overflow: auto;
    border: 1px solid var(--vz-border);
    border-radius: 10px;
}

.app-shell .md-table,
.app-shell .md-import-errors {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.app-shell .md-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--vz-ink);
}

.app-shell .md-table th,
.app-shell .md-table td {
    padding: 0 8px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.app-shell .md-head th {
    height: 38px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--vz-muted);
    background: #f6f7f7;
    border-bottom: 1px solid var(--vz-border);
}

.app-shell .md-filters th {
    height: 44px;
    background: var(--vz-surface);
    border-bottom: 1px solid var(--vz-border);
}

.app-shell .md-filter-input,
.app-shell .md-filter-select {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--vz-ink);
    background: var(--vz-surface);
    border: 1px solid #cdd5d1;
    border-radius: 6px;
}

.app-shell .md-filter-select {
    min-width: 120px;
}

.app-shell .md-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.app-shell .md-sort:hover {
    color: var(--vz-ink);
}

.app-shell .md-col-check {
    width: 40px;
    max-width: 40px;
    text-align: center;
}

.app-shell .md-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--vz-green-strong);
    vertical-align: middle;
}

.app-shell .md-row td {
    height: 44px;
    border-bottom: 1px solid #eff1f1;
}

.app-shell .md-row {
    cursor: pointer;
}

.app-shell .md-row:hover {
    background: var(--vz-green-tint);
}

.app-shell .md-row:focus-visible {
    outline: 2px solid var(--vz-green);
    outline-offset: -2px;
}

.app-shell .md-row-selected,
.app-shell .md-row-selected:hover {
    background: #f1faf6;
}

.app-shell .md-strong {
    font-weight: 500;
    color: var(--vz-ink);
}

.app-shell .md-muted {
    color: var(--vz-muted);
}

.app-shell .md-partner-cell {
    display: inline-flex;
    gap: 6px;
}

.app-shell .md-chips {
    display: inline-flex;
    gap: 4px;
}

.app-shell .md-chip {
    display: inline-block;
    padding: 0 8px;
    font-size: 12px;
    line-height: 20px;
    color: #2b3330;
    background: #eef1f0;
    border-radius: 999px;
}

.app-shell .md-empty {
    height: 56px;
    color: var(--vz-muted);
    text-align: center;
}

.app-shell .md-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    font-size: 14px;
}

.app-shell .md-pager:empty {
    display: none;
}

/* Okna Masterdata (plansza Masterdata-okna). */
.app-shell .md-dialog {
    max-width: 640px;
}

.app-shell .md-form-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-shell .md-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.app-shell .md-section {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--vz-muted);
}

.app-shell .md-checks {
    margin: 0;
    padding: 0;
    border: 0;
}

.app-shell .md-checks legend {
    padding: 0;
    margin-bottom: 8px;
}

.app-shell .md-checks-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.app-shell .md-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    cursor: pointer;
}

.app-shell .md-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--vz-green-strong);
}

.app-shell .md-place-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-shell .md-place-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
}

.app-shell .md-place-type {
    flex: none;
    font-size: 13px;
    color: var(--vz-muted);
}

.app-shell .md-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    align-items: center;
    margin: 0 -24px -24px;
    padding: 14px 24px;
    background: var(--vz-surface);
    border-top: 1px solid var(--vz-border);
}

.app-shell .md-spacer {
    flex: 1 1 auto;
}

.app-shell .md-delete-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #b42318;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.app-shell .md-delete-button:hover:not(:disabled) {
    background: #fdecea;
}

.app-shell .md-confirm-text {
    margin: 0;
    font-size: 15px;
}

.app-shell .md-link,
.app-shell .md-link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--vz-green-strong);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.app-shell .md-link-button[hidden] {
    display: none;
}

.app-shell .md-merge-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-shell .md-merge-intro {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-nav-text);
}

.app-shell .md-merge-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
    cursor: pointer;
}

.app-shell .md-merge-item:has(input:checked) {
    background: #f1faf6;
    border-color: var(--vz-green);
}

.app-shell .md-merge-item input {
    margin: 3px 0 0;
    accent-color: var(--vz-green-strong);
}

.app-shell .md-merge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.app-shell .md-merge-detail {
    font-size: 13px;
    color: var(--vz-muted);
}

/* Import (plansza Masterdata-okna, prawa). */
.app-shell .md-import-file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    font-size: 15px;
}

.app-shell .md-import-file-chosen {
    padding: 0 14px;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
    color: var(--vz-green-strong);
}

.app-shell .md-import-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vz-ink);
}

.app-shell .md-import-choose {
    gap: 8px;
}

.app-shell .md-import-choose[hidden] {
    display: none;
}

.app-shell .md-import-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-shell .md-import-preview[hidden] {
    display: none;
}

.app-shell .md-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.app-shell .md-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
}

.app-shell .md-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--vz-ink);
}

.app-shell .md-stat-label {
    font-size: 13px;
    color: var(--vz-nav-text);
}

.app-shell .md-stat-bad {
    background: #fef3f2;
    border-color: #f5c2bd;
}

.app-shell .md-stat-bad .md-stat-value {
    color: #b42318;
}

.app-shell .md-import-errors-scroll {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
}

.app-shell .md-import-errors {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.app-shell .md-import-errors th {
    position: sticky;
    top: 0;
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: left;
    color: var(--vz-muted);
    background: #f6f7f7;
}

.app-shell .md-import-errors td {
    height: 38px;
    padding: 0 12px;
    border-top: 1px solid #eff1f1;
}

.app-shell .md-import-ignored {
    margin: 0;
    font-size: 14px;
}

.app-shell .md-import-template {
    align-self: flex-start;
}

/* Formularz dokumentu: przycisk bazy przy polu Nazwa i podpowiedzi. */
.app-shell .md-lookup-row {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.app-shell .md-lookup-row > input {
    flex: 1 1 auto;
    min-width: 0;
}

.app-shell .md-lookup-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 40px;
    padding: 0;
    color: var(--vz-green-strong);
    background: var(--vz-surface);
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
    cursor: pointer;
}

.app-shell .md-lookup-button:hover {
    background: var(--vz-green-tint);
    border-color: var(--vz-green-strong);
}

.app-shell .md-suggest {
    position: fixed;
    z-index: 20;
    box-sizing: border-box;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 24, 22, 0.14);
}

.app-shell .md-suggest[hidden] {
    display: none;
}

.app-shell .md-suggest-group {
    padding: 8px 10px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--vz-muted);
}

.app-shell .md-suggest-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.app-shell .md-suggest-item[aria-selected='true'] {
    background: #e6f6f0;
}

.app-shell .md-suggest-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.app-shell .md-suggest-name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    color: var(--vz-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .md-suggest-summary {
    font-size: 13px;
    color: var(--vz-nav-text);
}

.app-shell .md-code {
    flex: none;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #00694c;
    background: var(--vz-surface);
    border: 1px solid #9fd9c4;
    border-radius: 6px;
}

/* Okno wyboru z Masterdata (plansza Formularz-masterdata, środek). */
.app-shell .md-picker {
    max-width: 460px;
}

.app-shell .md-picker-title {
    align-items: center;
    color: var(--vz-ink);
}

.app-shell .md-picker-title .md-icon-holder {
    color: var(--vz-green-strong);
}

.app-shell .md-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    color: var(--vz-muted);
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
}

.app-shell .md-search:focus-within {
    border-color: var(--vz-green);
    box-shadow: 0 0 0 1px var(--vz-green);
}

.app-shell .md-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    font: inherit;
    font-size: 15px;
    color: var(--vz-ink);
    background: none;
    border: 0;
    outline: none;
}

.app-shell .md-search input::-webkit-search-cancel-button {
    display: none;
}

.app-shell .md-segmented {
    display: inline-flex;
    align-self: flex-start;
    overflow: hidden;
    border: 1px solid var(--vz-control-border);
    border-radius: 8px;
}

.app-shell .md-segment {
    min-height: 32px;
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--vz-ink);
    background: var(--vz-surface);
    border: 0;
    cursor: pointer;
}

.app-shell .md-segment + .md-segment {
    border-left: 1px solid var(--vz-control-border);
}

.app-shell .md-segment[aria-pressed='true'] {
    color: #00694c;
    background: #e6f6f0;
}

.app-shell .md-picker-table {
    overflow: hidden;
    border: 1px solid var(--vz-border);
    border-radius: 10px;
}

.app-shell .md-picker-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 100px;
    align-items: center;
    min-height: 42px;
    padding: 0 10px;
    font-size: 14px;
    border-bottom: 1px solid #eff1f1;
    cursor: pointer;
}

.app-shell .md-picker-places .md-picker-row {
    grid-template-columns: 80px minmax(0, 1fr) 90px minmax(0, 1fr);
}

.app-shell .md-picker-row > span {
    overflow: hidden;
    padding-right: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .md-picker-head {
    min-height: 36px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--vz-muted);
    background: #f6f7f7;
    cursor: default;
}

.app-shell .md-picker-rows {
    max-height: 300px;
    overflow-y: auto;
}

.app-shell .md-picker-rows .md-picker-row:last-child {
    border-bottom: 0;
}

.app-shell .md-picker-rows .md-picker-row[aria-selected='true'] {
    background: #e6f6f0;
}

.app-shell .md-picker-status {
    margin: 0;
    font-size: 14px;
    color: var(--vz-muted);
}

.app-shell .md-picker-status[hidden] {
    display: none;
}

.app-shell .md-picker-actions {
    align-items: center;
    margin: 0 -24px -24px;
    padding: 14px 24px;
    border-top: 1px solid var(--vz-border);
}

@media (max-width: 640px) {
    .app-shell .md-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .md-grid > .md-field {
        grid-column: 1 / -1 !important;
    }

    .app-shell .md-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Noc 3, etap 2 (#94): pole 24, odbiorca w back office ---------------------- */
.app-shell .dv-consignee-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.app-shell .dv-consignee-reservations ul {
    margin: 0;
    padding-left: 18px;
}

/* --- Strona dokumentu, Noc 4 (#102): pasek akcji, przyciski pól 22-24 ----------
   Projekt właściciela "Pasek akcji": wszystkie przyciski 40 px, promień 10 px,
   jedna linia, odstęp 8 px; ikony 20 px. Kolejność i akcja główna:
   DocumentViewModel.actionBarLayout. Noc 6 (#116 pt 7): "Edytuj" z napisem
   wydłuża pasek; gdy nie mieści się w jednej linii (wąskie okno), przenosi
   się do następnej zamiast wychodzić poza stronę. */
.app-shell .dv-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.app-shell .dv-bar-button {
    height: 40px;
    min-height: 40px;
    gap: 8px;
    padding: 0 14px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1;
}

.app-shell .dv-bar-icon {
    display: inline-flex;
    flex: none;
}

.app-shell .dv-bar-icon svg {
    width: 20px;
    height: 20px;
}

.app-shell .dv-bar-button-icon {
    width: 40px;
    min-width: 40px;
    padding: 0;
}

/* Edytuj wciśnięty w trakcie edycji. */
.app-shell .dv-bar-button-pressed,
.app-shell .dv-bar-button-pressed:hover:not(:disabled) {
    background: #e6f6f0;
    border-color: #9fd8c3;
    color: #00694c;
}

/* Wyłączony (aria-disabled, przycisk zostaje w kolejności Tab, podpowiedź
   czytana): podpis w trakcie edycji, "Utwórz" z brakami. */
.app-shell .dv-bar-button[aria-disabled="true"],
.app-shell .dv-bar-button[aria-disabled="true"]:hover {
    background: #eef1f0;
    border-color: #eef1f0;
    color: #7a837f;
    cursor: not-allowed;
}

/* "Odmów przyjęcia" w polu 24 (na górze w menu ⋮): kolor ostrzegawczy. */
.app-shell .dv-bar-button-danger {
    color: #b42318;
    border-color: #f1c0bb;
}

.app-shell .dv-bar-button-danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: #fef3f2;
    border-color: #b42318;
    color: #b42318;
}

.app-shell .dv-menu-item-danger,
.app-shell .dv-menu-item-danger:hover:not([aria-disabled="true"]) {
    color: #b42318;
}

/* "Udostępnij": pierwsza pozycja to logo vezpass (jak na telefonie). */
.app-shell .dv-menu-logo {
    display: inline-flex;
    flex: none;
}

.app-shell .dv-menu-logo svg {
    width: 74px;
    height: 23px;
}

/* Przyciski pól 22, 23 i 24: ten sam opis i ten sam stan co na górze. */
.app-shell .dv-box-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.app-shell .cmr-slot:empty {
    display: none;
}

/* --- Noc 4 (#102, #2): "Wyczyść" w oknach pól, po lewej w linii zapisu --------- */
.app-shell .cmr-form-actions .cmr-form-clear {
    gap: 6px;
    margin-right: auto;
}

.app-shell .cmr-form-clear-icon {
    display: inline-flex;
}

/* --- Noc 4 (#102, #10): tabela przekazań, osoba i firma, rola małym szarym ---- */
.app-shell .dv-handovers-side {
    min-width: 160px;
}

.app-shell .dv-handovers-person {
    display: block;
    color: var(--vz-ink);
}

.app-shell .dv-handovers-role {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: #5b6360;
}

.app-shell .dv-handovers-table td.dv-handovers-outcome {
    font-size: 12px;
    color: #5b6360;
}

/* --- Noc 4 (#102): miniatury zdjęć (pola 8, 22, 24) i galeria ------------------ */
.app-shell .dv-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.app-shell .dv-thumb {
    display: block;
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--vz-border);
    border-radius: 8px;
    background: #f3f5f4;
    cursor: zoom-in;
}

.app-shell .dv-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-shell .dv-gallery {
    width: min(1100px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #111816;
    color: #ffffff;
}

.app-shell .dv-gallery::backdrop {
    background: rgba(17, 24, 22, 0.72);
}

.app-shell .dv-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 18px;
}

.app-shell .dv-gallery-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.app-shell .dv-gallery-close,
.app-shell .dv-gallery-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
}

.app-shell .dv-gallery-close:hover,
.app-shell .dv-gallery-nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

.app-shell .dv-gallery-stage {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

.app-shell .dv-gallery-nav[hidden] {
    visibility: hidden;
    display: inline-flex;
}

.app-shell .dv-gallery-image {
    justify-self: center;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    object-fit: contain;
}

.app-shell .dv-gallery-caption {
    margin: 0;
    padding: 10px 18px 16px;
    font-size: 14px;
    color: #d4dad7;
    overflow-wrap: anywhere;
}

.app-shell .dv-gallery-caption[hidden] {
    display: none;
}

/* --- Noc 4 (#102, #25): zdjęcia zastrzeżeń odbiorcy w web, wpisy przed podpisem */
.app-shell .dv-photo-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-shell .dv-pending {
    margin-top: 10px;
}

.app-shell .dv-pending-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.app-shell .dv-pending-item {
    padding: 8px 10px;
    border: 1px dashed #cdd5d1;
    border-radius: 8px;
    background: #ffffff;
}

.app-shell .dv-pending-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.app-shell .dv-pending-text {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.app-shell .dv-pending-remove {
    flex: none;
    color: #b42318;
}

/* --- Responsive back office: tablet i telefon ----------------------------------
   Dyspozytorzy sprawdzają dokumenty po godzinach z telefonu albo tabletu.
   Klasa urządzenia (<html data-device="phone|tablet|desktop">) pochodzi z
   device.js; szerokie okno (desktop) nie dostaje żadnej z reguł poniżej.
     tablet   panel boczny to pasek ikon (72 px) nad treścią; przycisk go
              rozwija jako szufladę (shell.js), tabela zostaje tabelą;
     phone    panel to szuflada otwierana hamburgerem, lista dokumentów to
              karty (documentListCards.js), jedna kolumna wszędzie.
   Cele dotykowe mają co najmniej 44 px. Pola tekstowe 16 px, żeby iOS nie
   powiększał strony przy fokusie. Sekcja stoi na końcu pliku, poza sekcją
   listy sprawdzaną przez documentListAlign.test.js (wyrównanie do lewej). */

.app-topbar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.app-menu-button {
    display: none;
}

.app-company-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-backdrop {
    display: none;
}

/* Wspólne dla telefonu i tabletu: szuflada nad stroną. */
html[data-device='phone'] .shell-backdrop,
html[data-device='tablet'] .shell-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(17, 24, 22, 0.4);
}

html[data-device='phone'] body.shell-drawer-open .shell-backdrop,
html[data-device='tablet'] body.shell-drawer-open .shell-backdrop {
    display: block;
}

html[data-device='phone'] .sidebar,
html[data-device='tablet'] .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    height: 100vh;
    height: 100dvh;
}

html[data-device='phone'] .sidebar .nav-link,
html[data-device='tablet'] .sidebar .nav-link {
    min-height: 44px;
}

html[data-device='phone'] .shell-toggle,
html[data-device='tablet'] .shell-toggle {
    width: 40px;
    height: 40px;
}

html[data-device='phone'] body.shell-drawer-open .sidebar,
html[data-device='tablet'] body.shell-drawer-open .sidebar {
    box-shadow: 0 0 32px rgba(17, 24, 22, 0.28);
}

/* --- Tablet --- */
html[data-device='tablet'] .app-main {
    /* Panel jest position: fixed (72 px), więc treść odsuwamy sama. */
    margin-left: 72px;
    padding: 0 24px 32px;
}

html[data-device='tablet'] .app-topbar {
    margin: 0 -24px 20px;
    padding: 10px 24px;
}

html[data-device='tablet'] .app-shell .app-main.dl-main {
    padding-bottom: 16px;
}

html[data-device='tablet'] .dl-search {
    width: 320px;
}

/* --- Telefon --- */
html[data-device='phone'] .sidebar {
    width: min(300px, 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
        transform 0.2s ease,
        visibility 0s linear 0.2s;
}

html[data-device='phone'] body.shell-drawer-open .sidebar {
    transform: none;
    visibility: visible;
    transition:
        transform 0.2s ease,
        visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    html[data-device='phone'] .sidebar,
    html[data-device='phone'] body.shell-drawer-open .sidebar {
        transition: none;
    }
}

html[data-device='phone'] .app-main {
    padding: 0 16px 24px;
}

html[data-device='phone'] .app-topbar {
    min-height: 56px;
    margin: 0 -16px 16px;
    padding: 6px 16px 6px 8px;
}

html[data-device='phone'] .app-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--vz-ink);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

html[data-device='phone'] .app-menu-button:hover {
    background-color: var(--vz-sidebar-hover);
}

html[data-device='phone'] .app-menu-button .shell-icon {
    width: 22px;
    height: 22px;
}

html[data-device='phone'] .app-topbar-logo img {
    height: 22px;
}

html[data-device='phone'] .app-topbar-right {
    flex: 0 1 auto;
    max-width: 45vw;
}

/* Vezpass w biurze służy do skanowania przy stanowisku, nie w podglądzie z
   telefonu; miejsce w wąskim pasku zostaje dla nazwy firmy. */
html[data-device='phone'] .app-vezpass-button {
    display: none;
}

html[data-device='phone'] .shell-dialog {
    width: calc(100% - 24px);
    padding: 18px;
}

/* Lista dokumentów na telefonie: strona przewija się jak zwykła strona
   (pasek adresu przeglądarki chowa się przy przewijaniu), karty zamiast
   tabeli, nagłówki i filtry kolumn ukryte (szukanie i filtry szybkie
   zostają). */
html[data-device='phone'] .app-shell .app-main.dl-main {
    height: auto;
    min-height: 100dvh;
    padding-bottom: 24px;
}

html[data-device='phone'] .app-shell .dl-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

html[data-device='phone'] .app-shell .dl-search {
    width: 100%;
    min-height: 44px;
}

html[data-device='phone'] .app-shell .dl-search input {
    font-size: 16px;
}

html[data-device='phone'] .app-shell .dl-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

html[data-device='phone'] .app-shell .dl-quick {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: calc(100% + 32px);
    max-width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px 2px;
    box-sizing: border-box;
}

html[data-device='phone'] .app-shell .dl-quick::-webkit-scrollbar {
    display: none;
}

html[data-device='phone'] .app-shell .dl-chip {
    flex: none;
    min-height: 40px;
}

html[data-device='phone'] .app-shell .dl-tools {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
}

html[data-device='phone'] .app-shell .dl-iconbtn {
    width: 44px;
    height: 44px;
}

html[data-device='phone'] .app-shell .dl-page > .dl-table-wrap {
    flex: none;
}

html[data-device='phone'] .app-shell .dl-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

html[data-device='phone'] .app-shell .dl-table-head {
    display: none;
}

html[data-device='phone'] .app-shell .dl-table-inner {
    min-width: 0 !important;
}

html[data-device='phone'] .app-shell #dl-table-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlc-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--vz-surface, #ffffff);
    border: 1px solid var(--vz-border, #e3e6e6);
    border-radius: 10px;
}

.dlc-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}

.dlc-number {
    min-height: 24px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vz-green-strong, #008460);
    text-decoration: none;
}

/* Cała karta jest celem dotyku: link numeru rozciągnięty na kartę. */
.dlc-card {
    position: relative;
}

.dlc-number::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

.dlc-number:focus-visible {
    outline: none;
}

.dlc-number:focus-visible::after {
    outline: 3px solid var(--vz-green-strong, #008460);
    outline-offset: 2px;
}

.dlc-route {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--vz-ink, #111816);
}

.dlc-place {
    overflow-wrap: anywhere;
}

.dlc-arrow {
    color: var(--vz-muted, #59635f);
}

.dlc-line {
    font-size: 14px;
    color: var(--vz-nav-text, #2b3532);
    overflow-wrap: anywhere;
}

.dlc-line-muted {
    color: var(--vz-muted, #59635f);
}

.dlc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    font-size: 13px;
    color: var(--vz-muted, #59635f);
    font-variant-numeric: tabular-nums;
}

.dlc-bottom .dlc-time:only-child {
    margin-left: auto;
}

.dlc-adr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--vz-ink, #111816);
}

/* "Utwórz kopię" w widoku Usunięte: przycisk nad kartą-linkiem. */
.dlc-card .dl-cell {
    position: relative;
    z-index: 1;
    padding: 4px 0 0;
}

/* Szeroka tabela w podglądzie z telefonu lub tabletu przewija się w bok we
   własnym kontenerze zamiast poszerzać całą stronę. */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.table-scroll > table {
    min-width: 760px;
}