/* ============================================================================
   13-zamowienia.css — ZAMÓWIENIA i MAGAZYN
   ----------------------------------------------------------------------------
   Master-detail: .ords2 = rail (Min. Stan / projekty / archiwum) + .ords2-main
   (nagłówek, pasek alokacji, bloki NA FIRMĘ, w nich materiały po konstrukcjach).
   ----------------------------------------------------------------------------
   KOLOR NIESIE ZNACZENIE — cztery role statusu, nazwane raz i tylko tu:
   --ord-bad do zamówienia · --ord-warn w drodze · --ord-ok przyjęte ·
   --ord-info informacja (BOM Plany). Pasek, kropka, chip i tabela mówią to samo
   tym samym kolorem, więc zmiana znaczenia to jedna linijka, nie polowanie.
   Panele, modale i tabele bazowe → 05-komponenty.css, kartoteki → 12-kartoteki.css.
   ============================================================================ */
/* Zasięg zmiennych = wszędzie tam, gdzie sięgają reguły niżej: ekran Zamówień, okna transakcyjne, magazyn w kartotece. */
.ords2, .orders-head2, .modal, .app-confirm, .materials-stock-table { --ord-ok: var(--ok); --ord-warn: var(--warn); --ord-bad: var(--danger); --ord-info: var(--accent); /* Wymiary własne widoku: rail, kol. ilości, kol. kwoty, suma i akcja firmy, select, szukajka, pasek, pole stanu. */ --rail-w: 212px; --kol-ilosc: 120px; --kol-kwota: 96px; --kol-suma: 116px; --kol-akcja: 132px; --kol-cofnij: 56px; --sel-w: 280px; --szuk-w: 220px; --pasek-w: 110px; --pole-stan: 62px; }
/* === 1. UKŁAD ============================================================== */
.ords2 { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ords2-main { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
/* Scrollują TYLKO rail i lista firm — nagłówek z kwotą zostaje widoczny. */
.ords2-fullh { height: 100%; align-items: stretch; }
/* Wyściółka 4 px NIE JEST ozdobą — to miejsce na OBWÓDKĘ FOKUSU (11.08.2026).
   Obwódka z 01-reset ma 4 px i rysuje się NA ZEWNĄTRZ kontrolki. Gdy pojemnik
   przewija się w pionie, przeglądarka przycina go także w POZIOMIE (oś, która
   nie jest `visible`, wymusza przycinanie na drugiej), więc przyciski dotykające
   krawędzi rail-a miały poświatę ucinaną z boków. Ten sam objaw, który
   użytkownik zgłosił w oknie „Edytuj projekt". */
.ords2-fullh > .ords2-rail, .ords2-fullh .ords2-firms { min-height: 0; overflow-y: auto; padding: var(--s-1); }
/* === 2. RAIL — wybór: magazyn, projekt, archiwum =========================== */
.ords2-rail { display: flex; flex-direction: column; gap: var(--s-1); }
.ords2-rail-top { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-1); }
/* Ujednolicenie 11.08.2026 — .05em → kanon .04em; pięć innych podpisów
   wersalikowych w TYM SAMYM arkuszu (.ords2-phase-pill, .orders-section-label,
   .ords2-con, .ords2-it-hd, .orders-material-table th) ma już .04em. */
/* NAPRAWA 11.08.2026 — --text-faint → --text-muted.
   `--text-faint` jest dobrany pod tło białe i --surface-2, a ta etykieta stoi
   na szynie o tle --surface-3: zmierzone 4,29:1 przy progu 4,5. To podpis GRUPY
   w nawigacji Zamówień, czytany przy każdym wejściu w widok. Ciemniejszy
   stopień z tej samej rodziny wystarczy — bez ruszania tła szyny. */
.ords2-rail-lbl { padding: var(--s-3) var(--s-1) var(--s-1); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.ords2-rail-lbl:first-child { padding-top: 0; }
.ords2-rail-empty { padding: var(--s-1) var(--s-2); color: var(--text-muted); font-size: var(--t-sm); }
/* E3: pusty arkusz po prawej (np. „Zamknięte” bez zamkniętych zamówień) — z odstępem, na środku, jak pusty wynik kartotek. */
.ords2-pusto { padding: var(--s-5); color: var(--text-muted); text-align: center; }
/* Trzy szukajki ekranu mają identyczną budowę: lupa leży NA polu, nie obok. */
.ords2-rail-search, .orders-search-header { position: relative; display: flex; align-items: center; }
.ords2-rail-search > .icon, .orders-search-header > .icon { position: absolute; left: var(--s-2); color: var(--text-muted); pointer-events: none; }
/* Pancerz `:not()` jest KONIECZNY, nie ozdobny. Bazowa reguła pól
   (03-kontrolki) to `input:not([type=checkbox]):not([type=radio])` o wadze
   (0,2,1) z wyściółką 7/9. Samo `.ords2-rail-search input` ma (0,1,1)
   i PRZEGRYWA — wcięcie 32 px na lupę nie było stosowane, więc ikona
   leżała na pierwszej literze napisu „Szukaj projektu…". */
.ords2-rail-search input:not([type="checkbox"]):not([type="radio"]),
.orders-search-header input:not([type="checkbox"]):not([type="radio"]) { width: 100%; padding-left: var(--s-6); font-weight: var(--w-regular); } /* E3: pole w <label> dziedziczyło pogrubienie podpisu (800) — napis ucinał się „…lub dost”. */
/* Przełączniki (Otwarte/Zamknięte, Projekty/Materiały) — jeden blok bez szczelin. */
/* BEZ `overflow: hidden` — zmiana 11.08.2026. Przycinanie było tu tylko po to,
   żeby kwadratowe rogi przycisków schowały się pod zaokrągloną ramką grupy.
   Przy okazji ucinało jednak OBWÓDKĘ FOKUSU (4 px, rysowaną na zewnątrz
   przycisku), więc zaznaczone „Otwarte"/„Zamknięte" miały ściętą poświatę.
   Ten sam efekt bez przycinania: zaokrąglamy skrajne przyciski. Odejmujemy 1 px
   na ramkę grupy, żeby łuki nałożyły się równo. To ten sam wzór, którym zrobiony
   jest segment wyboru tła w szkicowniku. */
.ords2-rail-views { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); }
.ords2-rail-view:first-child { border-top-left-radius: calc(var(--r) - 1px); border-bottom-left-radius: calc(var(--r) - 1px); }
.ords2-rail-view:last-child { border-top-right-radius: calc(var(--r) - 1px); border-bottom-right-radius: calc(var(--r) - 1px); }
.ords2-rail-view { flex: 1 1 0; min-height: var(--h-control-sm); color: var(--text-muted); font-size: var(--t-sm); transition: background var(--szybko) ease, color var(--szybko) ease; }
.ords2-rail-view:hover { background: var(--surface-2); }
.ords2-rail-view.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: var(--w-bold); }
/* Wiersz railu: kropka stanu + numer + nazwa. Wybrany = karta na tle listy. */
.ords2-rl { display: flex; align-items: flex-start; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid transparent; border-radius: var(--r); text-align: left; transition: background var(--szybko) ease; }
.ords2-rl:hover { background: var(--surface-2); }
.ords2-rl.on { background: var(--surface); border-color: var(--line); }
.ords2-rl-txt { display: flex; flex-direction: column; min-width: 0; }
.ords2-rl-num { font-weight: var(--w-medium); }
.ords2-rl.is-buffer .ords2-rl-num { font-weight: var(--w-bold); }
.ords2-rl-sub { overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.ords2-dot { flex: none; width: var(--s-2); height: var(--s-2); margin-top: var(--s-1); border-radius: var(--r-pill); }
.ords2-dot.red { background: var(--ord-bad); }
.ords2-dot.amber { background: var(--ord-warn); }
.ords2-dot.green { background: var(--ord-ok); }
/* === 3. NAGŁÓWEK ARKUSZA — co, za ile i dla kogo zamawiamy ================= */
/* Ujednolicenie 11.08.2026 — kontener widoku dostaje cień --cien-1, tak jak
   panele w Wynikach i kartotekach; bez niego karta leżała płasko na tle. */
.ords2-head { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); }
.ords2-head-line, .ords2-head-top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ords2-title { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.ords2-title strong { font-size: var(--t-md); font-weight: var(--w-bold); }
.ords2-title span, .orders-preview-supplier-head span { color: var(--text-muted); font-weight: var(--w-medium); }
/* Kwota „do zamówienia" to główna liczba ekranu — największa rzecz w nagłówku. */
.ords2-metric-value { font-size: var(--t-xl); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); white-space: nowrap; }
.ords2-metric-value.is-ok { color: var(--ord-ok); font-size: var(--t-md); }
.ords2-metric-label { color: var(--text-muted); font-size: var(--t-sm); white-space: nowrap; }
/* Faza BOM: Design = wycena wstępna (bursztyn), Plany = właściwe (akcent). */
.ords2-phase-pill, .ords2-pc-bom { --ton: var(--ord-warn); flex: none; padding: 0 var(--s-2); border: 1px solid color-mix(in srgb, var(--ton) 42%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ton) 15%, transparent); color: var(--ton); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.ords2-phase-pill.is-plans, .ords2-pc-bom.is-plany { --ton: var(--ord-info); }
.ords2-buyer { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ords2-head-line .ords2-buyer { margin-left: auto; }
.ords2-buyer-lbl { color: var(--text-muted); font-weight: var(--w-medium); }
.ords2-buyer-select { max-width: var(--sel-w); }
/* Konstrukcje projektu jako chipy: nazwa, źródło ilości i podgląd materiałów. */
.ords2-prod, .orders-constructions-line { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; color: var(--text-muted); font-size: var(--t-sm); }
.ords2-prod-lbl { font-weight: var(--w-bold); }
.ords2-pc, .orders-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ords2-pc-name, .orders-chip-name { color: var(--text); font-weight: var(--w-medium); white-space: nowrap; }
.ords2-pc.done .ords2-pc-name { color: var(--text-muted); }
.orders-chip.is-issued { background: var(--surface-2); color: var(--text-muted); }
.ords2-pc-acts { display: inline-flex; align-items: center; gap: var(--s-1); }
.ords2-pc-eye { display: grid; place-items: center; width: var(--h-control-sm); height: var(--h-control-sm); border-radius: var(--r-sm); color: var(--text-faint); }
.ords2-pc-eye:hover { background: var(--surface-2); color: var(--text); }.orders-bom-dot { display: inline-block; flex: none; width: var(--s-3); height: var(--s-3); border-radius: var(--r-pill); vertical-align: middle; }
.orders-bom-dot.is-technical { background: var(--ord-info); }
.orders-bom-dot.is-estimate { background: var(--etap-design); }
.orders-bom-dot.is-none { background: var(--ord-bad); }
/* === 4. PASEK NARZĘDZI ARKUSZA ============================================= */
.ords2-toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ords2-toolbar-bulkonly { justify-content: flex-end; }
/* ERG6-08: legenda kropek z lewej, „Rozwiń / Zwiń wszystko” z prawej. */
.ords2-toolbar:has(.ords2-legenda) { justify-content: space-between; }
.ords2-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); color: var(--text-muted); font-size: var(--t-xs); }
.ords2-legenda > span { display: inline-flex; align-items: center; gap: var(--s-1); }
.ords2-legenda .ords2-dot { margin-top: 0; }
.order-confirm-razem { margin-top: var(--s-2); font-size: var(--t-md); }
.order-confirm-razem .tiny { display: block; font-size: var(--t-xs); }
.ords2-bulk { display: flex; gap: var(--s-1); flex: none; }
.orders-section-label { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.orders-section-label span { font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; }
/* „?" przy tytule — wyjaśnia legendę kolorów.
   ⛔ WYGLĄD USUNIĘTY 18.08.2026 — przycisk pomocy ma JEDEN wygląd na całą aplikację
   (`.help-button` w `03-kontrolki.css`). Tutaj miał własny: szary, z własnym kolorem
   podświetlenia — czyli trzeci wariant tego samego przycisku. Odstęp od tytułu (12 px) daje wspólne
   odstęp `.help-button` (znak zapytania w pasku kartoteki, 12-kartoteki.css) — każdy `.orders-help-btn` jest też
   `.help-button`, a własne 8 px nigdy nie działało (przegrywało kolejnością z arkuszem 28; usunięte w K17a). */
/* === 5. BLOK NA FIRMĘ — jedno zamówienie do jednego dostawcy =============== */
.ords2-firms { display: flex; flex-direction: column; gap: var(--s-3); }
/* Blok firmy i węzły <details> („Uzupełnienie magazynu”, projekt w płaskiej tabeli) to ten sam komponent: belka + zwijana treść.
   Klikalna jest CAŁA belka, nie sama strzałka — łatwiej trafić. */
/* Ujednolicenie 11.08.2026 — ten sam cień co reszta kontenerów widoku (--cien-1). */
.ords2-firm, .orders-project-node, .orders-supplier-node, .orders-restock-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); }
.ords2-firm-h, .orders-project-node > summary, .orders-supplier-node > summary { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); background: var(--surface-2); cursor: pointer; list-style: none; }
.ords2-firm-h:hover, .orders-project-node > summary:hover, .orders-supplier-node > summary:hover { background: var(--surface-3); }
.orders-project-node > summary::-webkit-details-marker, .orders-supplier-node > summary::-webkit-details-marker { display: none; }
.orders-project-node[open] > summary, .orders-supplier-node[open] > summary { border-bottom: 1px solid var(--line); }
.orders-project-children { display: grid; gap: var(--s-3); padding: var(--s-3); }
.ords2-firm-caret { flex: none; color: var(--text-faint); font-size: var(--t-xs); transition: transform var(--szybko) ease; }
.ords2-firm.is-open .ords2-firm-caret, .ords2-firm.is-search-open .ords2-firm-caret { transform: rotate(90deg); }
.ords2-firm-main, .orders-node-title { display: flex; align-items: baseline; gap: var(--s-2); flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ords2-firm-nm, .stock-color-sum { flex: none; font-weight: var(--w-bold); white-space: nowrap; }
.ords2-firm-st, .orders-node-title > span { min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
/* PRO-19: wartości zamówień firmy — osobna linijka pod statusem (status i kwoty nie ucinają się nawzajem). */
.ords2-firm-main:has(> .ords2-order-values, > .zam-termin) { flex-wrap: wrap; row-gap: 0; }
.ords2-firm-main > .ords2-order-values, .ords2-firm-main > .zam-termin { flex: 1 0 100%; white-space: normal; font-variant-numeric: tabular-nums; }
.orders-node-metrics { display: flex; align-items: baseline; gap: var(--s-3); margin-left: auto; color: var(--text-muted); font-size: var(--t-xs); white-space: nowrap; }
/* Stałe szerokości sumy i akcji: kwoty oraz przyciski firm stoją równo w pionie. */
.ords2-firm-tot { flex: none; width: var(--kol-suma); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ords2-firm-act, .ords2-firm-extra, .ords2-firm-pdf, .ords2-pc-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); flex: none; }
.ords2-firm-act { width: var(--kol-akcja); }
/* ERG6-08: kolumna „Cofnij” ma stałą szerokość także bez przycisku — kwoty wszystkich firm stoją w jednej linii. */
.ords2-firm-extra { width: var(--kol-cofnij); min-width: max-content; }
/* BŁĄD (b42, 28.09): kolumna miała 56 px na sam „Cofnij”, a stają w niej też „Porównaj” i „Ze stanu” (do 3 przycisków).
   Nadmiar wychodził w lewo na „Zamów” (P006 → Allegro: „Porównaj” na „Zamów”). Kolumna ma tyle miejsca, ile najszerszy
   zestaw w arkuszu — kwoty firm dalej stoją w jednej linii; min-width chroni przed nachodzeniem przy innym kroju/języku. */
.ords2-firms:has(.ords2-firm-extra > :is([data-action="d-porownaj-dostawcow"], [data-action="d-ze-stanu"])) { --kol-cofnij: 80px; }
.ords2-firms:has(.ords2-firm-extra > :nth-child(2)) { --kol-cofnij: 150px; }
.ords2-firms:has(.ords2-firm-extra > :nth-child(3)) { --kol-cofnij: 212px; }
/* Treść widoczna po rozwinięciu — albo gdy szukajka trafi w materiał w środku. */
.ords2-firm-b { display: none; padding: 0 var(--s-3) var(--s-3); }
.ords2-firm.is-open > .ords2-firm-b, .ords2-firm.is-search-open > .ords2-firm-b { display: block; }
/* W2 (27.09, tablet 1024: „AMANN Sp.” ucięte): lista firm < 760 px — nazwa i status w 1. rzędzie, kwota i przyciski w 2. (telefon ma własny układ). */
:root:not([data-ui="mobile"]) .ords2-firms { container: firmy-zamowien / inline-size; }
@container firmy-zamowien (width < 760px) { .ords2-firm-h { flex-wrap: wrap; row-gap: var(--s-2); } .ords2-firm-main { flex-basis: 80%; } .ords2-firm-nm { white-space: normal; } .ords2-firm-tot { margin-left: auto; } }
/* === 6. POZYCJE MATERIAŁÓW — po konstrukcjach ============================== */
.ords2-con { padding: var(--s-3) 0 var(--s-1); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
.ords2-it { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) 0; border-top: 1px solid var(--line); }
.ords2-con + .ords2-it, .ords2-it-hd { border-top: 0; }
.ords2-it-nm { flex: 1; min-width: 0; font-weight: var(--w-medium); }
.ords2-it-code { margin-right: var(--s-2); padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-medium); white-space: nowrap; }
.ords2-it-pend { margin-left: var(--s-2); color: var(--ord-warn); }
/* Stała szerokość + tabular-nums = liczby stoją w kolumnie i da się je porównać. */
.ords2-it-q, .ords2-it-v, .ords2-it-d, .ords2-it-p, .ords2-it-df, .ords2-it-zam { flex: none; width: var(--kol-kwota); font-variant-numeric: tabular-nums; text-align: right; }
.ords2-it-q { width: var(--kol-ilosc); color: var(--text-muted); }
.ords2-it-q, .ords2-it-d, .ords2-it-p, .ords2-it-df { font-size: var(--t-sm); }
.ords2-it-d { color: var(--text-muted); }
.ords2-it-df { font-weight: var(--w-bold); }
/* Różnica Design→Plany: więcej materiału = zielone, mniej = czerwone. */
.ords2-it-df.pos { color: var(--ord-ok); }
.ords2-it-df.neg { color: var(--ord-bad); }
.ords2-it-df.zero { color: var(--text-muted); font-weight: var(--w-regular); }
/* POPR-n36: „Do zamówienia” — ta sama ilość co w oknie „Zamów”; to jest liczba, po którą się tu przychodzi. */
.ords2-it-zam { width: var(--kol-ilosc); font-size: var(--t-sm); font-weight: var(--w-bold); }
.ords2-it-hd > .ords2-it-zam { white-space: nowrap; }
/* Długi kod dostawcy („UREKOR-S ŚNIEŻKA CZARNY”) w węższej kolumnie nazwy łamie się w plakietce zamiast wchodzić na liczby. */
.ords2-it-cmp .ords2-it-code { white-space: normal; overflow-wrap: anywhere; }
.ords2-it-zam.zero { color: var(--text-muted); font-weight: var(--w-regular); }
/* Wiersz etykiet kolumn — ten sam układ, mniejszym drukiem. */
.ords2-it-hd { padding-bottom: var(--s-1); color: var(--text-muted); }
.ords2-it-hd > span { font-size: var(--t-xs); font-weight: var(--w-bold); color: inherit; }
/* Brak pary koloru folii — ostrzeżenie nieblokujące, podświetla tylko wiersz. */
.ords2-it.is-color-warn { padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: color-mix(in srgb, var(--ord-warn) 16%, transparent); }
.ords2-warn-flag { color: var(--ord-warn); font-weight: var(--w-bold); }
.order-line-color { color: var(--accent-strong); font-weight: var(--w-medium); }
/* === 7. ALOKACJA I POSTĘP — ile z zamówienia już zabezpieczone ============= */
.orders-dashboard { padding: var(--s-1) 0 var(--s-3); }
.odash-bar { display: flex; overflow: hidden; width: 100%; height: var(--s-3); border-radius: var(--r-pill); background: var(--line); }
.odash-legend { display: flex; align-items: center; gap: var(--s-1) var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); font-size: var(--t-sm); }
.odash-stat { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-muted); }
.odash-stat strong, .odash-pct, .orders-node-metrics strong { color: var(--text); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.odot { display: inline-block; flex: none; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); }
/* Pasek, kropka legendy i postęp — te same trzy role, jedna definicja koloru. */
.odash-seg.secured, .odot.secured, .orders-progress-fill.done { background: var(--ord-ok); }
.odash-seg.transit, .odot.transit, .orders-progress-fill { background: var(--ord-warn); }
.odash-seg.toorder, .odot.toorder { background: var(--ord-bad); }
.odash-summary-pct { flex: none; padding: 0 var(--s-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ord-ok) 13%, transparent); color: var(--ord-ok); font-variant-numeric: tabular-nums; font-weight: var(--w-bold); }
.odash-summary-pct.risk { background: color-mix(in srgb, var(--ord-bad) 12%, transparent); color: var(--ord-bad); }
.odash-chips { display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin-left: auto; }
.odash-chip { padding: 0 var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.odash-chip.eta { border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); }
.odash-chip.prod { background: color-mix(in srgb, var(--ord-info) 10%, transparent); color: var(--ord-info); }
.odash-chip.risk { background: var(--ord-bad); color: var(--text-invert); }
/* Materiały krytyczne — zawsze widoczne, oddzielone kreską od reszty legendy. */
.odash-priority { display: flex; align-items: center; gap: var(--s-1) var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--line); font-size: var(--t-sm); }
.odash-priority-label { color: var(--ord-warn); font-weight: var(--w-bold); white-space: nowrap; }
.odash-prio-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-weight: var(--w-medium); }
.odash-prio-chip.prio-ok { border-color: color-mix(in srgb, var(--ord-ok) 45%, transparent); }
.odash-prio-chip.prio-transit { border-color: color-mix(in srgb, var(--ord-warn) 50%, transparent); }
.odash-prio-chip.prio-missing { border-color: color-mix(in srgb, var(--ord-bad) 50%, transparent); background: color-mix(in srgb, var(--ord-bad) 7%, transparent); }
.orders-progress-wrap { display: inline-flex; align-items: center; gap: var(--s-1); flex: none; }
.orders-progress { overflow: hidden; width: var(--pasek-w); height: var(--s-2); border-radius: var(--r-pill); background: var(--line); }
.orders-progress-fill { height: 100%; border-radius: var(--r-pill); }
.orders-progress-label { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
/* === 8. TABELE POZYCJI (podgląd, „Wg materiałów", przyjęcie) =============== */
/* Własna ramka ze scrollem — tabela bywa szersza niż blok firmy. */
.orders-material-table-wrap { overflow: auto; padding: var(--s-3) 0 var(--s-1); }
/* E3 (27.09.2026): na tablecie tabela „Wszystkie Materiały” przewija się w bok (759 px w 558 px) bez znaku, że dalej są kolumny.
   Cień przy krawędzi jak w kartotekach (12-kartoteki.css, ERG6-06), ale nakładki „local” w kolorze TŁA STRONY (--bg) —
   ta tabela stoi bezpośrednio na tle strony, a nakładki w --surface dawały biały prostokąt. Na końcu przewijania cień gaśnie. Cień mocniejszy niż w kartotekach (36 %, 18 px): tabela nie ma ramki,
   a na tle strony 24 % było ledwo widać. */
:root:not([data-ui="mobile"]) .orders-material-table-wrap { background: linear-gradient(to right, var(--bg) 40%, transparent) left / 32px 100% no-repeat local, linear-gradient(to left, var(--bg) 40%, transparent) right / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 36%, transparent), transparent) left / 18px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 36%, transparent), transparent) right / 18px 100% no-repeat scroll; }
.orders-material-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
/* Ujednolicenie 11.08.2026 — jedna rodzina tabel: wcięcie 8/12, tło nagłówka
   i mocniejsza kreska pod nim, wersaliki .04em, komórki wyrównane w pionie —
   dokładnie jak kartoteka (.catalog-table, 12-kartoteki.css:49 i :63). */
.orders-material-table th { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; white-space: nowrap; }
.orders-material-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.orders-material-table tbody tr:last-child td { border-bottom: 0; }
/* Ujednolicenie 11.08.2026 — wiersz firmy WYJĘTY ze wspólnego hovera: jego tło
   to już --surface-2, więc podświetlenie było niewidoczne (audyt B6). Wyjęcie
   selektora ze wspólnej listy zamiast podbijania specyficzności. */
.orders-material-table tbody tr:not(.orders-supplier-row):hover td { background: var(--surface-2); }
/* Od 3. kolumny liczby → do prawej; kolumny tekstowe wracają na lewo pojedynczo
   (każdy wariant tabeli ma je w innym miejscu). */
.orders-material-table :is(th, td):nth-child(n+3) { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.orders-material-table :is(th, td):first-child, .material-cell { white-space: normal; }
.orders-material-table:not(.orders-flat-table, .orders-materials-table) :is(th, td):nth-child(6) { text-align: left; }
.orders-flat-table :is(th, td):nth-child(7) { text-align: left; }
.orders-materials-table :is(th, td):nth-child(2) { text-align: left; }
.orders-materials-table .prio-cell { text-align: center; }
/* ERG6-07: tabela mieści się w panelu przy 1440 (była szersza o ~270 px i „Dostępne” — z czerwonym brakiem —
   stało poza ekranem). Nagłówki liczbowe mogą zejść do drugiej linii, „(w drodze)” i kod materiału łamią się,
   kolumny liczbowe mają węższą wyściółkę; nagłówki „Design” / „Plany” jak w arkuszu firmy. */
.orders-materials-table thead th:nth-child(n+3) { white-space: normal; }
.orders-materials-table :is(th, td):nth-child(n+3) { padding-inline: var(--s-2); }
.orders-materials-table td.mat-ordered { white-space: normal; }
.orders-materials-table .mat-transit { display: block; }
.orders-materials-table .ords2-it-code { white-space: normal; }
/* Pełnoekranowa lista materiałów: nagłówek zamrożony jak w kartotekach. */
/* Ujednolicenie 11.08.2026 — zamrożony nagłówek jak w kartotece (12:49):
   z-index 2 i to samo tło --surface-2, żeby nie migotał inny kolor przy scrollu. */
.orders-materials-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.orders-materials-table .mat-design { color: var(--ord-warn); font-weight: var(--w-bold); }
.orders-materials-table .mat-plany { color: var(--ord-info); font-weight: var(--w-bold); }
.eta-pill { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ord-info) 12%, transparent); color: var(--ord-info); font-size: var(--t-xs); font-weight: var(--w-bold); }
.eta-none { color: var(--text-faint); font-style: italic; }
/* ZAM-05: termin dostawy minął, a towar nie przyjęty — plakietka i status firmy na czerwono. */
.eta-pill.is-late { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.ords2-firm-st.is-late, .zam-termin.is-late { color: var(--danger); font-weight: var(--w-bold); }
/* Wiersz grupujący firmę w płaskiej tabeli — płasko, zamiast zagnieżdżania. */
.orders-supplier-row td { border-top: 1px solid var(--line-strong); background: var(--surface-2); text-align: left; cursor: pointer; }
/* Ujednolicenie 11.08.2026 — belka firmy jest klikalna (rozwija pozycje), więc
   MUSI reagować na kursor; o stopień ciemniej niż jej własne tło. */
.orders-supplier-row:hover td { background: var(--surface-3); }
.orders-supplier-cell { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-control-sm); }
.orders-supplier-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); white-space: nowrap; }
.orders-supplier-total { margin-left: auto; white-space: nowrap; }
.order-status-dot { flex: none; margin-right: var(--s-1); }
/* Strzałka rysowana ramką: bez ikony i bez znaku, dziedziczy kolor tekstu. */
.orders-group-caret, .orders-tree-caret { display: inline-block; flex: none; width: 0; height: 0; border-left: var(--s-2) solid currentColor; border-top: var(--s-1) solid transparent; border-bottom: var(--s-1) solid transparent; color: var(--text-muted); transition: transform var(--szybko) ease; }
.orders-group-caret.open, [open] .orders-tree-caret { transform: rotate(90deg); }
/* Legenda pod tabelą tłumaczy kolory — zwarta ramka, nie ściana tekstu. */
.orders-stock-footnote { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text-muted); font-size: var(--t-xs); line-height: var(--lh-base); }
.orders-stock-footnote strong { color: var(--text); }
/* === 9. ZAMÓWIENIE, PRZYJĘCIE TOWARU, FAKTURA ============================= */
/* Okna transakcyjne są węższe od roboczych — mają zmieścić tabelę, nie ekran. */
.modal.order-confirm-modal { --okno-w: 620px; }
.modal.receipt-modal { --okno-w: 820px; }
.orders-preview-scroll { overflow-y: auto; max-height: calc(56vh / var(--skala-ui)); }
.orders-preview-supplier-head { position: sticky; top: 0; z-index: 1; padding: var(--s-1) 0; border-bottom: 1px solid var(--line); background: var(--surface); font-weight: var(--w-bold); }
/* Stopka: anulowanie po lewej, rejestracja zamówienia po prawej. */
.order-confirm-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.order-confirm-footer-left { display: flex; gap: var(--s-2); }
.receipt-history-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
/* Faktura wpada tu przeciągnięciem — kreskowana ramka mówi „upuść plik". */
.invoice-dropzone { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface); transition: border-color var(--szybko) ease, background var(--szybko) ease; }
.invoice-dropzone.is-dragover { border-color: var(--accent-strong); background: var(--accent-soft); }
.invoice-dropzone.is-uploading { opacity: .7; pointer-events: none; }
.invoice-drop-top { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.invoice-drop-hint, .ords2-buyer-hint { color: var(--text-muted); font-size: var(--t-sm); }
/* === 10. MAGAZYN W KARTOTECE MATERIAŁY ==================================== */
/* Szkielet w 12-kartoteki.css. Tu to, co robi z niej ARKUSZ MAGAZYNOWY. */
.materials-stock-table { table-layout: fixed; }
.materials-stock-table :is(th, td) { white-space: nowrap; }
.materials-stock-table td.material-cell { white-space: normal; }
.materials-stock-table :is(th, td):last-child { text-align: center; }
.stock-unit { color: var(--text-muted); font-size: var(--t-xs); }
/* Stan zmieniamy wprost w wierszu — pole wąskie jak liczba, którą trzyma. */
/* NAPRAWA 11.08.2026 — szerokość sztywna → elastyczna z sufitem.
   `--pole-stan` to 62 px, a w kartotece Materiałów to pole stoi w komórce
   o 84 px z wyściółką 12 px z każdej strony — czyli 60 px na treść. Pole było
   o 2 px szersze od miejsca, które dostało, więc komórka (mająca
   `text-overflow: ellipsis`) dorysowywała obok każdej liczby WIELOKROPEK.
   Zmierzone: komórka 84, treść 101, nadmiar 17 px. Widać to było jako „0 …"
   w trzech kolumnach każdego wiersza.
   Teraz pole bierze tyle, ile komórka daje, ale nie więcej niż zaprojektowane
   62 px — w Zamówieniach, gdzie miejsca jest więcej, wygląda tak samo jak dotąd. */
.stock-inline-input { width: 100%; max-width: var(--pole-stan); height: var(--h-control-sm); padding: 0 var(--s-1); text-align: right; font-variant-numeric: tabular-nums; appearance: textfield; }
.stock-inline-input::-webkit-inner-spin-button { appearance: none; }
/* === RESPONSYWNOŚĆ — 1180 / 980 / telefon / 600 ============================ */
@media (max-width: 1180px) {
  /* Węższy rail i kolumny liczbowe — arkusz jest ważniejszy niż lista wyboru. */
  .ords2 { --rail-w: 180px; --kol-ilosc: 92px; --kol-kwota: 82px; --kol-suma: 96px; --kol-akcja: 120px; }   /* ERG6-08: „Przyjmij dostawę” ma 116 px */
}
@media (max-width: 980px) {
  /* Rail nad arkuszem: przy tej szerokości kolumna wyboru zjada tabelę. */
  .ords2 { grid-template-columns: minmax(0, 1fr); }
  .ords2-rail { flex-direction: row; flex-wrap: wrap; }
  .ords2-rail-lbl { width: 100%; padding-top: var(--s-2); }
  .ords2-rl { width: auto; }
  .ords2-fullh { height: auto; }
  .ords2-fullh > .ords2-rail, .ords2-fullh .ords2-firms { overflow-y: visible; }
}
/* Telefon: nazwa materiału bierze całą linię, liczby układają się pod nią. */
:where(:root[data-ui="mobile"]) .ords2-it { flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
:where(:root[data-ui="mobile"]) .ords2-it-nm { flex: 1 0 100%; }
/* POPR-n36: pozycja arkusza firmy na telefonie — nazwa, pod nią cztery liczby z podpisami w dwóch kolumnach
   (Design · Plany / Różnica · Do zamówienia). Dawniej trzy liczby bez podpisów i bez „ile zamówić”. */
:where(:root[data-ui="mobile"]) .ords2-it-cmp:not(.ords2-it-hd) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(:root[data-ui="mobile"]) .ords2-it-cmp:not(.ords2-it-hd) > .ords2-it-nm { grid-column: 1 / -1; }
:where(:root[data-ui="mobile"]) .ords2-it-cmp > [data-etykieta] { width: auto; text-align: left; }
:where(:root[data-ui="mobile"]) .ords2-it-cmp > [data-etykieta]::before { content: attr(data-etykieta) ": "; color: var(--text-muted); font-weight: var(--w-regular); }
:where(:root[data-ui="mobile"]) .ords2-it-hd { display: none; }
/* PRO-19: bez nagłówka kolumn kwoty zamówień firmy niosą własny podpis. */
:where(:root[data-ui="mobile"]) .ords2-it-v[data-etykieta] { width: auto; }
:where(:root[data-ui="mobile"]) .ords2-it-v[data-etykieta]::before { content: attr(data-etykieta) ": "; color: var(--text-muted); }
:where(:root[data-ui="mobile"]) .ords2-firm-h { flex-wrap: wrap; }
:where(:root[data-ui="mobile"]) .ords2-firm-tot, :where(:root[data-ui="mobile"]) .ords2-firm-act { width: auto; }
:where(:root[data-ui="mobile"]) .ords2-head-line .ords2-buyer, :where(:root[data-ui="mobile"]) .odash-chips { margin-left: 0; }
:where(:root[data-ui="mobile"]) .ords2-buyer-select { max-width: 100%; }
/* #39, 13.09.2026: nagłówek (szukajka materiałów + CSV/Excel/PDF) miał 423 px bez zawijania
   i był ucięty z prawej na ekranie 390 px. Akcje schodzą pod tytuł i zawijają się. */
:where(:root[data-ui="mobile"]) .orders-head2 { flex-wrap: wrap; row-gap: var(--s-2); }
:where(:root[data-ui="mobile"]) .orders-head2 .inline-actions { flex-wrap: wrap; max-width: 100%; margin-left: 0; }
:where(:root[data-ui="mobile"]) .orders-head2 .orders-search-header { flex: 1 1 100%; width: 100%; max-width: 100%; }
/* Szyna na telefonie: szukajka, przełączniki i pozycje na całą szerokość — na tablecie
   (≤980) układają się w rzędzie jak kafelki, ale przy 390 px zostawało 40% pustego pasa. */
:where(:root[data-ui="mobile"]) .ords2-rail-top, :where(:root[data-ui="mobile"]) .ords2-rl { flex: 1 1 100%; width: 100%; }
/* POPR-n05 (28.09): okna „Przyjmij dostawę” i „Zamów” na telefonie. Lista pozycji to główna treść okna — stoi zaraz
   pod opisem, na pełną wysokość (bez własnego przewijania w małej ramce), pola faktury pod nią, a przycisk
   zostaje w przyklejonej stopce. Dawniej lista stała pod polami faktury i miała 0 px (przyjęcie „w ciemno”). */
:where(:root[data-ui="mobile"]) .receipt-modal > form > p:first-child { order: -2; }
:where(:root[data-ui="mobile"]) .receipt-modal > form > .table-wrap { order: -1; }
:where(:root[data-ui="mobile"]) .receipt-modal .stock-inline-input { width: 100%; max-width: none; height: var(--h-control); }   /* pole do wpisania ilości = cel dotyku 44 px, także telefonem poziomo */
:where(:root[data-ui="mobile"]) .order-confirm-modal .orders-preview-scroll { max-height: none; }
@media (max-width: 600px) {
  /* #60, 13.09.2026 (test ścieżek na telefonie): w oknie „Zamówienie u …" tabela pozycji miała
     4 kolumny i data dostawy każdej pozycji stała za prawą krawędzią. Na telefonie każda pozycja
     to trzy linijki: materiał / ilość + jednostka / „Dostawa (ETA)" z polem daty na całą szerokość. */
  .order-confirm-modal .orders-material-table thead { display: none; }
  .order-confirm-modal .orders-material-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-2); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  .order-confirm-modal .orders-material-table tbody tr:last-child { border-bottom: 0; }
  .order-confirm-modal .orders-material-table td { padding: 0; border-bottom: 0; }
  .order-confirm-modal .orders-material-table td:first-child { grid-column: 1 / -1; font-weight: var(--w-medium); }
  .order-confirm-modal .orders-material-table td:nth-child(3) { justify-self: start; }
  .order-confirm-modal .orders-material-table td:last-child { grid-column: 1 / -1; }
  .order-confirm-modal .orders-material-table td:last-child::before { content: "Dostawa (ETA)"; display: block; margin-bottom: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); text-align: left; }
  .order-confirm-modal .order-eta-input, .order-confirm-modal td > .order-eta-field { width: 100%; }
  /* Skan 13.09.2026: w „Przyjmij dostawę" tabela 6 kolumn wychodziła za ekran — kolumna „Przyjmuję teraz"
     (JEDYNE pole do wpisania) była niewidoczna. Każda pozycja = karta: nazwa / trzy liczby z podpisami /
     pole „Przyjmuję teraz" + jednostka na całą szerokość. */
  .receipt-table thead { display: none; }
  .receipt-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); align-items: end; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  .receipt-table td { padding: 0; border-bottom: 0; text-align: left; }
  .receipt-table td:first-child { grid-column: 1 / -1; }
  .receipt-table td:nth-child(2)::before { content: "Zamówione"; }
  .receipt-table td:nth-child(3)::before { content: "Przyjęte dotąd"; }
  .receipt-table td:nth-child(4)::before { content: "W drodze"; }
  .receipt-table td:nth-child(5)::before { content: "Przyjmuję teraz"; }
  .receipt-table td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5))::before { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: var(--t-xs); }
  .receipt-table td:nth-child(5) { grid-column: 1 / span 2; }
  .receipt-table td:nth-child(5) .stock-inline-input { width: 100%; max-width: none; height: var(--h-control); }
  .receipt-table td:nth-child(6) { align-self: center; padding-top: var(--s-4); color: var(--text-muted); }
}
/* --- Zamówienia: nagłówek, adresy dostawy, firmy kupujące (z dawnego 28, K17) --- */
.orders-head2-main { display: flex; align-items: center; gap: var(--s-3); }
.orders-head2-main h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.orders-loading-note { margin-top: var(--s-1); color: var(--accent-strong); }
.orders-search-field { flex: 0 1 300px; min-width: 244px; } /* E3: 220 px ucinało „Szukaj materiału lub dostawcy…” (potrzeba 229 px). */
.orders-chip-preview { flex: none; width: 22px; height: 22px; color: var(--text-muted); }
.orders-chip-preview:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-strong); }
/* Ujednolicenie 11.08.2026 — „Zarejestruj i drukuj PDF" NIE reagował na kursor.
   Przyczyna to KOLEJNOŚĆ, nie waga: `.button.order-confirm-go` i `.button:hover`
   (03-kontrolki:20) mają tę samą specyficzność (0,2,0), a ten arkusz ładuje się
   ostatni — więc pełne wypełnienie wygrywało też w stanie hover.
   Własny hover przywraca reakcję na jedynym guziku aplikacji z pełnym --ok. */
/* 13.09.2026: pełny zielony zastąpiony akcją główną systemu (pełny akcent). */
.button.order-confirm-go { border-color: transparent; background: var(--accent); color: var(--on-accent); font-weight: var(--w-bold); }
.button.order-confirm-go:hover { border-color: transparent; background: var(--accent-hover); }
.ords2-head-mat .ords2-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.mat-ordered { color: var(--text); }
.mat-transit { color: var(--text-muted); font-weight: var(--w-regular); }
.mat-eta { white-space: nowrap; }
.order-eta-input, td > .order-eta-field { width: 140px; max-width: 100%; }   /* ZAM-06: pole daty z kalendarzem Zadań */
td > .order-eta-field { margin-inline: auto; }
.delivery-inline-input { width: 44px; }
.ordaddr-dialog { max-width: 460px; }
.ordaddr-multi { max-width: 580px; }
.ordaddr-list, .ordaddr-slist { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.ordaddr-slist { max-height: calc(52vh / var(--skala-ui)); overflow-y: auto; }
.ordaddr-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; height: auto; padding: var(--s-2) var(--s-3); text-align: left; }
.ordaddr-lbl { font-weight: var(--w-bold); }
.ordaddr-adr { color: var(--text-muted); font-size: var(--t-base); }
.ordaddr-srow { display: flex; align-items: center; gap: var(--s-3); }
.ordaddr-srow-nm { flex: 0 0 42%; overflow: hidden; font-size: var(--t-base); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.ordaddr-srow-sel { flex: 1 1 auto; min-width: 0; }
.buyer-companies-list { display: flex; flex-direction: column; gap: var(--s-3); }
.buyer-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.buyer-card-head { display: flex; align-items: center; gap: var(--s-3); }
.buyer-card-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-3); }
.buyer-field { width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-base); }
/* Ujednolicenie 11.08.2026 — `outline: none` BEZ ZAMIENNIKA. `.buyer-field:focus`
   (0,2,0) bije bazowe `input:focus` (0,1,1) z 03-kontrolki:59, więc pole traciło
   i poświatę, i pierścień klawiatury z 01-reset.css:19 — jedyne pole w aplikacji
   bez widocznego fokusu. Wraca kanon pól: ramka w akcencie + poświata --s-1. */
.buyer-field:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 var(--s-1) color-mix(in srgb, var(--accent) 18%, transparent); }
.buyer-name { flex: 1; font-size: var(--t-md); font-weight: var(--w-bold); }
/* Ujednolicenie 11.08.2026 — podpis nagłówkowy sprowadzony do kanonu
   (--t-2xs / --w-heavy / .04em). Było 11 px / 600 / .03em, czyli trzeci wariant
   tego samego podpisu. Treść to nazwy pól („NIP", „Adres"), więc wersaliki
   zostają — reguła zdejmuje je z pola w środku etykiety (reguła niżej). */
.buyer-lbl { display: flex; flex-direction: column; gap: var(--s-1); color: var(--text-faint); font-size: var(--t-2xs); font-weight: var(--w-heavy); }
.buyer-lbl input { font-weight: var(--w-regular); letter-spacing: 0; text-transform: none; }
.buyer-delivery { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--line); }
.buyer-delivery-head { color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); }
.buyer-delivery-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); }
.buyer-delivery-add { align-self: flex-start; }
.buyer-empty, .buyer-delivery-empty { padding: var(--s-2) 0; color: var(--text-muted); font-size: var(--t-base); }
/* Podgląd zamówienia w popupie informacyjnym — szeroki, bo to tabela. */
.app-confirm:has(.orders-preview-modal) { width: 100%; max-width: min(1000px, 94vw / var(--skala-ui)); }
.orders-preview-supplier { margin: 0 0 var(--s-4); }
:where(:root[data-ui="mobile"]) .buyer-card-grid, :where(:root[data-ui="mobile"]) .buyer-delivery-row { grid-template-columns: minmax(0, 1fr); }
:where(:root[data-ui="mobile"]) .buyer-companies-panel .panel-heading .button { flex: 1 1 100%; justify-content: center; }