/* Vocabularul vizual. Înainte de el ecranul avea 51 de culori scrise de mână —
   trei galbenuri pentru aceeași avertizare, cinci griuri pentru același fundal —
   21 de valori de spațiu de la 3px la 24px, 17 mărimi de text și 14 rotunjimi,
   toate alese pe rând. Se vedea: lucrurile de același fel nu arătau la fel, iar
   ochiul care caută repede o comandă se împiedică exact de asta.

   Regula de acum: în restul fișierului nu se mai scrie de mână nicio culoare,
   niciun spațiu, nicio mărime de text, nicio rază și nicio umbră. Dacă lipsește
   ceva, se adaugă aici, cu nume.

   Din 21.09.2026 valorile nu mai sunt alese aici, ci măsurate: vin din
   `apple-tokens.css` (macOS 27 UI Kit, citit din fișierele Sketch Apple —
   `design/apple-2026-09/RAPORT.md`). Numele Rovynt rămân, fiindcă de ele
   atârnă 7.000 de rânduri; se schimbă doar de ce sunt legate. Unde kitul n-are
   un echivalent, valoarea e compusă din cele măsurate și poartă „derivat din”. */
:root {
  /* ── neutre ── */
  --bg: var(--ap-window);     /* fondul ferestrei: alb, nu gri — grupurile fac adâncimea */
  --card: var(--ap-content);  /* cartonașe, rânduri, tot ce stă deasupra */
  /* derivat din --ap-fill-4 (cerneală 3%) și --ap-fill-5 (cerneală 2%), compuse
     peste fondul ferestrei: aceeași culoare pe ecran, dar opacă — sub barele
     lipite (`.bara-lista`, antetul tabelului) o umplere străvezie lasă rândurile
     să se vadă prin ea. Cerneala e `--ap-badge-ink` — negrul plin pe luminos,
     albul plin pe întunecat — ca amestecul să dea gri închis pe fereastra
     întunecată, nu negru pe negru. */
  --surface: color-mix(in srgb, var(--ap-badge-ink) 3%, var(--ap-window));    /* grupuri: file, șine de progres, câmpuri stinse */
  --surface-2: color-mix(in srgb, var(--ap-badge-ink) 2%, var(--ap-window));  /* trecerea cu mouse-ul peste fereastră */
  /* Coloana de navigare e închisă în ambele teme (09.10.2026, după bara nouă
     din Shopify, captura lui Gabriel): scara ei de gri e măsurată pe captură.
     `.sidebar` (și `.company`, de la 1024px) își rescriu din ea tokenurile de
     culoare obișnuite, deci regulile meniului rămân scrise în vocabularul de
     aici. Contrast pe `--sb-fond`: text 15,4:1 · glife 9,7:1 · sub-rânduri
     8,1:1 · titluri 5,7:1; textul căutării 4,8:1 pe câmpul ei; inelul de focus
     rămâne albastrul kitului (5,6:1). */
  --sb-fond: #0A0A0A;
  --sb-ink: #E3E3E3;
  --sb-ink-tare: #FFFFFF;     /* rândul ales */
  --sb-glifa: #B5B5B5;
  --sb-mute: #A6A6A6;         /* sub-rândurile, a doua linie a contului */
  --sb-faint: #8A8A8A;        /* titlurile de secțiune */
  --sb-hover: #1F1F1F;
  --sb-hover-tare: #292929;
  --sb-selectie: #2E2E2E;     /* pastila rândului ales… */
  --sb-selectie-sus: #464646; /* …cu muchia ei de lumină sus */
  --sb-selectie-margine: #3A3A3A;
  --sb-camp: #434343;         /* câmpul de căutare */
  --sb-camp-hover: #4A4A4A;
  --sb-camp-sus: #585858;
  --sb-camp-margine: #4D4D4D;
  --sb-insigna: #383838;      /* cifra de lângă ușă */
  --sb-linie: rgb(255 255 255 / .1);
  --sb-card: #1F1F1F;         /* panoul contului */
  --sb-avatar: #FD4B92;
  --sb-avatar-text: #FFFFFF;
  --fond-sidebar: var(--sb-fond);
  /* Cerneala paginii, păstrată sub alt nume: butonul plutitor al foii de pe
     telefon stă în `.sidebar`, unde `--ink` e deja cea deschisă a coloanei. */
  --ink-pagina: var(--ink);
  --line: var(--ap-separator-soft);     /* chenare: negru 5% */
  --line-strong: var(--ap-separator);   /* chenar la hover/focus: #3C3C43 la 29% */
  --line-moale: var(--ap-separator-soft); /* linia DINĂUNTRU: rândurile unui tabel, ale unei
                                 liste. Aceeași valoare ca `--line` în kit
                                 (negru 5%), dar rămân două nume: au treburi
                                 diferite, iar legarea lor ar fi exact capcana
                                 pe care o desface. */
  --ink: var(--ap-label);     /* textul principal: negru 85% */
  /* derivat din --ap-label-2 (negru 50% = 3,95:1 pe alb): urcat la 56%, cea mai
     mică opacitate care dă ≥ 4,5:1 — pragul din HIG Accessibility pentru text
     până la 17 pt (`rules/hig/foundations-1.md`) — și pe fereastră (4,9:1), și
     pe umplerile de control până la 11% (4,6:1). Eticheta secundară a kitului
     e una singură, deci `--ink-2` și `--mute` sunt aceeași cerneală: ierarhia
     dintre ele o țin mărimea și grosimea, ca în kit. Pe întunecat aceeași
     regulă dă alb 56% pe #1E1E1E = 6,1:1 (kitul are label-2 la 55% = 5,9:1, tot
     peste prag) — deci un singur amestec, din cerneala plină a temei. */
  --ink-2: color-mix(in srgb, var(--ap-badge-ink) 56%, transparent);  /* text secundar, dar încă de citit */
  --mute: color-mix(in srgb, var(--ap-badge-ink) 56%, transparent);   /* etichete, unități, explicații — text de citit */
  --faint: var(--ap-label-2); /* NUMAI inactiv și semne desenate (negru 50% = 3,95:1, prag 3:1) — niciodată text de citit.
                                 Eticheta terțiară a kitului (25%) ar stinge butonul până nu se mai citește de ce e stins (L8). */

  /* De ce s-au închis cele două griuri, cu cifre.
     Măsurate pe fundalurile care apar de fapt în aplicație, nu pe alb
     închipuit: cel mai prost e rgb(228,228,231) — bara de magazine și pastilele
     de filtru — și acolo cădeau amândouă. `--mute` dădea 3,81:1 la un prag de
     4,5:1, pe 92 de folosiri; `--faint` dădea 2,02:1, pe 27. Împreună, 279 de
     locuri pe unsprezece ecrane care nu treceau pragul.

     Scara are în continuare patru trepte deosebite (L* pe card alb):
       --ink    8,4      --ink-2  35,2      --mute  43,1      --faint  54,6
     Prima variantă a fost `--mute: #5c5c65`, și era greșită: trecea pragul, dar
     lăsa 4,2 între ea și `--ink-2`, adică lipea două trepte care trebuie să se
     deosebească. O scară reparată în care nu mai vezi treptele nu e reparată.

     `--faint` nu urcă la 4,5:1 fiindcă nu trebuie: la 3:1 trece pragul pentru
     semne desenate (WCAG 1.4.11), iar textul cu adevărat inactiv e scutit
     (1.4.3). Ce urcă în schimb e disciplina: tot ce se citește a plecat de pe
     el pe `--mute`. Unde ierarhia era ținută de culoare, o ține acum mărimea și
     grosimea, care o țineau oricum — `.pad-v` era deja cu o treaptă mai mic
     decât `.pad-foot`, `.op-cand` decât `.op-et`. */

  /* ── marca și accentul ──
     Accentul aplicației e System Blue, ca în macOS, și se schimbă din
     `--ap-accent` / `--ap-prominent` (un singur loc: `apple-tokens.css`, sau
     suprascris aici într-un rând). Roșul mărcii rămâne numai în logo. */
  --marca: #b31e2e;
  --accent: var(--ap-link);
  --accent-plin: var(--ap-prominent);          /* fondul butonului cu contrast AA */
  --accent-dark: var(--ap-prominent-active);   /* același, apăsat */
  --pe-accent-plin: var(--ap-on-prominent);
  --accent-tenta: color-mix(in srgb, var(--ap-accent) var(--ap-tinted), transparent);
  --accent-tenta-apasat: color-mix(in srgb, var(--ap-accent) var(--ap-tinted-active), transparent);
  --ink-strong: var(--ap-label);  /* cerneala apăsată: hover peste un buton plin */

  /* ── ce înseamnă culoarea ──
     Regula, în ordinea în care o citește ochiul:
       cerneală (negru)  = mutarea de acum. E o ACȚIUNE, nu o stare.
       chihlimbar        = așteptăm pe cineva din afară (clientul, marfa, curierul)
       verde             = s-a făcut
       roșu              = ceva e greșit sau nu se mai poate întoarce
     Roșul mărcii a fost, până acum, și semnul „ăsta urmează” — pe un tabel cu 36
     de rânduri ieșeau 36 de inele roșii deodată și toată tura arăta ca o eroare.
     Un lucru de făcut nu e o greșeală; de aceea „urmează” e negru, nu roșu. */

  /* ── tonuri ──
     Fiecare stare are trei straturi: fundal, chenar, text. Se folosesc împreună;
     un fundal de la „bine” cu text de la „atenție” nu există. */
  /* Rețeta kitului (`apple-surfaces.css`, insigna și banda de stare — [derivat]
     acolo din Tinted): textul = culoarea de sistem 62% + negru; fondul de bandă
     = culoarea la 10–16%; fondul de pastilă = Tinted 22%; chenarul = tot Tinted
     22%, ca să nu mai fie o linie în plus peste fond (L4). Fondurile sunt
     compuse peste fereastră, deci opace. Chihlimbarul e System Orange, nu
     Yellow: galbenul kitului nu ține text (62% + negru dă 3,4:1). */
  --ok: color-mix(in srgb, var(--ap-green) 62%, var(--ap-badge-ink));
  --ok-ink: color-mix(in srgb, var(--ap-green) 62%, var(--ap-badge-ink));
  --ok-bg: color-mix(in srgb, var(--ap-green) 12%, var(--ap-window));
  --ok-bg-2: color-mix(in srgb, var(--ap-green) var(--ap-tinted), var(--ap-window));
  --ok-line: color-mix(in srgb, var(--ap-green) var(--ap-tinted), var(--ap-window));
  --ok-plin: var(--ap-green);
  --warn: color-mix(in srgb, var(--ap-orange) 62%, var(--ap-badge-ink));
  --warn-ink: color-mix(in srgb, var(--ap-orange) 62%, var(--ap-badge-ink));
  --warn-bg: color-mix(in srgb, var(--ap-yellow) 16%, var(--ap-window));
  --warn-bg-2: color-mix(in srgb, var(--ap-orange) var(--ap-tinted), var(--ap-window));
  --warn-line: color-mix(in srgb, var(--ap-orange) var(--ap-tinted), var(--ap-window));
  --warn-plin: var(--ap-orange);
  --err: color-mix(in srgb, var(--ap-red) 62%, var(--ap-badge-ink));
  --err-ink: color-mix(in srgb, var(--ap-red) 62%, var(--ap-badge-ink));
  --err-bg: color-mix(in srgb, var(--ap-red) 10%, var(--ap-window));
  --err-bg-2: color-mix(in srgb, var(--ap-red) var(--ap-destructive-tint), var(--ap-window));
  --err-line: color-mix(in srgb, var(--ap-red) var(--ap-destructive-tint), var(--ap-window));
  --err-plin: var(--ap-red);
  --info-ink: color-mix(in srgb, var(--ap-blue) 62%, var(--ap-badge-ink));
  --info-bg: color-mix(in srgb, var(--ap-blue) 10%, var(--ap-window));
  --info-bg-2: color-mix(in srgb, var(--ap-blue) var(--ap-tinted), var(--ap-window));
  --info-line: color-mix(in srgb, var(--ap-blue) var(--ap-tinted), var(--ap-window));
  --mov-ink: color-mix(in srgb, var(--ap-purple) 62%, var(--ap-badge-ink));
  --mov-bg: color-mix(in srgb, var(--ap-purple) 10%, var(--ap-window));
  --mov-bg-2: color-mix(in srgb, var(--ap-purple) var(--ap-tinted), var(--ap-window));
  --mov-line: color-mix(in srgb, var(--ap-purple) var(--ap-tinted), var(--ap-window));

  /* ── spațiu ──
     Scară din 4 în 4. Un singur pas între două lucruri apropiate, doi pași între
     grupuri, patru între secțiuni. Nimic „aproape cât”. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px;
  /* Treptele kitului care nu cad pe scara din 4 în 4 (`--ap-s-1/3/5/7`): golul
     de 6 din meniuri, pad-ul de 10 al grupului de formular, 14 al sidebarului.
     Se folosesc numai acolo unde componenta măsurată le cere. */
  --s-2: var(--ap-s-1); --s-6: var(--ap-s-3); --s-10: var(--ap-s-5); --s-14: var(--ap-s-7);

  /* Sub scară. Nu e spațiu de așezare, e ajustare de literă: cât se lasă o
     explicație sub rândul pe care-l explică, sau cât respiră textul dintr-o
     etichetă de zece pixeli. Se scria de mână în douăzeci și două de locuri,
     ceea ce e alt fel de a spune că exista deja — doar că fără nume, și deci
     fără nicio garanție că peste o lună mai e același. Între două cutii nu se
     folosește niciodată: acolo scara începe de la --s1. */
  --s-tip: 2px;

  /* Bulina de pe firul coletului. De diametrul ei atârnă trei lucruri care
     trebuie să cadă exact: bulina însăși, firul vertical care le leagă (pe la
     mijlocul ei) și rândul rupt care se aliniază sub text, dincolo de ea. Erau
     trei numere scrise separat — schimbi bulina, iar celelalte două rămân unde
     erau, fără să se plângă nimeni. */
  --bulina: 11px;

  /* ── rotunjimi ──
     Patru trepte. Erau paisprezece: 5, 6, 7, 8, 9, 10, 12, 16, 18, 20, 999.
     Diferența dintre 8 și 9 nu o vede nimeni, dar se simte că nu e ordine. */
  --r-xs: var(--ap-r-image);      /* 6 — etichete mici, poze de produs; butonul și câmpul Regular */
  --r-sm: var(--ap-r-selection);  /* 8 — selecția de rând, evidențierea din meniu, file */
  /* Suprafețele mari au colț continuu acolo unde browserul îl știe: raza se
     înmulțește cu `--ap-corner-k` (1, sau 1,3 sub `@supports`, mai jos) și
     regula care o poartă scrie alături `corner-shape: var(--colt-continuu)`.
     Una fără cealaltă dă un colț mai rotund decât al kitului — de-aia stau în
     aceeași declarație și le păzește `teste/proba_tokenurile_kitului.py`. */
  --r: calc(var(--ap-r-group) * var(--ap-corner-k));        /* 12 — grupul de formular, group box, tabel, meniu */
  --r-md: calc(var(--ap-r-glass-md) * var(--ap-corner-k));  /* 20 — popover, notificare */
  --r-lg: calc(var(--ap-r-glass-lg) * var(--ap-corner-k));  /* 26 — alertă, dialog, fereastră-formular */
  --colt-continuu: superellipse(1.5);
  --r-pill: var(--ap-r-capsule);  /* orice se termină rotund */

  /* Marginea stinsă a unei benzi care se trage cu degetul. Fără ea, conținutul
     pur și simplu se termină în muchia ecranului și arată tăiat, nu continuat. */
  --stins: 28px;

  /* ── straturi ──
     Umbra spune cât de sus stă un lucru față de pagină. Trei niveluri, nu opt. */
  --umbra-1: var(--ap-sh-notification);  /* stă pe pagină: 0 4 16 negru 10% */
  --umbra-2: var(--ap-sh-menu);          /* plutește — meniu, balon: 0 4 24 negru 30% + contur 0,5 */
  --umbra-2-lat: var(--ap-sh-popover);   /* plutește lat — popover, alertă: 0 18 46 negru 25% */
  --umbra-3: var(--ap-sh-window);        /* foaie peste voal — dialog, sheet: 0 36 100 negru 40% + contur */

  /* ── inele de focus ──
     Ce câmp e activ trebuie să se vadă de la un metru, nu doar de la 40cm.
     Astea două sunt afordanța blândă de la mouse: se aprind la `:focus-within`
     și n-au altă treabă decât să spună „aici scrii". Nu sunt semnul de
     tastatură — măsurate, dau 1,13:1, adică nimic. */
  /* Sticla barei de unelte (components-spec §7): capsulele de 36 și muchia de
     derulare. Nu sunt trepte noi de adâncime — capsula stă în bară, nu
     plutește peste conținut; sunt formele kitului, luate întregi. */
  --sticla-fond: linear-gradient(var(--ap-glass-tint), var(--ap-glass-tint)), var(--ap-glass-small-bg);
  --sticla-filtru: blur(var(--ap-glass-small-blur)) saturate(1.8);
  --umbra-sticla: var(--ap-glass-rim), var(--ap-sh-glass-small);
  --fond-bara: color-mix(in srgb, var(--ap-window) 85%, transparent);
  --filtru-bara: blur(6px);
  --umbra-muchie: 0 .67px 0 var(--ap-separator-soft);
  /* Balonul de ajutor al kitului (components-spec §9): gri deschis translucid,
     text #4C4C4C, rază 4, umbră proprie. Fără săgeată. */
  --balon-fond: var(--ap-tooltip-bg); --balon-text: var(--ap-tooltip-text);
  --umbra-balon: var(--ap-sh-tooltip); --r-balon: 4px;
  /* Umbre de obiect, tot din kit: segmentul ales al unui segmented neutru
     (`.ap-segmented--neutral`) și butonul comutatorului. Nu-s trepte. */
  --umbra-segment: 0 0 0 .5px var(--ap-label-4), 0 1px 3px rgb(0 0 0 / .12);
  --umbra-buton: var(--ap-switch-knob-shadow);
  /* Comutatorul Mini din formulare (components-spec §5): 36×16, buton 21×13 la
     1,5 de margine. Tokenurile `--ap-switch-*` ale kitului sunt legate de clasa
     de mărime, deci cifrele Mini se scriu aici, o dată. */
  --comutator-l: 36px; --comutator-h: 16px; --comutator-buton-l: 21px; --comutator-buton-h: 13px;
  --comutator-margine: 1.5px;
  --comutator-pornit: var(--accent);   /* macOS: accentul; pe telefon, verdele iOS */
  /* Bifa și radioul kitului (components-spec §4–5): cutie 16, rază 5,5, oprit
     negru 10%, pornit accent. Glifele sunt cele din `apple-controls.css`. */
  --bifa: var(--ap-check); --bifa-r: var(--ap-check-r); --bifa-gol: var(--ap-check-gap);
  --bifa-oprit: var(--ap-ctl-off); --bifa-apasat: var(--ap-ctl-off-active);
  --glifa-bifa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.6l2.9 3 5.9-7.2'/%3E%3C/svg%3E");
  --glifa-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
  /* Meniul kitului (components-spec §8): sticlă gri deschis, blur 20, rânduri
     de 24 cu raza de selecție 8, rândul de sub cursor pe albastrul de meniu. */
  --fond-meniu: var(--ap-glass-menu-bg);
  --filtru-meniu: blur(var(--ap-glass-menu-blur)) saturate(1.8);
  --meniu-ales: var(--ap-menu-highlight); --pe-accent: var(--ap-on-accent);
  /* Plăcuțele „Aspect” (components-spec §12c, apple-surfaces.css
     `.ap-appearance__thumb`): trei ferestre-miniatură, fiecare cu culorile TEMEI
     PE CARE O ARATĂ, nu ale temei în care ești — de aceea sunt cifre, nu tokenuri
     de temă. Luate întregi din kit: fereastra deschisă/închisă, bara ei,
     semaforul miniaturii și „rândurile de text”. */
  --aspect-l: #ECECEC; --aspect-lw: #FFFFFF; --aspect-d: #262626; --aspect-dw: #1E1E1E;
  --aspect-semafor-1: #FF5F57; --aspect-semafor-2: #FEBC2E; --aspect-semafor-3: #28C840;
  --aspect-rand-l: rgb(0 0 0 / .12); --aspect-rand-l2: rgb(0 0 0 / .08);
  --aspect-rand-d: rgb(255 255 255 / .22); --aspect-rand-d2: rgb(255 255 255 / .14);
  /* Popoverul kitului (§9): sticlă albă 70% cu tentă gri 10%, blur 30, rază 20,
     umbra lată. Îl poartă panourile care se deschid dintr-un buton și barele
     de acțiune care plutesc peste listă. */
  --fond-plutitor: linear-gradient(var(--ap-glass-tint), var(--ap-glass-tint)), var(--ap-glass-bg);
  --filtru-plutitor: blur(var(--ap-glass-blur)) saturate(1.8);
  --inel: var(--ap-focus-ring);          /* System Blue 25% lat 3,5 + 15% lat 1 */
  --inel-accent: var(--ap-field-focus);  /* în câmp: System Blue 50% lat 3,5 */

  /* Semnul de tastatură. Contur, nu umbră, din două motive măsurate:
     `box-shadow` se taie de învelișul care derulează, iar cel mai des se vede
     tocmai în tabelul de comenzi, care are `overflow-x`; și fiindcă tot ce
     scria aplicația până acum era mai slab decât dacă n-ar fi scris nimic —
     1,13:1, 1,22:1 și 2,56:1, față de 5,98:1 cât dă implicitul de browser.
     `--ink` dă 17,7:1 pe card și 16,4:1 pe pagină; pragul din WCAG 2.2 §2.4.11
     e 3:1. Patru reguli din fișier scriau deja exact asta, de mână, și aveau
     dreptate; ăsta e doar numele lor. */
  --contur-focus: 3.5px solid var(--accent);
  --decalaj-focus: 2px;
  /* Amendament 21.09.2026: inelul kitului — System Blue, lat 3,5
     (`components-spec.md` §2, `--ap-focus-ring`). Derivat din kit: geometria și
     culoarea sunt ale lui, opacitatea nu — 25% pe alb dă 1,3:1, adică exact
     greșeala povestită mai sus. Albastrul întreg dă 3,5:1 pe fereastră și 3,2:1
     pe grupul gri, peste pragul de 3:1; îl socotește `teste/proba_focus.py` din
     valorile kitului, nu din nume. Decalajul de 2 rămâne: lipit de un buton
     Prominent, un inel albastru plin nu s-ar mai vedea. */

  /* Cât de mare trebuie să fie cutia de apăsat, cel puțin. Nu e o treaptă de
     spațiu — de-aia nu se cheamă `--s6`, deși azi are aceeași valoare: e pragul
     din WCAG 2.5.8 (AA), 24×24. Deasupra lui mai e unul, 44×44 (2.5.5, AAA),
     și ăla se folosește pe telefon și pe ecranele tactile. Mouse-ul păstrează
     densitatea listei de comenzi, fără să-i împingă rândurile sub ecran.
     Măsurat: din 1.063 de ținte pe `/comenzi`, 192 erau sub 24 — toate pe
     înălțime, niciuna pe lățime. Sunt rânduri de text fără nicio umplutură. */
  --tinta-min: 24px;

  /* ── controale (components-spec §4) ──
     Large (28) e mărimea kitului pentru „ecrane aerisite” — adică ecranele de
     lucru de aici; Regular (24) rămâne pentru rândul de tabel și locurile
     strânse (`.btn.sm`); XLarge (36) pentru căutarea paginii, ca în bara de
     unelte. Raza și pad-ul câmpului sunt perechea măsurată a fiecărei mărimi. */
  --h-ctl: 28px; --h-ctl-mic: 24px; --h-ctl-mare: 36px;
  --h-camp: var(--h-ctl);   /* câmpul ține înălțimea controlului; pe telefon are treapta lui (52) */
  /* Rândul de listă: 40 cu pad 10 în formularul kitului (§11); pe telefon 52 cu pad 16 (§12). */
  --h-rand: var(--ap-form-row-min); --pad-rand: var(--ap-form-pad-x);
  --pad-camp: var(--s2);   /* textul din câmp: 8 pe birou, 16 pe telefon (§12, Text Field) */
  --r-camp: 7px;      /* câmp Large: rază 7, pad-x 8 */
  --r-camp-mare: 9px; /* câmp XLarge: rază 9, pad-x 10 */
  /* Starea sub cursor păstrează contrastul textului în ambele teme. */
  --accent-plin-hover: var(--ap-prominent-hover);
  /* Lățimea barei laterale: cea măsurată a kitului, 256 (components-spec §8).
     Strânsă, de la 1024px în sus, e o șină de iconițe de 52 — cât bara de
     unelte, ca pătratul firmei din colț să fie la fel de lat cât de înalt
     (amendamentul L1 din 01.10.2026, după bara nouă din Shopify; cel din
     21.09 o scosese). Sub 1024px nici șina nu încape lângă lista de comenzi
     (tabelul cere 954 din cei 994 ai panoului), deci acolo bara stă ascunsă
     și se deschide peste conținut, din butonul de lângă companie. */
  --lat-sidebar: var(--ap-sidebar-w);
  --lat-sina: var(--ap-toolbar-h);
  /* Marginea coloanei, aceeași în bara întreagă și în șină (09.10.2026):
     (52 − 32) / 2 = 10. Iconițele stau astfel în același loc în ambele stări
     și nu sar când meniul se strânge sau se deschide. */
  --pad-sina: calc((var(--lat-sina) - var(--ap-sidebar-row-md)) / 2);
  /* Antetul are o singură înălțime (L1). `--h-rand-antet` e înălțimea unui
     rând al lui (compania, bara de sus) și nu se mișcă. `--app-head-height`
     e cât ocupă antetul întreg — pe telefon, unde rândurile stau unul sub
     altul, JS-ul o remăsoară (`masoaraAppHead`) ca lipiturile de sub el
     (`sticky`) să știe de unde încep. Rândurile NU se dimensionează după ea:
     un rând care crește după totalul rândurilor crește la nesfârșit. */
  --h-rand-antet: var(--ap-toolbar-h);   /* 52 — bara de unelte a kitului */
  --app-head-height: var(--h-rand-antet);
  /* Hârtia: culorile foii tipărite, ca nici `@media print` să nu scrie hex
     în afara legii (L7). */
  --hartie: #fff; --tus: #000; --tus-slab: #999; --tus-linie: #ccc;

  /* Cât de lată are voie să *ceară* o coloană de tabel.

     Nu e un zid, și contează să nu fie citit ca unul. Sub `table-layout: auto`
     — nicăieri în fișier nu scrie altceva — `max-width` de pe o celulă e o
     intrare în împărțeala lățimilor, nu o limită. Măsurat pe codul de dinainte,
     unde scria negru pe alb `max-width: 270px`: coloana „Adresă" a ieșit
     **310,3px** la 1560, cu `box-sizing: border-box` cu tot (rândul 164). Toate
     trei plafoanele vechi erau depășite peste 1440, cu până la +40px. Ce taie
     textul e `.trunc`, nu plafonul de aici.

     Ce face totuși: mută împărțeala. Aici erau trei cifre scrise de mână — 190,
     270, 205 — din primul commit al tabelului (`git log -L` pe rândurile alea dă
     un singur commit, `a4ba0ed`), nedecise niciodată de nimeni. Țineau
     „Destinatar" la 201px la 1440, în timp ce lângă ea stăteau nefolosiți exact
     pixelii care lipseau: 13 e-mailuri tăiate acolo, 60 pe toată banda de 21 de
     lățimi. Nu lipseau din pagină — erau împărțiți altcuiva. Cu un singur plafon,
     mai larg: „Destinatar" 248,5px, tăiate **0**, tabelul tot 1400.

     De ce 320: e peste tot ce cere ecranul azi — cea mai lată coloană măsurată
     după schimbare e „Adresă", 302,1px la 1600, și 0 din 294 de măsurători de
     coloană ating 320 — deci nu strânge nimic din ce se vede acum; și e destul de
     jos cât să mai conteze în împărțeală când o celulă vine cu un e-mail de
     șaizeci de caractere. */
  --lat-col-max: 320px;

  /* ── voaluri ── */
  --voal: var(--ap-overlay);           /* sub ferestre: #ABABAB la 60% */
  /* Aici stăteau `--voal-clar` și `--card-blur`, cele două culori străvezii de
     sub sticlă. Au plecat odată cu ea: `--card-blur` era alb la 85% sub antet,
     iar `--voal-clar` alb-gri la 72% sub folia de încuiere. Fără
     `backdrop-filter` niciuna nu mai avea rost — o culoare străvezie fără
     nimic de amestecat dedesubt e doar o culoare mai deschisă, scrisă greu.
     Antetul folosește acum `--card`, folia `--bg`. Un token declarat și
     nefolosit nu aglomerează ecranul, dar aglomerează fișierul: se citește ca o
     alegere disponibilă, și data viitoare cineva o alege. */

  /* Alb pe fundal închis. Nu e „--card”; --card e o suprafață, ăsta e cerneală. */
  --on-dark: var(--ap-on-accent);
  /* Ce se scrie PE cerneală sau pe un ton (`--ink`, `--ok`, `--warn`, `--err`):
     culoarea ferestrei — alb pe luminos, ca până acum; pe întunecat cerneala e
     albă și tonurile sunt deschise (62% + alb, rețeta kitului), deci textul de
     pe ele trebuie să fie închis. `--on-dark` rămâne pentru accent și pentru
     culorile pline de sistem, care sunt la fel în ambele teme. */
  --pe-cerneala: var(--ap-window);

  /* ── text ──
     Șapte trepte. Înainte erau 17 mărimi, dintre care șase cu jumătăți de pixel
     (9.5, 11.5, 12.5, 13.5, 14.5) — diferențe pe care ochiul nu le vede ca
     intenție, doar ca neglijență. `2xs` e doar pentru etichetele scrise cu
     majuscule mici, gen „ÎN CURÂND”; text de citit nu se scrie niciodată acolo. */
  --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-base: 13px;
  --t-t3: 15px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 26px;
  /* Scara kitului: Footnote 10/13 · Subheadline 11/14 · Callout 12/15 · Body
     13/16 · Title 3 15/20 · Title 2 17/22 · Title 1 22/26 · Large Title 26/32.
     `--t-base` e Body (13), nu 14; treapta de 15 e nouă (`--t-t3`).
     Interlinia de bază e 16/13 scrisă fără unitate, ca să se moștenească pe
     mărime, nu ca 16px ficși: 10→12,3 · 11→13,5 · 12→14,8 · 13→16 · 26→32.
     Textul care își scrie singur mărimea își ia interlinia exactă de aici,
     pe aceeași treaptă: `--t-sm` merge cu `--il-sm`, niciodată cu o cifră. */
  --il: calc(16 / 13);
  --il-2xs: var(--ap-footnote-lh); --il-xs: var(--ap-subheadline-lh);
  --il-sm: var(--ap-callout-lh); --il-md: var(--ap-body-lh);
  --il-t3: var(--ap-title3-lh); --il-lg: var(--ap-title2-lh);
  --il-xl: var(--ap-title1-lh); --il-2xl: var(--ap-large-title-lh);

  /* ── mișcare ── trei durate, curbele kitului */
  --durata-1: var(--ap-dur-1); --durata-2: var(--ap-dur-2); --durata-3: var(--ap-dur-3);
  --curba: var(--ap-ease); --curba-iesire: var(--ap-ease-out);

  /* ── ecranele de login ── intrarea în tură, ecranul blocat, folia de
     încuiere, primul cont, conturile Shopify. Un cartonaș de login obișnuit,
     nu ecranul de blocare al unui telefon — fondul rămâne opac (sub folia de
     încuiere stau datele clienților), pagina de sub el e `--ap-under-page`
     (#F5F5F7 pe luminos, negru pe întunecat), nu fereastra albă. */
  --login-fond: var(--ap-under-page);
  --login-l: 400px;
  --login-r: 12px;
  --login-camp-h: 40px;
  --login-camp-r: 8px;
  --login-t: 14px;
}

/* ── Telefonul vorbește iOS 27 (components-spec §12) ─────────────────────────
   Sub 721px aceleași nume iau valorile măsurate pentru telefon, treaptă cu
   treaptă pe rol: Body 13/16 → 17/22, Callout 12 → 16/21, Subheadline 11 →
   15/20, Footnote 10 → 13/18, Title 3/2/1 → 20/25, 22/28, 28/34, Large Title →
   34/41. Butoane 50 / 34 capsulă, câmp 52, listă grupată rază 26, alertă rază
   34, meniu rază 32, comutator 64×28 verde, ținta de atingere 44.
   Derivate (kitul nu le măsoară): `--h-ctl` 44 — butonul Medium de 34 are pe iOS
   o zonă de atingere de 44 pe care CSS-ul n-o poate da fără să crească butonul;
   raza câmpului 26 — un câmp singur e un grup cu un rând (52 / rază 26);
   butonul comutatorului 38×24 — proporția celui de macOS (32/54) la 64×28. */
@media (pointer: coarse) {
  :root { --tinta-min: 44px; --h-ctl: 44px; --h-ctl-mic: 44px; --h-ctl-mare: 44px; }
}
@media (max-width: 720px) {
  :root {
    --t-2xs: 13px; --t-xs: 15px; --t-sm: 16px; --t-md: 17px; --t-base: 17px;
    --t-t3: 20px; --t-lg: 22px; --t-xl: 28px; --t-2xl: 34px;
    --il: calc(22 / 17);
    --il-2xs: 18px; --il-xs: 20px; --il-sm: 21px; --il-md: 22px;
    --il-t3: 25px; --il-lg: 28px; --il-xl: 34px; --il-2xl: 41px;
    --h-ctl: 44px; --h-ctl-mic: 34px; --h-ctl-mare: 50px; --h-camp: 52px;
    --h-rand: 52px; --pad-rand: 16px; --pad-camp: 16px;
    --tinta-min: 44px;
    --r: calc(26px * var(--ap-corner-k));
    --r-md: calc(32px * var(--ap-corner-k));
    --r-lg: calc(34px * var(--ap-corner-k));
    --r-camp: 26px; --r-camp-mare: 26px;
    --comutator-l: 64px; --comutator-h: 28px; --comutator-buton-l: 38px; --comutator-buton-h: 24px;
    --comutator-margine: 2px; --comutator-pornit: var(--ap-green);
    --login-camp-h: 48px; --login-t: 16px;
  }
}

/* Colț continuu (Chrome ≥ 139): aceeași formă ca în kit, `apple-surfaces.css`. */
@supports (corner-shape: superellipse(1.5)) {
  :root { --ap-corner-k: 1.3; }
}

/* Împerecherea este singurul ecran desktop al scannerului. */
.pair-grid { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); gap: var(--s5); align-items: start; }
.pair-card { text-align: center; }
.pair-empty, .pair-live { min-height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); }
.pair-empty p, .pair-live p { max-width: 36rem; margin: 0; color: var(--mute); }
.pair-qr { width: min(320px, 100%); height: auto; border-radius: var(--r); corner-shape: var(--colt-continuu); }
.pair-live > b { font-size: var(--t-2xl); font-variant-numeric: tabular-nums; }
.pair-device { min-height: var(--tinta-min); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.pair-device > div { display: grid; gap: var(--s1); }
@media (max-width: 900px) {
  .pair-grid { grid-template-columns: 1fr; }
}
.telefon-mini { display: none; }
.mod-telefon .telefon-mini { position: sticky; z-index: 20; top: 0; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: env(safe-area-inset-top) var(--s4) 0; background: var(--ink); color: var(--on-dark); }
.mod-telefon .telefon-mini a { min-height: calc(var(--s7) + var(--s3)); display: inline-flex; align-items: center; color: var(--on-dark); text-decoration: none; font-weight: 600; }
.mod-telefon .app-head, .mod-telefon .sidebar, .mod-telefon .jos { display: none; }
.mod-telefon .app-frame, .mod-telefon .app-body { display: block; min-width: 0; }
.mod-telefon main { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s4); }

/* Endpointul tehnic de comparație Shopify–SmartBill rămâne disponibil numai
   în oglinda locală, dar nu mai este încărcat în pagina operatorului. Stilul
   lui rămâne aici pentru deschiderea explicită de diagnostic. */
.surse-live { border-color: var(--mov-line); background: var(--mov-bg); }
.surse-live-cap, .sursa-live > header, .documente-live li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
}
.surse-live-cap h2 { margin-bottom: var(--s1); }
.surse-live-cap p { margin: 0; }
.surse-live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.sursa-live { min-width: 0; padding: var(--s4); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); }
.sursa-live > header { align-items: center; margin-bottom: var(--s3); }
.sursa-evenimente { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s3); }
.sursa-evenimente summary { cursor: pointer; font-weight: 600; }
.sursa-evenimente .fir { margin-top: var(--s3); max-height: 420px; overflow: auto; }
.documente-live { list-style: none; padding: 0; margin: 0; }
.documente-live li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.documente-live li:first-child { border-top: 0; padding-top: 0; }
.documente-live span { min-width: 0; }
.documente-live small { display: block; color: var(--mute); margin-top: var(--s-tip); overflow-wrap: anywhere; }
.tag.live { color: var(--mov-ink); background: var(--mov-bg-2); }
.bad-text { color: var(--err); font-weight: 600; }
@media (max-width: 760px) {
  .surse-live-grid { grid-template-columns: 1fr; }
  .surse-live-cap { align-items: stretch; flex-direction: column; }
  .documente-live li { gap: var(--s3); }
}

* { box-sizing: border-box; }
/* Un singur loc unde se scrie cum arată tastatura pe ecran.
   `:focus-visible`, nu `:focus`: browserul știe deja diferența dintre un deget
   pe un buton și un Tab, și n-are rost s-o rescriem noi. Măsurat pe 9 ecrane,
   201 opriri de Tab: 196 mergeau pe inelul implicit al browserului, 3 pe unul
   scris de noi (dintre care două la 1,22:1), iar unul — căsuța de căutare din
   contabilitate, 1309×38px la 1440 — n-avea absolut nimic. */
:focus-visible { outline: var(--contur-focus); outline-offset: var(--decalaj-focus); }
/* Prima oprire la Tab duce direct la conținut, peste antet și meniu. */
.sari-continut {
  position: fixed; inset-block-start: var(--s2); inset-inline-start: var(--s2);
  z-index: 10000; transform: translateY(-200%); padding: var(--s3) var(--s4);
  background: var(--surface); color: var(--ink); border-radius: var(--r);
  corner-shape: var(--colt-continuu);
}
.sari-continut:focus { transform: translateY(0); }
/* `hidden` trebuie să însemne ascuns, oriunde. Regula browserului e slabă: orice
   `display` scris de noi (butoanele sunt `inline-flex`) o bate, și așa a stat la
   vedere „Descarcă ultimul pachet” când nu exista niciun pachet. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--ap-w-regular) var(--t-base)/var(--il) var(--ap-font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* Cadrul, în limbajul kitului (components-spec §7–§8): bara laterală de 256,
   toată înălțimea ferestrei, cu zona de sus de 52 în care stau compania și
   butonul de ascuns; lângă ea, bara de unelte de 52 peste conținutul alb.
   Compania rămâne bucată separată de navigație (de-aia cadrul are tot două
   rânduri de grilă): când meniul se strânge, ea și butonul rămân pe loc, în
   capul coloanei. Din 09.10.2026 coloana e închisă în ambele teme, ca bara
   nouă din Shopify (`--sb-*` în `:root`). */
.app-shell { min-height: calc(100vh - var(--h-dunga, 0px)); }
.app-head {
  position: sticky; top: var(--h-dunga, 0px); z-index: 20;
  display: grid; grid-template-columns: var(--lat-sidebar) minmax(0, 1fr);
}
/* Capul barei laterale: marca la stânga, butonul de ascuns la dreapta, pe
   fondul barei. Strâns la șină (de la 1024px) devine pătratul de 52 din colț;
   sub 1024 e capul barei de unelte, cu sticla ei (regulile de mai jos). */
.company {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ap-toolbar-gap);
  height: var(--h-rand-antet); min-width: 0;
  padding: 0 var(--ap-toolbar-pad) 0 calc(var(--ap-sidebar-pad) + var(--s1));
  background: var(--fond-sidebar);
}
/* Butonul de ascuns meniul: buton de bară, 28 înalt în locul de 36 (§7). */
.company-toggle {
  flex: none; width: var(--ap-toolbar-item); height: var(--ap-toolbar-btn);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ap-glyph); cursor: pointer;
  transition: background var(--durata-1), opacity var(--durata-1);
}
.company-toggle:hover { background: var(--ap-fill-3); }
.company-toggle:active { background: var(--ap-fill); }
.app-frame {
  display: grid; grid-template-columns: var(--lat-sidebar) minmax(0, 1fr);
  min-height: calc(100vh - var(--h-dunga, 0px) - var(--app-head-height));
}
.side-collapsed .app-frame { grid-template-columns: minmax(0, 1fr); }
.app-body {
  min-width: 0; min-height: calc(100vh - var(--h-dunga, 0px) - var(--app-head-height));
  display: flex; flex-direction: column;
}

/* Paleta coloanei: tokenurile de culoare se rescriu aici o singură dată, din
   `--sb-*`, iar regulile de mai jos rămân scrise în vocabularul obișnuit
   (`--ink`, `--ap-fill-4`, `--ap-selection-row`…). Numai culori: o măsură
   rescrisă aici ar desprinde coloana de restul cadrului. `color` se scrie din
   nou fiindcă, moștenit, vine deja socotit din pagină. Accentul devine gri de
   glifă (iconițele), dar inelul de focus rămâne albastru: `--contur-focus` e
   socotit în `:root`. */
.sidebar {
  position: sticky;
  top: calc(var(--h-dunga, 0px) + var(--app-head-height));
  align-self: start;
  height: calc(100vh - var(--h-dunga, 0px) - var(--app-head-height));
  display: flex; flex-direction: column;
  padding: 0 var(--pad-sina) var(--s4);
  background: var(--fond-sidebar);
  --ink: var(--sb-ink); --ink-2: var(--sb-ink); --mute: var(--sb-mute); --faint: var(--sb-faint);
  --line: var(--sb-linie); --line-moale: var(--sb-linie); --line-strong: var(--sb-linie);
  --accent: var(--sb-glifa); --pe-cerneala: var(--sb-fond);
  --card: var(--sb-card); --surface: var(--sb-hover); --surface-2: var(--sb-hover);
  --ap-label: var(--sb-ink); --ap-label-2: var(--sb-mute); --ap-label-3: var(--sb-faint);
  --ap-fill: var(--sb-selectie); --ap-fill-2: var(--sb-hover-tare);
  --ap-fill-3: var(--sb-hover-tare); --ap-fill-4: var(--sb-hover);
  --ap-glyph: var(--sb-glifa); --ap-selection-row: var(--sb-selectie);
  color: var(--ink); color-scheme: dark;
}
.side-nav {
  /* Navigația este copilul flexibil dintre marginea de sus și butonul de jos.
     `min-height: 0` îi permite să se micșoreze. Înăuntru sunt două cutii:
     `.side-scroll`, cu secțiunile, care se micșorează și derulează ea singură,
     și `.side-foot`, piciorul cu Setări și butonul de temă, care nu derulează
     — stă mereu la vedere, jos (§8: nimic critic în picior, deci doar lucruri
     la care se ajunge rar). Fără `overflow-y: auto` pe cutia micșorată,
     intrările ar ieși din ea și s-ar desena peste piciorul de sub ele. */
  min-height: 0; flex: 1;
  display: flex; flex-direction: column;
}
.side-scroll {
  /* Cutia care derulează ia toată lățimea coloanei (marginea negativă cu
     umplutura egală): selecția și bulina din șină nu sunt tăiate de
     `overflow`, iar bara de derulare stă la marginea coloanei. */
  min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  margin-inline: calc(-1 * var(--pad-sina)); padding-inline: var(--pad-sina);
}
/* Secțiunea (§8): 14px sub ultimul rând al ei, înaintea titlului următoarei.
   Prima n-are titlu — „Tura de azi” e ecranul de plecare, stă singură sus. */
.side-section { display: flex; flex-direction: column; padding-bottom: 14px; }
.side-section:last-child { padding-bottom: 0; }
/* Titlu de secțiune: Bold 11/14, terțiar, fără majuscule (§8). Din 09.10.2026
   începe în dreptul iconițelor, ca „Sales channels” din Shopify: titlul ține
   grupul întreg, iar textul rândurilor rămâne liber pentru sub-rânduri. */
.side-label {
  position: relative;
  margin: 0; min-height: 18px; padding: var(--s-tip) var(--s-6);
  overflow: hidden; white-space: nowrap;
  color: var(--ap-label-3);
  font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 700;
}
.side-label::before {
  content: ""; position: absolute; top: var(--s-tip); left: var(--s1); right: var(--s1);
  border-top: 1px solid var(--line); opacity: 0;
}
/* Piciorul: Setări și tema, despărțite de restul printr-o linie. Nu derulează.
   Aceleași rânduri `.side-link` ca sus — un singur fel de rând în meniu. */
.side-foot {
  flex: none; display: flex; flex-direction: column;
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line);
}
/* Versiunea, sub temă (consola, care n-are rândul contului): notă de subsol,
   aliniată cu textul rândurilor. */
.side-ver {
  margin: var(--s1) 0 0; padding-left: calc(var(--s-6) + 20px + var(--s2));
  overflow: hidden; white-space: nowrap;
  font-size: var(--t-xs); line-height: var(--il-xs); color: var(--mute);
  font-variant-numeric: tabular-nums;
}
/* Rândul Medium al kitului: 32 înalt, Regular 13/16. Geometria e aceeași în
   bara întreagă și în șină (09.10.2026): coloana are 10 de margine, rândul 6
   de umplutură, iconița o coloană de 20 — centrul ei cade la 26, adică la
   mijlocul șinei de 52, iar textul începe la 44. Când meniul se strânge,
   rândul doar se îngustează; iconița nu se mișcă. Rândul ales e pastila gri
   din Shopify, cu muchia de lumină sus, textul alb, semibold. */
.side-link {
  position: relative;
  min-height: var(--ap-sidebar-row-md); flex: none; display: flex; align-items: center; gap: var(--s2);
  margin: 0; padding: 0 var(--s-6);
  border-radius: var(--r-sm); color: var(--ink);
  font-size: var(--t-base); line-height: var(--il-md); font-weight: 400;
  transition: background var(--durata-1), box-shadow var(--durata-1);
}
.side-link .ic { flex: none; width: 20px; height: 16px; color: var(--accent); }
.side-link > span:not(.side-num) {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Locul cifrei: ea stă deasupra rândului (ca să poată aluneca în colțul
   iconiței din șină), deci numele îi lasă loc. Pe nume, nu pe rând: o
   umplutură a rândului l-ar ține mai lat decât șina. */
.side-link:has(> .side-num) > span:not(.side-num) { margin-right: calc(28px + var(--s2)); }
.side-link:hover { background: var(--ap-fill-4); }
.side-link.active {
  background: var(--ap-selection-row);
  box-shadow: inset 0 1px 0 var(--sb-selectie-sus), inset 0 0 0 1px var(--sb-selectie-margine);
  color: var(--sb-ink-tare); font-weight: 600;
}
.side-link.active .ic { color: var(--sb-ink-tare); }
/* Când sub ușă e ales un sub-rând, pastila trece pe el; ușa rămâne doar
   scrisă alb. În șină sub-rândurile nu se văd, deci pastila rămâne pe ușă. */
html:not(.side-collapsed) .side-link.active:has(+ .side-subs .side-sub.on) {
  background: transparent;
  box-shadow: inset 0 1px 0 transparent, inset 0 0 0 1px transparent;
}
html:not(.side-collapsed) .side-link.active:has(+ .side-subs .side-sub.on):hover { background: var(--ap-fill-4); }

/* Sub-rândurile ușii deschise (09.10.2026, ca „Collections, Inventory…” sub
   „Products” în Shopify): aceleași vederi pe care pagina le are ca file sau
   chipsuri, scrise sub ușă doar cât ești în ea. Fără iconiță; textul începe
   unde începe numele ușii, gri, iar cel ales ia pastila. Înălțimea e scrisă
   (nu doar minimă), ca șina să le poată strânge la zero. */
.side-subs { display: flex; flex-direction: column; }
.side-sub {
  flex: none; display: flex; align-items: center;
  height: max(var(--ap-sidebar-row-md), var(--tinta-min));
  padding: 0 var(--s-6) 0 calc(var(--s-6) + 20px + var(--s2));
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: var(--r-sm); color: var(--sb-mute);
  font-size: var(--t-base); line-height: var(--il-md); font-weight: 400;
  transition: background var(--durata-1), color var(--durata-1);
}
.side-sub:hover { background: var(--ap-fill-4); color: var(--ink); }
.side-sub.on {
  background: var(--ap-selection-row);
  box-shadow: inset 0 1px 0 var(--sb-selectie-sus), inset 0 0 0 1px var(--sb-selectie-margine);
  color: var(--sb-ink-tare); font-weight: 500;
}
/* Rândul din picior: Setări ține tot rândul, iar tema și lacătul sunt doar
   iconițe, pătrate de 32 în capătul drept. */
.side-foot-rand { display: flex; align-items: center; gap: var(--s1); }
.side-foot-rand > .side-link { flex: 1; min-width: 0; }
/* Înăuntru stau soarele și luna; se vede una singură, după `data-ap-scheme` —
   regulile `.ap-theme-toggle` de mai jos le comută. */
.side-theme .ic { width: 20px; height: 16px; }
/* Cifra de lângă o ușă din meniu: pastila gri din Shopify („Orders 161”),
   cifre tabulare, la dreapta rândului. Gri, nu chihlimbar: un contor nu e o
   stare (L7) — cifra spune „câte”, nu „așteptăm pe cineva”. Stă deasupra
   rândului, nu în șirul lui, ca la strângere să alunece în colțul iconiței
   (bulina din șină) fără să sară. */
.side-num {
  position: absolute; top: 50%; right: var(--s-6); transform: translateY(-50%);
  min-width: 20px; height: 20px; padding: 0 var(--s-6);
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--r-sm) - var(--s-tip));
  background: var(--sb-insigna); color: var(--ap-label);
  font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 0px var(--fond-sidebar);
}
/* Lacătul, lângă temă: același pătrat de 32, în culoarea glifelor. */
.side-theme, .side-lock {
  flex: none; width: var(--ap-sidebar-row-md); height: var(--ap-sidebar-row-md);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--accent); cursor: pointer; transition: background var(--durata-1);
}
.side-theme:hover, .side-lock:hover { background: var(--ap-fill-4); }
.side-lock .ic { width: 20px; height: 16px; }

/* Căutarea din capul meniului (01.10.2026, după bara nouă din Shopify): ușa
   paletei ⌘K, nu un câmp. Capsula gri a Shopify, cu muchia de lumină sus;
   lupa stă în coloana iconițelor (centrul la 26), textul la 44, ca rândurile.
   În șină rămâne doar lupa, în pătratul ei de 32. */
.side-cauta {
  flex: none; display: flex; align-items: center; gap: var(--s2);
  height: var(--ap-sidebar-row-md); margin: 0 0 var(--s3);
  padding: 0 var(--s3) 0 var(--s-6); border: 0;
  border-radius: calc(var(--ap-sidebar-row-md) / 2);
  overflow: hidden; white-space: nowrap;
  background: var(--sb-camp); color: var(--sb-glifa);
  box-shadow: inset 0 1px 0 var(--sb-camp-sus), inset 0 0 0 1px var(--sb-camp-margine);
  font: inherit; font-size: var(--t-base); line-height: var(--il-md); text-align: left;
  cursor: pointer; transition: background var(--durata-1);
}
.side-cauta:hover { background: var(--sb-camp-hover); }
.side-cauta .ic { flex: none; width: 20px; height: 16px; }
.side-cauta > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-cauta > kbd {
  flex: none; font: inherit; font-size: var(--t-xs); line-height: var(--il-xs);
  font-weight: 500; color: var(--ap-label-2);
}

/* Rândul magazinului, sub Setări (01.10.2026): pătratul cu inițiale, numele
   magazinului și omul de la ecran — rândul Large al kitului, 40. Pătratul de
   24 stă în coloana iconițelor (centrul la 26), roz ca la Shopify; textul
   începe la 44. Se deschide în panoul de profil care stătea înainte în bara
   de sus: aceleași rânduri (`.header-account`, `.header-profile-actions`),
   aceeași rază 12 și umbră de meniu, pe fondul închis al coloanei. */
.side-cont { position: relative; flex: none; margin-top: var(--s1); }
.side-cont-buton {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: var(--ap-sidebar-row-lg); margin: 0;
  padding: 0 var(--s2) 0 var(--s1);
  border-radius: var(--r-sm); list-style: none; cursor: pointer;
  transition: background var(--durata-1);
}
.side-cont-buton::-webkit-details-marker { display: none; }
.side-cont-buton:hover { background: var(--ap-fill-4); }
.side-cont[open] > .side-cont-buton { background: var(--ap-fill-3); }
.side-avatar {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: calc(var(--r-sm) - var(--s-tip)); background: var(--sb-avatar); color: var(--sb-avatar-text);
  font-size: var(--t-2xs); line-height: var(--il-2xs); font-weight: 600;
}
.side-cont-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-cont-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-cont-text > b { color: var(--ink); font-size: var(--t-base); line-height: var(--il-md); font-weight: 500; }
.side-cont-text > span { color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); }
.side-cont-panou {
  position: absolute; z-index: 30; left: 0; right: 0;
  bottom: calc(100% + var(--s1)); padding: var(--s-6);
  background: var(--card); border-radius: var(--r); corner-shape: var(--colt-continuu);
  box-shadow: var(--umbra-2), inset 0 0 0 1px var(--line);
}
.side-cont-grup + .side-cont-grup, .side-cont-ver { border-top: 1px solid var(--line-moale); }
.side-cont-panou .header-account + .header-profile-actions,
.side-cont-panou .header-signout { border-top: 0; }
.side-cont-ver {
  margin: 0; padding: var(--s2) var(--s3) var(--s1);
  color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs);
  font-variant-numeric: tabular-nums;
}

/* Balonul din șină: numele ușii, la dreapta iconiței (macOS, Shopify). E unul
   singur, fix, pus de `app.js` — balonul din CSS (`[data-tip]`) stă deasupra
   elementului și pe o șină de 52 s-ar tăia de marginea ferestrei. */
.sina-tip {
  position: fixed; z-index: 40; pointer-events: none; transform: translateY(-50%);
  width: max-content; max-width: 230px; padding: var(--s-tip) var(--s-6);
  background: var(--balon-fond); color: var(--balon-text);
  font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 500;
  border-radius: var(--r-balon);
  -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px);
  box-shadow: var(--umbra-balon);
}
.sina-tip[hidden] { display: none; }

/* Butonul din josul meniului e al telefonului, unde meniul e o foaie pe tot
   ecranul și compania nu se vede. De la 721px în sus meniul se ascunde din
   butonul de lângă companie. */
.side-toggle {
  min-height: 40px; flex: none; display: none; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border: 0; border-top: 1px solid var(--line);
  background: transparent; color: var(--mute); font: inherit;
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
}
.side-toggle:hover { color: var(--ink); background: var(--surface-2); }
.side-toggle .ic { flex: none; transform: rotate(180deg); }
.side-collapsed .side-toggle .ic { transform: none; }

/* Sub 1024px — deci și pe panoul de 994 — bara laterală nu mai încape lângă
   conținut: lista de comenzi cere 954px, iar legea nu lasă nici textul micit,
   nici coloane scoase. Meniul stă ascuns și se deschide ca foaie peste
   conținut, sub antet; antetul rămâne un singur rând de 52, lipit sus. */
@media (max-width: 1023px) {
  .app-head { grid-template-columns: auto minmax(0, 1fr); }
  .company, .side-collapsed .company {
    padding-left: var(--s3);
    background: var(--fond-bara);
    -webkit-backdrop-filter: var(--filtru-bara); backdrop-filter: var(--filtru-bara);
    box-shadow: var(--umbra-muchie);
  }
  .app-frame { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 19; left: 0;
    top: calc(var(--h-dunga, 0px) + var(--app-head-height));
    width: var(--lat-sidebar); padding-top: var(--s2);
    box-shadow: var(--umbra-3);
  }
  /* Închisă, foaia stă în afara ecranului, la stânga, și nu se mai vede nici
     pentru Tab, nici pentru cititorul de ecran (`visibility`). La apăsare
     alunecă (`html.side-anim`, pus de `app.js`); la încărcare nu se mișcă. */
  .side-collapsed .sidebar { transform: translateX(-100%); visibility: hidden; }
  html.side-anim .sidebar {
    transition: transform var(--durata-2) var(--curba), visibility var(--durata-2);
  }
  /* Foaia se deschide rar, deci căutarea și lacătul rămân sus, în bară. */
  .side-cauta, .side-lock { display: none; }
}
/* Între 1023 și 1024 (un zoom care dă o lățime cu zecimale) nu se aplică
   nici foaia, nici șina: meniul strâns se ascunde, ca înainte de șină — altfel
   ar sta întreg, pe coloana conținutului. */
@media (1023px < width < 1024px) {
  .side-collapsed .sidebar { display: none; }
}

/* De la 1024px în sus căutarea, lacătul și magazinul stau în meniul lateral
   (01.10.2026); în bara de sus ar fi a doua oară. */
@media (min-width: 1024px) {
  .top-actions > .header-rapid, .top-actions > .header-lacat, .company .brand-magazin { display: none; }
}

/* Șina (amendamentul L1, 01.10.2026, după bara nouă din Shopify): de la
   1024px în sus „Restrânge meniul” nu mai ascunde bara, o strânge la 52 —
   iconițele rămân, fiecare în pătratul ei de 32, în același loc ca în bara
   întreagă, ca ochiul să nu le caute după apăsare. Numele ușilor ies în balon
   la dreapta (`app.js`, `.sina-tip`); cifra devine bulină pe iconiță („cifra
   din meniul restrâns arată cifra”, L7); titlurile de secțiune devin linii
   subțiri, în același loc; sub-rândurile se strâng. Marca rămâne în colț;
   butonul de extins apare peste ea la trecerea mouse-ului. Sub 1024 nici
   șina nu încape lângă lista de comenzi, deci acolo rămâne foaia. */
@media (min-width: 1024px) {
  .side-collapsed .app-head,
  .side-collapsed .app-frame { grid-template-columns: var(--lat-sina) minmax(0, 1fr); }

  /* Capul coloanei e închis și el, cu aceeași paletă. Marca stă centrată pe
     axa șinei (26) în ambele stări, deci nu se mișcă; butonul stă la 8 de
     marginea dreaptă — în șina de 52 asta înseamnă exact peste marcă, în
     pătratul lui de 36. Sfertul de cerc din colț rotunjește bara de unelte
     spre coloană, ca fereastra cu colțuri a Shopify. */
  .company {
    --ink: var(--sb-ink); --ink-2: var(--sb-ink); --mute: var(--sb-mute); --faint: var(--sb-faint);
    --line: var(--sb-linie); --line-moale: var(--sb-linie); --line-strong: var(--sb-linie);
    --accent: var(--sb-glifa); --pe-cerneala: var(--sb-fond);
    --card: var(--sb-card); --surface: var(--sb-hover); --surface-2: var(--sb-hover);
    --ap-label: var(--sb-ink); --ap-label-2: var(--sb-mute); --ap-label-3: var(--sb-faint);
    --ap-fill: var(--sb-selectie); --ap-fill-2: var(--sb-hover-tare);
    --ap-fill-3: var(--sb-hover-tare); --ap-fill-4: var(--sb-hover);
    --ap-glyph: var(--sb-glifa); --ap-selection-row: var(--sb-selectie);
    color: var(--ink); color-scheme: dark;
    --lat-marca: 30px;
    position: relative; z-index: 1; justify-content: flex-start;
    padding: 0 calc(var(--ap-toolbar-pad) + var(--ap-toolbar-item)) 0 calc((var(--lat-sina) - var(--lat-marca)) / 2);
  }
  .company:has(.brand-mark) { --lat-marca: 34px; }
  .company:has(.client-logo) { --lat-marca: var(--ap-toolbar-item); }
  .company-toggle {
    position: absolute; top: 0; bottom: 0; right: var(--ap-toolbar-pad); margin-block: auto;
  }
  .side-collapsed .company { padding-right: 0; }
  .side-collapsed .client-logo { width: var(--ap-toolbar-item); }
  .side-collapsed .company-toggle {
    height: var(--ap-toolbar-item); border-radius: var(--r-sm); opacity: 0;
  }
  .side-collapsed .company:hover .company-toggle,
  .side-collapsed .company-toggle:focus-visible { opacity: 1; }
  .side-collapsed .company:hover .brand,
  .side-collapsed .company:has(.company-toggle:focus-visible) .brand { visibility: hidden; }
  .company::after, .sidebar::after {
    content: ""; position: absolute; left: 100%; width: var(--r); height: var(--r);
    pointer-events: none;
  }
  .company::after {
    top: 0;
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - .5px), var(--fond-sidebar) var(--r));
  }
  .sidebar::after {
    bottom: 0;
    background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--fond-sidebar) var(--r));
  }

  /* Peste conținut ies panoul magazinului, balonul și colțul rotunjit; bara
     însăși nu acoperă nimic, stă în coloana ei. */
  .sidebar { z-index: 21; }
  .side-collapsed .side-scroll { scrollbar-width: none; }
  .side-collapsed .side-scroll::-webkit-scrollbar { display: none; }
  .side-collapsed .side-cauta {
    border-radius: var(--r-sm); background: transparent;
    box-shadow: inset 0 1px 0 transparent, inset 0 0 0 1px transparent;
  }
  .side-collapsed .side-cauta:hover { background: var(--ap-fill-4); }
  /* Numele se sting, dar își țin locul (de-aia nu `display: none`: n-ar mai
     avea din ce să se stingă). `visibility` le scoate și de sub mouse —
     textul companiei și al magazinului ar trece, nevăzut, peste conținut. */
  .side-collapsed .side-cauta > :not(.ic),
  .side-collapsed .side-link > span:not(.side-num),
  .side-collapsed .side-cont-text,
  .side-collapsed .company .brand-txt,
  .side-collapsed .side-foot > .side-ver { opacity: 0; visibility: hidden; }
  /* Bulina stă pe colțul de jos al iconiței, lipită de marginea șinei, ca în
     Shopify: o cifră lungă crește spre iconiță, nu iese din șină. Aici e
     deschisă la culoare, cu inelul fondului: stă peste glifă. */
  .side-collapsed .side-link > .side-num {
    right: calc(-1 * var(--s-6)); transform: translateY(0);
    min-width: 14px; height: 14px; padding: 0 var(--s1);
    border-radius: var(--r-pill); background: var(--sb-glifa); color: var(--sb-fond);
    font-size: var(--t-2xs); line-height: var(--il-2xs);
    box-shadow: 0 0 0 2px var(--fond-sidebar);
  }
  /* Titlul secțiunii își ține înălțimea (iconițele nu sar), dar se vede doar
     ca linie; rămâne în pagină pentru `aria-labelledby`. */
  .side-collapsed .side-label { color: transparent; }
  .side-collapsed .side-label::before { opacity: 1; }
  .side-collapsed .side-sub { height: 0; opacity: 0; visibility: hidden; }
  .side-collapsed .side-foot-rand { flex-direction: column; align-items: stretch; gap: 0; }
  .side-collapsed .side-foot-rand > * { flex: none; }
  .side-collapsed .side-cont-buton { min-height: var(--ap-sidebar-row-md); }
  .side-collapsed .side-cont-panou {
    left: calc(100% + var(--s3) + var(--s2)); right: auto; bottom: 0; width: 288px;
  }
  .side-collapsed .sidebar [data-tip]:hover::after { content: none; }

  /* Mișcarea dintre bara întreagă și șină. Stă toată sub `html.side-anim`,
     pe care `app.js` îl pune doar la apăsarea omului și îl scoate după
     `--durata-2` + `--durata-1`: la încărcarea paginii, la trecerea peste
     1024px și pentru cine a cerut sistemului mai puțină mișcare, nimic nu se
     mișcă. Coloana se lărgește / se îngustează în `--durata-2`; numele se
     sting întâi (`--durata-1`) când se strânge și se aprind abia după
     (`--durata-1` întârziere) când se deschide, ca textul să nu fie văzut
     tăiat. Piciorul își schimbă așezarea (rând ↔ coloană) cât e stins. */
  html.side-anim .app-head,
  html.side-anim .app-frame { transition: grid-template-columns var(--durata-2) var(--curba); }
  html.side-anim :is(.side-link > span:not(.side-num), .side-cauta > :not(.ic),
    .side-cont-text, .company .brand-txt, .side-foot > .side-ver) {
    transition: opacity var(--durata-1) var(--curba) var(--durata-1), visibility var(--durata-2);
  }
  html.side-anim.side-collapsed :is(.side-link > span:not(.side-num), .side-cauta > :not(.ic),
    .side-cont-text, .company .brand-txt, .side-foot > .side-ver) {
    transition: opacity var(--durata-1) var(--curba), visibility var(--durata-2);
  }
  html.side-anim :is(.side-link > span:not(.side-num), .side-cauta > span, .side-cont-text > *,
    .company .brand-txt > *, .side-sub) { text-overflow: clip; }
  html.side-anim .side-label {
    transition: color var(--durata-1) var(--curba) var(--durata-1);
  }
  html.side-anim .side-label::before { transition: opacity var(--durata-1) var(--curba); }
  html.side-anim.side-collapsed .side-label { transition: color var(--durata-1) var(--curba); }
  html.side-anim.side-collapsed .side-label::before {
    transition: opacity var(--durata-1) var(--curba) var(--durata-1);
  }
  html.side-anim .side-sub {
    transition: height var(--durata-2) var(--curba),
      opacity var(--durata-1) var(--curba) var(--durata-1), visibility var(--durata-2);
  }
  /* La strângere sub-rândul iese din Tab odată cu opacitatea (`--durata-1`),
     nu la capătul înălțimii: un link stins nu mai primește focus. */
  html.side-anim.side-collapsed .side-sub {
    transition: height var(--durata-2) var(--curba),
      opacity var(--durata-1) var(--curba), visibility var(--durata-1);
  }
  html.side-anim .side-cauta {
    transition: background var(--durata-2) var(--curba), box-shadow var(--durata-2) var(--curba),
      border-radius var(--durata-2) var(--curba);
  }
  html.side-anim .side-link > .side-num {
    transition: right var(--durata-2) var(--curba), transform var(--durata-2) var(--curba),
      min-width var(--durata-2) var(--curba), height var(--durata-2) var(--curba),
      padding var(--durata-2) var(--curba), border-radius var(--durata-2) var(--curba),
      background var(--durata-2) var(--curba), color var(--durata-2) var(--curba),
      font-size var(--durata-2) var(--curba), line-height var(--durata-2) var(--curba),
      box-shadow var(--durata-2) var(--curba);
  }
  html.side-anim .side-cont-buton { transition: min-height var(--durata-2) var(--curba); }
  html.side-anim .client-logo { transition: width var(--durata-2) var(--curba); }
  /* Apăsat din bara întreagă, butonul alunecă spre șină sub mouse-ul care
     stă pe loc: marca se ascunde sub el abia dacă mouse-ul a rămas pe șină
     și după ce mișcarea s-a terminat, nu clipește la apăsare. */
  html.side-anim.side-collapsed .company .brand { transition: visibility 0s var(--durata-2); }
  html.side-anim .company-toggle {
    transition: height var(--durata-2) var(--curba), border-radius var(--durata-2) var(--curba),
      opacity var(--durata-1) var(--curba) var(--durata-1);
  }
  html.side-anim.side-collapsed .company-toggle {
    transition: height var(--durata-2) var(--curba), border-radius var(--durata-2) var(--curba),
      opacity var(--durata-1) var(--curba);
  }
  html.side-anim .side-foot { animation: picior-deschis var(--durata-2) var(--curba); }
  html.side-anim.side-collapsed .side-foot { animation: picior-strans var(--durata-2) var(--curba); }
  @supports (transition-behavior: allow-discrete) {
    html.side-anim .side-foot-rand {
      transition: flex-direction 0s var(--durata-1) allow-discrete,
        align-items 0s var(--durata-1) allow-discrete, gap 0s var(--durata-1);
    }
    html.side-anim .side-foot-rand > * { transition: flex 0s var(--durata-1); }
  }
}
/* Două nume pentru aceeași mișcare, ca fiecare apăsare să pornească animația
   din nou, chiar și apăsată a doua oară în timp ce prima încă rulează. */
@keyframes picior-strans { 0% { opacity: 1; } 35%, 60% { opacity: 0; } 100% { opacity: 1; } }
@keyframes picior-deschis { 0% { opacity: 1; } 35%, 60% { opacity: 0; } 100% { opacity: 1; } }
/* Pe ecran fără mouse butonul de extins nu are cum să apară la trecere: stă
   mereu în locul mărcii. */
@media (min-width: 1024px) and (hover: none) {
  .side-collapsed .company-toggle { opacity: 1; }
  .side-collapsed .company .brand { visibility: hidden; }
}

/* Legătura care stă ÎNTR-O PROPOZIȚIE.
   Regula de deasupra e bună pentru cele 26 de ancore care sunt deja butoane,
   pastile sau rânduri întregi: ele își poartă forma singure, iar o subliniere
   peste un buton e zgomot. E greșită pentru cele care stau în text curgător.
   Măsurat pe `/contabilitate`, „Încarcă borderoul": culoare rgb(24,24,27) —
   aceeași cu proza din jur —, greutate 400 ca proza, 14px ca proza, subliniere
   `none`, iar `<a>` gol n-are nici măcar `:hover`. Nu e o legătură discretă,
   e una invizibilă: singurul fel în care o găsești e să treci din greșeală
   peste ea.

   De ce nu se rezolvă cu o culoare. Vocabularul de mai sus spune limpede:
   cerneala = o acțiune de acum, roșul = ceva e greșit sau nu se mai poate
   întoarce. O legătură ESTE o acțiune, deci cerneala e deja culoarea corectă —
   n-are unde să urce. Iar roșul mărcii pe cel mai obișnuit lucru de pe ecran ar
   repeta exact greșeala scrisă mai sus, cu cele 36 de inele roșii într-o tură.
   Pe deasupra, WCAG 1.4.1 nu primește culoarea ca semn unic. Deci semnul e linia.

   De ce NU primește `min-height: var(--tinta-min)`, deși are 17px.
   Ăsta e defectul pe care l-am scris eu greșit: am măsurat cutia (113,3×17) și
   am numit „țintă sub prag" ceea ce e de fapt „legătură fără chip". WCAG 2.5.8
   scutește anume ținta dintr-o propoziție, a cărei înălțime e dată de rândul
   textului din jur — aici rândul e 21px, iar 17 e litera din el. `inline-flex`
   plus `min-height` ar face un buton parcat la mijloc de frază, i-ar ridica
   rândul cu 3px peste vecini, l-ar opri să mai treacă pe rândul următor la
   390px — și tot invizibil ar rămâne. Se repară ce doare, nu ce se măsoară ușor.

   De ce NU e o clasă, deși aici a stat o clasă o zi.
   Prima variantă a fost `.leg`, cu nota „clasa se pune în șablon, numele e al
   meu". Am comis regula, și pe urmă am măsurat din nou: „Încarcă borderoul" era
   tot 1:1, la toate trei lățimile. Firește — șabloanele nu sunt ale mele, nimeni
   nu pusese clasa, iar `grep 'class=\"leg\"' app/templates/` dădea zero fișiere.
   Scrisesem o regulă care nu se potrivea cu nimic și-i spusesem reparație. O
   reparație care are nevoie de mâna altcuiva ca să existe nu e reparată, e
   promisă.

   Structura știe deja răspunsul. „Legătură din proză" nu e un lucru pe care-l
   hotărăște cineva punând o clasă — e un lucru care se vede din unde stă: într-un
   paragraf. Măsurat pe toate cele opt ecrane care extind `base.html`, `p > a`
   dă patru ancore, toate la fel: fundal `—`, chenar 0, umplutură 0px, și text
   propriu în părinte lângă ele. Niciun buton, nicio pastilă, nicio excepție. Cu
   `p > a` regula se scrie o dată și ține și pentru al cincilea paragraf, care
   n-a fost scris încă.

   `.leg` rămâne alături, ca nume: dacă Annie a apucat să-l pună într-un șablon
   cât am măsurat eu, funcționează în continuare. O clasă care nu se potrivește
   cu nimic nu costă nimic; una care dispare de sub un șablon costă o dimineață.

   Cine se vindecă: `/contabilitate` (borderoul, 1:1), `/retururi` (două
   telefoane, 1,34:1 — cifra e a lui Annie, verificată la virgulă), `/intrare`
   (CN/D din subsol, 1:1). `.retur-card .mut a` are culoarea lui (`--ink-2`) și
   o păstrează la `:hover`, fiindcă e deja cerneala mai închisă — n-are unde
   urca; linia i-o dă tot regula asta, prin `p > a`. */
p > a, .leg, .banner a { text-decoration: underline; }
p > a:hover, .leg:hover, .banner a:hover { color: var(--ink-strong); }

/* Bara de unelte (components-spec §7): 52 înaltă, pad 8, gol 8. Marca și
   drumurile dintre ecrane sunt în bara laterală; aici stau numele ecranului
   (când titlul mare a ieșit de sub bară), prospețimea datelor și sesiunea.

   Fondul e „scroll edge effect”-ul kitului: fereastra la 85% + blur 6 + o
   linie de 0,67px negru 5% — conținutul se stinge sub bară în loc să fie tăiat
   de un chenar. În 08.2026 aici fusese scoasă o sticlă mai grea (alb 85% +
   blur 14 + saturate 180%), cu vorba lui Gabriel „Nu avem nevoie de glass”.
   Cererea din 21.09.2026 („ca și cum ar fi făcută de Apple pentru macOS 27”)
   o aduce înapoi în forma măsurată a kitului; e notată în raport ca hotărâre
   reversibilă: `--fond-bara: var(--bg)` și `--filtru-bara: none` o sting. */
.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--ap-toolbar-gap); min-height: var(--h-rand-antet); padding: var(--ap-toolbar-pad);
  background: var(--fond-bara);
  -webkit-backdrop-filter: var(--filtru-bara); backdrop-filter: var(--filtru-bara);
  box-shadow: var(--umbra-muchie);
}
/* Titlul din bară: Bold 15/20 (§7, fereastră cu bară laterală). */
.top-title {
  flex: 0 1 auto; min-width: 0; padding: 0 var(--s2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-t3); line-height: var(--il-t3); font-weight: 700; color: var(--ink);
}
.top > * { min-width: 0; }
.brand { display: flex; align-items: center; gap: var(--s2);
         min-height: var(--tinta-min); }
.client-logo {
  width: 52px; height: 36px; object-fit: contain; flex: none;
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt b { font-weight: 600; font-size: var(--t-base); }
.brand-sub { font-size: var(--t-xs); color: var(--mute); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--marca); flex: none; }
.top-actions { display: flex; flex-wrap: wrap; align-items: center;
               justify-content: flex-end; gap: var(--s2); margin-left: auto; }

/* Când cele două grupuri nu mai încap, acțiunile coboară — conexiunile rămân
   primul lucru din antet, în aceeași ordine ca pe monitorul mare. */
@media (max-width: 1560px) {
  .top-actions { flex: 1 1 720px; }
}
@media (max-width: 720px) {
  .top { padding: var(--s2) var(--s3); }
  main { padding: var(--s3); }
  /* Pe telefon cele două capete ale subsolului ar sta la marginile ecranului,
     departe unul de altul, ca și cum ar fi două lucruri fără legătură. Puse
     unul sub altul, la stânga, se citesc ca ce sunt: o singură notă de subsol. */
  .jos { padding: var(--s4) var(--s3) var(--s6); justify-content: flex-start;
         gap: var(--s1) var(--s4); }
  /* Pe telefon filele nu mai încap toate. Cad două lucruri, în ordinea asta:
     eticheta „ÎN CURÂND” (magazinul rămâne la vedere, doar fără explicație) și
     marginea dreaptă se stinge, ca să se vadă că șirul continuă — altfel un tab
     tăiat la jumătate arată ca o greșeală, nu ca ceva de tras cu degetul. */
  .soon-tag { display: none; }
  .shops { -webkit-mask-image: linear-gradient(to right, var(--tus) calc(100% - 20px), transparent);
                   mask-image: linear-gradient(to right, var(--tus) calc(100% - 20px), transparent); }
}

/* Ultimul prag: telefonul ținut în mână. Butoanele din antet cădeau fiecare pe
   rândul lui, împinse la dreapta, de lățimi diferite — o scară strâmbă din trei
   trepte, în care nicio margine nu se alinia cu alta. Aici rândul de stare stă
   singur, iar cele două butoane împart lățimea în două: două ținte egale pentru
   deget, aliniate exact cu marginile ecranului. */
@media (max-width: 560px) {
  /* Antetul nu mai stă lipit pe telefon.

     Un rând de comandă nu e rând pe telefon, e cartonaș: 609,5px, adică 72%
     dintr-un ecran de 844. Nu din întâmplare — blocul de la `max-width: 720px`
     a strâns dinadins golurile dintre celule „ca să încapă o comandă întreagă
     pe un ecran". Promisiunea aia era ruptă de aici: antetul lipit ține 274,5px
     de tavan (28 mediul + 246,5 antetul), iar 274,5 + 609,5 = 884 într-o
     fereastră de 844. Lipseau 39,5px. Nu „se vedea prost un cartonaș" — nu
     exista NICIO poziție de derulare din care să se vadă unul întreg. Măsurat
     aducând cartonașul de mijloc fix sub tavan și citind unde-i cad poalele:
     274 → 883,5, deci pe dinafară.
     Nelipit, tavanul cade la 28px: cartonașul stă de la 28 la 637,5, întreg,
     cu 206px de rezervă. La 390 se trece de la zero comenzi întregi pe ecran
     la una.

     Ce se pierde, spus pe față: filele de magazin și butoanele din antet pleacă
     de pe ecran când derulezi. Se întorc cu o mișcare a degetului în sus. Am
     încercat să le păstrez — antetul nelipit, dar `nav.shops` prins singur cu
     `position: sticky`. Nu ține: un element lipit e mărginit de cutia
     părintelui, iar `.top` are 246,5px, deci filele pleacă odată cu el.
     Măsurat, nu presupus: după derulare ajung la `top: -378`. Ca să rămână
     numai filele prinse trebuie despicat `base.html`, ca filele să nu mai stea
     în cutia antetului — șablon, deci nu e al meu. Dacă se face vreodată, se
     scoate regula asta și se pune acolo; e o singură declarație.

     De ce 560 și nu 720: la 720 fereastra e înaltă și cartonașul încape și azi
     (823,5 din 1024) — n-are ce repara. La 560 încape, dar cu 7px de joc: o
     adresă care se rupe pe încă un rând îl scoate afară. Peste 560 nu se mișcă
     nimic, și asta e măsurat, cu regula asta cu tot, nu cu o suprascriere
     globală: 1440 → 143,5px de tavan înainte și după, 1024 → 143,5, 720 →
     214,5. Identice la zecime. */
  .top { position: static; }
  .top-actions { justify-content: flex-start; row-gap: var(--s2); }
  /* Cine e la ecran și în ce stare e poarta urcă lângă celelalte semne de stare;
     rândul de „actualizat” ține toată lățimea, deci butoanele rămân singure pe
     ultimul rând și îl umplu pe tot. */
  .top-actions .status.warn, .top-actions .me { order: -1; }
  /* Numai ceasul ia rândul întreg. Regula era scrisă pe `.status.live`, care
     de la pastilele punții încoace înseamnă patru elemente, nu unul: două
     pastile de câte două litere ar fi luat câte un rând întreg fiecare pe
     telefon, adică antetul ar fi crescut cu două rânduri ca să scrie „WA RO”. */
  .top-actions #live { flex: 0 0 100%; }
  .top-actions > .btn { flex: 1; }
  /* Dunga despărțitoare n-are ce despărți la începutul unui rând nou. */
  .top-actions .sepv { display: none; }
}

.status { font-size: var(--t-sm); color: var(--mute); }
/* Legăturile cu afară, ca un șir de aplicații: sigla spune cine e, bulina de
   sub colțul ei spune cum îi merge. Verde legat, chihlimbar în așteptare,
   roșu picat — și gri cât nu se știe, fiindcă lecția din 11.08.2026 rămâne:
   tăcerea nu se desenează niciodată ca o cădere. Rândul nu mai poate fi gol
   (siglele sunt în șablon, nu scrise de JS), deci vechiul `#status:empty`
   n-are ce ascunde și a plecat. */
.svc-row { display: inline-flex; align-items: center; gap: var(--s3); }
.svc { position: relative; display: inline-flex; align-items: center; gap: var(--s1); }
.svc-ic { width: 20px; height: 20px; border-radius: var(--r-xs); flex: none;
          overflow: hidden; }
/* Toate siglele sunt fișiere SVG oficiale din `static/marci/`, desenate deja
   pe fundalul lor de marcă — tila doar le taie colțurile. */
.svc-ic img { width: 100%; height: 100%; display: block; }
/* Bulina stă pe colțul siglei, cu un inel în culoarea antetului, ca să se
   citească pe orice tile. `left`, nu `right`: codul pieței (RO/HU) poate sta
   după siglă, iar bulina rămâne ancorată de tile, nu de capătul rândului. */
.svc-dot { position: absolute; left: 14px; bottom: -2px; width: 8px; height: 8px;
           border-radius: 50%; background: var(--faint);
           box-shadow: 0 0 0 2px var(--card); }
.svc.ok .svc-dot { background: var(--ok); }
.svc.stale .svc-dot { background: var(--warn); }
.svc.bad .svc-dot { background: var(--err); }
/* Picat: sigla însăși pălește, nu doar bulina — de peste umăr, din depozit,
   un punct roșu de 9px e ușor de ratat; un tile stins nu e. */
.svc.bad .svc-ic { filter: grayscale(1); opacity: .55; }
.svc-tag { font-size: var(--t-2xs); font-weight: 600;
           color: var(--mute); }
/* Semnul că poarta cu cod e deschisă. Discret, dar nu invizibil: cine se uită
   la ecran trebuie să vadă că apăsările nu se scriu pe niciun nume. */
.status.warn { padding: var(--s1) var(--s2); border-radius: var(--r-pill); background: var(--warn-bg);
               color: var(--warn-ink); font-weight: 500; }

/* Filele de magazin. Depozitul e unul, magazinele sunt mai multe — de aici se
   alege pentru care se lucrează acum. */
.shops { display: flex; align-items: center; gap: var(--s1); padding: var(--s-tip);
         background: var(--ap-ctl-bg); border-radius: var(--r-camp-mare);
         max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* Sub 1560px filele coboară pe rândul lor cu `flex-basis: 100%` (vezi pragurile
   de mai sus). Asta rupea rândul, dar întindea și cutia: patru file late cât
   620px stăteau într-un dreptunghi cenușiu de 1370, adică cel mai greu obiect de
   pe ecran era fundalul unui grup de patru butoane — mai greu decât tabelul de
   comenzi de dedesubt. `max-width` se aplică după ce flexbox a împărțit rândul,
   deci ruptura rămâne și cenușiul se strânge pe file.
   Regula stă aici, sub cea de bază, nu sus lângă praguri: acolo ar fi fost
   scrisă înaintea lui `max-width: 100%` și pierdută la egalitate de specificitate.
   Marginea de jos a intervalului e 721px fiindcă sub ea filele sunt mai late
   decât ecranul: acolo cutia trebuie să rămână la 100%, ca șirul să se poată
   trage cu degetul. */
@media (min-width: 721px) and (max-width: 1560px) {
  .shops { max-width: max-content; }
}
.shops::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-ctl); padding: 0 var(--s-10);
       border-radius: var(--r-camp); font-size: var(--t-md); font-weight: 500; color: var(--mute); white-space: nowrap;
       transition: background var(--durata-1), color var(--durata-1); }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--ap-seg-raised); color: var(--ink);
          box-shadow: var(--umbra-segment); }
.tab .n { font-size: var(--t-xs); opacity: .55; font-variant-numeric: tabular-nums; }
.tab .emoji { width: auto; font-size: var(--t-md); }
.tab.soon { color: var(--faint); cursor: default; }
.soon-tag { font-size: var(--t-2xs);
            background: var(--line); color: var(--mute); padding: var(--s-tip) var(--s1); border-radius: var(--r-xs); }
/* Căutarea trece prin toate magazinele — cât ține, filele nu mai decid nimic. */
.shops.muted .tab { opacity: .4; pointer-events: none; }

main { width: 100%; max-width: 1560px; margin: 0 auto; padding: var(--s5); flex: 1; }

/* ── cât se așteaptă ────────────────────────────────────────────────────────
   Două semne pentru același lucru, la două distanțe de ochi.

   Bara de sus e pentru orice apăsare care schimbă pagina: subțire cât o linie,
   în roșul casei, sus de tot unde nu acoperă nimic. Nu e o animație de dragul
   animației — e singurul răspuns pe care-l primește o legătură apăsată pe un
   telefon lent, unde între apăsare și pagina nouă trec secunde bune.

   Scheletul e pentru tabel: aceleași coloane, aceeași înălțime de rând, fără
   cuvinte. Sclipirea trece o dată la secundă și jumătate, destul cât să se vadă
   că lucrează, prea încet cât să distragă pe cineva care are treabă. */
#bara {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 200; opacity: 0; pointer-events: none;
  transition: width var(--durata-2) var(--curba), opacity var(--durata-2) var(--curba);
}
#bara.merge { opacity: 1; }

.sk-bar {
  display: block; height: 9px; border-radius: var(--r-xs);
  background: var(--surface); position: relative; overflow: hidden;
}
.sk-bar + .sk-bar { margin-top: var(--sk-gap, 7px); }
/* Barele sunt blocuri cu lățime în procente, deci `text-align` nu le mișcă:
   marginea automată e cea care le duce unde stă textul adevărat al coloanei. */
.sk-rand td.r .sk-bar { margin-left: auto; }
.sk-rand td.c .sk-bar { margin-inline: auto; }
.sk-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--card) 55%, transparent);
  transform: translateX(-100%); animation: sclipeste 1.5s ease-in-out infinite;
}
@keyframes sclipeste { to { transform: translateX(100%); } }

/* Cifrele care încă n-au ajuns din urmă tabelul. Nu le ascundem — ochiul ar
   pierde locul; le stingem cât să nu mai fie afirmații. */
.sk-sters { opacity: .35; transition: opacity var(--durata-2) var(--curba); }

/* Cine a cerut mai puțină mișcare primește tot forma listei, doar fără sclipire:
   informația e în așezare, nu în animație. */
@media (prefers-reduced-motion: reduce) {
  .sk-bar::after { animation: none; }
  #bara { transition: opacity var(--durata-2) var(--curba); }
}

/* iconițe
   Desenul lor stă o singură dată în pagină, în sprite-ul de la începutul
   `<body>`; aici e doar cum arată linia. Culoarea și grosimea se scriu pe
   `<svg>` fiindcă se moștenesc înăuntru, la desenul împrumutat — altfel ar
   trebui repetate pe fiecare dintre cele câteva mii de iconițe ale listei. */
.ic { fill: currentColor; stroke: none; flex: none; }
/* Setul e Phosphor „regular” (22.09.2026; înainte Lucide, trasat cu 1,8 px):
   desenele sunt umplute, grosimea liniei stă în desen, nu aici — deci nicio
   regulă de `stroke`, și nicio excepție pentru siglele de marcă, care erau
   singurele umplute înainte. Culoarea e a textului de lângă, prin `currentColor`. */
.ic-sprite { display: none; }

/* subsol
   Aceeași lățime și aceeași margine ca `main`, ca să cadă exact sub conținut,
   nu pe alt ax. Fără linie de despărțire deasupra: n-are nevoie să fie separat
   de nimic, e destul de șters cât să nu ceară atenție. Se vede doar când
   ajungi jos, adică fix atunci când îl cauți. */
.jos {
  max-width: 1560px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  align-items: baseline; justify-content: space-between;
  font-size: var(--t-xs); color: var(--mute);
}
.jos-rovynt a { color: var(--mute); text-decoration: underline; font-weight: 600; padding: var(--s2) 0; }
/* „ROVYNT" din subsolul din `base.html`, pe toate cele opt ecrane este `--mute` pe proză `--mute`: 1:1, adică
   litera identică cu textul de lângă ea, iar singurul semn că e o legătură
   apărea la `:hover` — un semn pe care telefonul nu-l are niciodată.
   Greutatea 500 față de 400 nu ține loc de semn: se vede pe două cuvinte
   alăturate, nu pe unul singur dintr-un rând. Linia trece la starea de
   repaus; `:hover` rămâne ce era, doar cerneala care se închide. */
.jos-rovynt a:hover { color: var(--ink-2); }

/* Legătura din subsol, măsurată 28×13px: sub minimul AA de 24 (WCAG 2.5.8).
   E singura țintă mică rămasă după `.ord`, `.line` și `tel:`. Stă în `base.html`,
   deci pe toate cele opt șabloane care-l extind: `index`, `comenzi` (`order`),
   `echipa`, `retururi`, `incasari`, `contabilitate`, `perioada`, `tura`. O dată
   aici, sau de opt ori. (Ecranele de dinaintea contului — `intrare`, `blocat`,
   `inceput`, `eroare` — sunt de sine stătătoare și n-au subsol deloc.)

   **Nu** cu tiparul lui `.ord` (`inline-flex` + `min-height`), și ăsta e miezul:
   `.jos` aliniază pe **baseline** (rândul 385). Un `inline-flex` înalt de 24px
   își duce baseline-ul în altă parte decât textul din care face parte, așa că
   „Dezvoltat de" și „ROVYNT" ar sări unul față de celălalt, și odată cu ele
   versiunea din capătul opus al rândului. Ținta reparată, subsolul strâmb.

   Umplutura pe verticală, pe o cutie **inline**, mărește cutia de apăsat fără
   să atingă înălțimea rândului: 13 + 8 + 8 = 29px de apăsat, zero pixeli mutați
   în pagină. Deasupra și dedesubt sunt peste patru mii de pixeli de gol, deci
   n-are ce acoperi. Dacă cineva schimbă vreodată `.jos` din `baseline` în
   `center`, tiparul lui `.ord` redevine bun aici — până atunci, nu. */

/* butoane */
/* Treptele din L8, cu forma din components-spec §5: Bordered (implicit) e o
   umplere de negru 8% fără chenar, Prominent e accentul plin, Borderless
   (`.ghost`) n-are fond și scrie în accent. Mărimea e Large — 28, capsulă,
   pad 16; `.sm` e Regular — 24, rază 6. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--h-ctl); padding: 0 var(--s4); border: 0; border-radius: var(--r-pill);
  background: var(--ap-ctl-bg); color: var(--ink); font: inherit; font-weight: 500;
  line-height: var(--il-md);
  cursor: pointer; white-space: nowrap; transition: background-color var(--durata-1);
}
.btn:hover { background: var(--ap-ctl-bg-hover); }
.btn:active { background: var(--ap-ctl-bg-active); }
.btn.primary { background: var(--accent-plin); color: var(--pe-accent-plin); }
.btn.primary:hover { background: var(--accent-plin-hover); }
.btn.primary:active { background: var(--accent-dark); }
.btn.ghost { background: transparent; color: var(--accent); padding: 0 var(--s2); }
.btn.ghost:hover { background: var(--ap-fill-3); }
.btn.ghost:active { background: var(--ap-fill); }
.btn.sm { min-height: max(var(--h-ctl-mic), var(--tinta-min)); border-radius: var(--r-xs); font-size: var(--t-md); }
/* Roșu doar pe ce nu se mai poate desface. În toată aplicația există o singură
   apăsare așa — anularea comenzii în Shopify — iar restul lucrurilor grave
   (storno, ștergere de factură) au pereche și rămân butoane obișnuite. De aia
   nu e roșu plin: ar striga mai tare decât „Generează AWB”, care costă bani de
   fiecare dată. Contur și scris roșu, umplut abia la hover, cât să se vadă că
   nu e un buton ca celelalte. */
/* Destructive din kit: roșu 20% cu text roșu — tot nu plin, din același motiv.
   Textul e roșul de insignă (62% + negru), nu roșul curat al kitului, care pe
   fondul lui dă sub 3:1 (derivat din `.ap-badge`). */
.btn.danger { background: var(--err-bg-2); color: var(--err); }
.btn.danger:hover { background: color-mix(in srgb, var(--ap-red) 25%, var(--ap-window)); }
.btn.danger:active { background: color-mix(in srgb, var(--ap-red) var(--ap-tinted-active), var(--ap-window)); }
/* Un buton stins trebuie să arate stins, nu ca o marcă slabă. Transparența
   peste roșul plin dădea un roz spălăcit: „Generează AWB” și „Generează factura”
   arătau ca butoane roșii bolnave, nu ca butoane care nu se pot apăsa încă.
   Cel blocat iese din culoare de tot — se vede dintr-o privire că nu e rândul lui. */
.btn[disabled] {
  cursor: default; background: var(--ap-ctl-bg-disabled);
  color: var(--faint); box-shadow: none;
}
.btn[disabled]:hover { background: var(--ap-ctl-bg-disabled); }

/* Căutarea. Stă deasupra filtrelor fiindcă e primul lucru de care ai nevoie
   când sună un client: el spune un număr, nu o stare. */
/* Capsula de căutare din kit, XLarge (36): alb, margine de negru 5% trasă
   înăuntru, pad 10. */
.searchbar {
  display: flex; align-items: center; gap: var(--s2); height: var(--h-ctl-mare); padding: 0 var(--s-10);
  background: var(--ap-field-bg); border: 0; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--ap-field-border);
  margin-bottom: var(--s3); transition: box-shadow var(--durata-1);
}
/* Două lucruri diferite, de-aia două reguli. Cu mouse-ul, căsuța doar se
   aprinde — asta era și înainte, și e bine. Cu tastatura, se vede semnul, și el
   stă pe toată căsuța, nu pe `input`-ul dinăuntru: conturul unui câmp fără
   chenar propriu ar apărea la 1px de marginea căsuței și ar arăta a greșeală. */
.searchbar:focus-within { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }
.searchbar:has(input:focus-visible) {
  outline: var(--contur-focus); outline-offset: var(--decalaj-focus); }
.searchbar input:focus-visible { outline: none; }
/* Banda de sus a listei de comenzi: drumul înapoi, apoi căutarea. Lățimea căsuței
   se oprește la 420px — cât să încapă placeholderul întreg și un email lung, nu cât
   ține ecranul. O casetă goală de 1400px arată a formular de completat, nu a
   unealtă; în plus ochiul o citea ca pe primul lucru de făcut pe pagină, deși
   primul lucru sunt comenzile de dedesubt. Se scoped pe `.rand-cauta`, fiindcă pe
   contabilitate căutarea e singură pe rând și acolo lățimea plină e corectă. */
.rand-cauta { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s3); }
.rand-cauta .back { flex: none; }
.rand-cauta .searchbar { flex: 1 1 auto; max-width: 420px; margin-bottom: 0; }
.searchbar > svg { flex: none; color: var(--mute); }
.searchbar input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0;
  background: transparent; font: inherit; color: var(--ink);
}
.searchbar input::placeholder { color: var(--mute); }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Butonul care golește căutarea: 22px erau două cifre de mână sub pragul casei.

   Nu e o încălcare WCAG și n-o scriu ca și cum ar fi. Măsurat pe 1440, 1080,
   720 și 390: scutirea de spațiere din 2.5.8 ține la toate patru — cercul de
   24px pus pe mijlocul butonului se oprește la 19px de cutia casetei, când îi
   trebuiau 12, iar altă țintă mică nu e prin preajmă. Sonda e
   `audit/interfata/tinta-cauta.js`; caută «scutirea de spațiere, socotită cum o
   cere norma» — prima variantă măsura distanța dintre CENTRE și dădea răspunsul
   bun din motiv fals.

   Atunci de ce se atinge. Fiindcă `22px` scris de două ori e exact ce brieful
   îmi interzice să înmulțesc, iar numele există deja în `:root`. Schimbarea
   scoate două valori de mână și nu pune niciuna.

   De ce aici DA, când legăturii de 17px de mai sus i s-a spus NU. Acolo motivul
   n-a fost cifra, a fost chipul: o legătură din propoziție n-are cutie a ei,
   înălțimea i-o dă rândul, iar `min-height` ar fi ridicat rândul cu 3px și i-ar
   fi oprit trecerea pe rândul următor la 390px. Butonul ăsta are deja cutie,
   fund, rază și `flex: none` — are chip. Și l-am măsurat înainte să-l cresc:
   bara rămâne 420×40 la 1440 și 358×40 la 390, pagina rămâne 900 și 844, caseta
   dă înapoi 2px din 340, respectiv 278. Zero pixeli mișcați.

   `min-*`, nu `width`/`height`. Cifra nu alege — amândouă dau 24×24 și același
   zero. Alege casa: toate cele șapte folosiri ale pragului sunt `min-height`, și
   min lasă butonul să crească dacă iconița crește vreodată, în loc s-o taie. */
.searchbar .x {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: var(--tinta-min); min-height: var(--tinta-min);
  padding: 0; border: 0; border-radius: 50%;
  background: var(--line); color: var(--ink-2); cursor: pointer;
}
.searchbar .x:hover { background: var(--line-strong); color: var(--ink); }
.searchbar .x[hidden] { display: none; }   /* `display:inline-flex` bate [hidden] */

/* Lucru: acțiunea următoare rămâne lângă titlu; căutarea și scanarea împart
   acum aceeași casetă din bara filtrelor. */
.lucru-head { margin-bottom: var(--s3); }
.lucru-urmatoarea { white-space: nowrap; }
.curier-lucru {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-ctl);
  padding: 0 var(--s3); border: 0; border-radius: var(--r-pill);
  background: var(--ap-ctl-bg); color: var(--ink-2); font-size: var(--t-sm);
  white-space: nowrap;
}
.curier-lucru svg { flex: none; }
.curier-lucru.urgent { background: var(--warn-bg-2); color: var(--warn-ink); }
.poarta-gata {
  margin-bottom: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--info-line); border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--info-bg); color: var(--info-ink);
}
.poarta-gata-cap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--t-sm);
}
.poarta-gata-stare { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; }
.poarta-gata p { margin: var(--s2) 0 0; max-width: 100ch; font-size: var(--t-sm); line-height: var(--il-sm); }
.poarta-gata-cifre {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--info-line);
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.poarta-gata-cifre b { font-size: var(--t-md); }
.cozi-lucru { flex-wrap: nowrap; }
.semnale-lucru {
  display: flex; flex-wrap: wrap; gap: var(--s2); margin: calc(var(--s2) * -1) 0 var(--s3);
}
.filtre-lucru { margin: 0 0 var(--s4); }
.filtre-lucru > summary {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 600;
}
.filtre-lucru > summary::marker { color: var(--mute); }
.filtre-lucru .banda { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s3); }
/* Cât timp cauți, filtrele n-au niciun efect (căutarea trece și prin comenzile
   închise) — se sting, ca să nu pară stricate. */
.filters.muted .chip { opacity: .4; pointer-events: none; }

/* filtre */
/* Butonul de alături se aliniază cu primul rând de file, nu cu mijlocul lor:
   când filele se rup pe două rânduri, „la mijloc” înseamnă plutind între ele,
   agățat de nimic. */
.filters { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s5); }
/* Banda cu filele. Pe ecran lat se rupe pe rânduri ca oricare listă; pe telefon
   (vezi mai jos) devine un singur rând care se trage cu degetul. */
.filters .banda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
                  flex: 1; min-width: 0; }
/* Fila de filtru e butonul Bordered al kitului: capsulă de 28 (6 + 16 + 6), fără
   chenar, pe umplerea de control. Cea aleasă ia accentul plin, ca orice selecție
   din kit — nu cerneala neagră. */
.chip {
  padding: var(--s-6) var(--s3); border-radius: var(--r-pill); border: 0;
  background: var(--ap-ctl-bg); font-size: var(--t-md); line-height: var(--il-md); font-weight: 500;
  color: var(--ink-2); white-space: nowrap;
  transition: background var(--durata-1), color var(--durata-1);
}
.chip:hover { background: var(--ap-ctl-bg-hover); color: var(--ink); }
.chip.on { background: var(--accent-plin); color: var(--pe-accent-plin); }
.chip .n { opacity: .6; margin-left: var(--s1); font-variant-numeric: tabular-nums; }
/* Filtrele goale rămân acolo (mâine au ceva în ele), dar se retrag din prim-plan
   ca ochiul să cadă pe cele cu treabă.

   Singurul loc unde `--faint` a rămas pe text, și dinadins. `.chip` e deja pe
   `--mute`; dacă filtrul gol urcă și el acolo, arată identic cu unul plin, și
   atunci retragerea nu mai există deloc. Măsurat, textul ăsta dă 3,38:1 pe
   bandă, sub pragul de 4,5:1 pentru 13px — dar numărul de lângă el e zero,
   adică tot ce spune e „aici nu e nimic”, iar la `:hover` și la Tab urcă pe
   `--ink` (16,4:1). Alternativa — să se retragă prin altceva decât culoare —
   cere schimbat desenul pastilei, nu un token, deci nu e al fundației.
   Trecut în `DEFECTE.md` ca excepție cu nume, nu lăsat tăcut. */
.chip.zero { color: var(--faint); }
.chip.zero:hover { color: var(--ink); }
/* „De sunat” e coada de lucru a omului de la telefon: se vede și pe fugă. */
.chip.call { background: var(--warn-bg-2); color: var(--warn-ink); }
/* Hover pe o filă colorată = treapta Tinted apăsată a kitului (28%). */
.chip.call:hover { background: color-mix(in srgb, var(--ap-orange) var(--ap-tinted-active), var(--ap-window)); color: var(--warn-ink); }
.chip.call.on { background: var(--warn); color: var(--pe-cerneala); }
.chip.call.zero { background: var(--ap-ctl-bg); color: var(--mute); }
/* Refuzul clientului: roșu, fiindcă din comanda asta nu mai pleacă nimic. Ziua
   bună e ziua fără refuzuri, deci la zero fila se stinge de tot — roșu permanent
   pe bara de sus ar spune, de dimineață, că e ceva rău undeva. */
.chip.bad { background: var(--err-bg-2); color: var(--err); }
.chip.bad:hover { background: color-mix(in srgb, var(--ap-red) var(--ap-tinted-active), var(--ap-window)); color: var(--err); }
.chip.bad.on { background: var(--err); color: var(--pe-cerneala); }
.chip.bad.zero { background: var(--ap-ctl-bg); color: var(--faint); }
.chip.bad.zero:hover { background: var(--ap-ctl-bg-hover); color: var(--ink); }
/* Fila apăsată rămâne apăsată și când nu găsește nimic. „Stins” e semnul pentru
   filele pe care nu le-ai atins, iar el ajungea să bată selecția: apăsai
   „Blocată 0”, tabelul se golea și pe bară nu mai era nimic aprins — ecran gol,
   fără să scrie undeva care filă l-a golit. */
.chip.zero.on { color: var(--pe-accent-plin); }
.chip.call.zero.on { background: var(--warn); border-color: var(--warn); color: var(--pe-cerneala); font-weight: 500; }
.chip.bad.zero.on { background: var(--err); border-color: var(--err); color: var(--pe-cerneala); font-weight: 500; }
.filters .sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--s1); }
.filters > .btn { flex: none; }

/* Filele goale, strânse. Se ascund din CSS, nu din șablon: numărul de pe fiecare
   filă se rescrie din opt în opt secunde, iar clasa `zero` se pune și se scoate
   odată cu el — deci o stare care tocmai a prins o comandă apare singură pe
   bandă, fără reîncărcare. Dacă s-ar fi ascuns din Jinja, cine tocmai a apăsat
   „A refuzat” ar fi văzut comanda ieșind din listă fără să scrie nicăieri unde
   s-a dus. Fila apăsată și cele două de acasă („În lucru”, „Toate”) nu se
   strâng niciodată: din ele se iese înapoi. */
.filters .banda.strans .chip.zero:not(.on):not(.mereu) { display: none; }
.chip.mai { display: inline-flex; align-items: center; gap: var(--s-tip); cursor: pointer;
            background: transparent; border-style: dashed; color: var(--mute); }
.chip.mai:hover { border-style: solid; color: var(--ink-2); }
.chip.mai[hidden] { display: none; }   /* `display:inline-flex` bate [hidden] */
.chip.mai svg { opacity: .7; transition: transform var(--durata-2); }
.banda:not(.strans) .chip.mai svg { transform: rotate(180deg); }

/* Bara de filtre de pe /comenzi: trei întrebări, nu una. „Rămase” lângă „De
   sunat” lângă „Fără factură” pe-un singur rând se adunau (OR) — apăsai cinci
   pastile fără să mai știi ce întrebare pui. „Filtru rămase. Și de sunat. Sunt
   aiurea”, a spus Gabriel despre ecranul vechi. Acum fiecare grup din
   `filtre_grupuri` (`app/filtre.py`) răspunde la o singură întrebare: „Unde e”
   exclude (o comandă stă într-un singur loc, ca filele din `.shops`), restul
   bifează (mai multe deodată, contur în loc de fond plin — ca ochiul să nu le
   confunde cu întrebarea principală). */
.filtre-bara { display: flex; flex-direction: column; gap: var(--s3); }
.filtre-grupuri { display: flex; flex-wrap: wrap; gap: var(--s5); }
.filtru-grup { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.filtru-grup-titlu {
  font-size: var(--t-xs); color: var(--mute); font-weight: 600;
}
.filtru-grup-optiuni { display: flex; flex-wrap: wrap; gap: var(--s1); }
.filtru-grup.unica .filtru-grup-optiuni {
  background: var(--surface); border-radius: var(--r-sm); padding: var(--s1);
}
.filtru-grup .tab.zero { color: var(--faint); }
.filtru-grup .tab.zero:hover { color: var(--ink); }
/* `.chip` de bază n-are cutie proprie (`display:inline-flex`) — o cere doar
   bara asta, pentru `min-height` pe telefon, deci vine îngustă aici și nu pe
   clasa folosită și pe alte ecrane. */
.filtru-grup .chip { display: inline-flex; align-items: center; }
/* Bifă, nu comutator: fondul plin rămâne al taburilor „Unde e” — dacă și
   bifele l-ar purta, ochiul n-ar mai găsi întrebarea principală printre
   răspunsuri. */
.filtru-grup .chip.bifat {
  background: var(--card); border-color: var(--ink); color: var(--ink);
  font-weight: 600;
}

.filtre-rand-jos {
  /* Piața are titlu deasupra acum; doar marginea de jos mai e comună cu
     căutarea și cu caseta de dată. */
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2);
}
.filtre-rand-jos .searchbar { flex: 0 0 clamp(260px, 21vw, 310px); margin: 0; }

/* Bara, citită cu voce tare. Pastilele apăsate nu spuneau nicăieri ce listă
   au făcut împreună; rândul ăsta o spune cu chiar etichetele lor, iar când nu
   e nimic bifat spune regula. Scris cu voce normală, nu ca un avertisment. */
.filtre-citit { margin: 0; font-size: var(--t-md); color: var(--ink-2); }
.filtre-citit-cum { color: var(--mute); }
.filtre-citit a { color: var(--mute); text-decoration: underline; }
.filtre-citit a:hover { color: var(--ink); }

@media (max-width: 720px) {
  /* Pastilele nu se mai înfășoară sub 720px — se scrollează pe orizontală,
     un grup, un rând, cum se derula toată bara veche (și cum se derulează
     `.shops` mai sus). Măsurat pe vremea când munca era un singur grup de
     șapte: cu `flex-wrap:wrap` urca bara la 77,6% dintr-un ecran de 667px.
     Grupurile sunt acum patru și mai scunde, dar regula ține cu atât mai
     mult — patru rânduri înfășurate ar urca bara la loc. Cu scroll pe grup,
     fiecare rămâne un rând cât are el de arătat, la mărimea obișnuită a
     pastilei — fără o a doua treaptă doar pentru telefon. */
  .filtre-grupuri { flex-direction: column; gap: var(--s2); }
  .filtru-grup { width: 100%; }
  .filtru-grup-optiuni {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-block: var(--s-tip);
  }
  .filtru-grup-optiuni::-webkit-scrollbar { display: none; }
  .filtru-grup .tab, .filtru-grup .chip { flex: none; }
  .filtre-rand-jos {
    margin-inline: calc(var(--s3) * -1); padding-inline: var(--s3);
  }
  .filtre-rand-jos .searchbar {
    order: -1; flex-basis: min(320px, calc(100vw - var(--s6)));
  }
}

/* Uneltele de lângă filtre. Nu taie lista de sub ele — una duce pe alt ecran,
   cealaltă schimbă felul în care se citește tabelul — deci nu au ce căuta între
   file. Aliniate cu primul rând de file, nu cu mijlocul lor: când filele se rup
   pe două rânduri, „la mijloc” înseamnă plutind între ele, agățat de nimic. */
.unelte { display: flex; gap: var(--s2); flex: none; }

/* Capătul listei, scris. Nu e o eroare și nu e un avertisment: e marginea de
   jos a paginii, spusă cu voce normală. De aia stă pe gri, nu pe galben. */
.taiat {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2);
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--t-md); color: var(--ink-2);
}
.taiat svg { flex: none; color: var(--faint); align-self: center; }
.taiat b { font-weight: 600; font-variant-numeric: tabular-nums; }
.taiat .sub { color: var(--mute); }
.taiat[hidden] { display: none; }

/* O singură bară pentru toate listele lungi. Numerele sunt ținte pătrate, iar
   selectorul folosește aceleași câmpuri și aceleași tokenuri ca formularele. */
.paginare {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-top: var(--s3); padding: var(--s2) 0;
  color: var(--mute); font-size: var(--t-md);
}
/* Sus rămâne doar propoziția „1–25 din 2863”; controalele stau o singură dată, jos. */
.paginare-sus { margin: 0; padding: 0; border: 0; }
.paginare-sus .paginare-marime, .paginare-sus .paginare-nav { display: none; }
.paginare-rezumat b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.paginare-marime { display: flex; align-items: center; gap: var(--s2); }
.paginare-select { position: relative; display: inline-flex; align-items: center; }
.paginare-select select {
  appearance: none; min-width: calc(var(--s7) * 2); min-height: var(--tinta-min);
  padding: var(--s1) var(--s6) var(--s1) var(--s3);
  border: 0; border-radius: var(--r-camp);
  background: var(--ap-ctl-bg); color: var(--ink); font: inherit; font-weight: 500;
  cursor: pointer; transition: background var(--durata-1), border-color var(--durata-1), box-shadow var(--durata-1);
}
.paginare-select select:hover { background: var(--ap-ctl-bg-hover); }
.paginare-select select:focus { box-shadow: var(--inel); }
.paginare-select select:focus-visible { outline: var(--contur-focus); outline-offset: var(--decalaj-focus); }
.paginare-select svg {
  position: absolute; right: var(--s2); color: var(--mute); pointer-events: none;
}
.paginare-nav { display: flex; align-items: center; gap: var(--s1); }
.pagina-numar, .pagina-sageata {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--h-ctl); min-height: var(--h-ctl); padding: 0 var(--s2);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums;
}
/* Paginarea n-are pagină în kit — derivat din bara de unelte: numerele stau fără
   fond până la hover, săgețile sunt butoane Bordered, pagina curentă ia accentul. */
.pagina-sageata { background: var(--ap-ctl-bg); }
.pagina-numar:hover { background: var(--ap-fill-3); color: var(--ink); }
.pagina-sageata:hover { background: var(--ap-ctl-bg-hover); color: var(--ink); }
.pagina-numar.curenta { background: var(--accent-plin); color: var(--pe-accent-plin); }
.pagina-sageata.oprit { color: var(--faint); background: var(--ap-ctl-bg-disabled); }
.pagina-gol { min-width: var(--tinta-min); text-align: center; }

@media (max-width: 560px) {
  .paginare { align-items: flex-end; }
  .paginare-rezumat { flex: 1 0 auto; }
  .paginare-marime { order: 2; }
  .paginare-nav { order: 3; flex: 1 0 100%; justify-content: space-between; }
}

/* Cele două zile scrise de mână, în capătul benzii de perioade. Stau în aceeași
   bandă cu butoanele fiindcă fac același lucru — aleg o felie de timp — și n-are
   rost să se caute în două locuri.
   Caseta de dată de sistem nu coboară sub ~120px (poartă cu ea „zz.ll.aaaa” și
   iconița de calendar), deci perechea plus cuvintele dintre ele are nevoie de
   vreo 330px. `flex-wrap` pe formular, nu lățime fixă: sub atât se lasă a doua
   pereche pe rândul următor, întreagă, în loc să se strivească amândouă. */
.interval { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.interval label { display: flex; align-items: center; gap: var(--s2);
                  font-size: var(--t-md); color: var(--mute); white-space: nowrap; }
.interval input {
  padding: 0 var(--pad-camp); border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border);
  border-radius: var(--r-camp); font: inherit; font-size: var(--t-md);
  color: var(--ink); background: var(--ap-field-bg);
}
.interval input:focus { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }

/* tabel */
/* Cutia din jurul tabelului. La lățime mare nu face nimic — n-are nici scroll,
   nici chenar propriu — ca să nu taie baloanele de ajutor care ies din ultimul
   rând. Devine cutie adevărată abia sub 1080px, unde tabelul chiar nu încape. */
.tabel { border-radius: var(--r); corner-shape: var(--colt-continuu); }
.grid {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--line-moale); border-radius: var(--r); corner-shape: var(--colt-continuu);
  overflow: hidden;
  /* cifrele din tabel stau una sub alta: sumele și numerele se compară pe coloană */
  font-variant-numeric: tabular-nums;
}
/* Antetul din components-spec §11: 28 înalt, Subheadline Semibold secundar,
   fără majuscule, pe fondul tabelului. */
.grid th {
  text-align: left; font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 600;
  color: var(--mute); height: 28px; padding: 0 var(--s3);
  border-bottom: 1px solid var(--line-moale); background: var(--card);
}
/* `.r` și `.c` se scriau pe capetele de coloană de la început, dar nu făceau
   nimic: `.grid th` de deasupra e mai tare decât o clasă singură, deci le
   rescria la stânga. Așa ajunsese „PLATĂ” la 160px de banii lui, aliniat cu
   marginea din stânga a coloanei în timp ce sumele stăteau la dreapta —
   arăta ca două coloane suprapuse, nu ca una. */
.grid th.r { text-align: right; }
.grid th.c { text-align: center; }
/* Rândurile respiră: fiecare celulă ține 3-4 informații una sub alta, ca să nu
   mai fie nevoie să deschizi comanda pentru lucruri de bază. */
/* 8/12, nu 16/16: rândul e un rând de lucru, nu un cartonaș (L5, 44–52px). */
.grid td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-moale); vertical-align: top; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--ap-fill-5); }
.grid.tight td { padding: var(--s2) var(--s3); font-size: var(--t-md); }
.grid tr.bad td { background: var(--err-bg); }
/* Rândul peste care nu se trece: din borderou, cel care nu se încasează. Nu e
   roșu — nu s-a stricat nimic, doar nu se întâmplă nimic cu el. Se stinge, ca
   ochiul să cadă pe cele care chiar pleacă, și se aprinde la trecerea cu
   mausul, fiindcă tocmai motivul scris în el e ce trebuie citit când cineva se
   întreabă de ce a rămas pe dinafară. */
.grid tr.stins td { opacity: .5; }
.grid tr.stins:hover td { opacity: 1; }
/* Rândul așa cum a venit în fișier, sub explicația de ce n-a fost înțeles.
   Monospace din același motiv ca SKU-ul: se citește cifră cu cifră.

   `line-height` scris aparte, nu din neatenție — din nevoie. Scurtătura `font:`
   de mai jos nu adaugă, ci REINIȚIALIZEAZĂ: tot ce nu e scris în ea se întoarce
   la valoarea de pornire, iar pentru interlinie asta înseamnă `normal`. Adică
   rândul ăsta nu moștenea 1,5 de pe `body`, deși fișierul exact așa se citește.
   Măsurat pe un rând de extras rupt în trei: **14px pe rând, față de 18px cât
   are restul paginii** — 1,167 în loc de 1,5, cu 22% mai strâns, într-un font
   unde toate literele au aceeași lățime și ochiul n-are forma cuvântului de
   care să se agațe. Se vede pe ecranul unde cineva caută de ce un colet n-a
   fost găsit; acolo rândul nu se ghicește dintr-o privire, se silabisește.

   Nu s-a scris `font: 11.5px/1.5 …` fiindcă `11.5px` de acolo nu ajunge
   niciodată pe ecran: în șablon eticheta e `class="sub brut"`, iar `.sub` vine
   patru rânduri mai jos cu `font-size: var(--t-sm)` și aceeași specificitate,
   deci câștigă. Măsurat: 12px, nu 11,5. Cifra moartă a rămas unde era — nu e
   defectul de azi și se scoate separat, cu măsurătoarea ei.

   `1,5` era interlinia paginii când s-a scris regula. Din 21.09 pagina e pe
   Body 13/16 al kitului, dar rândul ăsta rămâne la 1,5: e singurul text din
   aplicație care se silabisește, monospace, rupt pe mai multe rânduri, și
   kitul n-are o treaptă pentru el. Că nu-și mai pierde interlinia se află din
   `teste/proba_interlinie.py`, nu de aici. */
.brut { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
  color: var(--mute); overflow-wrap: anywhere; margin-top: var(--s-tip); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.sub { font-size: var(--t-sm); color: var(--mute); }
.strong { font-weight: 500; }
/* Numărul comenzii e cel mai apăsat lucru din aplicație — și avea 21px pe
   înălțime, sub pragul de 24. `inline-flex` + `min-height` îi dau cutia;
   `align-items` ține textul unde era, la mijloc, ca să nu sară linia de bază
   față de vecinii din același rând. Pe lățime nu se schimbă nimic: rămâne
   element de rând, deci nu umple celula și nu rupe linia după el. */
.ord { display: inline-flex; align-items: center; min-height: var(--tinta-min);
       font-weight: 600; font-size: var(--t-base); white-space: nowrap; }
.ord:hover { color: var(--accent); }
/* Prima coloană e formată numai din bucăți scurte și întregi: numărul comenzii,
   ora și câte bucăți intră în colet. Între 720 și 1080px, unde tabelul stă la
   1040px cu bară proprie, coloana primea ~90px și le rupea pe toate în două —
   „TGO-\n7700”, „2\nbuc”. Un număr de comandă tăiat în două nu se mai citește
   dintr-o privire, iar comanda se caută după el. Restul coloanelor pot rupe
   liniștite: o adresă pe două rânduri e tot o adresă. */
.col-order .line { white-space: nowrap; }
/* Cartonașul gol. Până acum era o propoziție gri singură în mijlocul a două sute
   de pixeli de alb — arăta a ecran nefuncțional, nu a listă care încă n-a început.
   Aici scrie de ce e gol și ce anume îl umple: cine deschide prima oară pagina
   învață din ea cum funcționează, în loc să se întrebe dacă s-a rupt ceva. */
.nimic { display: flex; flex-direction: column; align-items: center; text-align: center;
         gap: var(--s2); padding: var(--s6) var(--s5); color: var(--mute); }
.nimic svg { color: var(--faint); margin-bottom: var(--s1); }
.nimic b { color: var(--ink-2); font-size: var(--t-base); font-weight: 600; }
/* Măsura de citit: un rând de explicație lat cât tot cartonașul se citește de
   două ori, fiindcă ochiul pierde începutul rândului următor. */
.nimic p { margin: 0; font-size: var(--t-md); max-width: 48ch; line-height: var(--il-md); }

/* Blocul vertical dintr-o celulă + rândul orizontal cu iconiță și text.
   Golul e dat de `gap`, nu de margini — de aici venea înghesuiala de la emoji. */
.stack { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.stack.center { align-items: center; }
.stack.right { align-items: flex-end; text-align: right; }
.line { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
/* `.line` e în două feluri: rând de citit și rând de apăsat. Doar cel de apăsat
   capătă înălțimea minimă de țintă — dacă ar lua-o toate, listele s-ar umfla
   fără ca nimeni să câștige ceva. Așa se prind `a.line.doc` (factura) și
   `button.line.sub.linkish` (produsele de pregătit), amândouă la 21px. */
a.line, button.line { min-height: var(--tinta-min); }

/* Telefonul clientului, pe `/retururi`: un `<a href="tel:">` fără nicio clasă,
   măsurat 77,6×16px — sub jumătate din minimul AA de 24 (WCAG 2.5.8). E lucrul
   pe care se apasă ca să fie sunat omul care întreabă de retur, adică exact
   gestul pentru care se deschide ecranul.
   Cârligul e protocolul, nu poziția. `a[href^="tel:"]` spune **ce e** legătura:
   prinde orice număr de telefon pus oriunde de mâine încolo și nu prinde nimic
   altceva. Un selector de forma „orice `<a>` din cardul de retur" ar fi prins și
   ce se adaugă acolo peste o lună, orice ar fi — de-aia pentru numerele de
   comandă s-a cerut o clasă în șablon, iar aici nu e nevoie de niciuna.
   Același tipar ca `.ord`, din același motiv: `inline-flex` + `min-height` dau
   cutia, `align-items` ține textul la mijloc ca linia de bază să nu sară față de
   textul din care face parte. */
a[href^="tel:"] { display: inline-flex; align-items: center;
                  min-height: var(--tinta-min); }

/* Numărul de telefon, oriunde apare — `_telefon.html`. Cutia de apăsat i-o dă
   regula de deasupra, care e mai veche decât el; ce lipsea aici e **semnul** că
   se poate apăsa. `a { color: inherit }` face numărul să arate exact ca textul
   de lângă care stă — bine când se citește o listă, prost când nimeni nu află
   că e o legătură. Se aprinde la trecerea cu mouse-ul, ca `.ord` și `.doc`.
   Numai pe `<a>`: același macro scoate un `<span>` când în căsuța de telefon nu
   e nicio cifră, iar ăla chiar nu duce nicăieri. */
/* Un număr rupt pe două rânduri se citește greșit — și se rupe: în coloana de
   116px de la 1024px lățime, `+36 30 503 9578` cădea în „+36 30 503” / „9578”,
   36px înălțime în loc de 24. Grupele sunt un singur cuvânt, chiar dacă au
   spații în ele. Măsurat: coloana clientului crește 116 → 152px la 1024, pe
   seama adresei de lângă (160 → 146); pagina nu se lățește la nicio măsurătoare
   — 1440, 1024, 390 — fiindcă tabelul redistribuie, nu depășește. */
a.tel { white-space: nowrap; }
a.tel:hover { color: var(--accent); }
a.tel:hover svg { opacity: 1; }
.line.end { justify-content: flex-end; }
.line svg { flex: none; opacity: .5; }
.emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; flex: none; font-size: var(--t-base); line-height: 1;
}
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Cine poartă balon nu taie: `overflow: hidden` pe același element taie și
   balonul, care e copilul lui. Trunchierea coboară pe un copil — iar copilul
   e bloc și când învelișul n-are balon (starea din urmărire fără dată):
   pe o cutie inline `overflow` nu se aplică și textul n-ar mai fi tăiat. */
[data-tip] > .trunc,
.la-detalii > .trunc { display: block; }
.num { font-variant-numeric: tabular-nums; }
.amount { font-size: var(--t-lg); font-weight: 600;
          font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount .cur { font-size: var(--t-sm); font-weight: 500; color: var(--mute); margin-left: 1px; }
/* Bănuții: se văd când îi cauți, nu se bagă în față când cauți ordinul de mărime.
   Mai închiși decât moneda de lângă ei, fiindcă fac parte din cifră — la aceeași
   culoare, „,50 RON” s-ar citi ca un singur cuvânt lipit după număr. */
.amount .zec { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.warn-text { color: var(--warn); }
.doc { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-md); }
.doc:hover { color: var(--accent); }
.doc:hover svg, .doc:hover .emoji { opacity: 1; }

.col-order  { width: 158px; }
.col-who    { width: 190px; max-width: var(--lat-col-max); }
.col-addr   { width: 270px; max-width: var(--lat-col-max); }
.col-pay    { width: 132px; }
.col-confirm{ width: 118px; }
.col-state  { width: 205px; max-width: var(--lat-col-max); }
.col-do     { width: 200px; }

/* Motivul ocupă chiar coloana din care s-ar porni munca. O insignă roșie în
   „Stare” ar spune doar că ceva e rău; aici se văd faptul, proprietarul și
   drumul de rezolvare înaintea butoanelor care n-au voie să fie ghicite. */
.grid tr.poarta-blocata > td { background: var(--err-bg); }
.poarta-motive { display: grid; gap: var(--s2); margin-bottom: var(--s3); text-align: left; }
.poarta-motiv {
  display: flex; align-items: flex-start; gap: var(--s2); min-height: var(--tinta-min);
  padding: var(--s2); border: 1px solid var(--err-line); border-radius: var(--r-sm);
  background: var(--card); color: var(--err-ink); white-space: normal;
}
.poarta-motiv:hover { border-color: var(--err); }
.poarta-motiv svg { flex: none; margin-top: var(--s-tip); }
.poarta-motiv span { min-width: 0; }
.poarta-motiv b, .poarta-motiv small, .poarta-motiv em { display: block; }
.poarta-motiv b { font-size: var(--t-sm); line-height: var(--il-sm); }
.poarta-motiv small { margin-top: var(--s-tip); color: var(--ink-2); font-size: var(--t-xs); line-height: var(--il-xs); }
.poarta-motiv em { margin-top: var(--s1); color: var(--err); font-size: var(--t-xs); font-style: normal; font-weight: 600; }
.poarta-cutoff { color: var(--ink-2); }
/* Cipurile automatizărilor (D1, numai pe conturile gestionate): liniștite cât
   regula doar propune sau așteaptă, pe tonul de avertizare când s-a oprit sau
   cere verificare. */
.automat-cip { color: var(--ink-2); }
.automat-cip.warn { color: var(--warn-ink); }

/* ── lucrul în lot ──────────────────────────────────────────────────────────
   O bară în josul ferestrei, stinsă până se apasă „Lucru în lot”. Coloana de
   bife nu mai e a lui: de la 03.09.2026 e una singură pe tot ecranul,
   `.col-bloc` (vezi blocul „acțiuni în bloc” de la finalul fișierului), citită
   și de bara de lot, și de bara de acțiuni în bloc, și de puntea spre foaia de
   picking. Coloana veche `.col-lot` stătea aici stinsă cu `display: none` și
   se aprindea doar cu clasa `.lot` de pe tabel — iar puntea spre picking citea
   tocmai bifele din ea, adică din coloana pe care operatorul n-o vedea. O
   coloană nevăzută care hotărăște ce se închide nu se repară cu un al doilea
   selector în JavaScript; se scoate.

   Lățimea impusă a tabelului o poartă acum `.grid.bloc` (mai jos), fiindcă
   `.col-bloc` e coloana care chiar ocupă loc pe ecranul de comenzi. */
.lot-bifa { margin: var(--s-tip) 0 0; }
.lot-bifa:disabled { cursor: not-allowed; opacity: .35; }
/* Cât ține lotul pornit, bifa unei comenzi care nu poate intra în el se vede
   stinsă — dar rămâne apăsabilă, fiindcă aceeași bifă slujește și acțiunile în
   bloc, unde tocmai comanda neconfirmată e ținta lui „Marchează confirmată”.
   Motivul stă pe `data-tip`, ca înainte. */
.grid.lot .lot-bifa[data-poate-lot="0"] { opacity: .4; }
/* Rândul bifat se vede și când mâna a plecat de pe el: la douăzeci de comenzi
   într-o listă de două sute, bifa singură de 17px nu ajunge. */
.grid tr.lot-ales > td { background: var(--surface-2); }
/* Dunga o poartă o singură celulă. Pusă pe toate, se rupea în șapte bucăți —
   câte una la stânga fiecărei coloane, adică un tabel vărgat, nu un rând ales. */
.grid tr.lot-ales > td.col-bloc { box-shadow: inset 2px 0 0 var(--accent); }
/* Cât lucrează, rândul își spune starea în locul bifei — trei semne, aceleași
   trei pe care le știe orice buton al casei: lucrez, a mers, n-a mers. */
/* Starea se spune prin dunga din celula bifei, nu prin fundalul rândului
   întreg (fundalul plin e decor de secțiune, nu stare). */
.grid tr.lot-lucru > td.col-bloc { box-shadow: inset 2px 0 0 var(--warn); }
.grid tr.lot-gata > td.col-bloc { box-shadow: inset 2px 0 0 var(--ok); }
.grid tr.lot-rau > td.col-bloc { box-shadow: inset 2px 0 0 var(--err); }

/* Bara stă lipită de marginea de jos a ferestrei, nu sub tabel: lista se
   derulează, iar butonul care apasă pe douăzeci de comenzi n-are voie să fie
   mai jos decât ultima dintre ele. */
.bara-lot {
  position: sticky; bottom: var(--s3); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border: 0; border-radius: var(--r-md); corner-shape: var(--colt-continuu);
  background: var(--fond-plutitor); backdrop-filter: var(--filtru-plutitor); box-shadow: var(--umbra-2);
  font-size: var(--t-md);
}
.bara-lot[hidden] { display: none; }
.bara-lot-butoane { display: flex; align-items: center; gap: var(--s2); }

/* etichete de stare */
.pill {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 20px; padding: 0 var(--s2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 500; white-space: nowrap;
  background: var(--ap-fill-2); color: var(--ink-2);
}
/* Scara stărilor merge într-o singură direcție: neutru (e de lucru) → albastru
   (am făcut noi ceva) → verde (a plecat, s-a terminat). „Gata de AWB” era verde,
   deși nu e nimic terminat acolo — și fiindcă în tură aproape toate comenzile
   trec prin starea aia, ieșeau 36 de pastile verzi care nu spuneau nimic.
   Verdele se plătește scump: se dă doar la capătul drumului. */
/* Aceeași socoteală ca la verde, dusă un pas mai departe. „Adresă verificată” e
   starea prin care trec aproape toate comenzile din tură: pastila ieșea identică
   pe fiecare rând, iar o coloană care scrie același lucru de 60 de ori nu spune
   nimic — doar ocupă ochiul. Cuvintele rămân (cine caută starea o găsește), dar
   își pierd cutia: o pastilă e un obiect care strigă „aici e o stare de citit”,
   și n-are ce striga când starea e „totul e în regulă”. Rămâne căptușeala, ca
   pastilele adevărate de pe rândurile vecine să stea pe aceeași linie. */
.p-READY    { background: transparent; color: var(--mute); font-weight: 400; }
/* Două trepte în aceeași familie, ca la verde: „AWB generat” e hârtia făcută,
   „La noi, așteaptă curierul” e cutia făcută. Albastrul plin e al doilea pas,
   exact cum verdele plin al lui „Livrată” e pasul de după „Expediată” — cine a
   învățat o dată scara o citește și aici, fără s-o mai învețe. Nu verde: mingea
   e încă la noi, iar verdele se dă doar la capătul drumului. */
.p-AWB_DONE { background: var(--info-bg-2); color: var(--info-ink); }
.p-PACKED   { background: var(--info-bg-2); color: var(--info-ink);
              font-weight: 600; box-shadow: inset 0 0 0 1px var(--info-line); }
.p-SHIPPED  { background: var(--ok-bg-2); color: var(--ok-ink); }
/* „Adresă neverificată” lua pastila cenușie din regula de bază, adică exact
   haina stării terminate de alături: lucrul de făcut arăta ca lucrul făcut.
   Sunt stări rare — în tura de acum nu e niciuna, iar când apare una trebuie să
   se vadă din capătul mesei că nu seamănă cu vecinii ei. Excepția adevărată își
   primește culoarea; regula, nu. */
.p-NEW      { background: var(--warn-bg-2); color: var(--warn-ink); }
.p-ISSUE    { background: var(--warn-bg-2); color: var(--warn-ink); }
.p-BLOCKED  { background: var(--err-bg-2); color: var(--err-ink); }
.p-WAITING  { background: var(--warn-bg-2); color: var(--warn-ink); }
/* Ultimele două trepte, după „a plecat”. „Livrată” e verde plin, singurul din
   tot ecranul: e sfârșitul bun al poveștii, iar dacă seamănă cu „a plecat”,
   diferența dintre un colet pe drum și unul ajuns se pierde tocmai la citire.
   „Anulată” nu e roșu — roșul e pentru ce trebuie reparat acum, iar aici nu mai
   e nimic de făcut; e stinsă, ca rândul din listă. */
.p-DELIVERED { background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }
/* Pastila „printată AWB” (1.28.0). Trei trepte, nu două: „neprintată” cere
   atenție la fel de tare ca „printată de două ori” — pe amândouă omul trebuie
   să se uite înainte să dea coletul mai departe —, iar „printată o dată”
   singură e starea liniștită, fără culoare de alarmă. */
.pill-printare-awb.printare-lipsa    { background: var(--warn-bg-2); color: var(--warn-ink); }
.pill-printare-awb.printare-buna     { background: var(--info-bg-2); color: var(--info-ink); }
.pill-printare-awb.printare-multipla { background: var(--err-bg-2);  color: var(--err-ink); font-weight: 600; }
.p-CANCELLED { background: var(--surface); color: var(--mute);
               text-decoration: line-through; }
/* „Închisă în altă parte” n-avea culoare deloc: lua haina de bază a pastilei,
   aceeași cu a stărilor despre care regula de mai sus spune că n-au ce striga.
   Pe un rând deja stins (`tr.s-CLOSED`), asta se citea ca „nu scrie nimic
   aici” — iar cuvintele erau puse pe opt sute de comenzi din nouă sute.
   Acum sunt vreo optzeci, și fiecare e o întrebare fără răspuns: comanda s-a
   închis la ei, fără să fi plecat vreun colet de la noi. Chenarul întrerupt e
   tot ce-i trebuie — nu e o alarmă (n-are cine s-o repare azi), dar nici nu
   are voie să arate ca un loc gol. */
/* „Întoarsă în depozit” e capăt de drum, dar nu unul bun: marfa e înapoi pe
   raft și, dacă era ramburs, factura mai trebuie stornată. Nu e verde — n-a
   ajuns nimic nicăieri — și nu e roșu: nu s-a stricat nimic, doar s-a întors.
   Galbenul e al lucrurilor care mai cer o mână de om, și exact asta cere. */
.p-RETURNED { background: var(--warn-bg-2); color: var(--warn-ink); }
.p-CLOSED   { background: transparent; color: var(--mute);
              border: 1px dashed var(--line-strong); }
.mk {
  display: inline-block; padding: var(--s-tip) var(--s2); border-radius: var(--r-xs);
  font-size: var(--t-xs); font-weight: 600; background: var(--surface); color: var(--ink-2);
}
.mk-HU { background: var(--ok-bg); color: var(--ok-ink); }

/* detaliu */
.back { display: inline-flex; align-items: center; min-height: var(--tinta-min);
        color: var(--mute); font-size: var(--t-md); }
.back:hover { color: var(--ink); }
/* Antetul se rupe pe rânduri când nu încape, dar numărul comenzii nu se rupe
   niciodată în două: „TGO-” pe un rând și „7605” pe altul e exact numărul pe
   care omul îl citește cu voce tare la telefon. */
/* Fiecare coloană e un teanc, nu o celulă. Cu cartonașele puse direct în grilă,
   al treilea cădea sub primul — grila umple rândul de la stânga la dreapta și
   n-are de unde ști că factura ține de expediere, nu de adresă. */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start;
        margin-bottom: var(--s4); }
/* `min-width: 0` pe orice stă direct în grilă, nu doar pe teancuri. O coloană de
   grilă nu se strânge sub cel mai lat lucru dinăuntrul ei decât dacă i se spune
   anume — iar pe pagina echipei, cartonașele stau direct în `.cols`, fără teanc.
   Tastatura dinăuntru e de 300px, deci coloana rămânea de 342 pe un ecran de
   320: pagina întreagă se trăgea cu degetul în lături, la fiecare cont nou. */
.cols > * { min-width: 0; }
/* Ultimul cartonaș din teanc nu mai împinge nimic; marginea lui ar face coloana
   mai lungă decât ce se vede în ea. */
.cols > .col > .card:last-child { margin-bottom: 0; }
.card {
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r); corner-shape: var(--colt-continuu);
  padding: var(--s5); margin-bottom: var(--s4);
}
.card h2 { font-size: var(--t-md); line-height: var(--il-md);
           color: var(--ink); margin: 0 0 var(--s3); font-weight: 700; }
.card .grid { border: 0; border-radius: 0; }

/* Derivat din grupul gri al kitului (§11): fond cu tentă, rază 12, fără chenar. */
.banner { padding: var(--s3) var(--s4); border-radius: var(--r); corner-shape: var(--colt-continuu); margin-bottom: var(--s4); font-size: var(--t-md);
          background: var(--surface); color: var(--ink-2); border: 0; }
.banner.err  { background: var(--err-bg); color: var(--err); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.ok { background: var(--ok-bg); color: var(--ok-ink); }
/* Abonamentul inactiv e o stare a contului, nu o veste nouă pe fiecare ecran:
   o linie subțire sub antet, cu același text și același link, nu un panou de
   61px repetat peste tot. Se strânge doar spațiul din jur. */
.banner.abonament { padding: var(--s1) var(--s3); margin-bottom: var(--s3);
  font-size: var(--t-sm); line-height: var(--il-sm); }
.banner.risc-client { display: flex; align-items: flex-start; gap: var(--s3); }
.banner.risc-client > .ic { flex: none; margin-top: var(--s-tip); }

/* Aceeași așezare pentru problemele nerezolvate ale comenzii: semnul rămâne pe
   loc, lângă prima literă, oricâte rânduri are lista de sub el. Punctul de
   listă se scoate — una singură (cazul obișnuit) arătată cu bulină pare un
   fragment dintr-o listă mai lungă, care nu există. */
.banner.interventii-comanda { display: flex; align-items: flex-start; gap: var(--s3); }
.banner.interventii-comanda > .ic { flex: none; margin-top: var(--s-tip); }
.banner.interventii-comanda ul { list-style: none; margin: var(--s2) 0; padding: 0; }
.banner.interventii-comanda li + li { margin-top: var(--s2); }

/* Explicația se trage puțin sub câmpul pe care-l explică, ca să se citească drept
   continuarea lui, nu ca un paragraf nou. */
.raw { font-size: var(--t-sm); color: var(--mute); margin: calc(var(--s1) * -1) 0 var(--s4); }

/* Cuvintele altcuiva — GLS, SmartBill — citate într-un avertisment. Păstrează
   culoarea cutiei, fiindcă griul de sistem pe fond roșu s-ar citi ca o scăpare
   de stil, dar stă mai mic și mai stins: se vede că e citat, nu vocea noastră. */
.banner .raw { font-size: var(--t-sm); color: inherit; opacity: .75; margin: 0; }
.form label { display: block; font-size: var(--t-sm); color: var(--mute); margin-bottom: var(--s3); }

/* Distanța dintre două lucruri e a locului dintre ele, nu a fiecăruia în parte.
   Până acum orice rând care venea după un formular, o listă sau un rând de butoane
   își purta propriul „margin” scris de mână în șablon — de-aia existau patru pauze
   diferite (10, 12, 14, 16px) pentru exact același rost. Aici e una singură, iar
   șabloanele nu mai au ce număr să scrie. */
.form + .raw, .form + .banner, .actions + .grid, ul + .raw { margin: var(--s4) 0 0; }
/* Lista de județe e singurul câmp de adresă care nu se scrie de mână, fiindcă
   are exact 42 de răspunsuri posibile și fiecare scris altfel („Bistrita-Nasaud”,
   „Bistrița Năsăud”, „BN”) e o adresă care nu se mai potrivește cu nimic. Arată
   ca o căsuță de scris pentru că stă în același rând cu ele; săgeata de la capăt
   o desenează browserul, singura care se potrivește cu felul în care se deschide
   lista pe fiecare sistem. */
/* Câmpul kitului: alb, margine de negru 5% trasă înăuntru, Large (28, rază 7,
   pad 8). E gândit să stea în grupuri gri sau pe fereastră — de-aia grupul de
   formular e `--surface`, nu alb. Bifele și butoanele radio nu sunt câmpuri. */
/* Bifa și radioul: `:where()` ține specificitatea jos, ca orice clasă care
   ascunde inputul (comutatorul, zilele curierului) să câștige fără `!important`. */
input:where([type="checkbox"], [type="radio"]) {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: var(--bifa); height: var(--bifa); border-radius: var(--bifa-r);
  background: var(--bifa-oprit); cursor: pointer; vertical-align: middle;
  transition: background-color var(--durata-1);
}
input:where([type="radio"]) { border-radius: 50%; }
input:where([type="checkbox"], [type="radio"]):active { background: var(--bifa-apasat); }
input:where([type="checkbox"], [type="radio"]):checked,
input:where([type="checkbox"]):indeterminate { background: var(--accent-plin); }
input:where([type="checkbox"], [type="radio"]):checked:active { background: var(--accent-dark); }
input:where([type="checkbox"])::after {
  content: ''; position: absolute; inset: 0; background: var(--on-dark); opacity: 0;
  -webkit-mask: var(--glifa-bifa) center / 82% no-repeat; mask: var(--glifa-bifa) center / 82% no-repeat;
}
input:where([type="checkbox"]):indeterminate::after { -webkit-mask-image: var(--glifa-minus); mask-image: var(--glifa-minus); }
input:where([type="radio"])::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 31%; height: 31%;
  border-radius: 50%; background: var(--on-dark); opacity: 0;
}
input:where([type="checkbox"], [type="radio"]):checked::after,
input:where([type="checkbox"]):indeterminate::after { opacity: 1; }
input:where([type="checkbox"], [type="radio"]):disabled { opacity: .45; cursor: not-allowed; }
/* Câmpul Apple este baza oricărui formular, inclusiv operațiunile noi care
   nu stau în `.form`. Specificitatea zero lasă căutarea, scannerul și
   formularele specializate să-și păstreze geometria. Inputurile ascunse,
   bifele, radiourile și butoanele nu sunt câmpuri de text. */
:where(main) :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not(.searchbar input, .tura-cautare input), select, textarea) {
  box-sizing: border-box; min-width: 0; max-width: 100%; min-height: var(--h-camp);
  padding: var(--s1) var(--pad-camp); border: 0; border-radius: var(--r-camp);
  background: var(--ap-field-bg); color: var(--ink); font: inherit;
  font-size: var(--t-base); line-height: var(--il-md); font-weight: var(--ap-w-control);
  box-shadow: inset 0 0 0 1px var(--ap-field-border); caret-color: var(--accent);
}
:where(main) :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not(.searchbar input, .tura-cautare input), select, textarea):focus {
  box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent);
}
:where(main) :where(input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
:where(main) :where(input, textarea)::placeholder { color: var(--mute); opacity: 1; }
:where(main textarea) { padding-block: var(--s-6); resize: vertical; }
:where(main input[type="file"]) { width: 100%; padding: var(--s1) var(--s2); }
:where(main input[type="file"])::file-selector-button {
  margin-right: var(--s2); padding: var(--s1) var(--s3); border: 0;
  border-radius: var(--r-camp); background: var(--ap-ctl-bg); color: var(--ink);
  font: inherit; font-weight: var(--ap-w-control); cursor: pointer;
}
:where(main input[type="file"])::file-selector-button:hover { background: var(--ap-ctl-bg-hover); }
.form input:where(:not([type=checkbox]):not([type=radio]):not([type=file])), .form select, .form textarea {
  min-height: var(--h-camp); padding: 0 var(--pad-camp); border: 0; border-radius: var(--r-camp);
  box-shadow: inset 0 0 0 1px var(--ap-field-border); caret-color: var(--accent);
}
/* Bifa și radioul își păstrează forma de mai sus. Întinse pe toată lățimea și
   cu fondul alb al câmpului, ajungeau o bară albă cât cardul, pe care bifa
   (tot albă) nu se mai vedea nici bifată. */
.form input:where(:not([type=checkbox]):not([type=radio])), .form select, .form textarea {
  display: block; width: 100%; margin-top: var(--s1); font: inherit; color: var(--ink);
  font-size: var(--t-base); line-height: var(--il-md); font-weight: var(--ap-w-control);
  background: var(--ap-field-bg);
}
/* Câmpul de text lung e același câmp, doar pe mai multe rânduri: sub
   etichetă, pe toată lățimea, cu pernă și sus-jos. Fără regula asta rămânea
   pe rândul etichetei, cu chenarul și fontul sistemului. Se trage doar în
   jos — lățimea e a formularului. */
.form textarea { padding: var(--s-6) var(--pad-camp); resize: vertical; }
/* Chenarul albastru rămâne — el spune „câmpul ăsta e activ" și se vede și cu
   mouse-ul. Conturul de 2px albastru-deschis care stătea aici dădea 1,22:1: pe
   hârtie era un inel de focus, pe ecran nu se vedea. Îl dă regula de sus. */
.form input:where(:not([type=checkbox]):not([type=radio]):not([type=file])):focus, .form select:focus,
.form textarea:focus {
  box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }
/* Două câmpuri pe un rând, cât timp încap două câmpuri pe un rând. „De la” și
   „Până la” sunt câmpuri de dată de sistem: își poartă cu ele „zz.ll.aaaa” plus
   iconița de calendar, vreo 120px pe care nu-i cedează oricât ai strânge de ele.
   Pe un telefon de 320px, cardul are 246px — două câmpuri și pauza dintre ele
   fac 254, deci rândul ieșea din card cu 8px, tăind marginea din dreapta a
   celui de-al doilea calendar.
   `flex: 1 1 160px`, nu `flex: 1`: sub 160px de fiecare, se lasă unul sub altul,
   întregi, pe toată lățimea. Nimic nu se strivește și nimic nu se taie — pe
   telefon, un câmp pe rând e oricum mai ușor de nimerit cu degetul. */
.row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.row .grow { flex: 1 1 160px; }
.row.distantat { margin-top: var(--s3); }
.row .narrow { width: 130px; }

/* Un câmp și apăsarea lui, pe același rând — încărcarea borderoului, data
   încasării. Aliniate la bază, nu la mijloc: eticheta de deasupra câmpului ar
   ridica jumătate de rând și butonul ar pluti mai sus decât căsuța pe care o
   însoțește. Butonul nu se întinde niciodată; sub 560px trece pe rândul lui, pe
   toată lățimea, fiindcă degetul are nevoie de o țintă lată, nu de una lungă. */
.apasa .row { align-items: flex-end; }
.apasa .row > label { flex: 0 1 200px; margin-bottom: 0; }
.apasa .row > .btn { flex: none; }
.apasa .note { margin: var(--s3) 0 0; }
/* Acțiunile de lot spun și împărțirea pe proveniență și piață. Pe un ecran
   îngust nu au voie să transforme propoziția într-un buton de 700–800px care
   lărgește întreaga pagină; la lățime mare rămân pe un singur rând. */
.btn.actiune-lot {
  max-width: 100%; flex-wrap: wrap; white-space: normal; text-align: left;
}
@media (max-width: 560px) {
  .apasa .row > label { flex: 1 1 100%; }
  .apasa .row > .btn { width: 100%; }
}

@media (max-width: 720px) {
  .btn.actiune-lot { width: 100%; justify-content: flex-start; }
  .btn.actiune-lot .nowrap {
    flex: 1 0 100%; white-space: normal;
  }
}

/* Alegerea unui fișier — o singură dată în toată aplicația, la borderoul de
   ramburs. Lăsat cum îl desenează browserul, „Choose File / No file chosen”
   ieșea gri, în engleză și cu alt colț decât tot ce e în jur: singurul loc din
   aplicație care arăta a pagină străină. Căsuța rămâne a noastră, iar butonul
   dinăuntru se îmbracă exact ca `.btn`, ca să se citească drept ce e — o
   apăsare, lângă numele fișierului ales. */
.form input[type=file] { padding: var(--s1) var(--s2); cursor: pointer; }
.form input[type=file]::file-selector-button {
  margin-right: var(--s3); padding: var(--s1) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink); font: inherit;
  font-weight: 500; font-size: var(--t-md); cursor: pointer;
  transition: background var(--durata-1), border-color var(--durata-1);
}
.form input[type=file]:hover::file-selector-button {
  background: var(--card); border-color: var(--line-strong);
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); }
.kv dt { font-size: var(--t-sm); color: var(--mute); }
.kv dd { margin: 0; }
/* Rândul mic de sub o apăsare: ce se întâmplă după ea, sau unde ajunge ce ai
   scris. Se scria de trei ori, o dată pentru fiecare container în care apărea
   („.actions”, „.st”, „.verif”), iar pus în altă parte — sub formularul de
   istoric — ieșea text negru de mărimea unui paragraf, adică se citea ca și cum
   ar fi conținut, nu explicație. Regula stă acum pe clasă, unde îi e locul: se
   numește la fel peste tot fiindcă e același lucru peste tot. */
.note { font-size: var(--t-sm); color: var(--mute); margin: 0 0 var(--s4); }
.actions { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.actions .note { margin: 0; }

/* Cererea de retur: două alegeri și apăsarea lor, într-o celulă de tabel.
   Lățimea nu e ochiometrie — „curierul GLS vine la client” și „miercuri,
   19 august” sunt cele mai lungi răspunsuri pe care le poate da lista, iar sub
   atât browserul le taie cu „…” tocmai în ziua promisă la telefon. Pe ecran mic
   celula se strânge oricum: `max-width: 100%` o lasă, `min-width` doar cere.
   Butonul stă lat cât câmpurile de deasupra lui — el încheie alegerea, nu e o
   apăsare pe lângă ea. */
.retur-cerere { display: flex; flex-direction: column; gap: var(--s2);
                min-width: 210px; max-width: 100%; }
.retur-cerere label { margin-bottom: 0; }
.retur-cerere .btn { width: 100%; justify-content: center; margin-top: var(--s1); }
.retur-alege-produse {
  min-width: 0; margin: 0; padding: var(--s2); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2);
}
.retur-alege-produse legend {
  padding: 0 var(--s1); font-size: var(--t-xs); font-weight: 600;
  color: var(--mute);
}
.form label.retur-produs {
  display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) 0;
  margin: 0; color: var(--ink); cursor: pointer;
}
.form label.retur-produs + label.retur-produs { border-top: 1px solid var(--line); }
.form label.retur-produs input[type="checkbox"] { margin: var(--s-tip) 0 0; }
.retur-produs span { min-width: 0; }
.form label.retur-produs input.retur-cantitate {
  flex: none; width: 52px; min-height: 30px; margin: 0 0 0 auto; padding: var(--s1);
  text-align: center; font: inherit; font-variant-numeric: tabular-nums;
}
.retur-produs b { display: block; font-size: var(--t-sm); font-weight: 500; line-height: var(--il-sm); }
.retur-produs small { display: block; margin-top: var(--s-tip); color: var(--mute); }
.retur-produse-alese {
  display: grid; gap: var(--s1); margin: calc(-1 * var(--s2)) 0 var(--s4);
  padding: var(--s3); border: 1px solid var(--ok-line); border-radius: var(--r-sm);
  background: var(--ok-bg); font-size: var(--t-sm);
}
.retur-produse-alese > span { color: var(--ink-2); }

/* Stări scrise în propoziții, nu în perechi cheie–valoare: „ce a plecat”, „ce
   n-a plecat și de când”, „când pleacă următorul”. O propoziție întreagă are
   nevoie de lățime, de asta nu stă în grila .kv. */
.stare { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s5); }
.st { display: flex; gap: var(--s3); align-items: flex-start; }
.st svg { flex: none; margin-top: var(--s-tip); color: var(--faint); }
.st.ok svg { color: var(--ok); }
.st.warn svg { color: var(--warn); }
.st > div { min-width: 0; }
.st-cap { display: block; font-size: var(--t-sm); color: var(--mute); margin-bottom: var(--s-tip); }
.st p { margin: 0; font-size: var(--t-base); line-height: var(--il-md); }
.st-detalii { display: grid; gap: var(--s-6); }
.st .note { margin: var(--s2) 0 0; }
.st .sub { display: inline; }

/* Documentele care așteaptă, pe nume. Data și vechimea aliniate la dreapta:
   ochiul caută „de câte zile”, nu numărul facturii. */
.doc-lista { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 1px; font-size: var(--t-md); }
.doc-lista li { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s1) 0; border-top: 1px solid var(--line-moale); }
.doc-lista li:first-child { border-top: 0; }
.doc-lista b { font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-lista i { margin-left: auto; font-style: normal; font-size: var(--t-sm); color: var(--mute); }
.doc-lista i.tarziu { color: var(--warn); font-weight: 500; }

/* toast — și de ce jumătate din ecranul telefonului stătea gol

   `position: fixed` cu `left: 50%` și fără `right`. Un element fixat fără
   `right` se strânge la conținut, dar spațiul din care are voie să se strângă e
   „de la `left` până la marginea dreaptă" — adică jumătate de ecran.
   `translateX(-50%)` îl aduce înapoi la mijloc, deci arată centrat și pare în
   regulă. Ce nu se vedea: la 390px plafonul era 195px, exact jumătate, oricât de
   gol rămânea restul. Măsurat cu `audit/interfata/toast.js`, pe mesaje luate din
   `app.js`, nu inventate — un text scornit dă o cifră scornită:

     390px, „Copierea automată nu a reușit…"  195px, 4 rânduri, 102px înalt
     390px, „Răspunsul era deja înregistrat."  195px, 2 rânduri  ← și ăsta scurt
     720px, mesajul lung                       360px, 2 rânduri

   Se rupea în patru rânduri un mesaj care încape în două, și în două unul care
   încape într-unul. După: 358px/2 rânduri, 223,5px/1 rând, 460,7px/1 rând.
   Înălțimea cade de la 102 la 63 și de la 63 la 43,5.

   `width: max-content` e piesa care lucrează: dă cutiei o lățime a ei, deci
   strângerea nu mai e legată de „cât mai e până la marginea dreaptă". Plafonul
   rămâne 640px ca înainte, dar nu mai poate trece de lățimea ecranului minus
   marginile.

   De ce nu s-a legat `right` și nu s-a scos `transform`. Măsurat, varianta aia
   dă exact aceleași cifre, la toate trei lățimile — deci nu cifra alege.
   Centrarea prin `translateX(-50%)` e deja idiomul casei (o mai folosește
   vârful de la sfat), iar varianta cu `inset` ar fi adus al doilea fel de a
   centra același lucru. Se schimbă cât trebuie, nu cât se poate.

   De ce `--s4` și nu `--s3`. Tot măsurat, și ăsta chiar desparte: muchia
   conținutului e la 16px de margine la 390 și la 720 (20 la 1440). Cu `--s4`
   notificarea se oprește la 16px, adică fix pe muchia paginii; cu `--s3` ar fi
   ieșit cu 4px în afara ei. Marginea contează numai sub ~664px, unde plafonul de
   640 nu mai apucă să lege.

   Pe 1440 nu se mișcă nimic: 460,7px, un rând, 43,5px înalt, stânga la 489,7 —
   aceleași cifre înainte și după. Mesajul e mai îngust decât jumătate de ecran
   acolo, deci regula veche nu-l strângea oricum.

   `overflow-wrap: anywhere` — și de ce cutia nu era toată povestea. Măsurată
   întâi cutia: stă cuminte în ecran la orice lungime, fiindcă `max-width` o
   ține. Textul nu. Un jeton fără spații de 60 de caractere iese cu 50,5px în
   afara telefonului la 390, unul de 80 cu 185,3, unul de 200 cu 994,3 — pictat
   afară, nu tăiat, deci nici măcar nu se vede că lipsește ceva. La 720 pragul e
   120 de caractere, la 1440 e 200. Cutia raportează 0 la toate: cine măsoară
   dreptunghiul și nu textul din el găsește o pagină curată.

   Nu e o primejdie închipuită. `app.js:822` scrie dinadins răspunsul brut cu
   `JSON.stringify(d)` când forma nu e cea așteptată, iar comentariul de acolo
   promite „urât pe ecran, dar (…) se poate citi la telefon". 60 de caractere
   neîntrerupte e sub lungimea unei singure adrese web. Promisiunea era scrisă
   în JS și o rupea foaia de stil.

   Cele trei mesaje adevărate măsurate nu ies azi, și după regulă rămân la
   aceleași cifre, la zecime, la toate trei lățimile: 223,5px/1 rând, 358/2,
   373,3/1. Costă zero pe ce se vede zilnic; lucrează numai acolo unde azi se
   pierdea text. `anywhere`, nu `break-word`, fiindcă e cuvântul cu care casa a
   mai rezolvat un câmp cu conținut venit de-a gata, la `.pt-val` (rândul
   1996). Măsurat cu `audit/interfata/toast-rupere.js`; momeala mușcă la
   toate trei lățimile, martorul scurt stă la zero. */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ap-notification-bg); color: var(--ink); padding: var(--s3) var(--s-14);
  border-radius: var(--r-md); corner-shape: var(--colt-continuu);
  -webkit-backdrop-filter: blur(15px) saturate(1.8); backdrop-filter: blur(15px) saturate(1.8);
  font-size: var(--t-md); font-weight: 500; z-index: 50; box-shadow: var(--umbra-1);
  width: max-content; min-width: min(var(--ap-notification-w), calc(100% - 2 * var(--s4)));
  max-width: min(640px, calc(100% - 2 * var(--s4)));
  overflow-wrap: anywhere;
}
/* Greșeala se spune prin culoarea textului, nu printr-o placă roșie: sticla
   notificării e una singură în kit. */
.toast.bad { color: var(--err); }

/* ── butoane-iconiță ──────────────────────────────────────────────────────
   Iconițele sunt din setul Lucide (lucide.dev, licență ISC), inline în pagină
   ca SVG — fără cerere de rețea și fără font de iconițe. Textul care explică
   butonul apare la hover; pe ecran nu încape, dar mâna trebuie să știe ce apasă. */
.ib {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ap-toolbar-btn); height: var(--ap-toolbar-btn); padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  color: var(--ap-glyph); cursor: pointer;
  transition: background var(--durata-1), border-color var(--durata-1), color var(--durata-1);
}
.ib:hover { background: var(--ap-fill-3); color: var(--ink); }
.ib svg { width: 16px; height: 16px; display: block; }
.ib[disabled] { opacity: .55; cursor: not-allowed; }
.ib[disabled]:hover { background: transparent; color: var(--ap-glyph); }
.ib.done { background: transparent; border-color: transparent; color: var(--info-ink); }
.ib.done:hover { background: var(--info-bg); }
/* AWB printat de două ori sau mai mult (1.28.0) — vezi `.pill-printare-awb`
   de pe pagina comenzii, aceeași socoteală. Pe rândul din listă nu e loc de
   pastilă cu text, deci semnul e culoarea iconiței: cine scanează teancul
   vede din capul mesei care AWB-uri au fost cerute de mai multe ori. */
.ib.done.printare-multipla { background: var(--err-bg-2); border-color: transparent; color: var(--err-ink); }
.ib.done.printare-multipla:hover { background: var(--err-bg-2); }
/* Un `.ib` care nu se apasă: ține locul unui buton, dar e doar o urmă scrisă.
   Fără regula de hover se aprindea sub cursor ca oricare altul și promitea o
   apăsare care nu se întâmplă. */
.ib.static { cursor: default; }
.ib.static:hover { background: transparent; color: var(--ap-glyph); }
.seg .ib.static.on.ok:hover  { background: var(--ok-bg-2);   border-color: var(--ok-line);   color: var(--ok); }
.seg .ib.static.on.no:hover  { background: var(--warn-bg-2); border-color: var(--warn-line); color: var(--warn); }
.seg .ib.static.on.bad:hover { background: var(--err-bg-2);  border-color: var(--err-line);  color: var(--err); }
/* Din cele cinci butoane de pe rând unul singur e mutarea de acum: acela se umple.
   Amendament 21.09.2026 (L8): umplerea e Tinted — accent 22% cu glifă în
   albastrul de insignă — nu Prominent: pe ecran e un singur buton plin, iar aici
   sunt douăzeci și cinci de rânduri. „Făcut” rămâne albastru, dar fără fond:
   glifă colorată, ca un Borderless, ca să nu se confunde cu mutarea de acum. */
.ib.next { background: var(--info-bg-2); border-color: transparent; color: var(--info-ink); }
.ib.next:hover { background: color-mix(in srgb, var(--ap-accent) var(--ap-tinted-active), var(--ap-window)); border-color: transparent; color: var(--info-ink); }
/* Restul butoanelor de pe rând nu-și mai poartă chenarul degeaba. Cinci chenare
   ori 36 de rânduri însemnau 180 de pătrate identice care nu spuneau nimic;
   acum rămâne desenul, iar cutia apare când mâna trece peste rând. */
/* `inline-flex` se strânge pe conținut, deci `justify-content` de aici nu avea
   pe ce lucra: butoanele stăteau lipite de marginea din stânga a celulei, deși
   regula scria de la început că se aliniază la dreapta (și regula de telefon,
   mai jos, le trage înapoi la stânga — semn că așa era gândit). Cu `flex`,
   banda ține toată celula și capătul din dreapta al tabelului redevine drept. */
.tools { display: flex; flex-wrap: nowrap; gap: var(--s1); justify-content: flex-end; }
.tools .ib { background: transparent; border-color: transparent; color: var(--faint); }
/* Trei din cele șase se deblochează abia după telefon — adică, în tura de acum,
   stau moarte pe 56 de rânduri din 60. Se vedeau la fel de tare ca celelalte trei,
   deci banda promitea șase apăsări și dădea trei; care trei se afla apăsând.
   Aceeași diferență pe care rândul o arăta deja la hover, arătată de la început:
   ce se poate face acum e mai închis decât ce încă nu se poate. Nu dispar — golul
   ar muta butoanele de la un rând la altul — doar tac. */
.tools .ib[disabled] { color: var(--mute); }
.grid tbody tr:hover .tools .ib { background: var(--ap-ctl-bg); color: var(--ink-2); }
/* …dar nu și cele închise încă. Rândul se aprindea tot, deci „Emite factura” pe
   o comandă nesunată arăta exact ca „Pune-o deoparte” de lângă ea: cinci butoane
   la fel, din care trei nu fac nimic la apăsare. Rămân la locul lor — golul ar
   muta celelalte butoane de la un rând la altul — dar rămân și stinse: se vede
   că e un pas care încă n-a venit, nu un buton stricat. */
.grid tbody tr:hover .tools .ib[disabled] {
  background: transparent; color: var(--line-strong);
}
/* Butoanele care poartă o stare (urmează / gata / pusă deoparte) nu se ascund:
   ele nu sunt unelte, sunt informație — și informația se vede fără mouse. */
.tools .ib.next { background: var(--info-bg-2); border-color: transparent; color: var(--info-ink); }
.tools .ib.done { background: transparent; border-color: transparent; color: var(--info-ink); }
.tools .ib.on.wait-b { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
/* Hover-ul vine ultimul, ca să bată și stările de mai sus. */
.tools .ib:hover, .grid tbody tr:hover .tools .ib:hover { background: var(--ap-ctl-bg-hover); color: var(--ink); }
.tools .ib.next:hover { background: color-mix(in srgb, var(--ap-accent) var(--ap-tinted-active), var(--ap-window)); border-color: transparent; color: var(--info-ink); }
.tools .ib.done:hover { background: var(--info-bg); border-color: transparent; color: var(--info-ink); }
.tools .ib[disabled]:hover { background: transparent; border-color: var(--line); color: var(--faint); }

/* segmentul de confirmare: tick / fără răspuns / refuz.
   Tăvița există mereu, goală — altfel rândul care așteaptă telefonul ar fi cu 6px
   mai înalt decât vecinii și tabelul ar șchiopăta din nou. */
.seg { display: inline-flex; gap: var(--s1); border-radius: var(--r-sm);
       padding: 3px; background: transparent; }
/* Aici stătea un halou chihlimbariu pe grupul care așteaptă telefonul —
   „culoarea lucrului care așteaptă pe altcineva”. Regula era bună, calibrarea
   nu: în depozit 56 din 60 de comenzi așteaptă telefonul, deci haloul cădea pe
   93% dintre rânduri. Un semn care apare pe aproape tot nu mai e semn, e fundal
   — galbenul ajunsese culoarea tabelului, iar comenzile chiar urgente nu se mai
   deosebeau de vecinii lor. Se stilizează excepția, nu regula.
   Numărul lor se citește o singură dată, sus, pe fila „De sunat”. */
.seg.next .ib { background: transparent; border-color: transparent; color: var(--mute); }
.seg.next .ib:hover { background: var(--ap-fill-3); color: var(--ink); }
.conf-stare { font-size: var(--t-sm); color: var(--mute); white-space: nowrap; }
/* „Neapelată” se scria chihlimbariu și îngroșat, pe aceeași condiție care aprindea
   haloul de mai sus — deci pe aceleași 93% dintre rânduri. Scoțând haloul, cuvântul
   a rămas singurul galben din tabel și a preluat exact rolul pe care tocmai îl
   desființasem: galben peste tot. Cuvântul rămâne, fiindcă pe lista „Toate” el
   deosebește „Neapelată” de „Confirmată” și „Refuzată”; culoarea pleacă, fiindcă
   nu deosebea nimic — nu poți să scoți în evidență majoritatea.
   Excepțiile își păstrează galbenul și roșul acolo unde chiar se văd: pe butonul
   apăsat („am sunat, n-a răspuns” / „a refuzat”), care e rar. */
.conf-stare.cere { color: var(--mute); }
/* Hotărârea luată de un om se citește prima și nu în gri: „Confirmată la
   telefon” deasupra insignei „Necontactată” e chiar informația care lipsea
   când teancul „De facturat” părea plin de comenzi neconfirmate. */
.conf-stare.decisa { color: var(--ok-ink); font-weight: 600; }
.conf-stare.decisa.rea { color: var(--err); }
.wa-comanda {
  display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%;
  padding: var(--s-tip) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--mute); background: var(--surface); font-size: var(--t-xs);
  line-height: var(--il-xs); white-space: nowrap;
}
.wa-comanda.wa-ok { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-bg-2); }
.wa-comanda.wa-warn { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-bg-2); }
.wa-comanda.wa-bad { color: var(--err-ink); border-color: var(--err-line); background: var(--err-bg-2); }
/* banda firului de WhatsApp, pe pagina comenzii
   Un singur rând, în ordinea în care se pune întrebarea: al cui e firul (semnul
   verde), ce s-a întâmplat cu el (propoziția), și — la capătul din dreapta,
   unde stau toate apăsările paginii — ce se poate face acum. Vorba clientului
   trece pe rândul ei, fiindcă e singurul text din bandă care nu e scris de noi
   și n-are lungime cunoscută.
   Fundal cât se poate de tăcut: banda stă lipită de „Ce urmează”, iar două
   dreptunghiuri colorate unul sub altul se anulează reciproc. Culoarea rămâne
   toată în pastilă, unde e și singura literă care contează. */
/* Banda își ia cât text are, în rândul lui `.urmeaza`. Încercarea de a o
   întinde (`flex: 1 1 380px`) o punea pe TGO-8160 să împartă rândul cu cele
   trei butoane de apel și să se rupă pe patru rânduri; lăsată la lățimea ei,
   ori încape lângă telefonul strâns, ori trece singură pe rândul următor. */
.wa-fir {
  display: flex; align-items: flex-start; gap: var(--s2);
  min-width: min(22rem, 100%);
  margin: var(--s3) 0 0; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.wa-fir.wa-ok { border-color: var(--ok-line); }
.wa-fir.wa-warn { border-color: var(--warn-line); }
.wa-fir.wa-bad { border-color: var(--err-line); }
.wa-fir .wa-comanda { flex: none; margin-top: 1px; }
.wa-fir-ce { flex: 1 1 auto; min-width: 0; }
.wa-fir-ce b { display: block; font-weight: 600; }
.wa-fir-ce .sub { display: block; color: var(--mute); font-size: var(--t-sm); }
.wa-fir-ce .sub:empty { display: none; }
.wa-fir-nu { flex: none; align-self: center; text-align: right; max-width: 34ch; }
.wa-trimite { flex: none; align-self: center; white-space: nowrap; }
/* Pe telefon nu mai încap unul lângă altul. Butonul, cu `nowrap` pe el, își
   ținea lățimea și storcea propoziția din stânga la un cuvânt pe rând — pe
   TGO-8160, la 390, „Nu / i- / a / plecat / niciun / mesaj”. Se pun unul sub
   altul, în ordinea în care se citesc: semnul, ce s-a întâmplat, ce poți face. */
@media (max-width: 720px) {
  .wa-fir { flex-wrap: wrap; }
  .wa-fir-ce { flex: 1 1 100%; }
  .wa-trimite, .wa-fir-nu {
    flex: 1 1 100%; align-self: stretch; max-width: none;
    justify-content: center; text-align: center; white-space: normal;
  }
}
/* Ce a scris omul, cu vorbele lui. Ghilimelele le pune `<q>` singur; bara din
   stânga e ca să nu se citească drept propoziție de-a noastră. */
.wa-vorba {
  display: block; margin-top: var(--s1); padding-left: var(--s2);
  border-left: 2px solid var(--line-strong); color: var(--ink);
  font-size: var(--t-sm); overflow-wrap: anywhere;
}
/* apelul strâns
   Când firul de WhatsApp lucrează pentru noi, cele trei butoane de telefon nu
   se șterg — se strâng. O comandă se poate suna oricând, dar nu mai e ce se
   face întâi, deci nu mai ține locul cel mai bun din pagină. Se deschide într-o
   apăsare și rămâne deschisă cât stă omul pe pagină. */
.telefon-strans { margin: var(--s3) 0 0; }
.telefon-strans > summary {
  display: inline-flex; align-items: center; gap: var(--s-6); width: fit-content;
  padding: var(--s1) var(--s2); border-radius: var(--r-xs);
  color: var(--mute); font-size: var(--t-sm); cursor: pointer;
  list-style: none;
}
.telefon-strans > summary::-webkit-details-marker { display: none; }
.telefon-strans > summary:hover { background: var(--ap-fill-3); color: var(--ink); }
.telefon-strans[open] > summary { margin-bottom: var(--s2); }
.filtre-cifre {
  display: flex; align-items: center; gap: var(--s3); margin-left: auto; align-self: center;
  color: var(--mute); font-size: var(--t-md);
}
.wa-coada-rezumat {
  display: inline-flex; align-items: center; gap: var(--s1); margin: 0;
  padding: 0 var(--s3); min-height: 28px; border: 1px solid var(--ok-line);
  border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok-ink); font-size: var(--t-sm);
}
.wa-coada-rezumat .sub { color: var(--mute); }
.seg .ib { width: 28px; height: 28px; border-radius: var(--r-xs); }
.seg .ib.on.ok  { background: var(--ok-bg-2); border-color: var(--ok-line); color: var(--ok); }
.seg .ib.on.no  { background: var(--warn-bg-2); border-color: var(--warn-line); color: var(--warn); }
.seg .ib.on.bad { background: var(--err-bg-2); border-color: var(--err-line); color: var(--err); }
.c { text-align: center; }

/* Tooltip — mouse pe desktop, focus pe tastatură și atingere pe telefon când
   elementul este un buton. Informația nu poate exista numai pentru cine are
   mouse: iconița „i” de pe retururi este și buton focusabil. */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  /* `--tip-dx` îl pune JS-ul la intrarea mouse-ului, când se știe cât de lată a
     ieșit bula și unde e elementul în fereastră: bula se dă într-o parte cât
     trebuie ca să nu iasă din ecran, iar vârful de dedesubt rămâne pe element.
     Regulile de mai jos, pe containere, rezolvau asta câte un loc pe rând — și
     tot apărea altul. Fără nimic pus, `0px`, adică exact ce era înainte. */
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(calc(-50% + var(--tip-dx, 0px)));
  /* Rețeta `.ap-tooltip`: Medium 11, pad 3/6, rază 4, sticlă gri. Interlinia e
     14, nu 13 — derivat din Subheadline (11/14): balonul kitului ține un rând,
     ale noastre țin o propoziție pe două-trei rânduri. */
  background: var(--balon-fond); color: var(--balon-text); font-size: var(--t-xs); font-weight: 500;
  line-height: var(--il-xs); white-space: normal; width: max-content; max-width: 230px;
  padding: var(--s-tip) var(--s-6); border-radius: var(--r-balon); z-index: 40; pointer-events: none;
  -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px);
  box-shadow: var(--umbra-balon);
}
.grid td:first-child [data-tip]:hover::after { left: 0; transform: none; }
.grid td:last-child [data-tip]:hover::after { left: auto; right: 0; transform: none; }

/* Bara de sus stă lipită de marginea ecranului, deci un tooltip pus deasupra ei
   iese din fereastră: se apuca omul să citească ce face „Adu comenzile” și nu
   vedea nimic. Acolo — și oriunde altundeva scrie `tip-jos` — explicația coboară
   sub element, cu vârful întors în sus. */
.top [data-tip]:hover::after,
.tip-jos[data-tip]:hover::after {
  bottom: auto; top: calc(100% + 7px);
}
/* Lângă marginile ferestrei, un tooltip centrat pe element iese pe lângă ecran:
   la stânga sunt sigla și prima filă de magazin, la dreapta ultimele apăsări din
   bară — chiar cele mai explicate, „descuiat”, „ieși”. Acolo bula se lipește de
   marginea elementului, în loc să stea pe mijlocul lui. */
.top > :first-child[data-tip]:hover::after,
.shops > :first-child[data-tip]:hover::after {
  left: 0; right: auto; transform: none;
}
.top-actions > :nth-last-child(-n+2) [data-tip]:hover::after,
.top-actions > :nth-last-child(-n+2)[data-tip]:hover::after {
  left: auto; right: 0; transform: none;
}

/* Semnul informativ ține explicația lungă în afara curgerii paginii. Arată ca
   o unealtă a titlului, nu ca al doilea buton principal al cardului. */
.info-tip { appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: var(--s1); padding: 0;
  border: 0; border-radius: var(--r-pill); background: var(--ap-ctl-bg);
  color: var(--mute); cursor: help; vertical-align: middle; }
.info-tip:hover, .info-tip:focus-visible { color: var(--ink); background: var(--ap-ctl-bg-hover); }

/* Perechea de tastatură/touch a tooltipului de mai sus. Este scrisă separat,
   fără selectorul compus `:is()`: instrumentul care verifică ordinea regulilor
   CSS trebuie să poată citi fiecare selector. */
.info-tip[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); background: var(--balon-fond); color: var(--balon-text);
  font-size: var(--t-xs); font-weight: 500; line-height: var(--il-xs); white-space: normal;
  width: max-content; max-width: 230px; padding: var(--s-tip) var(--s-6); border-radius: var(--r-balon);
  -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px);
  z-index: 40; pointer-events: none; box-shadow: var(--umbra-balon);
}
.info-tip.tip-jos[data-tip]:focus-visible::after { bottom: auto; top: calc(100% + 7px); }

/* Adresa semnalată de Shopify. Era o cutie galbenă plină, care creștea rândul cu
   18px față de vecinii lui — un singur rând umflat strica ritmul întregului
   tabel, tocmai la ecranul pe care ochiul caută repede în jos. Acum e o dungă în
   marginea celulei: aceeași informație, aceeași înălțime de rând. */
.addr-warn {
  border-left: 2px solid var(--warn);
  margin-left: calc(-1 * var(--s4));
  padding-left: calc(var(--s4) - 2px);
}
/* Perechea verdelui: se aprinde numai când amprenta verdictului GLS este chiar
   adresa afișată acum. Pe lângă dungă scriem verdictul, ca sensul culorii să
   nu trebuiască ghicit. */
.addr-ok {
  border-left: 2px solid var(--ok);
  margin-left: calc(-1 * var(--s4));
  padding-left: calc(var(--s4) - 2px);
}
.addr-ok-text { color: var(--ok-ink); }
.addr-ok-text svg { color: var(--ok); }
/* Dunga semnalează; adresa rămâne neagră. Adresa e exact textul care trebuie
   citit cu atenție când e semnalată — colorat, se citește mai greu. */

/* piață și plată — pe pagina de comandă, unde nu avem `.stack` */
.flag { font-size: var(--t-base); }
.inv { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s1); }
.inv svg { width: 12px; height: 12px; }
.chip.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }

/* semnul că tabelul e viu: pulsul + ora ultimei împrospătări */
.live { display: inline-flex; align-items: center; gap: var(--s2); }
.beat {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  animation: beat 2.6s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Bucla a rămas în urmă / a picat: punctul se oprește din pulsat și schimbă
   culoarea. Un tabel vechi care arată viu e mai periculos decât unul gol. */
.live.stale .beat { background: var(--warn); animation: none; }
.live.bad .beat { background: var(--err); animation: none; }
.live.stale { color: var(--warn); }
.live.bad { color: var(--err); }

/* dialogul de confirmare
   Geometria e a dialogului din kit (components-spec §10): lat 390, rază 26,
   pad 20, 20 până la butoane, butoane de minimum 76 cu gol 8, la dreapta —
   „Renunță” în stânga verbului. Tipografia e a alertei (titlu Bold 13/16,
   text Regular 13/16 pe culoarea întâi, gol 10): derivat din `.ap-alert`,
   fiindcă foile Rovynt pun o întrebare, dar cu pași numerotați care nu încap
   în 260. Foaia lată = `.ap-dialog--wide`, 560. */
.modal {
  /* 62: peste butonul plutitor al meniului de pe telefon (61) — voalul spune
     «aici nu se apasă acum» și pentru el. */
  position: fixed; inset: 0; z-index: 62; padding: var(--s5);
  display: flex; align-items: center; justify-content: center;
  /* Voalul rămâne, sticla pleacă. Nu-s același lucru: umbrirea de sub o
     fereastră o are orice interfață, și ea spune „aici nu se poate apăsa acum".
     `blur(2px)` nu spunea nimic în plus — la doi pixeli nici nu se vede că e
     acolo — dar aprindea un strat compus peste tot ecranul. */
  background: var(--voal);
  animation: fade .14s ease-out;
}
.modal .sheet {
  background: var(--bg); border-radius: var(--r-lg); corner-shape: var(--colt-continuu); width: 100%; max-width: var(--ap-dialog-w);
  padding: var(--s5); box-shadow: var(--umbra-3);
}
.modal .sheet.larg { max-width: 560px; }
.modal h3 { margin: 0 0 var(--s-10); font-size: var(--t-md); line-height: var(--il-md); font-weight: 700; }
.modal .sheet-body { margin: 0 0 var(--s5); font-size: var(--t-md); color: var(--ink); line-height: var(--il-md); }
/* Pașii unei apăsări care face mai multe lucruri deodată — refuzul la telefon
   oprește coletul, scoate factura și anulează comanda. Numerotați, fiindcă
   ordinea nu e o înșiruire, e o apărare: fiecare pas îl păzește pe următorul. */
.modal .sheet-body p { margin: 0 0 var(--s2); }
.modal .sheet-body ol { margin: var(--s3) 0; padding-left: 1.4em; }
.modal .sheet-body ol li { margin: 0 0 var(--s2); padding-left: .15em; }
.modal .sheet-body ol li::marker { color: var(--mute); font-variant-numeric: tabular-nums; }
.modal .sheet-foot { display: flex; gap: var(--s2); justify-content: flex-end; }
.modal .sheet-foot .btn { min-width: 76px; justify-content: center; }
/* Pe telefon foaia stă jos, cât ecranul, cu verbul primul sub deget și
   renunțarea deasupra lui — aceeași formă pe care o avea numai
   `.replacement-modal`; acum o au toate foile. */
@media (max-width: 560px) {
  .modal { padding: var(--s3); align-items: flex-end; }
  .modal .sheet { max-width: none; padding: var(--s4); }
  .modal .sheet-foot { flex-direction: column-reverse; }
  /* Butoanele foii sunt treapta Large de iOS (50, capsulă — §12). */
  .modal .sheet-foot .btn { width: 100%; justify-content: center; min-height: var(--h-ctl-mare); border-radius: var(--r-pill); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.ib.busy svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tabelul din previzualizarea facturii */
.mini { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.mini th {
  text-align: left; font-size: var(--t-xs);
  color: var(--mute); font-weight: 600; padding: 0 0 var(--s2); border-bottom: 1px solid var(--line);
}
.mini th:not(:first-child) { text-align: right; }
.mini td { padding: var(--s2) 0; border-bottom: 1px solid var(--line-moale); }

/* ── cartonașul cu tabel gol, așezat direct în două coloane ─────────────────
   Pe `/echipa` tabelul „Oameni” stă de-a dreptul în grilă, fără învelișul
   `.tabel` care se trage cu degetul. Podeaua lui măsurată e 554,3px: cinci
   coloane la min-content, din care 222,3 e ultima celulă, ținută pe un singur
   rând de `nowrap` — „Cod nou” 77,8px lângă „Dezactivează” 108,8px.

   Cartonașul primește jumătate de pagină: 484px la 1024. Nimeni nu taie nimic
   — `.card`, `.cols`, `main`, `body`, `html` sunt toate `overflow: visible`,
   verificat urcând tot lanțul — deci ce nu încape nu se ascunde, se desenează
   în afara cartonașului, peste vecin. Măsurat peste cartonașul „Cont nou”:
   4,8px la 1165, 37,3px la 1100, 75,3px la 1024, 112,3px la 950 — pe 259px de
   înălțime. Text peste text, exact pe lățimea unui laptop.

   Ca tabelul să încapă, cartonașul are nevoie de 554,3 + 42 umplutură =
   596,3px; două cartonașe, cu 16px între ele și 40px umplutură de pagină, cer
   1248,6px. Sub atât, pagina face ce face deja sub 900: le pune unul sub altul.
   Costă 241px de pagină mai lungă între 950 și 1250 și nimic altceva.

   Două ieșiri încercate și lăsate, ca să nu fie încercate din nou:

   · `overflow-x: auto` pe cartonaș — tiparul casei de la `.tabel`. Nu merge
     aici: `overflow-x` nevizibil face și `overflow-y` container de derulare,
     iar tabelul poartă cinci explicații care urcă deasupra rândului
     (`bottom: calc(100% + 7px)`, rândul 1105). S-ar reteza tocmai ele.
   · scos `nowrap` de pe celula de acțiuni. Măsurat cu proba pereche: coloana
     scade de la 222,3 la 140,8 — dar butoanele se așază unul sub altul **și la
     1440**, unde e loc destul și nimic nu e stricat. Și tot nu ajunge: la 950
     rămâneau 30,7px peste vecin.

   Pragul are pernă de 1,4px peste cifra măsurată, și e dependent de date: dacă
   intră în echipă un nume mai lung, podeaua urcă și pragul trebuie urcat cu ea.
   Verificarea care spune când nu mai ține e scrisă în `audit/PREDARE.md`.

   Selectorul cere forma, nu pagina: cartonaș așezat de-a dreptul în grilă, cu
   tabel gol în el. `order.html` are `.cols > .col > .card`, deci nu intră —
   măsurat pe opt ecrane: o singură potrivire, `/echipa`. */
@media (max-width: 1250px) {
  .cols:has(> .card > .grid) { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; }
  main { padding: var(--s4); }
  .jos { padding: var(--s5) var(--s4) var(--s6); }
}

/* ── tabelul pe ecrane mici ─────────────────────────────────────────────────
   Regula: nimic nu iese din pagină și nimic nu dispare fără să se vadă că a
   dispărut. Sub 1080px tabelul primește propria bară de scroll, cu marginea
   din dreapta stinsă ca să se știe că mai e; sub 720px nu se mai trage de
   nimic — fiecare comandă se face cartonaș, cu numele coloanei scris deasupra
   fiecărei bucăți. Nicio informație nu se pierde pe drum, doar se rearanjează. */
@media (max-width: 1080px) {
  .tabel {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, var(--tus) calc(100% - var(--stins)), transparent);
            mask-image: linear-gradient(to right, var(--tus) calc(100% - var(--stins)), transparent);
    /* Stingerea nu se stinge niciodată — e o bandă fixă pe marginea din dreapta,
       și rămâne acolo și după ce ai tras până la capăt. Adică exact peste ce ai
       tras ca să ajungi. Măsurat pe `/comenzi`, la `scrollLeft` maxim: patru
       butoane de 30×30px cu **11,3px sub bandă, 37,5% din lățime**, la 1080,
       1024, 900 și 768 deopotrivă. Butoanele alea sunt capătul drumului de pe
       ecranul pe care depozitul stă toată ziua.

       Umplutura din dreapta a rândului e 16,8px, banda e 28: rămân 11,2px de
       conținut sub ea — se potrivește la zecime cu ce s-a măsurat.

       Casa știe deja răspunsul: `.filters .banda`, care poartă aceeași stingere,
       are `padding-right: var(--stins)` tocmai ca ultima filă să nu stea sub ea.
       Tabelul n-a primit-o niciodată. Nu se inventează nimic aici; se întinde
       tiparul care există, la al doilea loc unde e nevoie de el.

       De ce nu se stinge banda „doar când mai e ceva la dreapta": s-ar face cu
       `animation-timeline: scroll()`, care merge într-un singur motor de
       browser, sau cu gradient pe fundal, care ar cere culori scrise de mână.
       Umplutura costă 28px de derulare și nimic altceva. */
    padding-right: var(--stins);
  }
  /* Lățimea impusă e a tabelului de comenzi, care are unsprezece coloane și se
     strivește sub 1040px. Tabelele de la contabilitate au șase-șapte și își
     poartă singure lățimea — dacă le-o impuneam și lor, apărea o tragere cu
     degetul acolo unde nu era nevoie. Containerul cu derulare îl primesc însă
     toate: fără el, tabelul „Pachetele” împingea toată pagina cu 194px în
     dreapta între 721 și 1150px, adică exact pe un laptop obișnuit. */
  .tabel.lat > .grid { min-width: 1040px; }
}

/* La un laptop de 1280px, bara laterală și marginile lasă tabelului mai puțin
   decât lățimea sa reală. Derularea rămâne în tabel, nu împinge întreaga pagină
   în dreapta. Sub 1080px regula completă de mai sus continuă să se aplice. */
@media (min-width: 1081px) and (max-width: 1320px) {
  .tabel.lat { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}

/* ── „Acțiuni” lipită de marginea din dreapta, între 721 și 1080px ───────────
   Tabelul de comenzi cere 1163,3px și primește între 721 și 1080. Lipsa nu se
   poate împărți: `coloane.js` la 1080, 1024 și 900 dă joc_total 1,3px pe
   unsprezece coloane și zero celule tăiate — podeaua nu e din spațiu risipit,
   e din conținut. Ca s-o cobor ar trebui să rup e-mailurile pe două rânduri
   sau să stivuiesc cele șase butoane, adică să cumpăr lățime cu înălțime pe
   190 de rânduri. Deci nu scot tragerea, o fac să nu mai coste: coloana de
   fapte stă pe loc, restul trece pe sub ea.

   Ce se câștigă, măsurat cu `lipit.js`, cu momeală plantată de fiecare dată:
     /comenzi 1024    53,8px din 232 (23,2%), butoane întregi 0/6  →  233/233, 6/6
     /perioada 1024   86,1px (37,1%), 1/6                          →  233/233, 6/6
     1080            142,1px, 3/6                                  →  233/233, 6/6
     721               0px, 0/6, la capătul unei trageri de 470px   →  233/233, 6/6
   Tragerea scade de la 207 la 180px, fiindcă dispar cei 28px de umplutură.
   La 1440, 720 și 390 nu se mișcă niciun pixel — regula nu ajunge acolo.

   `overflow: clip`, nu ștergerea lui `hidden`. `.grid` are `overflow: hidden`
   ca să-și taie colțurile rotunjite; efectul nescris e că face din tabel un
   container de derulare, care înghite orice `sticky` dinăuntru — de-aia
   coloana se calcula `sticky` și nu se lipea. `clip` taie identic: `coltul.py`
   compară colțul pixel cu pixel și dă 0 pixeli diferență față de `hidden`,
   cu o momeală `visible` care scoate 80. Și cade cuminte: un browser care nu-l
   știe aruncă declarația și rămâne cu `hidden`, adică cu ziua de azi.

   `:where()`, ca fundalul să nu fure stările. Pe tabelul ăsta `tr.zzz > td` și
   cele cinci stări expediate/închise pictează deja `--surface-2`. Un
   `background: var(--card)` scris normal ar fi bătut (0,1,1) cu (0,2,1) și ar
   fi făcut găuri albe în rândurile terminate: momeala scrisă exact așa a scos
   8 rupturi pe `s-CLOSED` la /perioada, `col_do` 255,255,255 lângă un rând
   250,250,250. `:where()` aduce învelișul la zero, deci stările rămân
   deasupra. Hover-ul e adus înapoi tot pe sub ele, ca să nu treacă peste
   `.grid tr.bad td` (:701), care azi doarme, dar e scrisă.

   Antetul se alege după poziție, `thead th:last-child`, fiindcă în
   `index.html` și `perioada.html` celula aia e `<th class="r">`, fără
   `col-do`. Scris cu clasa, se lipea corpul și antetul pleca — se vede
   într-o poză, nu într-un `getBoundingClientRect()`. Fundal nu-i trebuie:
   `.grid th` are deja `--surface-2`, opac.

   Banda stinsă nu se aruncă, rămâne pentru orice alt `.tabel`. Aici e
   înlocuită, fiindcă ar fi stins ultimul buton exact la capătul coloanei pe
   care tocmai am lipit-o. Ce se pierde, cinstit: „Stare și documente” trece în
   spatele tragerii. E un schimb, nu un câștig curat — se vede tot ce e de
   apăsat, se trage pentru ce e de citit. */
@media (min-width: 721px) and (max-width: 1080px) {
  .tabel.lat { -webkit-mask-image: none; mask-image: none; padding-right: 0; }
  .tabel.lat > .grid { overflow: clip; }
  :where(.tabel.lat > .grid) thead th:last-child,
  :where(.tabel.lat > .grid) td.col-do {
    position: sticky; right: 0; z-index: 1;
    border-left: 1px solid var(--line);
  }
  :where(.tabel.lat > .grid) td.col-do { background: var(--card); }
  :where(.tabel.lat > .grid tbody tr:hover) > td.col-do { background: var(--surface-2); }
}

@media (max-width: 720px) {
  /* Prima comandă rămâne în primul ecran la 390px: capul, cele două
     intrări și contextul curierului curg vertical, iar acțiunea principală
     are lățimea degetului, nu lățimea textului. */
  .lucru-head { align-items: stretch; }
  .lucru-urmatoarea {
    width: 100%; justify-content: center; white-space: normal; text-align: center;
  }
  .curier-lucru { white-space: normal; }
  .poarta-gata-cap, .poarta-gata-cifre { align-items: flex-start; flex-direction: column; }
  .poarta-gata-cifre { gap: var(--s2); }
  .semnale-lucru { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .semnale-lucru::-webkit-scrollbar { display: none; }
  .semnale-lucru .chip { flex: none; }

  /* Unsprezece file pe un ecran de telefon se rupeau în cinci rânduri de lungimi
     diferite — o scară zdrențuită de vreo două sute de pixeli între căutare și
     prima comandă, prin care trebuia trecut de fiecare dată ca să se ajungă la
     treabă. Aici stau pe un rând care se trage cu degetul, cu aceeași margine
     stinsă în dreapta ca șirul de magazine din antet și ca tabelul: o singură
     mișcare învățată, în trei locuri. Nicio filă nu dispare, doar se așază. */
  /* Uneltele coboară pe rândul lor. Alături de bandă mâncau jumătate dintr-un
     ecran de 402px, iar fila a treia rămânea tăiată sub butonul „Produse” —
     părea că scrie unul peste altul. Un rând în plus costă 40px și dă benzii
     toată lățimea telefonului. */
  /* Pe telefon banda de sus se rupe: linkul înapoi rămâne singur, iar căutarea ia
     toată lățimea — 420px lângă un link de zece litere n-ar mai încăpea. */
  .rand-cauta { flex-wrap: wrap; gap: var(--s2); }
  .rand-cauta .searchbar { flex: 1 0 100%; max-width: none; }
  .filters { flex-wrap: wrap; }
  .filters .banda {
    flex: 1 0 100%;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-right: var(--stins);
    -webkit-mask-image: linear-gradient(to right, var(--tus) calc(100% - var(--stins)), transparent);
            mask-image: linear-gradient(to right, var(--tus) calc(100% - var(--stins)), transparent);
  }
  .filters .banda::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }
  /* Despărțitura are înălțime, deci ar întinde banda; între file trase cu
     degetul nu desparte oricum nimic vizibil. */
  .filters .sep { display: none; }

  /* La 1080px învelișul primește 28px în dreapta pentru stingerea tabelului
     care se derulează. Pe telefon tabelul devine cartonaș și nu se mai
     derulează, deci și rezerva trebuie scoasă; altfel fiecare card rămâne cu
     exact 28px mai îngust decât rândul de deasupra. */
  .tabel {
    overflow: visible; padding-right: 0;
    mask-image: none; -webkit-mask-image: none;
  }
  /* `.tabel.lat` trebuie scris tot cu două clase, altfel lățimea impusă mai sus
     cântărește mai mult decât anularea de aici și tabelul rămâne de 1040px
     într-o pagină de 720 — adică exact tabelul care tocmai s-a făcut cartonașe
     împinge pagina în lături. */
  .tabel > .grid, .tabel.lat > .grid { min-width: 0; border: 0; background: transparent; }
  .grid thead { display: none; }
  .grid, .grid tbody, .grid tr, .grid td { display: block; width: auto; }

  .grid tbody tr { background: var(--card); border: 1px solid var(--line);
                   border-radius: var(--r); corner-shape: var(--colt-continuu); margin-bottom: var(--s3);
                   padding: var(--s3) var(--s4); }
  .grid tbody tr:hover { background: var(--card); }
  .grid tr.bad { background: var(--err-bg); }
  .grid tr.bad td { background: transparent; }
  /* Pe cartonaș, între blocuri erau 12px sus, 12px jos și o linie: 25px de gol
     de șase ori într-o comandă, adică o cincime din cartonaș numai spațiu între
     lucruri care oricum sunt despărțite de o linie. Cu 8px rămâne aer destul
     pentru deget și încape o comandă întreagă pe un ecran. */
  .grid td { border: 0; padding: var(--s2) 0; }
  .grid td + td { border-top: 1px solid var(--line-moale); }

  /* „Nu rupe rândul” e o hotărâre luată pentru coloane: ține „12 iulie 14:30” și
     „102.500,00 RON” întregi, ca să nu se despartă o oră sau un număr în două
     într-o coloană strâmtă. Pe cartonaș nu mai sunt coloane — iar celula care
     ține butoanele ține uneori și o propoziție: „arhiva nu mai e pe disc —
     pachetul se reface din documentele care încă așteaptă”, 468px de text
     într-o cutie de 212px, pe un telefon de 320px. Nu ieșea din pagină, ieșea
     din cartonaș: se tăia, fără să se vadă că s-a tăiat, și rămânea pe ecran
     jumătate de propoziție care spune altceva decât întreaga.
     Butoanele nu pățesc nimic: `.btn` își ține singur eticheta pe un rând. */
  .grid td.nowrap { white-space: normal; }

  /* Capul de coloană se mută deasupra celulei. Fără el, „22 iulie” și „102.500”
     stau unul sub altul fără să spună nimeni ce sunt. */
  .grid td::before {
    display: block; margin-bottom: var(--s-tip);
    font-size: var(--t-2xs); font-weight: 600;
 color: var(--mute);
  }
  .grid td.col-who::before     { content: "Destinatar"; }
  .grid td.col-addr::before    { content: "Adresă"; }
  .grid td.col-pay::before     { content: "Plată"; }
  .grid td.col-confirm::before { content: "Confirmare"; }
  .grid td.col-state::before   { content: "Stare și documente"; }
  .grid td.col-do::before      { content: "Acțiuni"; }
  .grid td.col-bloc::before    { content: "Selectează"; }

  /* Cele șase rânduri de deasupra sunt ale listei de comenzi și numai ale ei:
     fiecare coloană a ei are clasa ei, deci și eticheta ei. Restul ecranelor
     n-aveau niciuna — pe telefon, rândul din „Echipa” arăta „Gabriel”, apoi
     „operator”, apoi „0”, apoi „2026-08-10 22:38:24”, fără să spună nimeni ce
     e fiecare. Nu se rezolvă cu încă șase clase pentru fiecare tabel din
     aplicație: se rezolvă o dată, cu numele coloanei scris pe celulă, ca la
     `data-tip`. Tabelul care nu-l scrie rămâne exact cum era. */
  .grid td[data-cap]::before { content: attr(data-cap); }

  /* Pe cartonaș totul curge de la stânga: banii nu mai au de ce să stea la
     dreapta când n-au coloană lângă ei. */
  .grid td .stack.right, .grid td .stack.center { align-items: flex-start; text-align: left; }
  .grid td .line.end { justify-content: flex-start; }
  .grid .tools { justify-content: flex-start; flex-wrap: wrap; }

  /* Lista de pe raft: rând de tabel cu colspan, deci trebuie spus din nou că e
     bloc — altfel rămâne ascunsă chiar și când e deschisă. */
  .grid tr.pick { padding: 0; margin: 0 0 var(--s3); border: 0; background: transparent; }
  .grid tr.pick.open, .grid.show-picks tr.pick { display: block; }
  .grid tr.pick > td { padding: 0; }
  .grid tr.pick > td::before { content: none; }

  /* Scheletul, pe telefon. Rândul nu mai e rând, e cartonaș: înălțimea măsurată
     din tabel n-are ce căuta aici, iar coloanele „la dreapta” nu mai există —
     pe cartonaș totul curge de la stânga, ca tot restul. Înălțimea o dă
     conținutul, fiindcă și cartonașele adevărate sunt de înălțimi diferite. */
  .sk-rand { height: auto !important; }
  .sk-rand td.r .sk-bar, .sk-rand td.c .sk-bar { margin-inline: 0; }
  .grid tr:has(+ tr.pick.open), .grid.show-picks tr:has(+ tr.pick) {
    margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
}

/* ── pagina comenzii ────────────────────────────────────────────────────────
   Nu încape mai multă informație pe ecran decât încape în cap. Pe pagina unei
   comenzi nu ne batem pentru rânduri, ne batem să nu plece coletul greșit —
   deci fiecare lucru are loc să respire și scrie ce e, nu ce cod are. */

/* Cuvântul clientului la telefon, lângă starea din flux. „Neapelată” lipsea de
   aici, deci antetul o arăta gri — aceeași comandă care în tabel e chihlimbarie.
   Un lucru nu poate avea două culori în două locuri; se caută la fel peste tot. */
.c-PENDING   { background: var(--warn-bg-2); color: var(--warn-ink); }
.c-CONFIRMED { background: var(--ok-bg-2); color: var(--ok-ink); }
.c-NO_ANSWER { background: var(--warn-bg-2); color: var(--warn-ink); }
.c-REFUSED   { background: var(--err-bg-2); color: var(--err-ink); }

/* Banda de stare a coletului: cinci opriri, de la comandă la ușa clientului.
   Stă imediat sub numele comenzii, înaintea lui „Ce urmează”, fiindcă răspunde
   la o întrebare mai veche decât aceea: nu „ce am eu de făcut”, ci „unde e
   coletul”. Când cineva deschide o comandă la telefon cu clienta, asta caută.

   Până acum răspunsul era un cuvânt în coloana din dreapta — „livrat” — scris
   cu aceeași cerneală ca tot restul paginii, deci găsit prin citire, nu prin
   privire. Iar sub el stăteau 41 de scanări brute, care spun ce s-a întâmplat
   dar nu și cât a mai rămas. Poziția pe un drum spune amândouă deodată. */
.traseu {
  background: var(--card); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu);
  padding: var(--s5) var(--s6) var(--s4); margin-bottom: var(--s4);
}
.opriri { display: flex; list-style: none; margin: 0; padding: 0; }
.op {
  flex: 1; min-width: 0; position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);
}
/* Linia dintre două opriri. Se desenează spre stânga, din centrul bulinei
   proprii spre centrul celei dinainte — de aia `left: -50%`: opririle au
   lățimi egale (`flex: 1`), deci jumătatea din stânga a mea plus jumătatea din
   dreapta a ei fac exact segmentul dintre centre. */
.op::before {
  content: ""; position: absolute; top: 13px; right: 50%; left: -50%; height: 2px;
  background: var(--line);
}
.op:first-child::before { display: none; }
.op.atins::before { background: var(--ink); }
.op-pt {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line); color: var(--faint);
}
.op.atins .op-pt { background: var(--ink); border-color: var(--ink); color: var(--pe-cerneala); }
/* „Aici e acum” — un halou, nu altă culoare. Culoarea e deja luată: plin =
   făcut, gol = nefăcut. Haloul se pune peste plin fără să-i schimbe înțelesul,
   așa cum degetul arată pe hartă fără să mute orașul. */
.op.acum .op-pt { box-shadow: 0 0 0 4px var(--line-moale); }
.op-et { font-size: var(--t-sm); color: var(--mute); }
.op.atins .op-et { color: var(--ink); font-weight: 500; }
.op-cand { font-size: var(--t-xs); color: var(--mute); min-height: 1em; }
/* Capătul bun și capătul prost. Verdele se aprinde doar pe ultima oprire, și
   doar când chiar s-a livrat: pe drum nu se sărbătorește nimic. */
.traseu.bun .op:last-child.atins .op-pt { background: var(--ok); border-color: var(--ok); }
.traseu.bun .op:last-child.atins::before { background: var(--ok); }
.traseu.bun .op:last-child .op-et { color: var(--ok-ink); }
/* Iconița de pe roșu ia cerneala de pe plin, ca `.chip.bad.on`. Fără ea
   moștenea griul opririi neatinse (`--faint`): cutie neagră-cenușie pe roșu
   închis, 2:1 pe luminos. Pe întunecat roșul se deschide și cerneala se
   întunecă odată cu el — contrastul rămâne peste 7:1 în ambele teme. */
.op.rau .op-pt { background: var(--err); border-color: var(--err); color: var(--pe-cerneala); }
.op.rau::before { background: var(--err); }
.op.rau .op-et { color: var(--err-ink); }
.op.rau.acum .op-pt { box-shadow: 0 0 0 4px var(--err-bg); }
/* Promisiunea stă sub bandă, pe axul ei, nu într-un card nou: este concluzia
   drumului de mai sus. În listă păstrează aceleași cuvinte, dar se aliniază cu
   restul coloanei și nu mai cere despărțitorul unei benzi mari. */
.livrare-estimata {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-moale);
  color: var(--ink-2); font-size: var(--t-md); font-weight: 500;
}
.livrare-estimata svg { flex: none; color: var(--mute); }
.livrare-estimata.mica {
  justify-content: flex-start; margin-top: var(--s1); padding-top: 0; border-top: 0;
  color: var(--mute); font-size: var(--t-sm); font-weight: 400; line-height: var(--il-sm);
}
/* Aceleași cinci opriri, dar cât să încapă pe un rând de listă: fără nume și
   fără ore, doar cât s-a făcut din drum. Numele opririlor și orele lor stau în
   tooltip — pe un tabel de două sute de rânduri, un rând de text în plus pe
   fiecare linie e o pagină în plus de derulat. */
.mini-traseu { display: flex; align-items: center; gap: 0; margin: var(--s-tip) 0 1px; }
.mini-traseu i { width: 7px; height: 7px; border-radius: 50%; flex: none;
                 background: var(--line-strong); }
.mini-traseu i + i { margin-left: 13px; position: relative; }
.mini-traseu i + i::before { content: ""; position: absolute; top: 3px;
                             right: 7px; width: 13px; height: 1px;
                             background: var(--line-strong); }
.mini-traseu i.atins { background: var(--ink-2); }
.mini-traseu i.atins + i.atins::before { background: var(--ink-2); }
.mini-traseu.bun i.atins:last-child { background: var(--ok); }
.mini-traseu i.rau { background: var(--err); }
.mini-traseu i.rau::before { background: var(--err); }

/* Două rânduri, același loc: o propoziție scurtă sub bandă, despărțită de ea
   printr-o linie. „Livrare estimată" spune ce urmează dacă totul merge, nota
   spune ce urmează fiindcă n-a mers. Se scriu într-un singur selector: două
   rânduri care stau unul sub altul și arată diferit se citesc ca două lucruri
   de feluri diferite. */
.traseu-nota, .traseu-estimat {
  margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-2);
}
/* Eticheta e mai stinsă decât data pe care o explică. */
.traseu-estimat > span { color: var(--mute); }
/* Când vin amândouă, a doua nu mai repetă linia de deasupra. */
.traseu-estimat + .traseu-nota,
.livrare-estimata + .traseu-nota { margin-top: var(--s3); padding-top: 0; border-top: 0; }

/* Adresa, cum se citește de obicei: patru rânduri, ca pe un plic. Cifrele stau
   în ordinea în care le spune omul la telefon — cine, unde, la ce număr. */
.adr-scurt { display: grid; gap: var(--s-tip); font-size: var(--t-base); line-height: var(--il-md); }
.adr-scurt b { font-weight: 600; }
.adr-scurt .sub { color: var(--mute); font-size: var(--t-sm); margin-top: var(--s1); }
.tag.addr-ok-tag { background: var(--ok-bg); color: var(--ok-ink); }

/* Insigna de stare a adresei. Cele cinci tonuri vin din `adrese_ai.STARI`, iar
   aici primesc doar culoarea — cuvântul nu se scrie niciodată în CSS. Tonurile
   sunt cele patru ale casei plus unul mut: „nimeni nu s-a uitat și nici nu se
   uită” nu e nici bine, nici rău, e o lipsă, iar o culoare i-ar fi dat o
   părere pe care n-o are. */
.tag.stare-adr { font-weight: 600; }
.tag.ton-ok      { background: var(--ok-bg-2);   color: var(--ok-ink); }
.tag.ton-lucru   { background: var(--info-bg-2); color: var(--info-ink); }
.tag.ton-atentie { background: var(--warn-bg-2); color: var(--warn-ink); }
.tag.ton-rau     { background: var(--err-bg-2);  color: var(--err-ink); }
.tag.ton-mut     { background: var(--line);      color: var(--mute); }
/* Pe listă insigna deschide singură rândul ei, sub adresă — nu vine după un
   cuvânt, ca pe pagina comenzii, unde `margin-left` are ce rol să joace. */
.stare-adr-rand .stare-adr { margin-left: 0; }
/* Propoziția de sub titlu, cât timp mai e ceva de făcut. Lățime mărginită: pe
   ecranul lat al depozitului un rând de 90 de caractere se citește sărind. */
.stare-adr-de-ce {
  margin: var(--s1) 0 0; max-width: 46ch;
  font-size: var(--t-sm); line-height: var(--il-sm); color: var(--mute);
}
/* Rândul există mereu în pagină, ca sondajul să-l poată umple și goli fără să
   mute nimic altceva; gol, iese cu totul din așezare — un `<p>` fără litere e
   tot un `<p>`, iar marginea lui ar fi lăsat o gaură sub titlu pe adresele
   bune, adică pe cele mai multe. */
.stare-adr-de-ce:empty { display: none; }
.adr-ai-rapid {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s2) var(--s3); margin-top: var(--s3); padding: var(--s2) var(--s3);
  border: 1px solid var(--info-line); border-radius: var(--r-sm); background: var(--info-bg);
}
.adr-ai-rapid > span { display: inline-flex; align-items: center; gap: var(--s2); color: var(--info-ink); }
.adr-ai-rapid svg { flex: none; }

/* Pe coloana principală, conținutul coletului vine imediat după adresă.
   Profilul clientului rămâne disponibil, dar nu mai împinge lista de pe raft
   sub un cartonaș de context. */
.order-primary { display: flex; flex-direction: column; }
.order-primary > .address-card { order: 1; }
.order-primary > .colet-card { order: 2; margin-bottom: var(--s4) !important; }
.order-primary > .profil-client { order: 3; margin-bottom: 0; }

/* Clapeta cu aparatul de verificat. Nu e un card în card: e o linie de care se
   trage. De aia n-are nici fundal, nici chenar — doar despărțitorul de sus,
   care spune unde se termină adresa citită și începe adresa lucrată. */
.adr-lucru { margin-top: var(--s4); border-top: 1px solid var(--line); }
.adr-lucru > summary {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: var(--s3) 0 0; list-style: none;
  font-size: var(--t-sm); color: var(--mute);
}
.adr-lucru > summary::-webkit-details-marker { display: none; }
.adr-lucru > summary:hover { color: var(--ink); }
.adr-lucru > summary svg { transition: transform var(--durata-2) var(--curba); flex: none; }
.adr-lucru[open] > summary svg { transform: rotate(180deg); }
/* Când e deschisă fiindcă e ceva de reparat, clapeta nu mai e un buton de
   curiozitate — e începutul treburilor. Primul câmp trebuie să înceapă cu un
   spațiu de respirat, nu lipit de rândul pe care tocmai s-a apăsat. */
.adr-lucru[open] > summary { margin-bottom: var(--s4); }

/* „Ce urmează” — un singur pas, scris ca instrucțiune.
   Se numea `.pas`, la fel cu rândurile de cifre de pe ecranul de tură și de pe
   retururi. Două componente diferite pe același nume: regula cealaltă venea mai
   jos în fișier și o rescria pe asta, iar dunga din stânga dispărea fără s-o fi
   șters cineva. Numele spune acum ce e, nu ce formă are. */
.urmeaza {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  background: var(--card); border: 0;
  box-shadow: inset 3px 0 0 var(--accent); border-radius: var(--r); corner-shape: var(--colt-continuu);
}
/* Dunga ține aceeași scară ca restul dashboard-ului: cerneală cât mai e ceva de
   făcut, verde când s-a terminat. Roșul rămâne pentru ce e greșit. */
.urmeaza.gata { box-shadow: inset 3px 0 0 var(--ok); }
.urmeaza-ce { display: flex; gap: var(--s3); align-items: flex-start; min-width: 0; }
.urmeaza-ce svg { flex: none; margin-top: 1px; color: var(--ink); }
.urmeaza.gata .urmeaza-ce svg { color: var(--ok); }
.urmeaza-ce b { font-size: var(--t-base); font-weight: 600; }
.urmeaza-ce .sub { display: block; margin-top: var(--s-tip); }
/* Ce pleacă mai departe stă în aceeași cutie cu butonul care o trimite, sub
   amândouă, pe toată lățimea. Înainte era un rând orfan afară, la marginea
   paginii, aliniat cu nimic. */
/* `flex: 0 0 100%`, nu `flex-basis` cu `max-width`: într-un rând flex mărimea
   după care se decide ruperea e cea de bază *strânsă între min și max*, deci un
   `max-width` mic îl face să încapă lângă butoane în loc să treacă dedesubt. */
.urmeaza-apoi {
  flex: 0 0 100%; margin: 0; padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--mute); line-height: var(--il-sm);
}
/* Butoanele de confirmare cu numele lor scris. Trei iconițe fără text se
   confundă exact când nu trebuie — la telefon, cu clientul în așteptare. */
.seg.lung .ib { width: auto; height: 30px; padding: 0 var(--s3); gap: var(--s2); font-size: var(--t-md); }
.seg.lung .ib span { white-space: nowrap; }

.banner.nota { background: var(--mov-bg); color: var(--mov-ink); }

/* Suma pe care o încasează curierul. Se citește de la doi metri. */
.bani-mare { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm);
             background: var(--surface-2); border: 1px solid var(--line); }
.bani-mare.cod { background: var(--warn-bg); border-color: var(--warn-line); }
.bani-mare b { display: block; font-size: var(--t-xl); font-weight: 600;
               font-variant-numeric: tabular-nums; }
.bani-mare.cod b { color: var(--warn-ink); }
.bani-mare span { display: block; margin-top: var(--s-tip); font-size: var(--t-sm); color: var(--mute); }
.mute { color: var(--mute); }

/* Curierul, contactul, AWB-ul și factura sunt un singur rezumat de expediere.
   La lățimea cardului încap două perechi pe rând; pe telefon revin la lista
   obișnuită, fără coloane strivite. */
.expeditie-kv {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  column-gap: var(--s3);
}
.expeditie-kv dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .expeditie-kv { grid-template-columns: auto minmax(0, 1fr); }
  .adr-ai-rapid .btn { width: 100%; }
}

/* Linkul de plată, sub suma de încasat. Albastru, nu galben: cutia de deasupra
   e galbenă fiindcă rambursul e o grijă — bani neîncasați, care pot să nu vină.
   Asta e ieșirea din grija aia, deci n-are voie să arate la fel de îngrijorată.
   Nici verde nu poate fi: verde înseamnă în toată aplicația „s-a făcut”, iar
   aici nu s-a făcut nimic încă, doar se poate face.
   Aceeași construcție ca `.potriv` de mai jos — chenar, capac cu iconiță, notă —
   ca să nu pară alt fel de cutie decât restul paginii. */
.plink { margin: calc(-1 * var(--s2)) 0 var(--s4); padding: var(--s3) var(--s4);
         border-radius: var(--r-sm); background: var(--info-bg);
         border: 1px solid var(--info-line); }
.pl-cap { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); }
.pl-cap svg { flex: none; color: var(--info-ink); }
.pl-cap b { color: var(--info-ink); }
/* Explicația de lângă titlu sare pe rândul ei când nu mai încape: strivită,
   „coletul pleacă fără ramburs” se rupea în trei cuvinte pe rând. */
.pl-cap .sub { flex: 1 1 100%; color: var(--mute); font-size: var(--t-sm); }
@media (min-width: 560px) {
  .pl-cap .sub { flex: 0 1 auto; }
  /* Punctul de mijloc, ca peste tot unde două lucruri stau pe același rând. */
  .pl-cap .sub::before { content: '· '; }
}

.pl-rand { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
/* Linkul se vede cât încape și se poate selecta cu mâna. Aceeași literă ca tot
   restul aplicației — un singur câmp scris cu altă literă ar fi arătat a alt
   fel de dată, iar linkul ăsta nu se citește caracter cu caracter, se copiază. */
.pl-url {
  flex: 1 1 240px; min-width: 0; padding: var(--s2) var(--s3);
  border: 1px solid var(--info-line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); text-overflow: ellipsis;
}
.pl-url:focus { border-color: var(--info-line); }
/* Butonul umple rândul pe telefon și stă lângă link pe ecran lat: e ținta pe
   care o apasă degetul din depozit, nu una de nimerit între alte două. */
.plink .btn { flex: 1 1 100%; justify-content: center; }
@media (min-width: 560px) { .plink .btn { flex: 0 0 auto; } }
/* Bifa de după copiere. Verde, fiindcă acum chiar s-a făcut ceva. */
.plink .btn.gata { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-bg); }
.plink .note { margin: var(--s3) 0 0; }

/* Rândul care spune că se uită cineva la Shopify în locul tău. Punctul care
   pulsează e cel de la capul listei — același semn, aceeași promisiune. */
.pl-stare { display: flex; align-items: center; gap: var(--s2); }
.pl-stare .live { flex: none; }

/* Linkul oprit: cutia rămâne, hașurată, ca să se vadă că aici era ceva și de ce
   nu mai e. Gri, nu roșu — nu s-a stricat nimic, doar s-a făcut deja o hârtie.
   Hașura o desenează chiar chenarul (fundal în dungi înclinate), fiindcă „nu se
   poate atinge” se citește dintr-o privire, înainte de propoziție. */
.plink.oprit {
  border-color: var(--line); color: var(--faint);
  background: var(--surface) repeating-linear-gradient(
    -45deg, transparent 0 6px, var(--surface-2) 6px 12px);
}
.plink.oprit .pl-cap svg, .plink.oprit .pl-cap b { color: var(--faint); }
/* Titlul tăiat: în toată aplicația tăiat înseamnă „a fost și nu mai e” (vezi
   rambursul plătit pe link, din listă). Aici e exact același înțeles. */
.plink.oprit .pl-cap b { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Nota de pe comandă, în rândul din listă. Mică, dar colorată altfel decât
   tot restul: e singurul text din rând scris de un om, nu de sistem. */
.nota-mica {
  margin-top: 3px; padding: var(--s-tip) var(--s2); border-radius: var(--r-xs); font-size: var(--t-sm);
  background: var(--mov-bg); color: var(--mov-ink); border: 1px solid var(--mov-bg-2);
  line-height: var(--il-sm);
}
/* Plăcuța poartă balonul cu nota întreagă, deci nu ea taie textul, ci copilul. */
.nota-mica > .nota-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Aceeași plăcuță, dar în rândul din tabel: la 24px aerul dinăuntru ar mânca o
   treime din poză, așa că rămâne doar chenarul. */
.poza.mic { width: 24px; height: 24px; border-radius: var(--r-xs); padding: 0; }

/* Verdictul agentului de adrese — prima dintre cele trei cutii de verificare,
   fiindcă spune cel mai mult: celelalte două compară, ea desface și explică.
   Aceeași construcție ca ele (chenar, capac cu iconiță, notă), altă culoare.
   Albastru la „a corectat”, fiindcă e ceva de făcut, nu ceva stricat: verdele
   înseamnă în toată aplicația „gata”, iar aici nimic nu e gata până nu apasă
   omul. Galben la „n-a putut confirma” — o adresă rămasă neconfirmată e o
   grijă, nu o greșeală. Cenușiu când verificarea a rămas în urma adresei. */
.ai { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm);
      background: var(--info-bg); border: 1px solid var(--info-line); }
.ai.s-neconfirmat { background: var(--warn-bg); border-color: var(--warn-line); }
.ai.s-neschimbat  { background: var(--ok-bg);   border-color: var(--ok-line); }
.ai.s-invechit    { background: var(--surface-2); border-color: var(--line); }
/* Fără verdict nu e nici bine, nici rău: e doar o comandă la care agentul n-a
   ajuns. Cenușiu ca și „învechit”, și fără fond colorat — un rând cu un buton,
   nu un panou care cere atenție. */
.ai.s-lipsa { background: none; border-style: dashed; border-color: var(--line); }

.ai-cap { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
          font-size: var(--t-md); }
.ai-cap svg { flex: none; color: var(--info-ink); }
.ai.s-neconfirmat .ai-cap svg { color: var(--warn); }
.ai.s-neschimbat  .ai-cap svg { color: var(--ok); }
.ai.s-invechit    .ai-cap svg { color: var(--mute); }
/* Încrederea se scrie mic, după stare, fiindcă e a agentului despre el însuși.
   Pusă la fel de mare ca verdictul, s-ar fi citit ca o a doua stare. */
.ai-cap .sub { font-size: var(--t-xs); color: var(--mute); }

.ai-stare { margin-left: auto; padding: var(--s-tip) var(--s2); border-radius: var(--r-pill);
            border: 1px solid var(--info-line); background: var(--card);
            color: var(--info-ink); font-size: var(--t-xs); font-weight: 600;
            white-space: nowrap; }
.ai.s-neconfirmat .ai-stare { color: var(--warn-ink); border-color: var(--warn-line); }
.ai.s-neschimbat  .ai-stare { color: var(--ok-ink);   border-color: var(--ok-line); }
.ai.s-invechit    .ai-stare { color: var(--ink-2);    border-color: var(--line); }

.ai-vechi { margin: var(--s3) 0 0; color: var(--ink); }

/* Cât de departe a plecat propunerea. Pe o corectură obișnuită e un rând
   subțire, cât să se poată ignora; când e mult, se colorează ca o eroare și
   crește cu două rânduri de comparat, fiindcă acolo chiar e nevoie de citit.
   Diferența dintre cele două stări e făcută dinadins mare: dacă rândul ar arăta
   la fel mereu, ar fi decor. */
.ai-dist { margin: var(--s3) 0 0; padding: var(--s2) var(--s3);
           border: 0; border-radius: var(--r-xs);
           background: var(--card); font-size: var(--t-sm); color: var(--ink-2); }
.ai-dist b { color: var(--ink); font-size: var(--t-md); }
.ai-dist .sub { margin-left: auto; }
.ai-dist.grav { border-color: var(--err-line); background: var(--err-bg);
                color: var(--ink); }
.ai-dist.grav svg { color: var(--err-ink); }
.ai-dist .note { margin: var(--s2) 0 0; }

/* Cele două scrieri, una sub alta. Etichetele aliniate la stânga și valorile
   pe același start, ca ochiul să compare pe verticală — o adresă mutată în alt
   oraș se vede din prima privire numai dacă cuvintele încep în același loc. */
.ai-fata { display: grid; grid-template-columns: auto 1fr; gap: var(--s-tip) var(--s2);
           margin: var(--s2) 0 0; }
.ai-fata dt { color: var(--mute); font-size: var(--t-xs);
 padding-top: 1px; }
.ai-fata dd { margin: 0; color: var(--ink); }

/* Schimbările, una pe rând. Fiecare e o propoziție întreagă — câmpul, ce era,
   ce devine, și dedesubt de ce — fiindcă asta se citește înainte de a apăsa. */
.ai-schimbari { list-style: none; margin: var(--s3) 0 0; padding: 0;
                display: flex; flex-direction: column; gap: var(--s2); }
.ai-schimbari > li { padding: var(--s3); border-radius: var(--r-xs);
                     background: var(--card); border: 0; }
.ai-rand { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2);
           font-size: var(--t-md); }
.ai-rand svg { flex: none; align-self: center; color: var(--mute); }
/* Numele câmpului ține o lățime a lui, ca pe mai multe rânduri săgețile să cadă
   una sub alta. Sub 380 px lățimea fixă strivea „Cod poștal” pe două rânduri,
   deci acolo se lasă liber. */
.ai-camp { color: var(--mute); font-size: var(--t-sm); }
@media (min-width: 380px) { .ai-camp { flex: none; width: 88px; } }
/* Ce a scris clientul rămâne lizibil, nu tăiat: nu e greșeala lui, e doar ce a
   fost. Tăiat cu linie, rândul ar fi arătat ca o mustrare. */
.ai-din { color: var(--ink-2); }
.ai-in { font-weight: 600; color: var(--ink); }
.ai-schimbari .note { margin: var(--s-tip) 0 0; }

/* Ce a rămas de lămurit și ce a oprit frâna. Aceeași formă, altă greutate:
   nelămuririle sunt întrebări, controalele sunt opriri. */
.ai-note { list-style: none; margin: var(--s3) 0 0; padding: 0;
           display: flex; flex-direction: column; gap: var(--s-tip);
           font-size: var(--t-sm); color: var(--ink-2); }
.ai-note > li { padding-left: var(--s3); border-left: 2px solid var(--line); }
.ai-note.grav > li { border-left-color: var(--err-line); color: var(--ink); }

.ai-fa { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
         margin-top: var(--s3); }
.ai-fa .sub { flex: 1 1 100%; }
@media (min-width: 560px) { .ai-fa .sub { flex: 1 1 auto; } }

/* Chemarea agentului. Aceeași așezare ca `.ai-fa`, dar despărțită de ea cu o
   linie: una umple formularul cu ce a găsit deja, cealaltă îl trimite să caute
   din nou. Două apăsări cu urmări cu totul diferite nu stau lipite. */
.ai-cere { display: flex; align-items: center; flex-wrap: wrap;
           gap: var(--s2) var(--s3); margin-top: var(--s3);
           padding-top: var(--s3); border-top: 1px solid var(--line); }
.ai-cere .sub { flex: 1 1 100%; color: var(--mute); }
@media (min-width: 560px) { .ai-cere .sub { flex: 1 1 auto; } }
/* Panoul „nu s-a uitat” n-are ce despărți: acolo rândul e singurul lucru. */
.ai.s-lipsa .ai-cere { margin-top: var(--s2); padding-top: 0; border-top: none; }
/* Cât timp așteptăm agentul, în locul butonului stă textul — la fel de înalt,
   ca rândul să nu sară când se schimbă unul în celălalt. */
.ai-chemat { display: inline-flex; align-items: center; gap: var(--s2);
             min-height: 28px; color: var(--ink-2); }
.ai-chemat svg { flex: none; color: var(--mute); }

/* Căsuța pe care tocmai a umplut-o butonul. Semnul rămâne până la salvare, nu
   se stinge singur: butonul poate schimba șapte căsuțe dintr-o apăsare, iar
   omul are de recitit exact pe acelea înainte să trimită coletul. O clipire de
   două secunde s-ar fi terminat înainte să ajungă el cu ochii jos. */
.form .ai-pus { border-color: var(--info-line); background: var(--info-bg); }

/* Potrivirea cu nomenclatorul poștal — între formularul de adresă și răspunsul
   GLS, fiindcă asta e și ordinea muncii. Are aceeași construcție ca `.verif` de
   mai jos (chenar, capac cu iconiță, notă) ca să nu pară alt fel de cutie: sunt
   două verificări una sub alta, iar dacă ar arăta diferit ar părea că una e
   despre altceva. Ce le deosebește e culoarea stării și eticheta din dreapta. */
.potriv { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm);
          background: var(--surface-2); border: 1px solid var(--line); }
.potriv.s-valida  { background: var(--ok-bg);   border-color: var(--ok-line); }
.potriv.s-aproape { background: var(--warn-bg); border-color: var(--warn-line); }
/* Amândouă opresc AWB-ul până se lămurește ceva, deci amândouă sunt roșii.
   Deosebirea dintre ele o spun cuvintele, nu culoarea. */
.potriv.s-nesigura, .potriv.s-necunoscuta {
  background: var(--err-bg); border-color: var(--err-line); }

/* Cutia e un plic: rândul de titlu rămâne mereu, restul se strânge sub el.
   Se strânge de la sine când altcineva a răspuns deja mai bine — agentul —
   și lista e de acord cu el. Titlul nu dispare fiindcă pe el scrie cine a
   răspuns și ce a răspuns; ce dispare sunt cele două căutări cu procentele
   lor, care pe o adresă bună nu spun nimănui nimic și împing răspunsul GLS
   sub marginea ecranului. */
.pt-cap { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md);
          cursor: pointer; list-style: none; }
.pt-cap::-webkit-details-marker { display: none; }
.pt-cap svg { flex: none; color: var(--mute); }
/* Semnul că rândul se poate deschide. Stă după etichetă, mic și cenușiu: e o
   unealtă, nu o stare, și n-are voie să se citească drept al treilea verdict. */
.potriv > .pt-cap::after, .verif > .v-cap::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-left: var(--s2);
  border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--durata-2) var(--curba);
}
.potriv[open] > .pt-cap::after, .verif[open] > .v-cap::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
/* Strânsă, cutia e un singur rând: fără marginea de sub titlu n-ar mai fi
   nimic dedesubt de care s-o despartă. */
.verif:not([open]) > .v-cap { margin-bottom: 0; }
.potriv.s-valida  .pt-cap svg { color: var(--ok); }
.potriv.s-aproape .pt-cap svg { color: var(--warn); }
.potriv.s-nesigura .pt-cap svg, .potriv.s-necunoscuta .pt-cap svg { color: var(--err); }

/* Starea stă la capătul rândului, ca etichetă, nu ca al doilea titlu. */
.pt-stare { margin-left: auto; padding: var(--s-tip) var(--s2); border-radius: var(--r-pill);
            border: 0; background: var(--ap-fill-2); color: var(--ink-2);
            font-size: var(--t-xs); font-weight: 500; white-space: nowrap; }
.potriv.s-valida  .pt-stare { color: var(--ok-ink);   border-color: var(--ok-line); }
.potriv.s-aproape .pt-stare { color: var(--warn-ink); border-color: var(--warn-line); }
.potriv.s-nesigura .pt-stare, .potriv.s-necunoscuta .pt-stare {
  color: var(--err-ink); border-color: var(--err-line); }

/* Propoziția care spune ce e de făcut. Se citește neagră, nu gri: pe ecranul
   ăsta e singurul rând care dă o instrucțiune. */
.pt-de-ce { margin: var(--s3) 0 0; font-size: var(--t-md); color: var(--ink); }

/* Cele două căutări, una lângă alta cât încape, una sub alta când nu. */
.pt-verif { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: var(--s3); margin-top: var(--s3); }
.pt-v { padding: var(--s3); border-radius: var(--r-xs);
        background: var(--card); border: 0; }
/* Căutarea care n-a găsit nimic nu primește fundal alb: altfel un dreptunghi
   gol, plin, arată ca un răspuns care încă se încarcă. */
.pt-v.gol { background: transparent; border-style: dashed; }
.pt-v-cap { display: flex; align-items: baseline; justify-content: space-between;
            gap: var(--s2); margin-bottom: var(--s2); font-size: var(--t-sm); }
.pt-v-cap b { font-weight: 600; }
.pt-campuri { list-style: none; margin: 0; padding: 0; font-size: var(--t-md); }
.pt-campuri li { display: flex; align-items: baseline; gap: var(--s2);
                 padding: var(--s1) 0; border-top: 1px solid var(--line-moale); }
.pt-campuri li:first-child { border-top: 0; padding-top: 0; }
.pt-nume { flex: none; width: 74px; color: var(--mute); font-size: var(--t-sm); }
.pt-val { flex: 1; min-width: 0; overflow-wrap: anywhere;
          font-variant-numeric: tabular-nums; }
.pt-scor { flex: none; font-size: var(--t-sm); font-weight: 600;
           font-variant-numeric: tabular-nums; color: var(--ok-ink); }
.pt-scor.jos { color: var(--warn-ink); }
.pt-scor.gol { color: var(--faint); font-weight: 400; }
.pt-v .note { margin: var(--s2) 0 0; }
.pt-legenda { margin-top: var(--s2); }

.pt-fa { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
         margin-top: var(--s3); }
.pt-fa .sub { flex: 1; min-width: 0; }

/* Când lista dă mai multe răspunsuri: câte un rând, cu butonul lui. */
.pt-candidati { list-style: none; display: grid; gap: var(--s1);
                margin: var(--s3) 0 0; padding: 0; }
.pt-candidati form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
                     padding: var(--s2) var(--s3); border-radius: var(--r-xs);
                     background: var(--card); border: 0; }
.pt-candidati b { flex: none; font-variant-numeric: tabular-nums; }
/* Județul nu se strâmtează niciodată: el și tronsonul sunt tot ce deosebește
   un rând de următorul, iar dacă îl lăsăm să se strângă sub textul lui, textul
   nu dispare — iese din căsuță și se scrie peste vecin. Golul dintre ei îl ține
   tronsonul, care are voie și să se rupă pe două rânduri. */
.pt-candidati form > span:not(.sub) { flex: none; }
.pt-candidati .sub { margin-left: auto; min-width: 0; text-align: right; }
.pt-candidati .btn { flex: none; }
/* Numele localității e text, nu cifre: fără tabular-nums, care îi rărește
   literele fără să câștige nimic — el n-are ce alinia pe verticală. */
.pt-orase .pt-candidati b { font-variant-numeric: normal; }
/* Rândul de deasupra listei spune ce sunt rândurile de dedesubt. Fără el,
   patru butoane cu nume de sate apăreau sub o explicație care vorbea despre
   cod poștal, și nu se vedea că sunt răspunsul la altă întrebare. */
.pt-orase { margin-top: var(--s4); }
.pt-orase-t { display: block; font-size: var(--t-sm); color: var(--ink-2); }
.pt-orase .pt-candidati { margin-top: var(--s2); }

/* Ce pleacă efectiv la GLS, sub formularul de adresă. */
.verif { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm);
         background: var(--surface-2); border: 1px solid var(--line); }
.verif.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.verif.issue { background: var(--warn-bg); border-color: var(--warn-line); }
/* Și ăsta e plic, dar cu altă măsură decât cel de deasupra: se strânge numai
   când GLS a răspuns „da”. Atunci cele șase rânduri sunt adresa din formular
   scrisă a doua oară. Când a refuzat, sau când n-a fost întrebat încă,
   rândurile alea sunt tocmai ce e de citit — și rămân deschise. */
.verif .v-cap { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
                font-size: var(--t-md); cursor: pointer; list-style: none; }
.verif .v-cap::-webkit-details-marker { display: none; }
.verif .v-cap svg { color: var(--mute); flex: none; }
.verif.ok .v-cap svg { color: var(--ok); }
.verif.issue .v-cap svg { color: var(--warn); }
.verif .note { margin: var(--s2) 0 0; }
/* Când GLS a refuzat adresa, rândul ăsta nu mai e o explicație — e singurul
   lucru care spune ce ai de făcut. Cutia arată că ceva e greșit, dar nu și ce
   anume: GLS nu întoarce motivul, iar în cutie nu mai scrie nimic altceva.
   Explicațiile se citesc gri peste tot, așa că mărimea rămâne mică; culoarea
   revine la cea a textului, fiindcă aici omul citește ca să repare, nu ca să
   afle un amănunt. */
.verif.issue .note { color: var(--ink); }
.kv.slim { gap: var(--s1) var(--s4); margin: 0; font-size: var(--t-md); }
.kv.slim dd { font-variant-numeric: tabular-nums; }
.kv.total { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }

/* Lista de împachetat. */
.pick { list-style: none; margin: 0; padding: 0; }
.pick li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0;
           border-top: 1px solid var(--line-moale); }
.pick li:first-child { border-top: 0; padding-top: 0; }
/* Poza produsului. Pe lista de împachetat e singurul lucru care se potrivește
   direct cu raftul — omul nu citește „Kevin Murphy REPAIR-ME.WASH”, se uită după
   sticla albastră. De aia:
     · `contain`, nu `cover` — un flacon înalt tăiat sus și jos își pierde exact
       capacul și eticheta, adică semnele după care îl recunoști;
     · un pic de aer în jur, ca produsul să nu atingă muchia;
     · un chenar subțire, fiindcă pozele vin cu fundaluri diferite de la Shopify:
       una pe alb curat se topea în rând și părea că lipsește, alta cu fundal
       colorat umplea plăcuța până în colț. Cu chenar, toate cinci arată ca
       aceeași plăcuță, indiferent ce e în ele. */
.poza { flex: none; width: 52px; height: 52px; border-radius: var(--r-sm); overflow: hidden;
        padding: var(--s-tip); background: var(--card); border: 0; box-shadow: inset 0 0 0 1px var(--line-moale);
        display: flex; align-items: center; justify-content: center; }
.poza img { width: 100%; height: 100%; object-fit: contain; display: block; }
.poza svg { color: var(--faint); }
.buc { flex: none; min-width: 34px; text-align: center; font-size: var(--t-lg); font-weight: 600;
       line-height: 1; font-variant-numeric: tabular-nums; }
.buc i { display: block; font-style: normal; font-size: var(--t-2xs); font-weight: 500;
         color: var(--mute); margin-top: var(--s-tip); }
.pick .ce { flex: 1; min-width: 0; }
.pick .ce b { display: block; font-size: var(--t-base); font-weight: 500; line-height: var(--il-md); }
.pick .ce .sub { display: block; margin-top: var(--s-tip); }
/* Ruptura de rând pentru telefon. E un element gol fiindcă flexbox nu are alt
   fel de „treci pe rândul următor”; pe ecran mare nu există deloc. */
.rupe { display: none; }
.pick .bani { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.pick .bani b { display: block; font-size: var(--t-base); }
.pick .bani .sub { display: block; margin-top: var(--s-tip); }
.pick .scoate { flex: none; }

/* Acțiunile unei linii: un singur buton pe rând, două hotărâri înăuntru. */
.prod-actions { position: relative; flex: none; }
.prod-actions > summary { list-style: none; }
.prod-actions > summary::-webkit-details-marker { display: none; }
.prod-actions[open] > summary { background: var(--surface-2); border-color: var(--line-strong); }
.prod-actions[open] > summary svg { transform: rotate(180deg); }
/* Meniu de kit: sticlă, rază 12, pad 6 (derivat din 6/5/5 al `.ap-menu`, adus
   pe treapta de spațiere), rânduri de 24 Medium 13 cu pad-x 11 → `--s3` (12). */
.prod-actions-menu {
  position: absolute; z-index: 18; right: 0; top: calc(100% + var(--s1));
  width: 240px; padding: var(--s-6); border: 0;
  border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--fond-meniu);
  backdrop-filter: var(--filtru-meniu); box-shadow: var(--umbra-2);
}
.prod-actions-menu button {
  appearance: none; display: flex; align-items: center; width: 100%; min-height: var(--ap-menu-item-h);
  border: 0; border-radius: var(--r-sm);
  padding: 0 var(--s3); background: transparent; color: var(--ink);
  font: inherit; font-size: var(--t-md); font-weight: 500; text-align: left; cursor: pointer;
}
.prod-actions-menu button:hover { background: var(--meniu-ales); color: var(--pe-accent); }
.prod-actions-menu button[disabled] { color: var(--faint); cursor: default; }
.prod-actions-menu button[disabled]:hover { background: transparent; }
.prod-actions-menu .scoate { margin-left: 0; }

/* Modul: Așteptare produse. Rândul este o fișă de lucru, nu încă un tabel
   lat; astfel termenul și acțiunile rămân lizibile și pe telefon. */
.wait-page-head { margin-bottom: var(--s4); }
.wait-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3); margin-bottom: var(--s4); }
.wait-stat { background: var(--surface); border: 0;
  border-radius: var(--r); corner-shape: var(--colt-continuu); padding: var(--s4); display: flex;
  align-items: baseline; gap: var(--s2); }
.wait-stat b { font-size: var(--t-xl); }
.wait-stat span { color: var(--mute); }
.wait-stat.bad { background: var(--err-bg); border-color: var(--err-line); }
.wait-board .card-head { display: flex; justify-content: space-between;
  align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.wait-board .card-head h2, .wait-board .card-head p { margin-top: 0; }
.wait-list { border-top: 1px solid var(--line); }
.wait-row { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(420px, 1.6fr) auto;
  gap: var(--s4); align-items: center; padding: var(--s4) 0;
  border-bottom: 1px solid var(--line); }
.wait-row.overdue { box-shadow: inset 3px 0 0 var(--err); padding-left: var(--s3); }
.wait-row.today { box-shadow: inset 3px 0 0 var(--warn); padding-left: var(--s3); }
.wait-order { display: flex; align-items: center; gap: var(--s2); }
.wait-main h3 { font-size: var(--t-md); margin: 5px 0 var(--s-tip); }
.wait-main p { margin: 0; }
.wait-main .wait-note { margin-top: var(--s2); color: var(--ink); }
.wait-plan { display: grid; grid-template-columns: 1.35fr .65fr 1fr auto;
  align-items: end; gap: var(--s2); }
.wait-plan label { color: var(--mute); font-size: var(--t-xs); }
.wait-plan input, .wait-plan select { display: block; width: 100%; margin-top: var(--s1);
  min-height: var(--h-ctl); border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp);
  background: var(--ap-field-bg); color: var(--ink); padding: 0 var(--pad-camp); font: inherit; }
.wait-plan-note { grid-column: 1 / -2; }
.wait-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2);
  min-width: 145px; }
.wait-due { color: var(--mute); font-size: var(--t-xs); text-align: center; }
.wait-history { margin-top: var(--s4); }
.wait-history > summary { cursor: pointer; font-weight: 600; }
.wait-history-list { margin-top: var(--s3); border-top: 1px solid var(--line); }
.wait-history-list > div { display: grid; grid-template-columns: 120px 1fr auto;
  gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.wait-history-list small { color: var(--mute); }
.wait-dialog-fields { display: grid; grid-template-columns: 150px 1fr;
  gap: var(--s3); margin-top: var(--s3); }

@media (max-width: 1100px) {
  .wait-row { grid-template-columns: 1fr; }
  .wait-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .wait-due { margin-right: auto; text-align: left; }
}
@media (max-width: 640px) {
  .wait-stats { grid-template-columns: 1fr; gap: var(--s2); }
  .wait-stat { padding: var(--s3); }
  .wait-plan { grid-template-columns: 1fr 1fr; }
  .wait-plan-note { grid-column: 1 / -1; }
  .wait-plan > button { width: 100%; }
  .wait-actions .btn { flex: 1 1 auto; }
  .wait-history-list > div { grid-template-columns: 1fr; gap: 3px; }
  .wait-dialog-fields { grid-template-columns: 1fr; }
}

/* Căutarea și previzualizarea înlocuirii. Foaia poate crește, nu pagina de sub
   ea: pe telefon rezultatele se trag în interiorul dialogului. */
.replacement-modal .sheet { max-width: 700px; max-height: calc(100dvh - var(--s6));
                            display: flex; flex-direction: column; }
.replacement-modal .sheet-body { min-height: 0; overflow-y: auto; }
.replace-search { position: relative; margin-bottom: var(--s3); }
.replace-search input {
  display: block; width: 100%; min-height: var(--h-ctl); padding: 0 var(--pad-camp);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp); background: var(--ap-field-bg);
  color: var(--ink); font: inherit;
}
.replace-search input:focus { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }
.replace-status { min-height: 21px; margin: 0 0 var(--s2); color: var(--mute);
                  font-size: var(--t-sm); }
.replace-results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-moale); }
.replace-result { border-bottom: 1px solid var(--line-moale); }
.replace-result > button {
  appearance: none; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) 0;
  border: 0; background: transparent; color: var(--ink); text-align: left;
  font: inherit; cursor: pointer;
}
.replace-result > button:hover { background: var(--surface-2); }
.replace-result > button[disabled] { cursor: default; color: var(--faint); }
.replace-result > button[disabled]:hover { background: transparent; }
.replace-result .poza { width: 46px; height: 46px; }
.replace-result-name { min-width: 0; }
.replace-result-name b { display: block; font-size: var(--t-md); line-height: var(--il-md); }
.replace-result-name span { display: block; margin-top: var(--s-tip); color: var(--mute);
                            font-size: var(--t-sm); }
.replace-result-price { text-align: right; font-size: var(--t-md); font-weight: 600;
                        font-variant-numeric: tabular-nums; white-space: nowrap; }
.replace-result-price span { display: block; color: var(--mute); font-size: var(--t-xs);
                             font-weight: 400; }
.replace-preview { display: flex; flex-direction: column; gap: var(--s4); }
.replace-pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
                gap: var(--s2); align-items: stretch; }
.replace-product { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm);
                   background: var(--surface); min-width: 0; }
.replace-product > span { display: block; margin-bottom: var(--s1); color: var(--mute);
                          font-size: var(--t-xs);
 font-weight: 600; }
.replace-product b { display: block; line-height: 1.35; }
.replace-product small { display: block; margin-top: var(--s2); color: var(--mute); }
.replace-arrow { display: flex; align-items: center; justify-content: center; color: var(--mute); }
.replace-money { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4);
                 margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.replace-money dt { color: var(--mute); }
.replace-money dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.replace-money .replace-total { color: var(--ink); font-weight: 600; }
.replace-delta.plus { color: var(--warn); }
.replace-delta.minus { color: var(--ok-ink); }
.replace-readonly { margin: 0; padding: var(--s3); border-radius: var(--r-sm);
                    color: var(--info-ink); background: var(--info-bg);
                    border: 1px solid var(--info-line); font-size: var(--t-sm); }
.replace-intro { margin-bottom: var(--s3) !important; }
.replace-back {
  appearance: none; align-self: flex-start; padding: 0; border: 0; background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--t-sm); cursor: pointer;
}
.replace-back:hover { color: var(--ink); text-decoration: underline; }
.replace-price-note { margin: 0 !important; color: var(--mute); font-size: var(--t-sm); }
.replace-warning, .replace-error {
  margin: 0 !important; padding: var(--s3); border: 1px solid var(--warn-line);
  border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn-ink);
  font-size: var(--t-sm);
}
.replace-error { border-color: var(--err-line); background: var(--err-bg); color: var(--err); }
.replace-reason { margin-top: 0; }

/* Câte bucăți sunt în depozit. Cifra stă stinsă cât timp ajunge — se aprinde
   doar când nu ajunge, fiindcă atunci se schimbă ce are omul de făcut. */
.stoc { color: var(--mute); }
.stoc.strans { color: var(--warn); }
.stoc.lipsa { color: var(--err); font-weight: 500; }

/* Rândul de scris în fir. Cât mai aproape de „scrii și dai enter”. */
.nota-noua { display: flex; gap: var(--s2); margin: 0 0 var(--s4); }
.nota-noua input {
  flex: 1; min-width: 0; padding: 0 var(--pad-camp); font: inherit; font-size: var(--t-md);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp); background: var(--ap-field-bg); color: var(--ink);
}
/* `outline: 0` de aici bătea regula de sus prin specificitate și scotea semnul
   de tastatură tocmai din câmpul în care se scrie text liber. */
.nota-noua input:focus { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }

/* ── ce s-a vorbit ultima dată ─────────────────────────────────────────────
   Butonul poartă chiar textul însemnării: pe rând nu mai e loc și pentru o
   etichetă, și pentru conținut, iar conținutul e singurul motiv pentru care se
   uită cineva acolo. Pe rândurile fără însemnare rămâne stins, cu un singur
   cuvânt — un buton stins se vede că se poate apăsa; un gol, nu.

   `--tinta-min` fiindcă se apasă cu mâinile ocupate: la 118px lățime de coloană,
   textul are voie să se strângă, înălțimea nu. */
.insemnare {
  display: flex; align-items: flex-start; gap: var(--s1);
  width: 100%; min-height: var(--tinta-min);
  margin-top: 3px; padding: var(--s-tip) var(--s2);
  border: 1px dashed var(--line); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); line-height: var(--il-sm); text-align: left;
  cursor: pointer;
}
.insemnare .ic { flex: none; margin-top: 1px; color: var(--mute); }
/* Două rânduri, ca la nota din Shopify de pe aceeași listă: al treilea ar
   împinge rândul tabelului mai înalt decât coloana de butoane de lângă el. */
.insemnare span {
  min-width: 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.insemnare:hover { border-color: var(--line-strong); background: var(--surface-2); }
/* Scrisă = linie plină și cerneală întreagă; goală = punctat și stins. Deosebirea
   se face din chenar, nu din culoare de fond: pe un rând care e deja galben sau
   roșu de la starea comenzii, încă un fond ar fi al treilea. */
.insemnare:not(.goala) { border-style: solid; border-color: var(--mov-bg-2);
  background: var(--mov-bg); color: var(--mov-ink); }
.insemnare:not(.goala) .ic { color: var(--mov-ink); }
.insemnare.goala { color: var(--mute); }
.insemnare:disabled { cursor: not-allowed; opacity: .6; }
/* Pe pagina comenzii încape o propoziție întreagă și stă singură, nu într-o
   coloană de 118px. */
.insemnare.lunga { width: auto; max-width: 520px; margin-top: var(--s3);
  font-size: var(--t-md); padding: var(--s2) var(--s3); }
.insemnare.lunga span { -webkit-line-clamp: 4; }

/* Câmpul din dialog. Un rând ca la `.nota-noua` nu ajungea: aici se scrie ce a
   spus omul la telefon, iar ce nu se vede în timp ce scrii nu se recitește. */
.insemnare-camp {
  display: block; width: 100%; min-height: 84px; resize: vertical;
  padding: var(--s2) var(--s3); font: inherit; font-size: var(--t-md);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp);
  background: var(--ap-field-bg); color: var(--ink);
}
.insemnare-camp:focus { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }

/* Firul comenzii: ce s-a întâmplat, în ordine, cu cine a făcut-o. */
.fir { list-style: none; margin: 0; padding: 0; }
.fir li { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) 0;
          border-top: 1px solid var(--line-moale); font-size: var(--t-md); }
.fir li:first-child { border-top: 0; padding-top: 0; }
.fir .ic { flex: none; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--surface);
           display: flex; align-items: center; justify-content: center; color: var(--mute); }
.fir li.bad .ic { background: var(--err-bg-2); color: var(--err); }
.fir .ce { flex: 1; min-width: 0; }
.fir .ce b { font-weight: 500; }
.fir li.bad .ce b { color: var(--err); }
.fir .ce .sub { display: block; margin-top: 1px; overflow-wrap: anywhere; }
.fir .cand { flex: none; text-align: right; font-size: var(--t-sm); color: var(--mute); }
.fir .cand i { display: block; font-style: normal; font-size: var(--t-xs); margin-top: 1px; }
.fir li.gol { color: var(--mute); }

/* ── istoricul comenzii, în două coloane ────────────────────────────────────
   Gabriel, 21.08.2026: „pe desktop ocupă foarte mult spațiu… ar trebui să
   împărțim zona de jos în două coloane distincte”. Stânga: strict ce au apăsat
   oamenii. Dreapta: ce a făcut mașina. Împărțirea o face `app/istoric.py` pe
   `actor`, nu CSS-ul — aici doar se vede.

   Fără prag nou (L1): rama e `.cols`, care se rupe deja în teanc la 900px.
   Distincția dintre coloane o ține o linie subțire și un pas de spațiu mai
   mare, nu două fundaluri (L5: spațiul separă grupurile, nu culoarea). Pe
   teanc linia s-ar citi ca o tăietură, deci acolo trece deasupra coloanei a
   doua, unde chiar desparte.

   Cifra de verificat: cartonașul nu iese din ecran la 1560 / 1024 / 390
   (`unelte/cine_iese_din_ecran.py`), iar coloana din dreapta nu împinge
   niciodată coloana din stânga sub linia ei de plecare. */
.istoricul-doua { gap: var(--s6); margin-bottom: 0; }
.istoricul-col { min-width: 0; }
/* „Logurile de operator să fie clar separate și evidențiate față de restul
   istoricului” (Gabriel, 20.08.2026). Separarea o face linia dintre coloane;
   evidențierea se face cu greutate, nu cu culoare — culorile sunt deja luate:
   verdele e al clientului, roșul e al lucrurilor stricate. Ce a apăsat un om se
   citește deci cu un pas mai apăsat decât ce a povestit o mașină. */
.istoricul-col.oameni .fapta .ce b { font-weight: 600; }
@media (min-width: 901px) {
  .istoricul-col.masini {
    padding-left: var(--s6); border-left: 1px solid var(--line-moale);
  }
}
@media (max-width: 900px) {
  .istoricul-col.masini {
    padding-top: var(--s5); border-top: 1px solid var(--line-moale);
  }
}

/* Capul fiecărei coloane spune ce e înăuntru și cât e (L9: totul are un nume
   care se citește). Numărul stă în dreapta, ca la file — se caută cu ochiul în
   același loc pe amândouă coloanele. */
.istoricul-cap {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3); font-size: var(--t-base); font-weight: 600;
 color: var(--ink);
}
.istoricul-cap svg { flex: none; color: var(--mute); }
.istoricul-cap .cate {
  margin-left: auto; flex: none; padding: var(--s-tip) var(--s2);
  border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--t-xs); font-weight: 500; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* Banda de sus a coloanei din stânga: cine a atins comanda, cu cât. Răspunsul
   întreg înainte de primul rând citit — de-aia stă pe fundal, nu în șir. */
.atingeri { list-style: none; margin: 0 0 var(--s4); padding: var(--s3);
            border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); }
.atingeri li { display: flex; flex-wrap: wrap; align-items: baseline;
               gap: var(--s1) var(--s2); font-size: var(--t-md); }
.atingeri li + li { margin-top: var(--s2); padding-top: var(--s2);
                    border-top: 1px solid var(--line); }
.atingeri b { font-weight: 500; color: var(--ink); }
.atingeri .ce-a-facut { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.atingeri .mut { flex: 1 0 100%; font-size: var(--t-sm); }

/* Șirul de fapte. O faptă = o apăsare, nu un rând din bază: cea mai grea
   comandă are 164 de rânduri și 4 fapte. Rândurile pe care fapta le-a produs
   stau dedesubt, în `details`, împreună cu dovada crudă. */
.fapte { list-style: none; margin: 0; padding: 0; }
.fapte .zi-cap {
  padding: var(--s3) 0 var(--s1); font-size: var(--t-xs); font-weight: 600;
 color: var(--faint);
}
.fapte .zi-cap:first-child { padding-top: 0; }
.fapta { border-top: 1px solid var(--line-moale); font-size: var(--t-md); }
.fapte .zi-cap + .fapta { border-top: 0; }
/* Un rând se desenează la fel indiferent dacă are ce deschide: fie e chiar
   `<li>`-ul, fie e `<summary>`-ul dinăuntrul lui. Altfel două fapte una sub
   alta ar sta la doi pași diferiți de margine, după cum au sau n-au urme. */
.fapta > details > summary,
.fapta:not(:has(> details)) {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) 0;
}
.fapta > details > summary { cursor: pointer; list-style: none; }
.fapta > details > summary::-webkit-details-marker { display: none; }
.fapta > details > summary:hover { background: var(--surface-2); }
.fapta .ic { flex: none; width: 24px; height: 24px; border-radius: var(--r-pill);
             background: var(--surface); display: flex; align-items: center;
             justify-content: center; color: var(--mute); }
.fapta.bad .ic { background: var(--err-bg-2); color: var(--err); }
.fapta .ce { flex: 1; min-width: 0; }
.fapta .ce b { font-weight: 500; }
.fapta.bad .ce b { color: var(--err); }
.fapta .ce .sub { display: block; margin-top: var(--s-tip); overflow-wrap: anywhere; }
/* „+3 rânduri automate”, „de 161 de ori” — cât mai e dedesubt, spus în cuvinte,
   ca să se știe că merită deschis. */
.fapta .inca { display: inline-block; margin-top: var(--s-tip);
               font-size: var(--t-xs); color: var(--faint); }
.fapta .cand { flex: none; text-align: right; font-size: var(--t-sm);
               color: var(--mute); font-variant-numeric: tabular-nums; }
.fapta .cand i { display: block; font-style: normal; font-size: var(--t-xs);
                 margin-top: var(--s-tip); }
.fapta > details > summary > .sageata { flex: none; margin-top: var(--s1);
                                        color: var(--line-strong); }

/* Al doilea strat: ce a pornit din apăsare, cu ora fiecărui rând. */
.adanc { padding: var(--s2) 0 var(--s3) calc(24px + var(--s3)); }
.urma { display: flex; gap: var(--s2); margin: 0 0 var(--s1);
        font-size: var(--t-sm); color: var(--ink-2); }
.urma.bad { color: var(--err); }
.urma > .cand { flex: none; width: 58px; color: var(--faint);
                font-variant-numeric: tabular-nums; }
.urma .mut { font-size: var(--t-xs); }

/* Al treilea strat: ce scrie în bază, literă cu literă. Nu e pentru citit zi de
   zi — e pentru ziua în care cineva întreabă de ce a plecat coletul greșit. */
.dovada { margin-top: var(--s2); padding: var(--s2) var(--s3);
          border-radius: var(--r-sm); background: var(--surface); }
.dovada p { margin: 0 0 var(--s1); font-size: var(--t-xs); color: var(--mute); }
.dovada code, .dovada pre {
  display: block; margin: 0; font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere;
}
.dovada pre { margin-top: var(--s1); color: var(--mute); }

/* Benzile din coloana din dreapta. Fiecare automat își are rama lui, ca să nu
   curgă WhatsApp-ul prin GLS și GLS prin import. */
.istoricul .banda { margin-bottom: var(--s4); position: relative; } /* ancora pentru gradientul ::after al secțiunii „fapte lungi” de mai jos */
.istoricul .banda:last-child { margin-bottom: 0; }
.istoricul .banda > h4,
.istoricul .banda > summary > h4 {
  display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2);
  font-size: var(--t-md); font-weight: 600; color: var(--ink-2);
}
.istoricul .banda > h4 svg,
.istoricul .banda > summary > h4 svg { flex: none; color: var(--faint); }

/* WhatsApp are chenar propriu și verde propriu — e singurul loc din istoric în
   care vorbește CLIENTUL, nu noi și nu o mașină de-a noastră. Se vede și goală:
   agentul de confirmări se scrie acum, iar un bloc care apare din senin peste
   două săptămâni se citește ca o defecțiune, pe când unul care stă gol și spune
   ce așteaptă, nu. */
.istoricul .banda.wa {
  padding: var(--s3); border: 1px solid var(--ok-line); border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--ok-bg);
}
.istoricul .banda.wa > h4 { color: var(--ok-ink); }
.istoricul .banda.wa > h4 svg { color: var(--ok); }
.istoricul .banda.wa > h4 .cate { margin-left: auto; padding: var(--s-tip) var(--s2);
  border-radius: var(--r-pill); background: var(--ok-bg-2); font-size: var(--t-xs);
  font-weight: 500; color: var(--ok-ink); }
.istoricul .banda.wa .fapta { border-top-color: var(--ok-line); }
.istoricul .banda.wa.pregatita {
  border-style: dashed; border-color: var(--line-strong); background: transparent;
}
.istoricul .banda.wa.pregatita > h4 { color: var(--mute); }
.istoricul .banda.wa.pregatita > h4 svg { color: var(--faint); }
.istoricul .banda.wa.pregatita > h4 .cate { background: var(--surface); color: var(--mute); }

/* Agentul de adrese e tot o mașină de-a noastră, nu clientul: primește un semn,
   nu un chenar. Un fir la stânga îl desparte de restul șirului automat fără să
   se bată cu verdele de deasupra — WhatsApp rămâne singurul bloc colorat din
   istoric, fiindcă e singurul în care vorbește cineva din afara casei. */
.istoricul .banda.agent {
  padding-left: var(--s3); border-left: 2px solid var(--line-strong);
}
.istoricul .banda.agent > h4 svg { color: var(--ink-2); }

/* Import / Shopify / GLS: cel mai lung șir din pagină și cel mai rar citit.
   Strâns când e lung, ca să nu împingă coloana din stânga în jos degeaba. */
.istoricul details.banda > summary {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer;
  list-style: none;
}
.istoricul details.banda > summary::-webkit-details-marker { display: none; }
.istoricul details.banda > summary > h4 { margin-bottom: 0; }
.istoricul details.banda > summary > .cate {
  margin-left: auto; padding: var(--s-tip) var(--s2); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--t-xs); color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.istoricul details.banda > summary > .sageata { flex: none; color: var(--line-strong); }
.istoricul details.banda[open] > summary { margin-bottom: var(--s2); }
/* Un șir de 300 de rânduri automate nu are voie să facă pagina de trei ecrane.
   Se derulează în el; coloana din stânga rămâne unde e.

   Tăietura se și vede, altfel minte: pe macOS bara de derulare stă ascunsă
   până pui degetul pe ea, iar un rând retezat la jumătatea unei propoziții
   arată ca o eroare de afișare, nu ca „mai e". De aici degradeul de jos și
   bara subțire, mereu desenată. */
.istoricul .banda .fapte.lunga {
  max-height: 460px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  padding-bottom: var(--s3);
}
.istoricul .banda:has(.fapte.lunga)::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px;
  height: var(--s5); border-radius: 0 0 var(--r) var(--r); corner-shape: var(--colt-continuu); pointer-events: none;
  background: linear-gradient(to top, var(--card), transparent);
}
.istoricul .banda.wa:has(.fapte.lunga)::after {
  background: linear-gradient(to top, var(--ok-bg), transparent);
}

.istoricul .gol { margin: 0; padding: var(--s3) 0; color: var(--mute);
                  font-size: var(--t-md); }
.istoricul .banda .gol { padding: 0 0 var(--s1); font-size: var(--t-sm); }
.istoricul-col .nota-noua { margin-bottom: var(--s2); }
.istoricul-col > .note { margin: 0 0 var(--s4); }

/* ── drumul coletului ───────────────────────────────────────────────────────
   Un fir cu buline, nu un tabel: ochiul coboară pe o singură coloană și vede
   dintr-o privire unde s-a oprit coletul. Bulina de sus e încercuită fiindcă
   acolo e coletul acum; restul e istorie. Din dreapta se citește a doua
   poveste, la fel de importantă — cât din toate astea știe și Shopify. */
.drum { list-style: none; margin: 0; padding: 0; }
.drum li { position: relative; display: flex; align-items: flex-start;
           gap: var(--s3); padding: var(--s3) 0; font-size: var(--t-md); }
.drum li + li { border-top: 1px solid var(--line-moale); }
/* Firul dintre buline. Se oprește la ultima, nu curge în gol. */
.drum li:not(:last-child)::before {
  content: ""; position: absolute; left: calc((var(--bulina) - 1px) / 2); top: calc(var(--s3) + 16px);
  bottom: -1px; width: 1px; background: var(--line-strong);
}
.drum .pt { position: relative; z-index: 1; flex: none;
            width: var(--bulina); height: var(--bulina); margin-top: var(--s1);
            border-radius: var(--r-pill); background: var(--line-strong); }
.drum li.gata .pt { background: var(--ok); }
.drum li.rau  .pt { background: var(--err); }
.drum li.drum .pt { background: var(--ink-2); }
/* Bulina de sus e cea de acum. Halo-ul îi ia culoarea stării, ca ochiul să
   nimerească rândul care contează fără să citească nimic. */
.drum li.acum .pt      { box-shadow: 0 0 0 4px var(--surface); }
.drum li.acum.gata .pt { box-shadow: 0 0 0 4px var(--ok-bg-2); }
.drum li.acum.rau  .pt { box-shadow: 0 0 0 4px var(--err-bg-2); }
.drum .ce { flex: 1; min-width: 0; }
.drum .ce b { font-weight: 500; }
.drum li.gata .ce b { color: var(--ok-ink); }
.drum li.rau  .ce b { color: var(--err); }
.drum li.intern .ce b { font-weight: 400; color: var(--ink-2); }
.drum .ce .sub { display: block; margin-top: 1px; overflow-wrap: anywhere; }
/* Scanările identice la rând stau strânse într-un rând. Numărul se scrie lângă
   ce s-a întâmplat, nu în locul lui: „păstrat în depozitul GLS de 11 ori”. Cu
   greutate normală și în gri — e o măsură, nu o veste. */
.drum .ce .ori { font-weight: 400; color: var(--mute); font-size: var(--t-sm); }
.drum .cand { flex: none; text-align: right; font-size: var(--t-sm); color: var(--mute); }
.drum .cand i { display: block; margin-top: var(--s-tip); font-style: normal;
                font-size: var(--t-2xs);
 color: var(--mute); }
.drum .cand i.dus   { color: var(--ok); }
.drum .cand i.nedus { color: var(--warn); }
.tag.warn { background: var(--warn-bg-2); color: var(--warn-ink); }

/* Marfa din coletul întors. Cartonașul cere ceva de la om — de aia poartă
   chenarul galben al lucrurilor nerezolvate, nu albul celor care doar
   povestesc. După ce marfa e pusă la loc, redevine card obișnuit: nu mai are
   nimic de cerut, doar de arătat. */
.card.atentie { border-color: var(--warn-line); background: var(--warn-bg); }
.card.atentie .marfa-intoarsa li { border-color: var(--warn-line); }
.marfa-intoarsa { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.marfa-intoarsa li { display: flex; align-items: center; gap: var(--s3);
                     padding: var(--s2) 0; font-size: var(--t-base); }
.marfa-intoarsa li + li { border-top: 1px solid var(--line); }
/* Titlul ia tot rândul, cifra rămâne unde e — o coloană de căsuțe aliniate se
   verifică dintr-o privire, una zimțată se citește rând cu rând. */
.marfa-intoarsa label, .marfa-intoarsa .titlu { flex: 1; min-width: 0; }
.marfa-intoarsa .buc { flex: none; min-width: 56px; font-variant-numeric: tabular-nums;
                       font-weight: 500; }
.marfa-intoarsa .mut { flex: none; font-size: var(--t-sm); color: var(--mute); }
.marfa-intoarsa input[type="number"] { flex: none; width: 72px; text-align: center;
  padding: 0 var(--s2); border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp);
  font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--ap-field-bg); }
.marfa-intoarsa input[type="number"]:focus { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }
.marfa-intoarsa input[type="number"]:disabled { color: var(--faint); background: var(--surface); }

/* Lista coletelor întoarse, de pe ecranul retururilor. Aceeași croială cu
   „Colete de rezolvat” de pe tură — două locuri care înșiră aceleași colete
   trebuie să arate la fel, altfel par două liste diferite. Cele cu marfa deja
   pusă la loc se sting: rămân de citit, dar nu mai cer nimic. */
/* `minmax(0,1fr)`, nu coloana implicită. O grilă cu o singură coloană `auto`
   își ia lățimea de la cel mai lat rând al ei și n-o taie nimeni la marginea
   containerului: un singur nume lung de produs făcea toate cele 98 de colete
   late de 396px într-un loc de 316 și trăgea pagina lateral. Cu `minmax(0,1fr)`
   pista are podeaua zero și tavanul exact cât locul primit. */
.colete-intoarse {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2);
}
.colete-intoarse > li {
  display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.35fr) minmax(210px, auto);
  align-items: start; column-gap: var(--s5); row-gap: var(--s3);
  padding: var(--s4) 0; font-size: var(--t-md);
}
.colete-intoarse > li + li { border-top: 1px solid var(--line-moale); }
.colete-intoarse > li.gata { color: var(--mute); }
.colete-intoarse > li.pe-drum .ce { color: var(--info-ink); }
.colete-intoarse a { font-weight: 600; }
.colet-identitate, .colet-tracking, .colet-receptie {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-tip);
}
.colete-intoarse .cine { color: var(--ink-2); }
.colet-col-cap { color: var(--mute); font-size: var(--t-2xs); font-weight: 600;
 }
.colete-intoarse .ce { max-width: 100%; color: var(--ink); font-weight: 600;
  overflow-wrap: anywhere; }
.colete-intoarse .cand { color: var(--mute); font-size: var(--t-sm); }
/* `margin: 0` fiindcă `.stare` de la Setări (blocul de stare al expedierii)
   lasă 20px sub el, iar aici e o linie dintr-un rând. */
.colete-intoarse .stare { font-size: var(--t-xs);
 color: var(--warn); font-weight: 600; margin: 0; }
.colete-intoarse .stare.drum { color: var(--info-ink); }
.colete-intoarse .stare.ok { color: var(--ok); }
.receptie-nota { max-width: 31ch; color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.colet-procesare { width: 100%; margin-top: var(--s1); }
.colet-procesare summary { list-style: none; cursor: pointer; }
.colet-procesare summary::-webkit-details-marker { display: none; }
.colet-procesare[open] { grid-column: 1 / -1; }
.colet-procesare[open] > summary { width: max-content; }
.colet-receptie:has(.colet-procesare[open]) { grid-column: 1 / -1; }
.colet-procesare-corp { margin-top: var(--s3); padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.colet-procesare-indemn { margin: 0 0 var(--s2); color: var(--ink-2); font-size: var(--t-sm); }
.colet-procesare .marfa-intoarsa { margin-bottom: var(--s3); }
.colet-procesare .actions { margin-top: 0; }

/* Returul ca listă de lucru: identitate, status, documente, acțiuni. Produsele
   ocupă rândul întreg numai când sunt cerute, ca 98 de colete să nu însemne 98
   de liste desfăcute permanent. */
.retur-colet-filtre { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.retur-colet-filtre .chip { text-decoration: none; }
.colete-intoarse li.retur-colet {
  grid-template-columns: minmax(180px,.9fr) minmax(190px,1fr)
                         minmax(210px,1.1fr) minmax(185px,auto);
  padding: var(--s4); border: 0; border-radius: var(--r-sm);
  background: var(--card);
}
/* Zona moartă dintre telefon și laptopul larg. Cele patru coloane au podele în
   pixeli (180+190+210+185) care, cu golurile și marginea, cer 861px; un laptop
   de 1024 dă 726. Sub 1180px stau două câte două — identitate lângă drum,
   hârtii lângă butoane — și nimic nu mai iese din ecran. Peste 1180px locul
   ajunge (901px de `main` e pragul real), deci cele patru rămân cum erau. */
@media (max-width: 1180px) {
  .colete-intoarse li.retur-colet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.colete-intoarse li.retur-colet + li.retur-colet { border-top: 1px solid var(--line); }
.colete-intoarse li.retur-colet.de_procesat { border-left: 3px solid var(--warn); }
.colete-intoarse li.retur-colet.pe_drum { border-left: 3px solid var(--info-line); }
.colete-intoarse li.retur-colet.procesate { border-left: 3px solid var(--line-strong); }
.colete-intoarse li.retur-colet.inchise_shopify { border-left: 3px solid var(--line-strong);
  background: var(--surface); color: var(--mute); }
.colete-intoarse .stare.inchis { color: var(--mute); }
.colet-documente { min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--s-tip); }
.colet-doc { display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.colet-doc:hover { color: var(--accent); }
.colet-doc b { font-weight: 500; }
.colet-actiuni { min-width: 0; display: flex; align-items: flex-start;
  justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); }
.colet-actiuni .btn { white-space: nowrap; }
.colet-actiuni .btn.on, #retururi-produse.on { background: var(--accent-plin); color: var(--pe-accent-plin); }
.retur-produse-panel { display: none; }
body.retururi-produse-deschise .retur-produse-panel,
.retur-produse-panel.open { display: block; }
.colet-produse { grid-column: 1 / -1; padding-top: var(--s4);
  border-top: 1px solid var(--line-moale); }
.colet-produse-cap { display: flex; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s3); color: var(--ink-2); }
.colet-produse-cap span { color: var(--mute); font-size: var(--t-sm); }
.retur-colet-linii { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: var(--s2); }
.retur-colet-linii li { display: grid; grid-template-columns: 38px minmax(0,1fr);
  gap: var(--s2); align-items: center; padding: var(--s2);
  border: 1px solid var(--line-moale); border-radius: var(--r-xs); }
.retur-colet-linii img, .retur-colet-linii .fara-poza { width: 38px; height: 38px;
  border-radius: var(--r-xs); object-fit: cover; background: var(--surface);
  border: 1px solid var(--line); }
.retur-colet-linii b { display: block; font-size: var(--t-sm); font-weight: 500;
  line-height: var(--il-sm); }
.retur-colet-linii small { display: block; margin-top: var(--s-tip); color: var(--mute); }
.colet-produse .colet-procesare-corp { margin-top: var(--s3); }
@media (max-width: 720px) {
  /* Pe telefon, despărțitorul dintre două colete arăta identic cu liniile
     dintre cele trei informații ale aceluiași colet. Fiecare comandă primește
     acum propria margine și un gol adevărat față de următoarea. */
  .colete-intoarse {
    display: grid; gap: var(--s3);
  }
  .colete-intoarse > li {
    grid-template-columns: 1fr; gap: var(--s2); padding: var(--s4);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2);
  }
  .colete-intoarse > li + li { border-top: 1px solid var(--line); }
  .colet-tracking, .colet-receptie { padding-top: var(--s2); border-top: 1px solid var(--line-moale); }
  .colet-procesare > summary { width: 100%; }
  .colete-intoarse li.retur-colet { grid-template-columns: 1fr; }
  .colet-documente, .colet-actiuni { padding-top: var(--s2);
    border-top: 1px solid var(--line-moale); }
  .colet-actiuni { justify-content: flex-start; }
  .colet-actiuni .btn { flex: 1 1 auto; }
  .retur-colet-linii { grid-template-columns: 1fr; }
}

/* Coletul întors ca rând strâns (1.39.0): identitatea, starea, hârtiile și
   butoanele pe un singur rând, de la 1181px în sus — locul unde cele patru
   coloane încap oricum. Telefonul, data comenzii, textul brut al curierului,
   notele și datele hârtiilor (`.la-detalii` în `retururi.html`) stau în șablon
   și se aprind la o apăsare pe rând (`li.deschis`), exact ca la lista
   comenzilor. Sub 1180px așezarea două câte două rămâne, doar cu detaliile
   stinse; rândul desfăcut e cartonașul de dinainte, neschimbat. */
.colete-intoarse li.retur-colet[data-retur-colet] { cursor: pointer; }
.colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .la-detalii { display: none; }
@media (min-width: 1181px) {
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) {
    padding: var(--s2) var(--s3); row-gap: var(--s1); align-items: center;
    /* Starea („AJUNS ÎN DEPOZIT · Confirmat de GLS 26 aug, 11:08”) e cea mai
       lungă bucată a rândului strâns; primește mai mult decât hârtiile, ca
       rândul de lucru să nu se frângă pe două linii tocmai la coletele care
       cer om. */
    column-gap: var(--s4);
    grid-template-columns: minmax(180px,.8fr) minmax(230px,1.3fr)
                           minmax(200px,1fr) minmax(185px,auto);
  }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-col-cap { display: none; }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-identitate,
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-tracking,
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-documente {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2);
  }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-actiuni { align-items: center; }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-produse { padding-top: var(--s3); }
}
@media (max-width: 720px) {
  /* Pe telefon coletul întors era un cartonaș de 307–394px (măsurat 06.09.2026
     la 390px): patru blocuri cu etichete, hârtiile și butoanele scrise pe
     fiecare. Rândul strâns ține două linii — numărul cu numele în stânga,
     starea cu data ei în dreapta. Hârtiile și butoanele stau sub deget, în
     același cartonaș desfăcut ca înainte (o apăsare pe rând). */
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) {
    /* Starea („PE DRUM SPRE DEPOZIT · Ultima stare ieri, 10:44”) e mai lungă
       decât numele, care se taie oricum cu puncte: la 1,2/1 rândul ieșea
       89–93px din patru linii de stare; la 0,8/1,2 starea ține două. */
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: var(--s2); row-gap: 0; align-items: center;
    padding: var(--s2) var(--s3);
  }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-col-cap,
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-documente,
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-actiuni { display: none; }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-tracking {
    padding-top: 0; border-top: 0; align-items: flex-end; text-align: right;
  }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-tracking .cand { font-size: var(--t-xs); }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-identitate .cine {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .colete-intoarse li.retur-colet[data-retur-colet]:not(.deschis) .colet-produse { padding-top: var(--s3); }
}

/* Lista rândurilor care cer om (`/interventii`, până la 1.5.14 `/orfane`).
   Numele clasei a rămas cel vechi dinadins: croiala e aceeași pentru toate
   patru secțiunile ecranului, iar redenumirea ei ar fi însemnat o diferență
   scrisă în două locuri fără nicio schimbare de aspect. Aceeași croială cu
   „Colete întoarse de curier” de mai sus (`.colete-intoarse`) — un rând
   simplu, fără card propriu, fiindcă fiecare rând de-aici e deja tot ce spune
   un card: o comandă, un AWB, o vechime. `.grow` împinge eticheta „nelămurit”
   sau butonul de anulare la marginea din dreapta, la fel ca lângă
   „Contabilitate” pe tură. */
.orfane-lista { list-style: none; margin: 0; padding: 0; }
.orfane-lista li { display: flex; align-items: baseline; flex-wrap: wrap;
                   gap: var(--s1) var(--s3); padding: var(--s2) 0; font-size: var(--t-md); }
.orfane-lista li + li { border-top: 1px solid var(--line-moale); }
.exceptii-lista li { display: flex; flex-direction: column; align-items: stretch;
                     gap: var(--s2); overflow-wrap: anywhere; }
.exceptii-grup + .exceptii-grup { margin-top: var(--s4); }
.exceptii-grup h3 { margin-bottom: var(--s2); }
.exceptii-lista .sub { color: var(--mute); font-size: var(--t-sm); }
.exceptii-lista .btn { align-self: flex-start; }
.exceptii-filtre { display: grid; gap: var(--s2); }
@media (min-width: 720px) {
  .exceptii-filtre { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
}
/* Culoarea de-avertisment, nu un `.tag`: fiecare rând de-aici e deja peste
   prag prin construcție (`candidati()` nu scoate altceva), deci vechimea nu e
   o excepție de semnalat, e fapta de bază a ecranului — se citește ca text,
   nu ca insignă. */
.orfane-lista .vechime { flex: none; color: var(--warn); font-size: var(--t-sm); }
/* Motivul întors de GLS, pe rândul lui, la orice lățime: e text scris de
   altcineva, de lungime necunoscută — o propoziție întreagă sau două cuvinte —
   iar strâns între vecinii lui ar împinge starea comenzii de pe rând. Pe
   celelalte trei liste nu apare; acolo tot ce se arată e scris de noi și încape. */
.orfane-lista .brut { flex: 1 0 100%; margin-top: 0; }
.intervention-plan {
  flex: 1 0 100%; margin-top: var(--s1); padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.intervention-plan summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  min-height: 32px; color: var(--mute); font-size: var(--t-sm); cursor: pointer;
}
.intervention-plan summary::marker { color: var(--faint); }
@media (max-width: 720px) {
  .orfane-lista .sub { flex: 1 0 100%; }
}

@media (max-width: 560px) {
  .seg.lung .ib span { display: none; }
  .seg.lung .ib { width: 34px; padding: 0; }
  .pick .bani .sub { display: none; }
  /* Rândul de produs are cinci coloane. Pe telefon rămâneau 68px pentru titlu,
     adică un cuvânt pe rând, cu prețul plutind pe la mijlocul turnului de text
     — se citea ca și cum ar fi scris peste el. Se rupe în două: sus ce ții în
     mână (poza, câte bucăți, ce e), jos cifra și butonul. */
  .pick li { flex-wrap: wrap; row-gap: var(--s2); }
  .pick .rupe { display: block; flex-basis: 100%; height: 0; margin: 0; }
  .pick .bani { text-align: left; }
  .pick .scoate { margin-left: auto; }
  .pick .prod-actions, .pick .prod-actions-blocat { margin-left: auto; }
  .pick .prod-actions-menu .scoate { margin-left: 0; }
  .replacement-modal { padding: var(--s3); align-items: flex-end; }
  .replacement-modal .sheet { max-height: calc(100dvh - var(--s3)); padding: var(--s4); }
  .replacement-modal .sheet-foot { flex-wrap: wrap; }
  .replacement-modal .sheet-foot .btn { flex: 1; justify-content: center; }
  .replace-result > button { grid-template-columns: 42px minmax(0, 1fr); }
  .replace-result-price { grid-column: 2; text-align: left; }
  .replace-result-price span { display: inline; margin-left: var(--s2); }
  .replace-pair { grid-template-columns: 1fr; }
  .replace-arrow { transform: rotate(90deg); min-height: 20px; }
  /* Filele de magazin nu încap pe telefon și se trag cu degetul — dar bara de
     scroll e ascunsă, deci ultima filă se termina în muchia ecranului și părea
     tăiată, nu continuată. Aceeași margine stinsă ca la tabel: singurul semn
     din interfață care înseamnă „mai e, trage”. */
  .shops {
    -webkit-mask-image: linear-gradient(to right, var(--tus) calc(100% - var(--stins)), transparent);
            mask-image: linear-gradient(to right, var(--tus) calc(100% - var(--stins)), transparent);
  }
  .fir .cand i { display: none; }
  /* Pe telefon ora și starea din Shopify trec sub rând, aliniate cu textul.
     Nu se ascund: exact aici se uită omul care întreabă „a plecat sau nu?”. */
  .drum li { flex-wrap: wrap; }
  .drum .cand { flex-basis: 100%; text-align: left;
                padding-left: calc(var(--bulina) + var(--s3)); }
  .drum .cand i { display: inline; margin-left: var(--s2); }
  /* Rândul de cod poștal are patru coloane, iar pe telefon tronsonul („1+
     impare, 2–34 pare”) e mai lat decât tot ce a mai rămas. Se mută sub cod:
     sus alegerea (codul, județul, butonul), jos motivul pentru care alegi.
     Butonul rămâne la dreapta lui, unde stă degetul. */
  .pt-candidati .sub { order: 1; flex-basis: 100%; margin-left: 0; text-align: left; }
  .pt-candidati .btn { margin-left: auto; }
}

/* ── ecranele de login ──────────────────────────────────────────────────────
   Un cartonaș obișnuit, ca la Shopify admin sau Stripe: marca sus, un titlu,
   un subtitlu, câmpuri cu etichetă deasupra, un singur buton plin cât
   lățimea cartonașului. Aceeași formă în cinci locuri — intrare, ecran
   blocat, folia de deasupra paginii, primul cont, conturile Shopify — ca
   mâna să nu reînvețe nimic de la un ecran la altul. Pe telefon cartonașul
   devine pagina însăși (media query de la 520px): nu mai există o margine de
   fond în jurul lui. */
.pad-page {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s4);
  padding: var(--s6) var(--s4); background: var(--login-fond);
}
/* `<main class="pad">` (cont_rezultat.html) moștenește `flex: 1` de la regula
   globală `main` — pe o coloană flex asta întinde cartonașul cât tot ecranul
   (685px în loc de înălțimea conținutului). Lățimea și padding-ul sunt deja
   suprascrise de `.pad`; doar `flex` scapă, fiindcă vine de pe element, nu de
   pe clasă. */
.pad-page > .pad { flex: none; }
.pad {
  width: min(var(--login-l), 100%); padding: var(--s7);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--login-r); box-shadow: var(--umbra-1);
  text-align: left;
}
.pad-marca {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s6);
  font-size: var(--t-t3); font-weight: 700; color: var(--ink);
}
.pad-marca .rovynt-mark { width: 28px; height: 28px; }

.pad-head { margin-bottom: var(--s5); }
.pad-head > :first-child { margin-top: 0; }
.pad-head h1, .pad-head h2, .pad-head h3 {
  margin: 0; font-size: var(--t-xl); line-height: var(--il-xl); font-weight: 600; color: var(--ink);
}
.pad-head p { margin: var(--s2) 0 0; font-size: var(--login-t); line-height: calc(20 / 14); color: var(--mute); }

.pad-field { display: block; font-size: var(--t-xs);
 color: var(--mute); font-weight: 600;
             margin-bottom: var(--s3); }
.pad-field input, .pad-field select {
  display: block; width: 100%; margin-top: var(--s1); padding: 0 var(--pad-camp);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp); background: var(--ap-field-bg);
  font: inherit; font-size: var(--t-base); color: var(--ink); text-transform: none;
  min-height: var(--h-camp);
}
/* Tastatura de cod e primul lucru atins în zi, și încă o dată la fiecare patru
   minute de nemișcare. Aici scria `outline: none` — adică semnul de tastatură
   era scos dinadins, iar în locul lui rămânea un chenar de 2,56:1. */
.pad-field input:focus, .pad-field select:focus {
  box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent);
}
/* În cartonașul de login câmpurile sunt mai înalte, iar eticheta se citește
   ca text obișnuit, nu ca eticheta mică de formular de mai sus — L6: 500,
   nu 600. */
.pad .pad-field { margin: 0 0 var(--s4); font-size: var(--login-t); font-weight: 500; color: var(--ink); }
.pad .pad-field:last-of-type { margin-bottom: 0; }
.pad .pad-field input, .pad .pad-field select {
  margin-top: var(--s2); min-height: var(--login-camp-h); padding: 0 var(--s3);
  border-radius: var(--login-camp-r); font-size: var(--login-t);
}
/* Câmpul greșit se vede și fără culoare pe text: chenar roșu, apoi și inelul
   de focus, dacă omul revine în câmp să corecteze. */
.pad .pad-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--err); }
.pad .pad-field input[aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 1px var(--err), var(--inel-accent);
}

.pad-err { margin: var(--s2) 0 0; font-size: var(--login-t); line-height: calc(20 / 14); color: var(--err); }
.pad-head + .pad-err { margin: 0 0 var(--s4); }

.pad-go { width: 100%; justify-content: center; margin-top: var(--s5); }
.pad .pad-go { min-height: var(--login-camp-h); border-radius: var(--login-camp-r); font-size: var(--login-t); font-weight: 600; }
/* A doua legătură din `eroare.html` (ghost, sub cea principală): doar
   distanța se schimbă, restul vine deja din regulile de mai sus. */
.pad-go + .pad-go { margin-top: var(--s2); }

.pad-foot { font-size: var(--t-sm); color: var(--mute); text-align: center; margin: 0; }
.pad .pad-foot { margin-top: var(--s3); text-align: left; }
/* Un rând sub celălalt, dar cu un pas mai șters: adresa depozitului spune unde
   ești, versiunea e doar pentru cine o caută. */
.pad-v { font-size: var(--t-xs); color: var(--mute); margin-top: var(--s2); }
.pad-v a { color: var(--mute); text-decoration: underline; font-weight: 500; }
/* „ROVYNT" din subsolul ecranului de intrare este `--mute` pe proză `--mute`: 1:1, adică
   litera identică cu textul de lângă ea, iar singurul semn că e o legătură
   apărea la `:hover` — un semn pe care telefonul nu-l are niciodată.
   Greutatea 500 față de 400 nu ține loc de semn: se vede pe două cuvinte
   alăturate, nu pe unul singur dintr-un rând. Linia trece la starea de
   repaus; `:hover` rămâne ce era, doar cerneala care se închide. */
.pad-v a:hover { color: var(--ink-2); }

.ecran-jos { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.ecran-jos .pad-v { margin-top: 0; }

/* Folia de încuiere: acoperă tabelul, nu îl înlocuiește. */
.lacat {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: var(--s4); padding: var(--s6) var(--s4);
  padding-top: calc(var(--h-dunga, 0px) + var(--s6));
  /* Aici sticla nu era cosmetică, și de-aia nu se scoate pur și simplu.

     Sub folia asta stau numele, telefoanele și adresele clienților, iar ea
     apare tocmai când operatoarea a plecat de la calculator. Ce ținea datele
     ascunse era în bună parte `blur(10px)`: voalul singur e `.72`, adică
     străveziu. Măsurat, text de comandă prin voal FĂRĂ blur dă **1,88:1** —
     nu se citește, dar se ghicește: se văd forme, se numără rânduri, un nume
     lung se deosebește de unul scurt. Scoasă sticla și lăsat voalul, ecranul
     de blocare ar fi devenit o perdea de dantelă.

     Opac, aceeași culoare: **1,00:1**. Nimic. Promisiunea din șablon — „Pagina
     rămâne deschisă dedesubt; nu s-a pierdut nimic" — e despre ce se pierde,
     nu despre ce se vede, și rămâne întreagă: tabelul e tot acolo, în DOM, cu
     starea lui, și se continuă de unde s-a rămas.

     Și e mai aproape de ce a cerut Gabriel decât era sticla: nici ecranul de
     blocare al unui Mac nu-ți arată biroul prin geam mat.

     Fondul e `--login-fond`, aceeași culoare opacă a paginilor de login de
     mai sus — plin, deci tot 1,00:1. */
  background: var(--login-fond);
  animation: fade .18s ease-out;
}

/* Pe „Echipă” și în conturile Shopify cartonașul de login stă în alt cartonaș
   care are deja chenarul lui (`.card`) sau într-un rând de tabel: acolo
   n-are voie să-și mai aducă propriul chenar și propria umbră. */
.card > .pad, .people .pad-row .pad { width: min(var(--login-l), 100%); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
/* Titlul cartonașului („Cod nou pentru X”) nu are voie să iasă mai mare decât
   titlul cardului care-l ține („Oameni”, `--t-md`/700): aici tastatura e o
   unealtă din pagină, nu ecranul — numele ecranului l-a spus deja cardul. */
.card > .pad .pad-head h2, .card > .pad .pad-head h3, .people .pad-row .pad-head h3 {
  font-size: var(--t-md); line-height: var(--il-md); font-weight: 600;
}
.card > .pad .pad-head p, .people .pad-row .pad-head p {
  font-size: var(--t-md); line-height: var(--il-md);
}

/* Sub 520px cartonașul devine pagina, ca paginile de login Shopify/Stripe pe
   telefon: fără margine de fond în jur, fără chenar și umbră proprii. */
@media (max-width: 520px) {
  .pad-page, .lacat { justify-content: flex-start; padding: var(--s7) var(--s5); background: var(--card); }
  .lacat { padding-top: calc(var(--h-dunga, 0px) + var(--s7)); }
  .pad { padding: 0; border: 0; box-shadow: none; }
  .ecran-jos { margin-top: auto; }
}

/* cine e la ecran */
.sepv { width: 1px; height: 20px; background: var(--line); }
.me { display: flex; align-items: center; gap: var(--s1); }
.who { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2) var(--s1) var(--s1);
       border-radius: var(--r-pill); font-size: var(--t-md); }
a.who:hover { background: var(--surface); }
.ini { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--pe-cerneala);
       display: flex; align-items: center; justify-content: center;
       font-size: var(--t-xs); font-weight: 600; flex: none; }
.who-n { font-weight: 500; }

/* Antet: sincronizare, blocare rapidă și un singur profil pentru ambele sesiuni. */
.brand-mark {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-2); background: var(--surface);
}
.company .brand { gap: var(--s2); min-width: 0; min-height: var(--ap-toolbar-item); }
/* Marca Rovynt, aceeași ca pe rovynt.eu: pătratul albastru cu R. */
.rovynt-mark { width: 30px; height: 30px; flex: none; display: block; }
.company .brand-txt { min-width: 0; gap: 0; }
.company .brand-txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Numele din capul barei laterale: Bold 15/20, ca `__brand` din kit; rândul
   de sub el e subtitlul de bară, Medium 11/14. */
.company .brand-txt b { font-size: var(--t-t3); line-height: var(--il-t3); font-weight: 700; }
.company .brand-sub { font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 500; color: var(--mute); }
.top-actions { flex: 0 1 auto; gap: var(--ap-toolbar-gap); }
/* Grupurile din bară sunt capsule de sticlă de 36, cu butoane de 28 (§7). */
.header-sync, .header-session {
  display: flex; align-items: center; min-width: 0; height: var(--ap-toolbar-item);
  padding: var(--s1); border-radius: var(--r-pill);
  background: var(--sticla-fond);
  -webkit-backdrop-filter: var(--sticla-filtru); backdrop-filter: var(--sticla-filtru);
  box-shadow: var(--umbra-sticla);
}
.header-sync { gap: var(--s2); padding-inline: var(--s3) var(--s1); }
.header-sync:not(:has(.header-refresh)) { padding-right: var(--s3); }
.header-sync .svc-row { flex: none; gap: var(--s2); }
.header-sync .svc-row:not(:has(.svc)) { display: none; }
.header-sync-copy { display: flex; align-items: center; gap: var(--s-6); min-width: 0; }
.header-caption { color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 500; }
.header-sync .status { font-size: var(--t-xs); line-height: var(--il-xs); }
.header-sync #live { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: nowrap; }
.header-sync #live-text { min-width: 0; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.header-sync .beat { flex: none; animation: none; }
.header-sync .unknown { color: var(--mute); }
.header-sync .unknown .beat { background: var(--faint); }
/* Butoanele de bară: 28 înalte, capsulă, fără chenar, Medium 13/16, glif 70%. */
.header-refresh, .header-lock, .header-profile-trigger {
  height: var(--ap-toolbar-btn); min-height: 0; min-width: var(--ap-toolbar-btn);
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ap-glyph);
  box-shadow: none;
}
.header-refresh:hover, .header-lock:hover, .header-profile-trigger:hover,
.header-profile[open] > summary { background: var(--ap-fill-3); border-color: transparent; color: var(--ap-glyph); }
.header-refresh:active, .header-lock:active { background: var(--ap-fill); }
.header-refresh { padding: 0 var(--s2) 0 var(--s-6); gap: var(--s1); white-space: nowrap; font-size: var(--t-base); line-height: var(--il-md); font-weight: 500; }
.header-refresh.busy .ic { animation: spin .9s linear infinite; }
.header-refresh .ic { color: inherit; flex: none; }
.header-session { gap: 0; }
.header-lock { width: var(--ap-toolbar-btn); padding: 0; }
/* Butonul de temă (components-spec §12c, apple-surfaces.css `.ap-theme-toggle`):
   din cele două perechi se vede doar cea a temei de acum — soarele pe luminos,
   luna pe întunecat. `data-ap-scheme` îl scrie `apple-theme.js` pe `<html>`,
   înaintea primului desen. Din 22.09.2026 butonul stă în josul meniului
   lateral (`.side-theme`), din 23.09 doar iconița, lângă Setări. */
.ap-theme-toggle > .ap-theme-toggle__dark { display: none; }
[data-ap-scheme="dark"] .ap-theme-toggle > .ap-theme-toggle__light { display: none; }
[data-ap-scheme="dark"] .ap-theme-toggle > .ap-theme-toggle__dark { display: flex; }
.header-profile { position: relative; min-width: 0; }
.header-profile-trigger {
  display: flex; align-items: center; gap: var(--s-6);
  padding: 0 var(--s-6) 0 var(--s-tip); cursor: pointer; list-style: none;
}
.header-profile-trigger::-webkit-details-marker { display: none; }
.header-profile-trigger .ini { width: 24px; height: 24px; font-size: var(--t-xs); }
.header-profile-copy { display: flex; align-items: baseline; gap: var(--s-6); min-width: 0; }
.header-profile-copy > * { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-profile-copy .who-n { font-size: var(--t-base); line-height: var(--il-md); font-weight: 500; color: var(--ink); }
.header-chevron { flex: none; color: var(--mute); width: 12px; }
.header-profile[open] .header-chevron { transform: rotate(180deg); }
/* Panoul profilului e un meniu: sticlă nu, dar raza 12 și umbra de meniu da. */
.header-profile-panel {
  position: absolute; top: calc(100% + var(--s3)); right: calc(-1 * var(--s1)); z-index: 30;
  width: 288px; max-width: calc(100vw - 24px); padding: var(--s-6);
  background: var(--card); border-radius: var(--r); corner-shape: var(--colt-continuu);
  box-shadow: var(--umbra-2);
}
.header-account { display: flex; flex-direction: column; gap: var(--s-tip); padding: var(--s2) var(--s3); }
.header-mobile-identity { display: none; }
.header-account strong { font-size: var(--t-base); font-weight: 500; overflow-wrap: anywhere; }
.header-profile-actions { padding-block: var(--s1); }
.header-account + .header-profile-actions, .header-signout { border-top: 1px solid var(--line-moale); }
.header-profile-actions > a, .header-profile-actions > button {
  width: 100%; min-height: var(--ap-sidebar-row-md); display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
.header-profile-actions > a:hover, .header-profile-actions > button:hover { background: var(--ap-fill-3); }
.header-profile-actions .ic { flex: none; color: var(--accent); }
.header-signout p { margin: 0; padding: 0 var(--s3) var(--s2) calc(var(--s3) + 16px + var(--s2)); color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); }
/* Sub 1200px eticheta butonului de împrospătare cade; rămâne glifa, cu numele
   întreg în `aria-label` și în `title`. */
@media (max-width: 1200px) {
  .header-refresh { width: var(--ap-toolbar-btn); padding: 0; font-size: 0; }
  .header-refresh > span { display: none; }
  .header-sync #live-text { max-width: 180px; }
}
@media (max-width: 760px) {
  .top-actions { width: 100%; flex: 1 1 100%; flex-wrap: nowrap; }
  .header-sync { flex: 1; }
  .header-sync-copy { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; }
  .header-profile-copy, .header-chevron { display: none; }
  .header-session { flex: none; }
  .header-profile-trigger { padding: 0 var(--s-tip); }
  .header-profile-panel { right: 0; }
  .header-sync #live-text { max-width: 150px; }
  .header-mobile-identity { display: flex; }
  .top-actions:has(.header-access) { flex-wrap: wrap; }
  .header-access { order: 1; }
}
@media (max-width: 380px) {
  .header-sync #live-text { max-width: 98px; }
}

/* pagina de echipă */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
             gap: var(--s3) var(--s5); margin: var(--s1) 0 var(--s5); }
/* Numele ecranului, o singură dată, cu aceeași literă (L2). Capetele vechi
   (`.head`, `.bani-a`, `.bani-cap`, `.nepotriviri-cap`, `.settings-head`) sunt
   enumerate aici până trec toate pe `.page-head`. */
.page-head h1, .bani-a h1, .bani-cap h1, .nepotriviri-cap h1, .settings-head h1 {
  margin: 0; font-size: var(--t-2xl); font-weight: 700; line-height: var(--il-2xl);
}
.comanda-stari { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); min-height: 36px; }
.lede { margin: var(--s2) 0 0; font-size: var(--t-md); color: var(--mute); line-height: var(--il-md); max-width: 62ch; }
.people tr.off { opacity: .5; }
.people .pad-row td { background: var(--surface-2); padding: var(--s4); }
/* `inline-block`, nu `inline`: pe ecran îngust o etichetă din două cuvinte se
   rupea la mijloc și fundalul rămânea tăiat pe două rânduri. Așa trece întreagă
   pe rândul următor. */
.tag { display: inline-block; font-size: var(--t-2xs); line-height: var(--il-2xs); font-weight: 500;
       background: var(--ap-fill-2); color: var(--mute); padding: var(--s-tip) var(--s-6); border-radius: var(--r-pill);
       margin-left: var(--s2); vertical-align: middle; }
.chip.sm { padding: var(--s1) var(--s2); font-size: var(--t-xs); }

@media (max-width: 900px) {
  .page-head { flex-direction: column; }
}

/* Financiar: destinațiile active în forma segmented neutră a kitului. */
.fin-tabs {
  display: inline-flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s4);
  padding: var(--s1); border: 0; border-radius: var(--r-sm);
  background: var(--surface);
}
.fin-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-ctl-mic); padding: 0 var(--s4); border-radius: var(--r-xs);
  color: var(--mute); font-size: var(--t-md); font-weight: 500;
}
.fin-tab:hover { background: var(--surface-2); color: var(--ink); }
.fin-tab.active { background: var(--card); color: var(--ink); box-shadow: var(--umbra-segment); }

.alege-zi {
  display: flex; align-items: flex-end; gap: var(--s2); margin-bottom: var(--s4);
}
.alege-zi form { margin: 0; }
.alege-zi label {
  display: flex; flex-direction: column; gap: var(--s1); color: var(--mute);
  font-size: var(--t-xs); font-weight: 600;

}
.alege-zi input {
  min-height: var(--tinta-min); padding: 0 var(--s2);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp);
  background: var(--ap-field-bg); color: var(--ink); font: inherit;
}
.alege-zi .btn.stins { pointer-events: none; color: var(--faint); background: var(--surface); }

.total-zi { border-color: var(--line-strong); }
.total-zi-cap, .borderou-cap, .registru-in-spate {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
}
.total-zi-cap { align-items: baseline; margin-bottom: var(--s4); }
.total-zi-cap h2, .borderou-cap h2 { margin: var(--s1) 0 0; }
.spratit {
  display: block; color: var(--mute); font-size: var(--t-xs); font-weight: 600;
}
.total-zi-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3);
}
.total-cale {
  min-width: 0; padding: var(--s4); border: 1px solid var(--line);
  border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface-2);
}
.total-cale.cash { border-left: var(--s1) solid var(--warn); }
.total-cale.online { border-left: var(--s1) solid var(--info-ink); }
.total-cale-nume { display: block; color: var(--mute); font-size: var(--t-sm); }
.total-cale b {
  display: block; margin-top: var(--s2); font-size: var(--t-2xl);
  line-height: var(--il-2xl); font-variant-numeric: tabular-nums;
}
.total-cale b + small { margin-top: var(--s1); }
.total-cale small { display: block; color: var(--mute); font-size: var(--t-sm); }
.total-cale b + b { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }

.borderou-zi { margin-top: var(--s4); }
.borderou-zi.cash { border-top: var(--s1) solid var(--warn-line); }
.borderou-zi.online { border-top: var(--s1) solid var(--info-line); }
.borderou-cap { margin-bottom: var(--s4); }
.borderou-cap p { margin: var(--s1) 0 0; }
.numar-borderou {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--s7); min-height: var(--s7); padding: var(--s1) var(--s2);
  border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 600;
}
.numar-borderou.intarziat { background: var(--err-bg); color: var(--err-ink); }
.alarma-cash { margin-bottom: var(--s4); }
.alarma-cash.are-intarziate { border-color: var(--err-line); }
.alarma-cash-lista {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1);
}
.alarma-cash-lista li {
  display: grid; grid-template-columns: minmax(90px, auto) minmax(110px, 1fr) auto auto;
  align-items: baseline; gap: var(--s2) var(--s4); padding: var(--s2) var(--s3);
  border-left: 3px solid var(--err); background: var(--err-bg);
  border-radius: var(--r-xs); font-size: var(--t-sm);
}
.alarma-cash-lista li > span:last-child { color: var(--err-ink); }
.incarca-borderou-zi {
  display: flex; align-items: end; flex-wrap: wrap; gap: var(--s3);
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.incarca-borderou-zi label { flex: 1 1 280px; }
.incarca-borderou-zi .note { flex: 1 1 100%; margin: 0; }
.nota-bani {
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm);
}
.nota-bani.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.nota-bani.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.nota-bani ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.nota-bani li + li { margin-top: var(--s1); }

.diferenta-shopify {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2); margin-bottom: var(--s4);
}
.diferenta-shopify > div {
  padding: var(--s3) var(--s4); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2);
}
.diferenta-shopify span, .diferenta-shopify small {
  display: block; color: var(--mute); font-size: var(--t-xs);
}
.diferenta-shopify b {
  display: block; margin-top: var(--s1); font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}
.diferenta-shopify .net { border-color: var(--ok-line); background: var(--ok-bg); }
.diferenta-shopify .net b { color: var(--ok-ink); }
.diferenta-shopify .necunoscut { border-color: var(--warn-line); background: var(--warn-bg); }
.diferenta-shopify .necunoscut b { color: var(--warn-ink); }
.diferenta-gls { margin-top: var(--s3); }
.bani-zi-tabel td { vertical-align: middle; }
.ajustari-bani {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  margin-top: var(--s4); color: var(--mute); font-size: var(--t-sm);
}
.ajustari-bani b { color: var(--ink-2); }
.ajustari-bani span {
  padding: var(--s1) var(--s2); border-radius: var(--r-pill); background: var(--surface);
}
.registru-in-spate { align-items: center; margin-top: var(--s4); }
.registru-in-spate p { margin: var(--s1) 0 0; }

@media (max-width: 720px) {
  /* Cele două case rămân una lângă alta ca ambele totaluri să încapă în prima
     privire pe telefon; separarea pe verticală ar ascunde exact totalul online. */
  .diferenta-shopify { grid-template-columns: 1fr; }
  .total-cale { padding: var(--s3); }
  .total-cale b { font-size: var(--t-lg); }
  .borderou-cap, .registru-in-spate { align-items: stretch; flex-direction: column; }
  .numar-borderou { align-self: flex-start; }
  .alarma-cash-lista li { grid-template-columns: 1fr auto; }
  .alarma-cash-lista li .num { grid-column: 1; }
  .registru-in-spate .btn { width: 100%; }
}

.auto-band {
  display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4);
  padding: var(--s3) var(--s4); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--surface);
}
.auto-band > .ic { flex: none; margin-top: var(--s-tip); }
.auto-band > div { min-width: 0; flex: 1; }
.auto-band b { font-size: var(--t-md); }
.auto-band p { margin: var(--s1) 0 0; color: var(--mute); font-size: var(--t-sm); }
.auto-band.ok { border-color: var(--ok-line); background: var(--ok-bg); }
.auto-band.warn { border-color: var(--warn-line); background: var(--warn-bg); }

.financiar-sectie > summary { list-style: none; cursor: pointer; }
.financiar-sectie > summary::-webkit-details-marker { display: none; }
.financiar-sectie > summary h2 {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-bottom: 0;
}
.financiar-sectie[open] > summary h2 { margin-bottom: var(--s4); }
.financiar-sectie > summary h2::after {
  content: '›'; margin-left: auto; color: var(--faint); font-size: var(--t-lg);
  transform: rotate(90deg); transition: transform var(--durata-1);
}
.financiar-sectie[open] > summary h2::after { transform: rotate(-90deg); }
.sectie-nr {
  min-width: 24px; padding: var(--s-tip) var(--s2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--mute); text-align: center;
  font-size: var(--t-xs);
}

/* Setări: o singură bandă scurtă schimbă vederea din adresă. Lățimea ei este a
   opțiunilor, nu a paginii; pe ecranele înguste devine un singur rând tras cu
   degetul, ca filele magazinelor și ale rapoartelor. */
.settings-head { margin-bottom: var(--s4); }
.settings-head h1 { margin-top: var(--s1); }
/* Butonul fără fond își aliniază textul, nu fondul de la apăsare, cu titlul. */
.settings-head .btn.ghost { margin: var(--s2) 0 0 calc(-1 * var(--s2)); }
.settings-banner { margin-bottom: var(--s4); }
.settings-layout {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s4);
}
.settings-nav {
  position: sticky; top: calc(var(--h-dunga, 0px) + var(--s2)); z-index: 10;
  display: flex; flex-direction: row; gap: var(--s1); align-self: flex-start;
  width: fit-content; max-width: 100%; overflow-x: auto; padding: var(--s-tip);
  border: 0; border-radius: var(--r-camp-mare);
  /* Bara e agățată și trece peste conținut: fondul e griul OPAC al grupului, nu umplerea
     translucidă de 8% a segmentatului din kit — prin aia se vedeau rândurile de dedesubt. */
  background: var(--surface); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.settings-nav::-webkit-scrollbar { display: none; }
.settings-nav a {
  display: flex; flex: none; align-items: center; justify-content: center;
  min-height: var(--h-ctl); padding: 0 var(--s-10); border-radius: var(--r-camp);
  color: var(--mute); font-size: var(--t-md); font-weight: 500; white-space: nowrap;
}
.settings-nav a:hover { color: var(--ink); }
.settings-nav a[aria-current="page"] {
  background: var(--ap-seg-raised); color: var(--ink);
  box-shadow: var(--umbra-segment);
}
.settings-nav-title {
  padding: var(--s2) var(--s3); color: var(--faint); font-size: var(--t-2xs);
  font-weight: 700;
}
.settings-content { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.settings-jumps { display: flex; flex-wrap: wrap; gap: var(--s1); }
.settings-team { margin-top: var(--s4); }
/* Grupul de formular din kit (components-spec §11, modelul System Settings):
   fond negru 3%, rază 12, fără chenar; rânduri cu 12 sus și jos, despărțite de
   o linie de 1px negru 5%; etichetă Medium 13, subtitlu 11/14 secundar la 2px,
   valoarea în dreapta, secundar. Titlul secțiunii e Headline (Bold 13).
   Derivat: titlul stă în capul grupului, nu deasupra lui — șabloanele țin
   antetul înăuntrul secțiunii; pad-x e 16, nu 10, fiindcă rândurile Rovynt
   poartă butoane și liste, nu doar un comutator. */
.settings-section {
  overflow: hidden;
  border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface);
}
.settings-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-moale);
}
.settings-section-head > div { display: flex; align-items: center; gap: var(--s3); }
.settings-section-head h2 { margin: 0; font-size: var(--t-md); line-height: var(--il-md); font-weight: 700; }
/* În capul grupului, „mai multe” e o acțiune de pe rândul titlului, nu un
   pliu sub conținut: fără linia și marginea de deasupra. */
.settings-section-head details.mai { margin: 0; border-top: 0; }
.settings-section-head details.mai > summary { padding: 0; }
/* O singură legătură ca rând al grupului: textul ei stă pe linia textului
   din rânduri (16), nu lipit de marginea grupului. */
.settings-section > .btn.ghost { margin: var(--s2) var(--s2) var(--s3); }
.settings-section-head p {
  max-width: 420px; margin: 0; color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); text-align: right;
}
.settings-step {
  display: grid; place-items: center; width: var(--s5); height: var(--s5); border-radius: var(--r-pill);
  background: var(--ap-fill-2); color: var(--mute);
  font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.setting-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5);
  align-items: center; margin: 0; padding: var(--s3) var(--s4); color: var(--ink);
}
.setting-row + .setting-row { border-top: 1px solid var(--line-moale); }
.form .auto-control { display: flex; margin: 0; }
.setting-copy { min-width: 0; }
.setting-copy h3 { margin: 0; font-size: var(--t-md); line-height: var(--il-md); font-weight: 500; }
.setting-copy > p { margin: var(--s-tip) 0 0; color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); }
.setting-copy .calendar-days {
  display: inline-block; width: 4.5rem; margin: 0 var(--s1); padding: 0 var(--s2);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp); background: var(--ap-field-bg);
  color: var(--ink); font: inherit; font-size: var(--t-base); line-height: var(--il-md);
  font-weight: var(--ap-w-control); font-variant-numeric: tabular-nums;
}
.module-row[data-settings-target] {
  background: var(--accent-tenta); box-shadow: inset 3px 0 0 var(--accent);
  scroll-margin-top: calc(var(--h-dunga, 0px) + var(--s7));
}
.module-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.module-heading .setting-conditions { margin: 0; }
.setting-copy > .module-note { color: var(--faint); font-size: var(--t-xs); line-height: var(--il-xs); }
.setting-points {
  display: grid; gap: var(--s1); margin: var(--s3) 0 0; padding: 0; list-style: none;
  color: var(--ink-2); font-size: var(--t-sm);
}
.setting-points li { position: relative; padding-left: 18px; }
.setting-points li::before {
  content: ''; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--faint);
}
.setting-conditions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.setting-conditions li {
  padding: var(--s-tip) var(--s2); border: 0;
  border-radius: var(--r-pill); background: var(--ap-fill-2); color: var(--mute);
  font-size: var(--t-xs); line-height: var(--il-xs);
}
.setting-conditions li::before { display: none; }
.setting-choice {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: var(--s3); min-width: 150px;
}
.bani-dovada-setari .setting-choice {
  flex-direction: row; flex-wrap: wrap; align-items: flex-end;
  justify-content: flex-end; width: min(100%, 38rem);
}
.bani-dovada-setari .setting-choice label {
  display: grid; gap: var(--s1); flex: 1 1 9rem;
  min-width: 0; font-size: var(--t-xs);
}
.bani-dovada-setari .setting-choice input,
.bani-dovada-setari .setting-choice select { max-width: 100%; }
/* Regimul de TVA (radio unic pe rând): tot rândul e ținta alegerii, nu doar
   punctul — la fel ca „.form .auto-control” de mai sus, dar fără text dublat
   lângă radio, fiindcă titlul din stânga spune deja ce alege omul. */
.form label.setting-row { display: grid; margin: 0; font-size: inherit; color: var(--ink); cursor: pointer; }
/* „Cotă TVA forțată”: procentul stă lângă câmp, pe același rând — nu sub el,
   cum ar ieși din regula obișnuită „input lat cât tot grupul”. */
.form .regim-cota { display: flex; align-items: center; gap: var(--s2); }
.form .regim-cota input { width: 6rem; flex: none; margin-top: 0; }
.integration-item + .integration-item,
.integration-row + .integration-item,
.integration-item + .integration-row { border-top: 1px solid var(--line-moale); }
.integration-item > summary { list-style: none; cursor: pointer; }
/* Rândul întreg deschide legătura: el e ținta, nu doar săgeata. Până la
   L2 semnul venea din „.setting-row”, pe când toate rândurile erau ținte. */
.integration-item > summary:hover { background: var(--ap-fill-5); }
.integration-item > summary::-webkit-details-marker { display: none; }
.integration-item[open] > summary { background: var(--ap-fill-5); }
.integration-stage {
  padding: 3px var(--s2); border-radius: var(--r-pill); background: var(--warn-bg);
  color: var(--warn-ink); font-size: var(--t-2xs); line-height: var(--il-2xs); font-weight: 600;
}
.integration-form { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--line-moale); }
.integration-fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3);
  padding: var(--s4) 0;
}
.integration-fields label { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.integration-fields label > span { color: var(--faint); font-size: var(--t-xs); }
.integration-fields :is(input, select) {
  display: block; width: 100%; margin-top: var(--s1); padding: 0 var(--pad-camp);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp); background: var(--ap-field-bg);
  color: var(--ink); font: inherit;
}
.integration-message, .integration-note { margin: 0 0 var(--s3); font-size: var(--t-sm); }
.integration-message { color: var(--ink-2); }
.integration-note { color: var(--warn-ink); }
.integration-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.setting-managed { color: var(--faint); font-size: var(--t-xs); line-height: var(--il-xs); }
.deschis-secret { display: block; overflow-wrap: anywhere; margin-top: var(--s2); user-select: all; }
.deschis-drepturi { display: grid; gap: var(--s2); margin-top: var(--s3); }
.deschis-drepturi label { display: block; }
.setting-provenance { display: block; color: var(--faint); font-size: var(--t-xs); line-height: var(--il-xs); }
/* Setarea „Aspect” (components-spec §12c, modelul System Settings › Appearance):
   trei plăcuțe-fereastră 68×44 rază 8, gol 14, etichetă 11/14 dedesubt; cea
   aleasă are inel de accent 2 la 2 de plăcuță și eticheta Medium. Semaforul și
   rândurile de text sunt desenate cu gradiente, nu cu umbre deplasate ca în
   kit: aici o umbră e o treaptă de adâncime (L3), iar plăcuța n-are niciuna —
   de aceea capetele rândurilor sunt drepte, nu rotunjite. */
.ap-appearance { display: flex; gap: var(--s-14); }
.ap-appearance__opt {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent;
  display: grid; gap: var(--s-6); justify-items: center; cursor: pointer;
  font: inherit; font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 400; color: var(--ink);
}
.ap-appearance__thumb {
  width: 68px; height: 44px; border-radius: 8px; overflow: hidden; position: relative;
  box-shadow: inset 0 0 0 .5px var(--ap-label-4);
  background: linear-gradient(90deg, var(--aspect-l) 0 30%, var(--aspect-lw) 30%);
}
.ap-appearance__thumb::before {
  content: ""; position: absolute; left: 6px; top: 6px; width: 21px; height: 5px;
  background:
    radial-gradient(circle 2.5px at 2.5px 50%, var(--aspect-semafor-1) calc(100% - .5px), transparent),
    radial-gradient(circle 2.5px at 10.5px 50%, var(--aspect-semafor-2) calc(100% - .5px), transparent),
    radial-gradient(circle 2.5px at 18.5px 50%, var(--aspect-semafor-3) calc(100% - .5px), transparent);
}
.ap-appearance__thumb::after {
  content: ""; position: absolute; left: 26px; right: 8px; top: 14px; height: 20px;
  background: linear-gradient(var(--aspect-rand-l) 0 4px, transparent 4px 8px,
    var(--aspect-rand-l2) 8px 12px, transparent 12px 16px, var(--aspect-rand-l2) 16px 20px);
}
.ap-appearance__thumb--dark { background: linear-gradient(90deg, var(--aspect-d) 0 30%, var(--aspect-dw) 30%); }
.ap-appearance__thumb--dark::after {
  background: linear-gradient(var(--aspect-rand-d) 0 4px, transparent 4px 8px,
    var(--aspect-rand-d2) 8px 12px, transparent 12px 16px, var(--aspect-rand-d2) 16px 20px);
}
.ap-appearance__thumb--auto {
  background: linear-gradient(115deg, var(--aspect-l) 0 18%, var(--aspect-lw) 18% 50%, var(--aspect-d) 50% 68%, var(--aspect-dw) 68%);
}
.ap-appearance__thumb--auto::after { height: 4px; background: linear-gradient(90deg, var(--aspect-rand-l) 50%, var(--aspect-rand-d) 50%); }
.ap-appearance__opt[aria-pressed="true"] > .ap-appearance__thumb { box-shadow: 0 0 0 2px var(--ap-window), 0 0 0 4px var(--ap-accent); }
.ap-appearance__opt[aria-pressed="true"] { font-weight: 500; }
/* Semnul de tastatură rămâne cel global (`:focus-visible`), pe tot butonul. */
/* „Configurează” arată ca butonul care e: deschide formularul de sub rând.
   Săgeata se întoarce cât timp rândul e deschis. */
.setting-deschide svg { transition: transform var(--durata-2); }
.integration-item[open] .setting-deschide svg { transform: rotate(180deg); }
.settings-protection {
  display: flex; align-items: flex-start; gap: var(--s2); margin: calc(var(--s1) * -1) 0 0;
  padding: 0 var(--s1); color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs);
}

/* Imprimare folosește geometria acelorași rânduri, câmpuri și butoane ca restul Setărilor. */
.print-form { border-bottom: 1px solid var(--line-moale); }
.print-custom[hidden] { display: none; }
.print-form .print-custom { padding-top: 0; }
.print-custom-help { grid-column: 1 / -1; margin: 0; color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); }
.print-samples { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.print-couriers { margin-top: var(--s3); }
@media (max-width: 720px) {
  .print-samples .btn { white-space: normal; text-align: center; }
}

/* Grila contractuală are multe cifre, dar aceeași structură pe fiecare piață.
   Coloanele se fac din spațiul disponibil, nu din numărul curierilor: un al
   doilea curier poate avea alte trepte fără alt CSS. */
.tariff-carriers { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4) 0; }
.tariff-new-carrier { padding: var(--s3) var(--s4); color: var(--mute); }
.tariff-new-carrier summary {
  display: inline-flex; align-items: center; gap: var(--s1); list-style: none;
  color: var(--accent); font-size: var(--t-sm); line-height: var(--il-sm); cursor: pointer;
}
.tariff-new-carrier summary::-webkit-details-marker { display: none; }
.tariff-new-carrier summary svg { transition: transform var(--durata-2); }
.tariff-new-carrier[open] summary svg { transform: rotate(180deg); }
.tariff-new-carrier summary:focus-visible { outline: var(--contur-focus); outline-offset: var(--decalaj-focus); border-radius: var(--r-xs); }
.tariff-inline { display: grid; grid-template-columns: 1fr 1fr auto;
  align-items: end; gap: var(--s3); margin-top: var(--s3); }
.tariff-inline label { margin: 0; }
.tariff-fields { display: grid; gap: var(--s3); padding: var(--s5); }
.tariff-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.tariff-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tariff-fields.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tariff-fields label, .tariff-steps label, .tariff-cod-row label { margin: 0; }
.tariff-assumption { margin: calc(var(--s3) * -1) var(--s5) var(--s5); color: var(--warn-ink);
  font-size: var(--t-sm); }
.tariff-rate-columns, .tariff-cod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5); padding: var(--s5); }
.tariff-rate-columns h3, .tariff-cod h3 { margin: 0 0 var(--s3); font-size: var(--t-md); }
.tariff-steps { display: grid; gap: var(--s2); }
.tariff-steps > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.tariff-cod-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2); margin-bottom: var(--s2); }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.eyebrow { color: var(--faint); font-size: var(--t-2xs); font-weight: 700; }
.auto-stare { flex: none; padding: var(--s1) var(--s2); border-radius: var(--r-pill); font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 600; }
.auto-stare.on { background: var(--ok-bg); color: var(--ok); }
.auto-stare.off { background: var(--surface); color: var(--mute); }
.auto-stare.blocked { background: var(--warn-bg); color: var(--warn); }
.auto-control {
  position: relative; display: flex; align-items: center; min-height: var(--tinta-min);
  min-width: var(--tinta-min); cursor: pointer;
}
.form .auto-control :is(.auto-input, .module-input) {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
/* Comutatorul kitului, mărimea Mini (formulare): oprit negru 10%, pornit pe
   accent (macOS; verdele e al iOS și vine pe telefon), dezactivat la
   opacitate 0,45. Ținta este doar eticheta comutatorului. */
.ios-switch {
  position: relative; flex: 0 0 var(--comutator-l); width: var(--comutator-l); height: var(--comutator-h);
  border-radius: var(--r-pill); background: var(--ap-ctl-off);
  transition: background var(--durata-2) var(--curba);
}
.ios-switch::after {
  content: ''; position: absolute; top: var(--comutator-margine); left: var(--comutator-margine);
  width: var(--comutator-buton-l); height: var(--comutator-buton-h);
  border-radius: var(--r-pill); background: var(--ap-knob);
  box-shadow: var(--umbra-buton);
  transition: transform var(--durata-2) var(--curba-iesire);
}
.auto-input:checked + .ios-switch, .module-input:checked + .ios-switch { background: var(--comutator-pornit); }
.auto-input:checked + .ios-switch::after, .module-input:checked + .ios-switch::after {
  transform: translateX(calc(var(--comutator-l) - var(--comutator-buton-l) - 2 * var(--comutator-margine))); }
.auto-input:focus-visible + .ios-switch, .module-input:focus-visible + .ios-switch { outline: var(--contur-focus); outline-offset: var(--decalaj-focus); }
.auto-input:disabled + .ios-switch, .module-input:disabled + .ios-switch { opacity: .45; }
.setari-actions {
  position: sticky; bottom: var(--s3); z-index: 2; justify-content: flex-end;
  gap: var(--s4); margin: var(--s4) 0 0 auto; width: fit-content;
  padding: var(--s2); border: 0; border-radius: var(--r-pill);
  background: var(--fond-plutitor); box-shadow: var(--umbra-2);
  backdrop-filter: var(--filtru-plutitor);
}
.setari-actions > span { padding-left: var(--s2); color: var(--mute); font-size: var(--t-xs); }

@media (max-width: 720px) {
  .settings-nav { width: 100%; }
  .settings-content { gap: var(--s4); }
  .settings-section-head { display: block; padding: var(--s3) var(--s4); }
  .settings-section-head p { margin: var(--s-tip) 0 0; text-align: left; }
  .setting-row { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4); }
  /* Un rând care se încheie într-o stare rămâne pe două coloane, ca în
     Setările de pe iPhone: numele la stânga, starea la dreapta. Pe o singură
     coloană, cipul se întindea într-o bară cât rândul. */
  .setting-row:has(> .chip:last-child) { grid-template-columns: minmax(0, 1fr) auto; }
  .setting-choice { flex-direction: row; justify-content: space-between; min-width: 0; width: 100%; }
  .setting-managed { order: -1; }
  .setari-actions { width: 100%; }
  .setari-actions > span { display: none; }
  .setari-actions .btn { width: 100%; }
  .auto-band { flex-wrap: wrap; }
  .auto-band .btn { width: 100%; }
  .tariff-fields.two, .tariff-fields.three, .tariff-fields.four,
  .tariff-rate-columns, .tariff-cod { grid-template-columns: 1fr; }
  .tariff-inline, .tariff-cod-row { grid-template-columns: 1fr; }
  .integration-fields { grid-template-columns: 1fr; }
  .integration-actions .btn { flex: 1 1 auto; }

  /* Listele lungi nu mai obligă telefonul să deseneze din prima toate
     cardurile aflate la câteva ecrane distanță. Spațiul lor rămâne rezervat,
     deci derularea nu sare când intră în cadru. */
  .grid tbody tr,
  .colete-intoarse li.retur-colet,
  .retur-lista .retur-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
  }
}

/* Rapoartele sunt vederi ale aceleiași destinații. Banda rămâne un singur
   rând derulabil și pe telefon, nu o a doua bară laterală. */
.settings-nav.view-nav {
  position: static; display: flex; flex-direction: row; overflow-x: auto;
  margin-bottom: var(--s4); padding: var(--s1); scrollbar-width: none;
}
.settings-nav.view-nav::-webkit-scrollbar { display: none; }
.settings-nav.view-nav .settings-nav-title { display: none; }
.settings-nav.view-nav a { flex: none; justify-content: center; white-space: nowrap; }
.settings-nav.view-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); }

/* Închiderea zilei nu folosește verde pentru un zero pe care nu-l poate
   dovedi. Golurile de date stau în aceeași formă repetabilă, ca omul să poată
   parcurge ședința de sus în jos fără să confunde explicația cu un rezultat. */
.close-day-head { margin-bottom: var(--s3); }
.close-day-filters { margin-bottom: var(--s4); }
.close-day-verdict {
  display: flex; align-items: flex-start; gap: var(--s3); margin: 0 0 var(--s5);
  padding: var(--s4); border: 1px solid var(--warn-line); border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--warn-bg); color: var(--warn-ink);
}
.close-day-verdict-icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: var(--r-sm); background: var(--warn-bg-2);
}
.close-day-verdict b { font-size: var(--t-md); }
.close-day-verdict p { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.close-day-board { display: grid; gap: var(--s4); }
.close-day-section {
  overflow: hidden; border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--surface);
}
.close-day-section-head {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.close-day-step {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px;
  border: 0; border-radius: var(--r-pill); background: var(--ap-fill-2);
  color: var(--ink-2); font-size: var(--t-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.close-day-section-head h2 { margin: var(--s-tip) 0 0; font-size: var(--t-lg); }
.close-day-section-head p {
  max-width: 64rem; margin: var(--s1) 0 0; color: var(--mute); font-size: var(--t-sm);
}
.close-day-indicators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.close-day-indicator { min-width: 0; padding: var(--s4) var(--s5); }
.close-day-indicator:nth-child(even) { border-left: 1px solid var(--line-moale); }
.close-day-indicator:nth-child(n + 3) { border-top: 1px solid var(--line-moale); }
.close-day-indicator-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
}
.close-day-indicator h3 { margin: 0; font-size: var(--t-md); }
.close-day-unavailable {
  flex: none; padding: 3px var(--s2); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--mute); font-size: var(--t-2xs);
  font-weight: 600; white-space: nowrap;
}
.close-day-meaning {
  margin: var(--s2) 0 0; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--il-sm);
}
.close-day-missing {
  margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px dashed var(--line);
  color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm);
}
.close-day-missing b { color: var(--ink-2); }

@media (max-width: 760px) {
  .close-day-section-head { padding: var(--s4); }
  .close-day-indicators { grid-template-columns: 1fr; }
  .close-day-indicator { padding: var(--s4); }
  .close-day-indicator:nth-child(even) { border-left: 0; }
  .close-day-indicator + .close-day-indicator { border-top: 1px solid var(--line-moale); }
  .close-day-indicator-head { display: block; }
  .close-day-unavailable { display: inline-flex; margin-top: var(--s2); }
}

/* De la pragul cadrului în sus, antetul aplicației este și el lipit. Banda se
   așază imediat sub el, fără să-i acopere butoanele. */
@media (min-width: 721px) {
  .settings-nav {
    top: calc(var(--h-dunga, 0px) + var(--app-head-height) + var(--s2));
  }
  .module-row[data-settings-target] {
    scroll-margin-top: calc(var(--h-dunga, 0px) + var(--app-head-height) + var(--s7));
  }
}

/* ── ce e de luat de pe raft ────────────────────────────────────────────────
   Rândul de produse stă lipit sub comanda lui: fără linie despărțitoare între
   ele, ca ochiul să le citească drept o singură bucată. */
tr.pick { display: none; }
tr.pick.open, .grid.show-picks tr.pick { display: table-row; }
tr.pick > td { background: var(--surface-2); border-top: 0; padding: var(--s-tip) var(--s4) var(--s3); }
.grid tr:has(+ tr.pick.open) > td,
.grid.show-picks tr:has(+ tr.pick) > td { border-bottom: 0; }

.pick-list { display: flex; flex-direction: column; gap: var(--s1); }
.pick-it { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); }
.pick-it .q {
  min-width: 30px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pick-it .t { flex: 1; }
/* SKU-ul e ce se caută pe cutie — monospace, ca să nu se confunde 0 cu O. */
.pick-it .sku {
  font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--mute); background: var(--surface); padding: var(--s-tip) var(--s2); border-radius: var(--r-xs);
  white-space: nowrap;
}

/* Cât face rândul. Stă ultimul, lipit de marginea din dreapta: pe o listă de
   comenzi deschise una sub alta, sumele citite în coloană se compară dintr-o
   privire cu rambursul de pe AWB — înșirate în rând, nu. `margin-left: auto` îl
   ține acolo și când produsul n-are SKU, iar cifrele tabulare fac coloana
   dreaptă chiar dacă fonturile proporționale n-o fac de la sine. */
.pick-it .pret {
  margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--ink); font-weight: 500;
}
/* Cât face o bucată — se scrie doar la mai multe, unde suma rândului singură nu
   spune dacă e prețul produsului sau al grămezii. E o lămurire, nu o a doua
   sumă, deci se retrage un pas. */
.pick-it .pret i {
  font-style: normal; font-weight: 400; font-size: var(--t-sm); color: var(--mute);
}

/* butonul „N produse” din prima coloană */
.linkish {
  border: 0; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--mute); display: inline-flex; align-items: center; gap: var(--s1);
}
.linkish:hover { color: var(--ink); }
.linkish svg:last-child { transition: transform var(--durata-2); }
.linkish.open svg:last-child { transform: rotate(180deg); }

/* ── așteaptă stoc ──────────────────────────────────────────────────────────
   Rândul rămâne lizibil, doar se retrage un pas: e o comandă bună, pusă la
   păstrare, nu una cu probleme. */
tr.zzz > td { background: var(--surface-2); }
tr.zzz .col-order, tr.zzz .col-who, tr.zzz .col-addr, tr.zzz .col-pay { opacity: .62; }

/* ── comenzile duse până la capăt ───────────────────────────────────────────
   Într-o listă în care toate rândurile strigă la fel de tare, cea la care s-a
   lucrat deja arată exact ca cea neatinsă: singura deosebire era pastila de
   stare, un cuvânt mic în coloana a șasea. Cine trece cu ochii de sus în jos
   n-avea de unde să știe cât a mai rămas de făcut.

   Se stinge rândul, nu se mută. Mutarea la coada listei pare mai curată, dar
   într-o dimineață în care două fete lucrează aceeași listă, un rând care
   pleacă de sub cursor trage următorul în locul lui — și apăsarea următoare
   nimerește altă comandă. De aia există și `db.broasca`. Poziția e memorie:
   „era a treia de sus” trebuie să rămână adevărat.

   Se stinge la fel ca la „așteaptă stoc”, cu aceleași patru coloane: numele,
   omul, adresa și banii sunt ce nu mai trebuie citit. Confirmarea, starea și
   butoanele rămân întregi — pe o comandă cu AWB făcut mai urmează o apăsare,
   „Predată curierului”, și n-are voie să fie mai greu de nimerit decât era.

   Dunga din stânga e ce se vede de la doi metri, iar culoarea ei e cea pe care
   o are deja starea: albastru cât e la noi cu AWB făcut, verde după ce a plecat.
   Fără iconiță de bifă lângă pastilă — ar fi al doilea nume pentru același
   lucru, iar pastila îl spune deja în cuvinte. */
tr.s-AWB_DONE > td, tr.s-PACKED > td, tr.s-SHIPPED > td, tr.s-CLOSED > td,
tr.s-DELIVERED > td, tr.s-CANCELLED > td,
tr.s-RETURNED > td { background: var(--surface-2); }

/* Două trepte de stins, fiindcă sunt două feluri de „gata”. Cu AWB făcut mai
   urmează o apăsare — coletul se dă curierului la patru — deci rândul se
   retrage exact cât cel pus deoparte, nu mai mult. Plecat sau închis aiurea nu
   mai cere nimic de la nimeni și poate coborî o treaptă în plus. */
tr.s-AWB_DONE .col-order, tr.s-AWB_DONE .col-who, tr.s-AWB_DONE .col-addr, tr.s-AWB_DONE .col-pay,
tr.s-PACKED .col-order, tr.s-PACKED .col-who, tr.s-PACKED .col-addr, tr.s-PACKED .col-pay {
  opacity: .62;
}
tr.s-SHIPPED .col-order, tr.s-SHIPPED .col-who, tr.s-SHIPPED .col-addr, tr.s-SHIPPED .col-pay,
tr.s-CLOSED  .col-order, tr.s-CLOSED  .col-who, tr.s-CLOSED  .col-addr, tr.s-CLOSED  .col-pay,
tr.s-DELIVERED .col-order, tr.s-DELIVERED .col-who, tr.s-DELIVERED .col-addr, tr.s-DELIVERED .col-pay,
tr.s-CANCELLED .col-order, tr.s-CANCELLED .col-who, tr.s-CANCELLED .col-addr, tr.s-CANCELLED .col-pay {
  opacity: .5;
}

/* Dunga rămâne aprinsă când restul rândului se stinge — ea e semnul, nu textul.
   Doar două culori, fiindcă scara stărilor are doar atâtea de spus aici:
   albastru cât e la noi cu AWB făcut, verde după ce a plecat.

   Închisă în altă parte n-are dungă deloc. A avut una gri, și nu se vedea:
   `--line-strong` pe `--surface-2` e o deosebire de câteva zecimi, adică un
   semn pe care trebuie să-l cauți ca să-l găsești. Un semn invizibil e mai rău
   decât niciunul — pare că spune ceva. Rândul stins spune deja destul, iar
   pastila îl scrie în cuvinte. */
tr.s-AWB_DONE .col-order { box-shadow: inset 3px 0 0 var(--info-line); }
/* Dunga plină e a cutiei gata, cea palidă a hârtiei — aceeași culoare, două
   apăsări distanță. Rândul cu AWB tipărit mai are pe cineva de așteptat; ăsta
   nu mai are pe nimeni, în afară de curier. */
tr.s-PACKED   .col-order { box-shadow: inset 3px 0 0 var(--info-ink); }
tr.s-SHIPPED  .col-order { box-shadow: inset 3px 0 0 var(--ok); }
/* Livrată păstrează dunga verde: e tot capătul bun al drumului, doar cu un pas
   mai departe. Anulată n-are dungă — ca „închisă în altă parte”, fiindcă n-a
   mai plecat nimic pe care să-l însemne. */
tr.s-DELIVERED .col-order { box-shadow: inset 3px 0 0 var(--ok); }

/* Trecerea cu ochii peste un rând stins îl aprinde la loc: uneori comanda
   căutată e tocmai una gata, iar numărul ei trebuie citit fără să fie ghicit. */
tr.s-AWB_DONE:hover .col-order, tr.s-AWB_DONE:hover .col-who,
tr.s-AWB_DONE:hover .col-addr,  tr.s-AWB_DONE:hover .col-pay,
tr.s-PACKED:hover   .col-order, tr.s-PACKED:hover   .col-who,
tr.s-PACKED:hover   .col-addr,  tr.s-PACKED:hover   .col-pay,
tr.s-SHIPPED:hover  .col-order, tr.s-SHIPPED:hover  .col-who,
tr.s-SHIPPED:hover  .col-addr,  tr.s-SHIPPED:hover  .col-pay,
tr.s-CLOSED:hover   .col-order, tr.s-CLOSED:hover   .col-who,
tr.s-CLOSED:hover   .col-addr,  tr.s-CLOSED:hover   .col-pay,
tr.s-DELIVERED:hover .col-order, tr.s-DELIVERED:hover .col-who,
tr.s-DELIVERED:hover .col-addr,  tr.s-DELIVERED:hover .col-pay,
tr.s-CANCELLED:hover .col-order, tr.s-CANCELLED:hover .col-who,
tr.s-CANCELLED:hover .col-addr,  tr.s-CANCELLED:hover .col-pay { opacity: 1; }

/* Pe telefon nu mai există coloane, deci nici colț de coloană pe care să stea
   dunga: rândul e un cartonaș cu chenar de jur împrejur. Atunci dunga e chiar
   muchia lui din stânga, îngroșată — același semn, pe forma pe care o are
   ecranul acolo. Umbra de pe prima celulă se stinge, altfel ar rămâne o linie
   rătăcită la o palmă în interiorul cartonașului. */
@media (max-width: 720px) {
  .grid tr.s-AWB_DONE .col-order,
  .grid tr.s-PACKED   .col-order,
  .grid tr.s-SHIPPED  .col-order,
  .grid tr.s-DELIVERED .col-order { box-shadow: none; }
  .grid tbody tr.s-AWB_DONE,
  .grid tbody tr.s-PACKED,
  .grid tbody tr.s-SHIPPED,
  .grid tbody tr.s-DELIVERED { border-left-width: 3px; }
  .grid tbody tr.s-AWB_DONE { border-left-color: var(--info-line); }
  .grid tbody tr.s-PACKED   { border-left-color: var(--info-ink); }
  .grid tbody tr.s-SHIPPED,
  .grid tbody tr.s-DELIVERED { border-left-color: var(--ok); }
  /* Fondul stins e al cartonașului întreg, nu al fiecărei celule: altfel rămân
     patru dreptunghiuri gri pe un cartonaș alb. */
  .grid tbody tr.s-AWB_DONE, .grid tbody tr.s-PACKED, .grid tbody tr.s-SHIPPED,
  .grid tbody tr.s-CLOSED, .grid tbody tr.s-DELIVERED, .grid tbody tr.s-CANCELLED,
  .grid tbody tr.s-RETURNED { background: var(--surface-2); }
  .grid tbody tr.s-AWB_DONE > td, .grid tbody tr.s-PACKED > td, .grid tbody tr.s-SHIPPED > td,
  .grid tbody tr.s-CLOSED > td, .grid tbody tr.s-DELIVERED > td, .grid tbody tr.s-CANCELLED > td,
  .grid tbody tr.s-RETURNED > td { background: transparent; }
}

.line.wait { color: var(--warn); }
.chip.wait.on { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.ib.on.wait-b { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.grow { flex: 1; }

/* alegerile din dialogul de amânare */
.opts { display: flex; flex-direction: column; gap: var(--s2); }
.pick-opt {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) var(--s3);
  border: 0; border-radius: var(--r-sm); cursor: pointer; background: var(--card);
}
.pick-opt:hover { background: var(--ap-fill-5); }
.pick-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
.pick-opt input { margin-top: var(--s-tip); }
.pick-opt b { display: block; font-size: var(--t-md); font-weight: 500; }
.pick-opt i { display: block; font-style: normal; font-size: var(--t-sm); color: var(--mute); margin-top: 1px; }
/* Aceeași alegere, dar într-un formular: acolo `.form label` e un bloc gri,
   care ar pune bifa deasupra textului și ar stinge titlul alegerii. */
.form label.pick-opt { display: flex; color: var(--ink); }
.form .pick-opt input[type="checkbox"] { margin-top: var(--s-tip); }

/* ── contabilitate ──────────────────────────────────────────────────────────
   Dungă sub tabel, nu casetă: e o treabă care merge singură, deci n-are voie să
   fure atenția de la comenzi. Se aprinde doar când are ceva de spus. */
.ledger {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4);
  padding: var(--s3) var(--s4); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--surface); color: var(--mute); font-size: var(--t-md);
}
.ledger svg { color: var(--faint); flex: none; }
/* Un pachet plecat, a cărui retrimitere n-a reușit, are două lucruri de spus:
   că e la contabil și că n-a mai plecat o dată. Două lucruri, două rânduri —
   lipite într-o propoziție se citesc ca unul singur, și atunci vestea bună o
   înghite pe cea proastă. */
.stare-pachet .bad-text { display: block; margin-top: var(--s-tip); }
.ledger b { color: var(--ink); font-weight: 500; }
/* Când cea mai veche factură așteaptă de mai mult decât intervalul promis
   contabilului, dunga nu mai e o informație — e o restanță. */
.ledger.atentie { border-color: var(--warn-line); background: var(--warn-bg); }
.ledger.atentie svg { color: var(--warn); }
.ledger .btn { flex: none; }
/* Pe telefon dunga se rupe în două rânduri: textul sus, butoanele dedesubt.
   Altfel textul rămâne pe o coloană de trei cuvinte, între butoane. */
.ledger #contab-text { flex: 1 1 100%; }
@media (min-width: 700px) {
  .ledger { flex-wrap: nowrap; }
  .ledger #contab-text { flex: 0 1 auto; }
}

/* ── ecranul de tură ────────────────────────────────────────────────────────
   Prima pagină. Nu e un raport: e ce trebuie să știi în picioare, de la doi
   metri de ecran. Prioritățile și scurtăturile vin primele; programul curierului
   este o setare mică în antet, nu încă un panou de parcurs.
   Mobil-first: pe telefon totul stă pe o coloană, lățimile vin de la 700px. */
.tura { display: flex; flex-direction: column; gap: var(--s4); }
.tura-start {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "prioritati actiuni";
  gap: var(--s3); align-items: start;
}
.tura-start > .lucru { grid-area: prioritati; }
.tura-start > .tura-actiuni { grid-area: actiuni; align-self: start; }

.flux-sectiune + .flux-sectiune {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-moale);
}
.flux-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s2); color: var(--mute); font-size: var(--t-xs);
}
.flux-cap b { color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; }
.flux-cap span { text-align: right; }
.flux-linistit {
  display: flex; align-items: center; gap: var(--s2); margin: 0;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: var(--ok-bg); color: var(--ok-ink); font-size: var(--t-sm);
}
.flux-linistit svg { flex: none; }

.situatia-zilei { display: flex; flex-direction: column; gap: var(--s2); }
.sectiune-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 0 var(--s1);
}
.sectiune-cap > span { display: flex; align-items: baseline; gap: var(--s2); }
.sectiune-cap b { font-size: var(--t-md); font-weight: 600; }
.sectiune-cap small { color: var(--mute); font-size: var(--t-xs); }

/* Programul curierului este o setare rară. Se vede ca un control mic lângă
   totalul turei; editorul lui se deschide peste pagină și nu împinge munca în
   jos. Numărătoarea apare numai în ultima oră, când chiar schimbă prioritatea. */
.tura-meta { display: flex; align-items: center; justify-content: flex-end;
             flex-wrap: wrap; gap: var(--s2); margin-left: auto; }
.curier-mini { position: relative; color: var(--mute); font-size: var(--t-sm); }
.curier-mini > summary {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--h-ctl); padding: 0 var(--s3);
  list-style: none; cursor: pointer; font-weight: 500;
  border: 0; border-radius: var(--r-pill); background: var(--ap-ctl-bg);
}
.curier-mini > summary::-webkit-details-marker { display: none; }
.curier-mini > summary:hover { background: var(--ap-ctl-bg-hover); }
.curier-mini > summary:focus-visible { outline: var(--contur-focus); outline-offset: 1px; }
.curier-mini > summary > svg { color: var(--mute); flex: none; }
.curier-mini > summary b { color: var(--ink); font-weight: 600;
                           font-variant-numeric: tabular-nums; }
.curier-mini.urgent > summary { border-color: var(--warn-line); background: var(--warn-bg); }
.curier-mini.urgent > summary b, .curier-mini.urgent > summary svg { color: var(--warn-ink); }
/* Săgeata se întoarce când panoul e deschis: singurul semn din care se vede,
   fără să citești, că mai e ceva dedesubt. */
.sageata { transition: transform var(--durata-2) var(--curba); }
details[open] > summary > .sageata { transform: rotate(180deg); }
.curier-setari {
  position: absolute; z-index: 30; top: calc(100% + var(--s2)); right: 0;
  width: min(480px, calc(100vw - 64px)); padding: var(--s4);
  border: 0; border-radius: var(--r-md); corner-shape: var(--colt-continuu); background: var(--fond-plutitor);
  backdrop-filter: var(--filtru-plutitor); box-shadow: var(--umbra-2-lat); color: var(--ink);
}
.curier-setari > b { font-weight: 600; }
.curier-setari > p:first-of-type { margin: var(--s1) 0 var(--s3); color: var(--mute); }
.curier-setari > .ceas-cap { margin-bottom: var(--s3); }
.curier-setari > .pastila { display: inline-flex; margin: 0 var(--s2) var(--s2) 0; }

.ceas-cap { display: inline-flex; flex-wrap: wrap; align-items: center;
            gap: var(--s2); font-weight: 500; }
.ceas-cap svg { color: var(--mute); }
/* Ora se schimbă de aici. Arată a text până e atinsă — e o setare rară, n-are
   ce căuta un câmp de formular în mijlocul ecranului.

   `min-height` fiindcă măsura **23px**: un pixel sub minimul AA de 24 (WCAG
   2.5.8). Un pixel nu se vede cu ochiul și nu se prinde citind codul — ieșea
   din `1px` de umplutură peste un rând de 21. De-aia se măsoară: pragurile nu
   se ratează cu mult, se ratează cu puțin. `.ceas-cap` aliniază pe `center`, nu
   pe `baseline`, deci aici tiparul cu înălțime minimă e cel bun — spre deosebire
   de subsol, unde ar fi strâmbat rândul (rândul 391). */
.ceas-cap select {
  font: inherit; font-weight: 600; color: var(--ink); background: transparent;
  min-height: var(--tinta-min);
  border: 1px solid transparent; border-radius: var(--r-xs); padding: 1px var(--s1); margin-left: -2px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.ceas-cap select:hover { border-color: var(--line); background: var(--surface-2); }
.ceas-cap select:focus-visible { outline: var(--contur-focus); outline-offset: 1px; }
/* Zilele în care vine mașina, șapte litere care se apasă. Bifa adevărată stă
   dedesubt, nevăzută: o căsuță de 13px nu se nimerește cu degetul, litera
   întreagă se nimerește. Ziua bifată e neagră — „așa e” se citește dintr-o
   privire, iar restul rămân stinse, ca o oră care nu e aleasă.
   `nowrap` înăuntru și `wrap` la părinte: săptămâna coboară întreagă pe rândul
   următor, nu se sparge în trei bucăți de trei litere. */
.ceas-cand { display: inline-flex; align-items: center; gap: var(--s2); }
.ceas-zile { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--s-tip); }
.ceas-zile .zi-bifa:first-of-type { margin-left: var(--s1); }
.zi-bifa {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--h-ctl-mic); height: var(--h-ctl-mic); padding: 0 var(--s-tip);
  border: 0; border-radius: var(--r-xs);
  background: var(--ap-ctl-bg); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 600; cursor: pointer; user-select: none;
}
.zi-bifa input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.zi-bifa:hover { background: var(--ap-ctl-bg-hover); }
.zi-bifa:has(input:checked) { background: var(--accent-plin); color: var(--pe-accent-plin); }
.zi-bifa:has(input:focus-visible) { outline: var(--contur-focus); outline-offset: 1px; }
.ceas-nota { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--mute); }
.curier-mini.urgent .ceas-nota { color: var(--warn); }

.pastila {
  padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--t-sm); color: var(--mute); white-space: nowrap;
}
.pastila b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pastila.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pastila.ok b { color: var(--ok-ink); }
.pastila.mut { background: transparent; border: 1px dashed var(--line); }

/* cifrele zilei */
.cifre { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.cif {
  background: var(--surface); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu);
  padding: var(--s4) var(--s4) var(--s3); display: flex; flex-direction: column;
}
.cif-cap { font-size: var(--t-sm); color: var(--mute); }
.cif-n {
  font-size: var(--t-2xl); font-weight: 600; line-height: var(--il-2xl);
  margin: var(--s-tip) 0 var(--s2); font-variant-numeric: tabular-nums;
}
.cif-jos { font-size: var(--t-sm); display: flex; flex-direction: column; gap: var(--s-tip); margin-top: auto; }
.cif-jos b { font-weight: 500; }
.cif-jos .mut, .mut { color: var(--mute); }
.cif-link { color: inherit; text-decoration: none; transition: border-color var(--durata-2), box-shadow var(--durata-2); }
.cif-link:hover { border-color: var(--line-strong); box-shadow: var(--umbra-1); }
.cif-link:focus-visible { border-color: var(--info-line); }

/* cele două panouri de jos */
.doua { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.panou {
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r); corner-shape: var(--colt-continuu);
  padding: var(--s4) var(--s4) var(--s4);
}
.panou-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
             margin-bottom: var(--s3); }
.panou-cap b { font-weight: 600; }
.cap-sub { margin: 0 0 var(--s4); max-width: 62ch; color: var(--mute);
           font-size: var(--t-sm); }

.tura-titlu { display: flex; align-items: baseline; gap: var(--s2); line-height: 1.3; }
.tura-data { color: var(--mute); font-size: var(--t-sm); font-weight: 500; }
.actiuni-plan-cap {
  color: var(--mute); font-size: var(--t-xs); font-weight: 600;
}
.tura-total {
  display: inline-flex; align-items: baseline; gap: var(--s1); min-height: var(--tinta-min);
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  background: var(--surface); color: var(--mute); font-size: var(--t-sm);
}
.tura-total b { color: var(--ink); font-variant-numeric: tabular-nums; }
.coada-reconciliere {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-moale);
  color: var(--mute); font-size: var(--t-sm);
}
.coada-reconciliere > * { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tinta-min); }
.coada-reconciliere > * + *::before { content: "·"; margin-right: var(--s2); color: var(--faint); }
.coada-reconciliere b { color: var(--ink); font-variant-numeric: tabular-nums; }
.coada-reconciliere a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); }
.coada-reconciliere a.rau-text, .coada-reconciliere a.rau-text b { color: var(--err); }

.tura-actiuni { display: flex; flex-direction: column; padding: var(--s3); }
.tura-actiuni > .panou-cap {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tura-cautare > label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tura-cautare > div {
  display: flex; align-items: center; gap: var(--s2); padding-left: var(--s3);
  border: 0; border-radius: var(--r-camp); background: var(--ap-field-bg); box-shadow: inset 0 0 0 1px var(--ap-field-border);
}
.tura-cautare > div:focus-within { box-shadow: var(--inel-accent); }
.tura-cautare svg { flex: none; color: var(--mute); }
/* Caseta de scanare stă sub cea de căutare, în aceeași coloană. Selectorul
   nu mai cere `[type="search"]`: scanarea e un `text` obișnuit — o casetă de
   căutare ar fi purtat „x”-ul browserului, care pe scanare n-are ce goli. */
.tura-cautare + .tura-cautare { margin-top: var(--s2); }
.tura-cautare input {
  width: 100%; min-width: 0; height: var(--h-ctl-mare); padding: 0; border: 0; outline: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: var(--t-md);
}
.tura-cautare .btn { margin: 0; min-height: var(--h-ctl-mare); }
.tura-inchidere-scurta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.tura-inchidere-scurta p {
  flex: 1 1 180px; margin: 0; color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs);
}
.tura-inchidere-scurta .tag { margin-left: 0; }

/* Cine e în tură. Stă deasupra butonului de închidere fiindcă asta se citește
   toată ziua, iar închiderea se apasă o dată. Bulina verde din stânga arată
   cine e la ecran *acum*: fără ea, un nume și o oră de la 08:44 nu spun dacă
   omul mai e în depozit sau a plecat la trei. */
.tura-prezenta {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.tura-prezenta > b { display: block; margin-bottom: var(--s2); font-size: var(--t-xs);
 color: var(--mute); }
.tura-prezenta ul { display: flex; flex-direction: column; gap: var(--s2);
  margin: 0; padding: 0; list-style: none; }
.tura-prezenta li { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s1) var(--s2); padding-left: var(--s3); position: relative; }
.tura-prezenta li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong);
}
.tura-prezenta li.activ::before { background: var(--ok); }
.tura-prezenta .cine { font-weight: 700; font-size: var(--t-sm); }
.tura-prezenta .cand { color: var(--mute); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums; }

/* Pontajul din raportul turei: aceleași cartonașe ca restanțele, ca ochiul să
   nu învețe două forme pentru același fel de listă. */
.shift-report-people { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); }
.shift-report-people > div {
  display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.shift-report-people span { color: var(--mute); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums; }

/* Închiderea turei: cifre scurte, iar restanțele rămân lizibile pe mobil. */
.shift-metrics {
  display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: var(--s2); margin-top: var(--s3);
}
.shift-metrics > div {
  display: flex; flex-direction: column; gap: var(--s2); min-width: 0;
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.shift-metrics span { color: var(--mute); font-size: var(--t-xs); }
.shift-metrics b { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.shift-checks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s2);
}
.shift-checks > div {
  display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.shift-checks > div.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.shift-checks > div.ok { border-color: var(--ok-line); background: var(--ok-bg); }
.shift-checks b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.shift-checks span { color: var(--mute); font-size: var(--t-sm); }
.shift-pending { margin-top: var(--s4); border-top: 1px solid var(--line); }
.shift-pending summary { padding: var(--s3) 0; cursor: pointer; font-weight: 600; }
.shift-pending ul { margin: 0; padding: 0; list-style: none; }
.shift-pending li {
  display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0;
  border-top: 1px solid var(--line-moale); font-size: var(--t-sm);
}
.shift-pending li span { color: var(--mute); text-align: right; }
.shift-close-form { max-width: none; }
.shift-close-form textarea { resize: vertical; }
.shift-report-orders { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s2); }
.shift-report-orders > div {
  display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.shift-report-orders a { align-self: flex-start; font-weight: 700; }
.shift-report-orders span { color: var(--mute); font-size: var(--t-xs); }
@media (max-width: 900px) {
  .shift-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.actiuni-plan-cap {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.actiuni-planificate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                       gap: var(--s2); margin-top: var(--s2); }
.actiune-planificata {
  width: 100%; min-height: 48px; display: flex; flex-direction: row;
  align-items: center; justify-content: center; gap: var(--s1);
  padding: var(--s1); border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--mute);
  font: inherit; text-align: center;
}
.actiune-planificata:disabled { opacity: 1; cursor: default; }
.actiune-planificata svg { flex: none; color: var(--faint); }
.actiune-planificata span { min-width: 0; display: flex; flex-direction: column;
                            align-items: flex-start; gap: 0; }
.actiune-planificata b { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500;
                         line-height: var(--il-sm); }
.actiune-planificata small {
  display: none; color: var(--faint); font-size: var(--t-2xs); font-weight: 700;
 white-space: nowrap;
}

.rezumat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s2);
}
.bani-tura .rezumat-grid, .colete-tura .rezumat-grid { align-items: stretch; }

.pasi { display: flex; flex-direction: column; gap: var(--s2); }
.pas {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
  border: 0; box-shadow: inset 0 0 0 1px var(--line-moale); border-radius: var(--r-sm); background: var(--card);
}
a.pas:hover { background: var(--ap-fill-5); }
.pas-n { min-width: 30px; font-size: var(--t-lg); font-weight: 600; text-align: right;
         font-variant-numeric: tabular-nums; }
.pas-t { flex: 1; font-size: var(--t-md); }
.note.taiat { margin: -2px 0 var(--s4); }
.pas svg { color: var(--line-strong); flex: none; }
a.pas:hover svg { color: var(--mute); }
/* Pe ecranul de tură pașii sunt șase, nu șaizeci — dar socoteala e aceeași.
   „De verificat adresa” și „De sunat” purtau fundal chihlimbariu fiindcă cer un
   om; „De facturat”, care cere tot un om, rămânea alb. Din afară regula nu se
   putea ghici: două cartonașe galbene și unul alb, toate trei cu treabă în ele.
   Mai rău: cele două galbene sunt pline în fiecare dimineață, deci dimineața
   normală arăta a alarmă.
   Rămâne o singură deosebire, învățată dintr-o privire: pasul cu treabă e alb și
   viu, pasul gol se stinge (`.zero`, mai jos). Semnul de deasupra își ține
   culoarea — spune ce fel de pas e, fără să vopsească tot cartonașul. */
.pas.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.pas.ok .pas-n { color: var(--ok-ink); }
/* Capătul bun al drumului e verde, capătul prost e roșu. „De anulat în Shopify”
   purta galbenul lui „de sunat”, adică haina pasului obișnuit — deși o comandă
   refuzată nu e un pas, e o comandă ieșită din drum. E și rară (una din șaizeci):
   exact felul de lucru care merită culoare. */
.pas.bad { background: var(--err-bg); border-color: var(--err-line); }
.pas.bad .pas-n { color: var(--err-ink); }
/* Zero nu e o veste, e liniște: rândul se retrage, dar rămâne la locul lui, ca
   ochiul să găsească mereu aceeași ordine a pașilor. */
.pas.zero { background: var(--card); border-color: var(--line); }
.pas.zero .pas-n { color: var(--line-strong); }
.pas.zero .pas-t { color: var(--mute); }

/* ── coada de lucru, pe primul ecran ────────────────────────────────────────
   Pașii au fost până acum șase rânduri subțiri în colțul din stânga-jos, sub
   raport. Sunt tot atâția, dar cartonașe: cifra e cât un titlu, semnul spune
   fapta înainte să se citească vorba, iar suprafața de apăsat e cât un deget,
   nu cât un rând de text. Se citesc de la doi metri, în picioare, cu telefonul
   într-o mână — cum se citește ecranul ăsta în depozit. */
.panou.lucru { padding: var(--s3); }
/* Pe telefon titlul și cele două ieșiri nu încap pe un rând, iar când se
   înghesuie „De făcut acum” se rupe în două rânduri, cu „acum” singur dedesubt.
   Mai bine coboară butoanele întregi decât să se rupă titlul. */
.panou.lucru > .panou-cap { margin-bottom: var(--s2); flex-wrap: wrap; row-gap: var(--s2); }
.panou.lucru > .panou-cap > b { flex: none; }

/* Câți încap pe un rând, atâția — și rândul se umple mereu până la capăt.
   Numărul pașilor nu e fix: al șaselea, „De anulat în Shopify”, apare doar când
   chiar e ceva de anulat. Cu o grilă de șase coloane fixe, în zilele obișnuite
   rămânea o coloană goală în dreapta, adică un gol cât un cartonaș la capătul
   șirului — care se citește ca „mai e ceva acolo și nu s-a încărcat”. `auto-fit`
   strânge coloanele goale, deci cinci cartonașe umplu rândul la fel de bine ca
   șase. */
.pasi.mare { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
             gap: var(--s2); }
.pasi.mare .pas {
  display: grid; grid-template-columns: 18px auto minmax(0, 1fr) 15px;
  align-items: center; gap: var(--s2); min-height: 48px;
  padding: var(--s2); border-radius: var(--r-sm);
}
.pasi.mare .pas-cap { display: contents; }
.pasi.mare .pas-cap > svg:first-child { grid-column: 1; grid-row: 1; color: var(--mute); }
.pasi.mare .pas-cap > svg:last-child { grid-column: 4; grid-row: 1; }
.pasi.mare .pas-n {
  grid-column: 2; grid-row: 1; min-width: 20px; margin: 0;
  text-align: right; font-size: var(--t-xl); line-height: var(--il-xl);
}
.pasi.mare .pas-t { grid-column: 3; grid-row: 1; min-width: 0;
                    font-size: var(--t-sm); line-height: var(--il-sm); }
.pasi.mare a.pas:hover { border-color: var(--line-strong); }
/* Pe telefon plăcuțele sunt rânduri de listă iOS (§12: 52, pad 16), una sub
   alta: la text de 17, două pe rând tăiau numele pasului («Diferențe între
   sisteme» ieșea din plăcuță). */
@media (max-width: 720px) {
  .pasi.mare { grid-template-columns: minmax(0, 1fr); }
  .pasi.mare .pas { min-height: var(--h-rand); padding-inline: var(--pad-rand); gap: var(--s3); }
}
/* Pasul fără nimic de făcut nu dispare — locul lui în șir e jumătate din
   înțeles — dar nici nu strigă: se retrage tot, semn cu semn. */
.pasi.mare .pas.zero .pas-cap > svg { color: var(--faint); }
.pasi.mare .pas.warn .pas-cap > svg:first-child,
.pasi.mare .pas.call .pas-cap > svg:first-child { color: var(--warn-ink); }
.pasi.mare .pas.ok .pas-cap > svg:first-child { color: var(--ok-ink); }
.pasi.mare .pas.bad .pas-cap > svg:first-child { color: var(--err); }
.pasi.mare.critice .pas.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.pasi.mare.critice .pas.warn .pas-n { color: var(--warn-ink); }

/* stările brute de la GLS, sub contoare: ce n-am tradus se vede aici cuvânt cu
   cuvânt, ca să nu pară niciodată că știm mai mult decât ne-a spus curierul */
.stari { list-style: none; margin: var(--s3) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line-moale);
         display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-sm); color: var(--mute); }
.stari li { display: flex; align-items: center; gap: var(--s2); }
.stari b { margin-left: auto; color: var(--ink); font-weight: 500;
           font-variant-numeric: tabular-nums; }

/* Rândul care ține strâns ceva lung: cuvintele exacte ale lui GLS, cincisprezece
   la număr într-o zi obișnuită. Se numără în capul lui, ca să se știe cât e
   dedesubt fără să se deschidă. */
details.mai { margin-top: var(--s3); border-top: 1px solid var(--line-moale); }
details.mai > summary {
  display: flex; align-items: center; gap: var(--s2); list-style: none;
  cursor: pointer; padding: var(--s3) 0 0; font-size: var(--t-sm); color: var(--mute);
}
details.mai > summary::-webkit-details-marker { display: none; }
details.mai > summary:hover { color: var(--ink); }
details.mai > summary:focus-visible { outline: var(--contur-focus); outline-offset: var(--decalaj-focus); border-radius: var(--r-xs); }
details.mai > summary > .sageata { margin-left: auto; color: var(--line-strong); }

/* Modulele de decizie arată întâi mărimea populației și apoi rândurile. Cifra
   are greutate, explicația rămâne mică: fără eșantion, procentul ar părea o
   certitudine venită din afară. */
.module-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2); margin: 0 0 var(--s4);
}
.module-metrics > div {
  display: flex; flex-direction: column; gap: var(--s1); min-width: 0;
  padding: var(--s4); border: 0; border-radius: var(--r-sm);
  background: var(--surface);
}
.module-metrics span, .module-metrics small { color: var(--mute); font-size: var(--t-xs); }
.module-metrics b { color: var(--ink); font-size: var(--t-xl); font-variant-numeric: tabular-nums; }

/* Cabina de telefon: un singur dosar, făcut întâi pentru deget și 390 px. */
.cabina-page { max-width: 920px; margin: 0 auto; }
.cabina-head { align-items: center; }
.cabina-count {
  min-width: 82px; display: flex; flex-direction: column; align-items: center;
  padding: var(--s2) var(--s4); border: 0; border-radius: var(--r-sm);
  background: var(--surface); color: var(--mute); font-size: var(--t-xs);
}
.cabina-count b { color: var(--ink); font-size: var(--t-xl); line-height: var(--il-xl); }
.cabina-card {
  overflow: hidden; border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--card); box-shadow: var(--umbra-2);
}
.cabina-order-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s5); border-bottom: 1px solid var(--line);
}
.cabina-person { min-width: 0; }
.cabina-position { display: block; color: var(--mute); font-size: var(--t-xs); font-weight: 600; }
.cabina-person h2 { margin: var(--s1) 0 0; font-size: var(--t-2xl); line-height: var(--il-2xl); overflow-wrap: anywhere; }
.cabina-order-link { display: inline-flex; min-height: var(--tinta-min); align-items: center; margin-top: var(--s1); color: var(--mute); font-size: var(--t-sm); text-decoration: underline; }
.cabina-language {
  flex: none; display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface);
}
.cabina-language > span { grid-row: 1 / 3; font-size: 24px; }
.cabina-language b { font-size: var(--t-md); }
.cabina-language small { color: var(--mute); font-size: var(--t-xs); }
.cabina-call-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--surface); border-bottom: 1px solid var(--line); }
.cabina-call, .cabina-clock {
  min-height: 62px; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border: 0; border-radius: var(--r-sm);
  background: var(--surface);
}
.cabina-call { color: var(--pe-cerneala); background: var(--ink); border-color: var(--ink); }
.cabina-call:hover { background: var(--ink-2); }
.cabina-call > span, .cabina-clock > span { display: flex; flex-direction: column; min-width: 0; }
.cabina-call small, .cabina-clock small { color: inherit; opacity: .7; font-size: var(--t-xs); }
.cabina-call b { font-size: var(--t-lg); }
.cabina-call-bad { color: var(--err); background: var(--err-bg); border-color: var(--err-line); }
.cabina-call-bad:hover { background: var(--err-bg); }
.cabina-clock { min-width: 132px; color: var(--mute); }
.cabina-clock b { color: var(--ink); font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.cabina-clock.is-running { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-bg); }
.cabina-facts { display: grid; grid-template-columns: 1.15fr .85fr; }
.cabina-fact { min-width: 0; padding: var(--s5); border-bottom: 1px solid var(--line); }
.cabina-fact:nth-child(odd) { border-right: 1px solid var(--line); }
.cabina-fact h3 { margin: 0 0 var(--s3); color: var(--mute); font-size: var(--t-xs); }
.cabina-fact p { margin: 0; color: var(--ink-2); font-size: var(--t-md); }
.cabina-address { overflow-wrap: anywhere; }
.cabina-address-state { margin-top: var(--s2) !important; }
.cabina-address > .btn { margin-top: var(--s3); }
.cabina-address-edit { margin-top: var(--s3); }
.cabina-address-edit summary { cursor: pointer; font-weight: 600; }
.cabina-address-edit form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.cabina-address-edit label { display: grid; gap: var(--s1); font-size: var(--t-sm); }
.cabina-address-edit input { width: 100%; min-height: var(--h-camp); padding: var(--s2);
  border: 1px solid var(--ap-field-border); border-radius: var(--r-camp);
  background: var(--ap-field-bg); color: var(--ink); font: inherit; }
.cabina-sugestie { justify-self: start; text-align: left; white-space: normal; }
.cabina-address-settings { margin-top: var(--s2) !important; font-size: var(--t-xs) !important; }
.cabina-fact > small { display: block; margin-top: var(--s1); color: var(--mute); }
.cabina-products ul { list-style: none; margin: 0; padding: 0; }
.cabina-products li { display: flex; gap: var(--s2); padding: var(--s1) 0; }
.cabina-products li b { flex: none; }
.cabina-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.cabina-total span { color: var(--mute); font-size: var(--t-sm); }
.cabina-total b { font-size: var(--t-lg); white-space: nowrap; }
.cabina-history { grid-column: 1 / -1; border-right: 0 !important; }
.cabina-history > strong { display: block; font-size: var(--t-lg); }
.cabina-history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-bottom: var(--s3); }
.cabina-history-grid > span { display: flex; flex-direction: column; padding: var(--s3); border-radius: var(--r-sm); background: var(--surface); }
.cabina-history-grid b { font-size: var(--t-xl); line-height: var(--il-xl); }
.cabina-history-grid small { color: var(--mute); font-size: var(--t-xs); }
.cabina-history-grid .has-risk { color: var(--err); background: var(--err-bg); }
.cabina-result { padding: var(--s5); }
.cabina-result > label { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s1); font-size: var(--t-sm); font-weight: 600; }
.cabina-result > label span { color: var(--mute); font-size: var(--t-xs); font-weight: 400; }
.cabina-result > input { width: 100%; min-height: var(--h-camp); padding: 0 var(--pad-camp); border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp); background: var(--ap-field-bg); color: var(--ink); font: inherit; }
.cabina-result > input:focus { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }
.cabina-result fieldset { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin: var(--s3) 0 0; padding: 0; border: 0; }
.cabina-outcome { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.cabina-outcome:hover { background: var(--surface-2); border-color: var(--line-strong); }
.cabina-outcome.is-confirmed { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-bg); }
.cabina-outcome.is-refused { color: var(--err); border-color: var(--err-line); background: var(--err-bg); }
.cabina-outcome.is-later { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-bg); }
.cabina-result fieldset:disabled .cabina-outcome { cursor: default; opacity: .42; filter: grayscale(1); }
.cabina-result-hint { margin: var(--s2) 0 0; color: var(--mute); font-size: var(--t-xs); }
.cabina-upcoming { margin-top: var(--s4); border: 0; border-radius: var(--r-sm); background: var(--surface); }
.cabina-upcoming summary { display: flex; justify-content: space-between; padding: var(--s3) var(--s4); cursor: pointer; color: var(--mute); font-size: var(--t-sm); font-weight: 600; }
.cabina-upcoming summary span { min-width: 22px; border-radius: var(--r-pill); background: var(--surface); text-align: center; }
.cabina-upcoming ol { list-style-position: inside; margin: 0; padding: 0 var(--s4) var(--s3); }
.cabina-upcoming li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.cabina-upcoming li > span { min-width: 0; }
.cabina-upcoming li small { display: block; margin-left: 23px; color: var(--mute); }
.cabina-upcoming li strong { flex: none; font-size: var(--t-sm); }
.cabina-order-note { margin: var(--s3) 0 0; color: var(--mute); font-size: var(--t-xs); }
.cabina-empty { padding: calc(var(--s5) * 2); border: 1px solid var(--ok-line); border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--ok-bg); text-align: center; }
.cabina-empty h2 { margin: var(--s3) 0 var(--s1); }
.cabina-empty p { margin: 0; color: var(--mute); }

@media (max-width: 620px) {
  .cabina-head { flex-direction: row; align-items: center; }
  .cabina-head .lede { display: none; }
  .cabina-count { min-width: 64px; padding-inline: var(--s2); }
  .cabina-order-head { padding: var(--s4); }
  .cabina-person h2 { font-size: var(--t-xl); }
  .cabina-language { padding: var(--s1) var(--s2); }
  .cabina-language > span { font-size: var(--t-t3); }
  .cabina-language small { display: none; }
  .cabina-call-row { grid-template-columns: 1fr; padding: var(--s3) var(--s4); }
  .cabina-call, .cabina-clock { min-height: var(--h-ctl-mare); }
  .cabina-clock { min-width: 0; }
  .cabina-facts { display: block; }
  .cabina-fact { padding: var(--s4); border-right: 0 !important; }
  .cabina-result { padding: var(--s4); }
  .cabina-result > label { display: block; }
  .cabina-result > label span { display: block; }
  .cabina-result fieldset { grid-template-columns: 1fr 1fr; }
  .cabina-outcome { min-height: var(--h-rand); }
  .cabina-order-note { padding-inline: var(--s1); }
}
.risk-score {
  display: inline-flex; min-width: 58px; justify-content: center;
  padding: var(--s1) var(--s2); border-radius: var(--r-pill);
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ok-ink); background: var(--ok-bg); border: 1px solid var(--ok-line);
}
.risk-score.mediu { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
.risk-score.mare { color: var(--err); background: var(--err-bg); border-color: var(--err-line); }
.model-answer {
  max-width: 46rem; margin-top: var(--s2); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2);
  color: var(--ink-2); font-size: var(--t-sm); line-height: var(--il-sm); white-space: pre-wrap;
}
.mai-n {
  min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--t-xs); font-weight: 600; color: var(--mute); text-align: center;
  font-variant-numeric: tabular-nums;
}
details.mai > .stari { margin-top: 0; padding-top: var(--s3); border-top: 0; }
.pct { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.pct.livrat { background: var(--ok); }
.pct.refuzat { background: var(--err); }

.gol-mic { color: var(--mute); font-size: var(--t-md); margin: var(--s1) 0 0; }
/* Două panouri alăturate rămân de aceeași înălțime, și e bine așa — arată
   făcute, nu nimerite. Dar în ziua întâi, când în dreapta nu e decât propoziția
   care spune că încă n-a plecat niciun colet, propoziția stătea lipită sub titlu
   cu 290 de pixeli de alb dedesubt: nu arăta a panou gol, arăta a panou care
   n-a apucat să se încarce. Când asta e tot ce are înăuntru, stă la mijloc. */
.panou:has(> .gol-mic:last-child) { display: flex; flex-direction: column; }
.panou > .gol-mic:last-child { margin-block: auto; }

/* Coletele de rezolvat. Panoul e roșu doar la margine, nu peste tot: rândurile
   trebuie citite, iar text negru pe roșu deschis se citește greu. Îngroșate
   sunt doar cele întoarse definitiv — o încercare ratată de livrare se mai
   poate repara mâine, un colet întors nu. */
/* Alarma e o dungă în stânga, nu un card vopsit: pe un ecran cu trei panouri
   colorate, al patrulea nu se mai vede. Textul rămâne pe fond alb, citibil. */
.panou.rau { box-shadow: inset 3px 0 0 var(--err); margin-bottom: var(--s4); }
.rele { list-style: none; margin: 0; padding: 0; display: flex;
        flex-direction: column; gap: var(--s1); }
.rele li { display: flex; align-items: baseline; gap: var(--s3);
           padding: var(--s2) var(--s3); background: var(--card);
           border-radius: var(--r-sm);
           font-size: var(--t-md); }
/* Plăcuță albă pe grupul gri, fără chenar (kit §11). Coletul întors definitiv
   se deosebește prin rețeta Tinted a roșului, nu printr-o ramă mai groasă. */
.rele li.grav { background: var(--err-bg); }
.rele a { font-weight: 600; color: var(--ink); text-decoration: none; flex: none; }
.rele a:hover { color: var(--accent); }
.rele .ce { flex: 1; min-width: 0; color: var(--err-ink); }
.rele li.grav .ce { font-weight: 500; }
.rele .cand { flex: none; font-size: var(--t-sm); color: var(--mute); }

@media (max-width: 560px) {
  .rele li { flex-wrap: wrap; gap: var(--s1) var(--s2); }
  .rele .ce { flex-basis: 100%; }
  /* Butonul la marginea din dreapta: degetul nu-l mai nimerește din greșeală
     când voia doar să citească ora. */
  .rele .btn { margin-left: auto; }
}

/* ── retururi ───────────────────────────────────────────────────────────────
   Panoul e chihlimbariu, nu roșu, și diferența e intenționată: coletul întors
   e o defecțiune, returul cerut e o cerere — cineva așteaptă un răspuns, nu s-a
   stricat nimic. Roșul de deasupra rămâne astfel singurul roșu de pe ecran și
   nu se tocește.

   Rândul e un cartonaș, nu o linie de tabel: un retur are cinci lucruri de
   citit (cine, ce, de ce, cât, de când) și niciunul nu se poate arunca. Se
   citește pe patru rânduri cu aer între ele, nu pe unul înghesuit. */
/* Chihlimbarul se aprinde doar când răspunsul e la noi. Un retur aprobat care
   așteaptă coletul e tot o așteptare, dar e a clientului — n-avem ce face azi
   pentru el, iar un panou întreg colorat pentru un lucru care nu cere nimic e
   exact felul în care o culoare de alarmă ajunge să nu mai fie citită. Când e
   doar de așteptat, panoul e alb ca oricare altul, iar cine așteaptă se vede
   din eticheta lui și din dunga rândului. */
.panou.retur { margin-bottom: var(--s4); }
.panou.retur.cere { box-shadow: inset 3px 0 0 var(--warn); }
.panou.retur .panou-cap { flex-wrap: wrap; }
.panou.retur .panou-cap .btn { margin-left: auto; }
/* Colete întoarse de curier: același panou, altă sursă — un client n-a cerut
   nimic, marfa doar s-a întors. Aceeași regulă „cere" ca mai sus: culoarea de
   alarmă apare numai cât timp e ceva „de procesat" pe masă, nu cât timp
   coletul e doar pe drum. */
.panou.retur-colete { margin-bottom: var(--s4); }
.panou.retur-colete.cere { box-shadow: inset 3px 0 0 var(--warn); }
.panou.retur-colete .panou-cap { flex-wrap: wrap; }
.panou.retur-colete .panou-cap .btn { margin-left: auto; }
.reture { list-style: none; margin: 0; padding: 0; display: flex;
          flex-direction: column; gap: var(--s2); }
.reture li { padding: var(--s3); background: var(--card);
             border: 1px solid var(--warn-line); border-radius: var(--r-sm);
             display: flex; flex-direction: column; gap: var(--s2); }
/* Cel care așteaptă un răspuns are dunga groasă. Cel aprobat, care doar
   așteaptă coletul, stă liniștit — nu e nimic de făcut azi pentru el. */
.reture li.cere { border-left: 3px solid var(--warn); }
.reture li.asteapta { border-color: var(--line); }
.rr-cap { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
          font-size: var(--t-base); }
.rr-cap a, .rr-cap .fara-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.rr-cap a:hover { color: var(--accent); }
.rr-cap .fara-link { border-bottom: 1px dotted var(--line-strong); cursor: help; }
.rr-cine { color: var(--ink-2); font-size: var(--t-md); }
.rr-cat { font-size: var(--t-md); color: var(--mute); font-variant-numeric: tabular-nums; }
/* Câte un produs pe rând. Stăteau unul lângă altul, despărțite doar de un gol
   cât un spațiu, iar la două produse ieșea un șir din care nu se mai vedea unde
   se termină unul: „…Cicaextreme 200ml i-a venit altceva Kérastase Résistance
   Bain Extentioniste 250ml produs defect”. Motivul e lipit de produsul lui, deci
   perechea trebuie să aibă rândul ei — altfel motivul de la primul pare că e al
   celui de-al doilea, și tocmai motivul spune dacă e vina noastră. La un singur
   produs, cazul obișnuit, arată exact ca înainte. */
.rr-ce { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-md); }
.rr-prod { color: var(--ink-2); }
/* Motivul stă lipit de produs, nu într-o coloană separată: „prea mic” fără
   produs nu înseamnă nimic, iar pe două rânduri s-ar pierde perechea. */
.rr-prod i { font-style: normal; color: var(--warn-ink); }
.rr-prod.vina i { color: var(--err); font-weight: 500; }
/* Cuvintele clientului, întregi. Sunt singurul loc de pe tot ecranul unde
   vorbește el — nu se taie și nu se rezumă. */
.rr-nota { margin: 0; font-size: var(--t-md); color: var(--ink-2);
           padding-left: var(--s3); border-left: 2px solid var(--line);
           line-height: var(--il-md); }
.rr-jos { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rr-cand { font-size: var(--t-sm); color: var(--mute); }
/* Listele de pe tura zilei („Retururi de decis”, „Colete întoarse de curier”)
   ca rânduri. Fiecare retur era un cartonaș de trei etaje — capul, produsele,
   butoanele — de 115–209px la 1560px (măsurat 06.09.2026), deși pe el se
   citesc trei lucruri și se apasă unul. De la 1024px în sus cele trei etaje
   stau pe un rând: cine, ce, ce fac. Produsele rămân câte unul pe linie, cu
   motivul lipit (regula de mai sus), deci un retur cu două produse ia două
   linii — atât. Nota clientului, când există, trece sub rând, întreagă. Pe
   telefon rămâne cartonașul, cu butoanele lui late. */
@media (min-width: 1024px) {
  .reture li {
    display: grid; grid-template-columns: minmax(200px, .9fr) minmax(0, 1.6fr) minmax(0, auto);
    align-items: center; column-gap: var(--s4); row-gap: var(--s1);
    padding: var(--s2) var(--s3);
  }
  .reture .rr-cap { grid-row: 1; grid-column: 1; }
  .reture .rr-ce { grid-row: 1; grid-column: 2; }
  .reture .rr-jos { grid-row: 1; grid-column: 3; justify-self: end; flex-wrap: nowrap; }
  .reture .rr-nota { grid-column: 1 / -1; }
  /* Golul dintre nume și cifre umplea cardul lat; pe un rând de 200px ar
     împinge cifrele pe linia următoare degeaba. */
  .reture .rr-cap .grow, .reture .rr-jos .grow { display: none; }
  .reture .rr-jos .btn { white-space: nowrap; }
}

/* Pilulele de sus, pe pagina de retururi: pe orizontală, fiindcă sunt trei
   cifre de comparat dintr-o privire, nu o listă de pași de urmat. */
.pasi.larg { flex-direction: row; flex-wrap: wrap; gap: var(--s3);
             margin-bottom: var(--s5); }
.pasi.larg .pas { flex: 1 1 200px; }
.page-head-act { display: flex; gap: var(--s2); flex: none; flex-wrap: wrap; }

/* Cartonașul unui retur. Dunga din stânga răspunde la o singură întrebare —
   „ăsta mai vrea ceva de la mine?” — și o răspunde în patru trepte, de la tare
   la stins: chihlimbar cât așteaptă un răspuns de la noi, gri închis cât
   așteaptă marfa, gri deschis când s-a încheiat, stins de tot când n-a mai avut
   loc. Culoarea e singurul lucru care se citește fără să citești.

   Închisul era verde. Pagina asta e în cea mai mare parte istoric — retururile
   închise nu pleacă de aici niciodată — deci verdele ajungea să fie culoarea
   dominantă a ecranului, pus tocmai pe rândurile care nu mai cer nimic, iar
   singurul retur viu rămânea cel gri, adică cel mai șters de pe pagină. Verdele
   pe trecut se citea și ca laudă, pe un ecran unde jumătate din retururi sunt
   greșeli de-ale noastre. Acum ordinea culorilor e ordinea urgenței.

   Stările se scriu `ton-*`, nu direct `drum`/`gata`, fiindcă `.drum` e deja
   componenta cu firul coletului de mai sus — pusă pe un card, îi ștergea
   marginile și-i desena linii de traseu prin mijloc. */
.retur-card { border-left: 3px solid var(--line); margin-bottom: var(--s4); }
.retur-card.ton-rau { border-left-color: var(--warn); }
.retur-card.ton-drum { border-left-color: var(--line-strong); }
.retur-card.ton-gata { border-left-color: var(--line); }
/* Bifat la noi, deschis la ei: pentru depozit s-a terminat, deci dunga se stinge
   — dar cardul nu, fiindcă pe el a rămas „A venit marfa”, singurul drum prin
   care returul se mai închide și în Shopify. Stins peste tot, butonul ăla arăta
   ca unul stricat. Se sting doar cardurile care chiar n-au ce oferi. */
.retur-card.ton-bifat { border-left-color: var(--faint); }
.retur-card.ton-intern { border-left-color: var(--faint); opacity: .78; }
/* Venit de pe ecranul de tură, prin ancoră: pagina sare la cardul cerut, dar
   saltul singur nu spune unde ai aterizat — mai ales când deasupra a rămas o
   bucată din cardul precedent. Un inel scurt arată exact returul pentru care
   ai apăsat, apoi se stinge și nu mai colorează pagina degeaba. */
.retur-card:target { animation: gasit 2.4s ease-out 1; scroll-margin-top: var(--s6); }
@keyframes gasit {
  0%, 45% { box-shadow: 0 0 0 2px var(--accent); }
  100%    { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .retur-card:target { animation: none; box-shadow: 0 0 0 2px var(--accent); }
}
.retur-card h2 { text-transform: none; font-size: var(--t-lg);
                 font-weight: 600; margin-bottom: 0; }
.retur-card h2 a { color: inherit; text-decoration: none; }
.retur-card h2 a:hover { color: var(--accent); }
.retur-card .mut { margin: var(--s1) 0 0; font-size: var(--t-md); color: var(--mute); }
.retur-card .mut a { color: var(--ink-2); }
.retur-cap { display: flex; align-items: flex-start; justify-content: space-between;
             gap: var(--s4); }
.retur-cine { min-width: 0; }
.retur-bani { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.retur-bani b { display: block; font-size: var(--t-lg); font-weight: 600; }
.retur-bani span { font-size: var(--t-md); color: var(--mute); }
.tag.rea { background: var(--err-bg-2); color: var(--err-ink); }

/* Firul cererii, pe un rând care se rupe când nu încape. Aici a scris cândva
   că datele stau „una sub alta" — n-a fost niciodată adevărat: comentariul și
   regula s-au născut în același commit, `6391a69`, deci n-a fost o regresie,
   ci o propoziție rămasă din intenție. Măsurat de Annie pe 312 cartonașe:
   coloana ar costa 6.180px la 1440, adică 8,9% din pagină, fiindcă cele 151 de
   fire cu patru date se rup deja pe trei linii și ar mai lua una fiecare. Și
   n-ar spune mai bine cât a stat clientul între întrebare și răspuns — durata
   iese din scădere, nu din așezare. Ce le face citibile e raportul golurilor:
   16px între date, 7,6px între etichetă și valoarea ei, de 2,1 ori mai strâns.
   Ochiul le grupează corect așa cum sunt. */
.retur-fir { list-style: none; margin: var(--s4) 0 0; padding: 0;
             display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
             font-size: var(--t-md); color: var(--mute); }
.retur-fir b { color: var(--ink-2); font-weight: 500; margin-right: var(--s1); }
.retur-fir li.rau b { color: var(--err); }
.retur-fir li.gata b { color: var(--ok); }

.retur-linii { list-style: none; margin: var(--s4) 0 0; padding: var(--s3) 0 0;
               border-top: 1px solid var(--line-moale); display: flex;
               flex-direction: column; gap: var(--s3); }
.retur-linii li { display: flex; align-items: flex-start; gap: var(--s3); }
.retur-linii img, .retur-linii .fara-poza {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-xs);
  object-fit: cover; background: var(--surface); border: 1px solid var(--line);
}
/* Textul nu se întinde cât ecranul: motivul returului trebuie să stea lipit de
   produsul lui. Pe un monitor lat, „prea mic” aruncat la marginea din dreapta,
   la un lat de palmă de denumire, e o pereche pe care ochiul n-o mai face. */
.rl-ce { flex: 0 1 auto; min-width: 0; max-width: 62ch; font-size: var(--t-base); }
.rl-ce b { display: block; font-weight: 500; line-height: 1.35; }
.rl-ce .sub { display: block; margin-top: var(--s-tip); font-size: var(--t-sm); color: var(--mute); }
.rl-nota { display: block; margin-top: var(--s1); font-size: var(--t-md);
           color: var(--ink-2); line-height: var(--il-md); }
.rl-motiv { flex: none; align-self: center; margin-right: auto;
            font-size: var(--t-sm);
            color: var(--warn-ink); background: var(--warn-bg-2);
            padding: var(--s-tip) var(--s2); border-radius: var(--r-xs); }
.rl-motiv.vina { color: var(--err-ink); background: var(--err-bg-2); }

/* Cele două răspunsuri, la vedere amândouă. Refuzul nu se ascunde sub „mai
   multe”: e o decizie la fel de normală ca aprobarea, doar că cere un motiv. */
.retur-decizie { display: flex; align-items: center; gap: var(--s3);
                 flex-wrap: wrap; margin-top: var(--s4);
                 padding-top: var(--s4); border-top: 1px solid var(--line-moale); }
/* Grupul de refuz nu se lățește cât ecranul: motivul, nota și butonul trebuie
   citite ca un singur gest, nu ca trei lucruri împrăștiate pe un metru. */
.retur-refuz { display: flex; align-items: center; gap: var(--s2);
               flex: 1 1 340px; max-width: 620px; }
.retur-refuz select { flex: none; }
.retur-refuz input { flex: 1; min-width: 0; }
.retur-mic { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--mute);
             line-height: var(--il-sm); max-width: 68ch; }

@media (max-width: 560px) {
  .retur-cap { flex-direction: column; gap: var(--s2); }
  .retur-bani { text-align: left; display: flex; align-items: baseline; gap: var(--s2); }
  .retur-refuz { flex-wrap: wrap; }
  /* Butonul de refuz trece pe rândul lui: lângă un câmp de text îngust ar
     rămâne de lățimea unui deget și s-ar apăsa din greșeală. */
  .retur-refuz .btn { width: 100%; }
  /* Motivul trece sub produs, nu lângă el. Pe un ecran de 320px, pastila „prea
     mic” își lua lățimea ei întreagă și lăsa denumirii 72px — iar „Cicaextreme”,
     un singur cuvânt, are 83. Un cuvânt nu se rupe și nu se strânge: se taie. Pe
     ecran rămânea „Kérastase Blond Absolu Masque Cicaextrem”, care arată exact
     ca o denumire adevărată, doar că nu e.
     Rândul devine aici o grilă de două coloane — poza, și restul — fiindcă în
     grilă motivul se poate muta pe rândul de dedesubt fără să se întindă cât
     ecranul: `justify-self: start` îl ține strâns pe textul lui. Rămâne aliniat
     sub denumire, deci tot lipit de produsul lui, doar că dedesubt. */
  .retur-linii li {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s3); row-gap: var(--s2); align-items: start;
  }
  .rl-motiv { grid-column: 2; justify-self: start; margin-right: 0; }
  .reture li { gap: var(--s3); }
  .rr-jos .btn { flex: 1; }
}

@media (min-width: 700px) {
  .cifre { grid-template-columns: repeat(2, 1fr); }
  /* Pe tabletă intră patru pe rând, dar pașii sunt cinci — al cincilea rămânea
     singur pe rândul doi, cu trei goluri lângă el. Trei plus doi se citește ca
     două rânduri de listă; patru plus unu se citește ca o greșeală. */
  .pasi.mare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .cifre { grid-template-columns: repeat(4, 1fr); }
  .doua { grid-template-columns: 3fr 2fr; }
  /* De aici încolo încap toți pe un rând, în ordinea în care se fac: de la
     adresă până la predare, stânga-dreapta, ca o bandă. */
  .pasi.mare { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 1180px) {
  .tura-start { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 860px) {
  .tura-start {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "prioritati" "actiuni";
  }
}
@media (max-width: 560px) {
  .panou.lucru > .panou-cap { align-items: flex-start; }
  .tura-meta { width: 100%; justify-content: space-between; margin-left: 0; }
  .tura-total { flex: 1; justify-content: center; }
  .curier-setari { position: fixed; top: 50%; right: var(--s4); left: var(--s4);
                   width: auto; transform: translateY(-50%); }
  .actiune-planificata { flex-direction: column; }
  .actiune-planificata span { align-items: center; }
  .sectiune-cap { align-items: flex-start; }
  .sectiune-cap small { max-width: 18ch; text-align: right; }
  .flux-cap { flex-wrap: wrap; row-gap: var(--s1); }
}

/* ── ui/zone — retururi: ierarhia și densitatea ─────────────────────────────
   Toți selectorii de aici încep cu `.retur-lista`, învelișul care există numai
   pe /retururi. `.retur-card`, `.retur-cap`, `.retur-cine`, `.retur-bani`,
   `.retur-linii` și `.retur-decizie` se folosesc și pe pagina unei comenzi,
   unde cardul stă singur, într-o coloană, cu un singur retur pe el — acolo
   regulile de mai jos n-au ce căuta. */

/* Despărțitura dintre ce e de făcut și ce s-a făcut deja.

   Lista vine din rută în ordinea asta — întâi retururile care mai cer ceva de
   la cineva, apoi istoria — dar la 16px între carduri trecerea nu se vede:
   ochiul derulează peste ea fără s-o simtă, iar dedesubt continuă să caute
   treabă acolo unde nu mai e niciuna. Ritmul se rupe o dată, exact la primul
   card care nu mai cere nimic. Fără titlu și fără cuvânt nou pe ecran: linia
   spune singură unde s-a terminat lucrul.

   Dacă n-are ce despărți — nimic de făcut, sau nimic în istorie — regula nu se
   aplică deloc. O graniță între o listă și nimic e o graniță mincinoasă. */
.retur-lista .retur-card:not(.retur-istorie) + .retur-istorie {
  position: relative; margin-top: var(--s7);
}
.retur-lista .retur-card:not(.retur-istorie) + .retur-istorie::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--s5) * -1);
  border-top: 1px solid var(--line);
}

/* Pragul e 1024, nu 1080 ca la ceasul turei de mai sus: la 1024 cardul are
   984px, iar după coloana de 24rem și linia dintre ele rămân 512 pentru rândul
   de produs — destul cât denumirea să nu se rupă în trei. Măsurat exact acolo:
   pagina scade de la 92.807px la 75.200, fără derulare orizontală. Un prag se
   pune unde se strică lucrul, nu unde e rotund. */
@media (min-width: 1024px) {
  /* Cardul folosea ecranul lat ca pe un culoar. Măsurat la 1440px, pe un card
     de 1400: identitatea își lua 360px și lăsa 996 goi în dreapta ei, firul
     cererii 114, iar produsele porneau iar de la marginea din stânga, sub ele.
     Cinci fâșii una sub alta fac un card de 393px — și sunt 312 pe pagină, deci
     92.791px de derulat, adică 103 ecrane. Aceeași observație e scrisă deja mai
     sus, la ceasul turei: „un card care se termină în gol arată neterminat, nu
     aerisit”. Aici golul e mai scump — se plătește în derulare.

     Deci: cine și când, în stânga; ce marfă, în dreapta, despărțite de o linie.
     Butoanele rămân jos, pe toată lățimea, fiindcă acolo se termină cardul și
     acolo se apasă — iar explicația de sub ele spune „butoanele de mai sus”,
     deci trebuie să rămână sub ele, nu alături. */
  .retur-lista .retur-card {
    display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    column-gap: var(--s6);
  }
  /* În coloana îngustă, numărul comenzii și suma nu mai încap umăr la umăr:
     aceeași soluție ca pe telefon, din același motiv — nu e loc. */
  .retur-lista .retur-cap { grid-column: 1; grid-row: 1;
                            flex-direction: column; gap: var(--s2); }
  .retur-lista .retur-bani { text-align: left; display: flex;
                             align-items: baseline; gap: var(--s2); }
  .retur-lista .retur-fir { grid-column: 1; grid-row: 2; align-content: start; }
  /* Linia dintre coloane e chiar chenarul care despărțea produsele de restul
     cardului, mutat din orizontal în vertical: aceeași despărțire, altă direcție.
     Ține toată înălțimea celor două rânduri, deci și când firul cererii are
     patru intrări și trece de lista de produse. */
  .retur-lista .retur-linii { grid-column: 2; grid-row: 1 / span 2;
                              margin-top: 0; padding: 0 0 0 var(--s6);
                              border-top: 0; border-left: 1px solid var(--line-moale); }
  .retur-lista .retur-decizie { grid-column: 1 / -1; grid-row: 3; }
  .retur-lista .retur-mic { grid-column: 1 / -1; grid-row: 4; }
}
/* Istoria retururilor ca rânduri. De la despărțitura de mai sus în jos
   nimeni nu mai are nimic de făcut, dar cardurile arătau la fel ca cele de
   deasupra: 155–170px la 1560px (măsurat 06.09.2026) pentru un retur închis
   de luni de zile, cu poza produsului și explicația clientului pe fiecare.
   Rândul strâns ține pe o linie cine (numărul, starea, clientul), firul
   (cerut/aprobat/închis) și ce (produsul cu motivul lui). Poza, bucățile cu
   SKU-ul și suma, nota clientului stau în șablon și se aprind la o apăsare
   pe rând (`section.deschis`, același gest ca la comenzi și la colete —
   `app.js`). Cardurile care mai cer ceva rămân carduri: acolo se apasă. */
@media (min-width: 1024px) {
  .retur-lista .retur-card.retur-istorie:not(.deschis) {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--s5); align-items: center;
    padding: var(--s2) var(--s4); margin-bottom: var(--s2); cursor: pointer;
  }
  .retur-lista .retur-card.retur-istorie:not(.deschis) h2 { font-size: var(--t-base); }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-cap { grid-row: 1; grid-column: 1; gap: var(--s-tip); }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-fir { grid-row: 1; grid-column: 2; margin-top: 0; }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-linii {
    grid-row: 1; grid-column: 3; padding-left: var(--s5); gap: var(--s1);
  }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-linii li { align-items: baseline; gap: var(--s2); }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-linii img,
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-linii .fara-poza,
  .retur-lista .retur-card.retur-istorie:not(.deschis) .rl-ce .sub,
  .retur-lista .retur-card.retur-istorie:not(.deschis) .rl-nota { display: none; }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .rl-ce { font-size: var(--t-md); }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-bani b { font-size: var(--t-base); }
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-decizie,
  .retur-lista .retur-card.retur-istorie:not(.deschis) .retur-mic { grid-row: 2; margin-top: var(--s2); padding-top: var(--s2); }
}

/* ── ui/zone — contabilitate: cele trei cifre pe același rând ──────────────
   Cele patru cartonașe de stare stăteau unul sub altul la **orice** lățime
   (`.stare` e `flex-direction: column`): pe 1440 fiecare avea o propoziție
   scurtă și 1300 px de gol în dreapta, iar tabelul începea abia la 749 px —
   adică pe un ecran de contabilitate nu se vedea niciun document fără să
   derulezi. Trei dintre ele poartă câte o cifră care se schimbă; al patrulea e
   o notă care nu se schimbă niciodată.

   Numai pe lat: sub 1024 px trei coloane ar tăia „Ultimul: TGRO 19496, de azi”
   în patru rânduri, deci teancul rămâne teanc. Selectoarele există doar pe
   ecranul ăsta (`.stare-contab`, `.st-nota` se scriu doar în
   `contabilitate.html`), ca aceeași `.stare` de pe retururi și încasări să nu
   se miște din locul ei. */
@media (min-width: 1024px) {
  .stare-contab { display: grid; grid-template-columns: repeat(3, 1fr);
                  gap: var(--s4) var(--s6); align-items: start; }
  .stare-contab .st-nota { grid-column: 1 / -1; }
}

/* ── ui/zone — contabilitate: îndrumarea e cerneală, nu roșu ────────────────
   Regula e cea de sus, de la rândul 30: roșu = ceva e greșit sau nu se mai
   poate întoarce; cerneală = mutarea de acum. Pe `?filtru=nelamurite`, unde
   **toate** rândurile sunt nelămurite, ecranul scria cu `--err` propoziția
   „emitere neconfirmată — caută documentul în SmartBill, apoi deschide
   comanda”. Măsurat pe 40 de documente: 40 de propoziții roșii deodată, adică
   exact tabloul pe care regula de sus îl descrie ca greșeală („36 de inele
   roșii deodată și toată tura arăta ca o eroare”). Propoziția e o instrucțiune
   de la cap la coadă; pastila de deasupra rămâne roșie, fiindcă ea spune
   starea, iar starea chiar e greșită.

   Nu se scoate doar roșul: fără nimic, `.sub` o lasă la `--mute`, adică
   îndrumarea ar fi mai ștearsă decât constatarea „în SmartBill” de pe rândurile
   liniștite. Clasa se scrie numai în `contabilitate.html`, deci selectorul
   ăsta n-are ce atinge pe alt ecran.

   Selectorul are două clase, nu una, și nu din gust: `.sub` (584) dă tot
   `color`, cu aceeași specificitate. Cu o clasă, `.de-facut` câștigă numai
   fiindcă e ultima linie din foaie — iar convenția casei e că fiecare scrie la
   coadă, deci locul ăla se pierde la următoarea îmbinare, în tăcere: paznicul
   rămâne verde și textul iese gri (rulat: `audit/mutatii/1.3.0-cascada.txt`).
   Cu două clase câștigă din specificitate, oricine ar scrie după. */
.sub.de-facut { color: var(--ink); }

/* ── ui/zone — „Neconfirmate”: nu mai vine nimeni ───────────────────────────
   Al patrulea fel al aceleiași greșeli ca la A7, de data asta în capul paginii.
   Cartonașul de sumar „Neconfirmate” era chihlimbar pe amândouă ecranele
   (`contabilitate.html`, `incasari.html`), iar pastila din tabelul de dedesubt,
   pentru **aceleași** rânduri, e roșie (`p-BLOCKED`). Pe `/incasari` cele două
   se văd fără să derulezi: măsurat la 1440×900, patru pastile roșii sub un
   cartonaș chihlimbar, despre aceleași patru încasări.

   Definiția alege singură, de la rândul 34: chihlimbar = **așteptăm pe cineva
   din afară**. Aici nu mai așteptăm pe nimeni — SmartBill nu a răspuns și nu va
   mai răspunde, cererea s-a terminat, iar ecranul spune el însuși că trebuie un
   om care să se ducă acolo. Iar paguba de care ne apărăm chiar e fără
   întoarcere; o scrie chiar schema, la `incasari.status`: „nu se reia automat,
   fiindcă a doua ar putea fi a doua”. Două documente fiscale pe aceeași
   comandă nu se retrag, se stornează.

   Nu e „încă un roșu pe pagină”: povestea de la rândul 55 e despre repetiția pe
   rând — 36 de inele pentru 36 de rânduri. Un cartonaș de sumar e unul singur,
   și e singurul din cele trei de sus care poate cere ceva de la om.

   `.st.rau` urmează tiparul casei, nu unul nou: `.st.ok` și `.st.warn` sunt
   deja acolo (rândurile 745-746), iar `rau` e numele roșului în casă
   (`.op.rau`, `.panou.rau`). Perechea clasă+element nu exista nicăieri în arbore
   înainte de comitul ăsta, deci regula n-are ce atinge pe alt ecran. */
.st.rau svg { color: var(--err); }

/* ── ui/zone — retururi: cifrele de sus sunt calea de intrare ───────────────
   Cele trei cifre din capul paginii spuneau de mult adevărul și nu se putea
   face nimic cu ele. Măsurat pe 313 carduri: pagina are 73.426px la 1440 —
   78 de ecrane de derulat — și **un singur** retur deschis vizibil fără să
   pui mâna pe rotiță; la 390, niciunul. Apăsabile, „33 în așteptarea unei
   decizii” duce la 9 ecrane.

   Niciun cuvânt nou: cele trei texte erau deja acolo, literă cu literă. A treia
   („în total”) e ieșirea din filtru, fiindcă „tot” e chiar `/retururi` fără
   parametru — cuvântul dinainte, nu unul adăugat. Iar `<a class="pas">` nu e o
   invenție: `_tura.html:121` îl folosește de mult, tot ca să filtreze o listă
   printr-un parametru (`/comenzi?pas=`). Ecranul dimineții îl avea, al doilea
   ecran nu.

   **De ce inversare și nu culoare.** Din toată paleta, singura pereche
   legătură/proză care trece de 3:1 e `--ink` pe `--mute`, la 3,07 (măsurat de
   Asa pe `ui/fundatie`): aici culoarea singură practic nu poate marca nimic.
   Pastila apăsată schimbă figura cu fondul, exact ca `.chip.on` (rândul 498),
   care rezolvase deja problema pe contabilitate. Se copiază, nu se inventează.
   Pentru cine n-o vede deloc, `aria-current="page"` spune același lucru —
   altfel starea apăsată ar fi „numai culoare” într-o altă modalitate.

   Nefiltrat nu se aprinde niciuna: ecranul arată **exact** ca înainte. Aia e
   dovada că filtrul n-a adăugat nimic pe ecran, doar a făcut apăsabil ce era.

   `.pasi-filtru` se scrie numai în `retururi.html`, deci `perioada.html` și
   `_tura.html`, care folosesc aceeași `.pasi`, nu se mișcă din loc. Cele trei
   clase bat `.pas.zero` (două) și `a.pas:hover` (una), deci o cifră zero
   apăsată tot se vede apăsată, iar mouse-ul nu o stinge la loc. */
.pasi-filtru .pas.on { background: var(--accent-plin); box-shadow: none; }
.pasi-filtru .pas.on .pas-n,
.pasi-filtru .pas.on .pas-t { color: var(--pe-accent-plin); }
.pasi-filtru a.pas.on:hover { background: var(--accent-plin-hover); }

/* ── ui/zone — retururi: cele două comenzi pe care nu le-a măsurat nimeni ────
   Rândul de decizie al unui retur are patru comenzi: „Aprobă", motivul,
   explicația, „Refuză". Două sunt `.btn` și au 39px. Celelalte două n-au primit
   niciodată nicio regulă — `.retur-refuz select { flex: none }` și
   `.retur-refuz input { flex: 1 }` spun unde stau, nu cât sunt — așa că browserul
   le-a dat înălțimea lui: **19px** selectul, **21px** câmpul. La 1440, la 1024 și
   la 390 deopotrivă; `min-height` calculat: `auto`. Pragul casei e scris în
   vocabular de la început, `--tinta-min: 24px`, adică minimul AA din WCAG 2.5.8.
   Ratează cu 5 și cu 3.

   Nu e o comandă oarecare: e singura faptă de pe ecranul ăsta care nu se mai
   întoarce. Motivul ales aici pleacă în Shopify, îl citește clientul în contul
   lui, iar cererea nu mai poate fi redeschisă din aplicație — scrie chiar în
   fereastra de confirmare a butonului de alături. Deci cele mai mici două ținte
   de pe ecran sunt exact comenzile faptei ireversibile, iar cea mai mare, la
   390px, e „Refuză" pe toată lățimea. Casa s-a gândit deja la deget pe rândul
   ăsta — nota de sus, de la `.retur-refuz .btn`, explică de ce butonul trece pe
   rândul lui — dar s-a uitat la buton, nu la vecinii lui.

   Scutirea „țintă în frază" din WCAG 2.5.8, cea scrisă la `.ord` (rândul 224),
   nu se aplică aici: acolo e vorba de o legătură dintr-o propoziție, a cărei
   înălțime o dă rândul de text din jur. Un select și un câmp de scris nu stau
   în nicio propoziție.

   CORECTAT 11.08.2026: aici scria și „nici scutirea de distanțare: între ele
   sunt 8px, deci cercurile de 24 se ating". Fals. Cercul de 24 se centrează pe
   CUTIA țintei, nu pe marginea ei — față de un vecin mare se cer 12 de la
   centru la cutia lui, nu 24 între margini. Un select de 172px lățime își are
   centrul la 86 de propria margine. Remăsurat: 98,0 la 1440 și 18,5 la 390,
   contra 12 ceruți; scutit la toate lățimile, și fără regula de mai jos.
   Regula rămâne, dar pe temeiul de deasupra: `--tinta-min` e pragul pe care
   casa și l-a scris singură, iar 19 și 21px se apasă mai greu decât 24 și pe un
   ecran pe care norma îl iartă. Nu e o reparație de conformare, și nu se mai
   citează ca atare. `audit/masuratori.md`, A36 §8.

   `min-height: var(--tinta-min)`, exact tiparul cu care s-a reparat
   `.ceas-cap select` (23px, „pragurile nu se ratează cu mult, se ratează cu
   puțin"). Nu 39, ca să se potrivească cu butoanele: 39 ar fi o cifră scrisă de
   mână, și ar face formularul mai greu decât fapta pe care o comentează.

   Fără `.retur-lista` în față, deși toate celelalte reguli ale ramurii îl au.
   Prima variantă îl avea, cu nota că „așa regula nu pleacă nemăsurată dacă
   `.retur-refuz` ajunge mâine și pe pagina comenzii" — pe dos: acolo nu există
   niciun `.retur-lista`, deci exact atunci regula n-ar mai cădea, iar cele două
   comenzi ar reapărea la 19 și 21px pe alt ecran. Învelișul se pune ca o regulă
   de aspect să nu scape pe ecranul altcuiva; un prag de mărime sub deget nu e
   aspect — el trebuie să plece cu comanda oriunde ar ajunge ea. `.retur-refuz`
   se scrie oricum numai în `retururi.html`, deci azi nu atinge nimic în plus. */
.retur-refuz select,
.retur-refuz input { min-height: var(--tinta-min); }

/* ── ui/zone — retururi: pe telefon, cele trei cifre stau pe un rând ─────────
   Măsurat pe forma de producție, la 390×844: banda de cifre din capul paginii
   ținea 154,5px pe **trei rânduri** — un rând pe cifră, fiecare de 43,5 — și
   împingea primul retur la 681,8. Din el se vedeau 162,2px: capul cardului și
   o dungă. La 1440 aceeași bandă e 43,5px, pe un singur rând.

   De ce trei rânduri: `.pasi.larg .pas { flex: 1 1 200px }` cere 200px de bază
   fiecăruia, iar la 390 în conținut intră 358 — două nu încap alături, deci
   `flex-wrap` le pune una sub alta. Regula e bună acolo unde s-a scris (pași cu
   propoziții întregi, pe `/perioada` și pe tură); aici textele sunt de 12–24 de
   litere și n-au nevoie de 200px.

   Ce se schimbă, numai sub 560 (pragul telefonului al casei, cel cu care sunt
   scrise celelalte nouă blocuri): trei coloane egale, cifra deasupra
   cuvântului, `flex-wrap: nowrap` ca să nu mai poată cădea pe rânduri. Banda
   scade la 106,0px (−48,5), primul retur urcă la 625,3 și din el se văd
   218,7px (+56,5). Măsurat în rânduri de text, nu în pixeli: din denumirea
   mărfii cerute înapoi se vedeau **0 rânduri din 13** — 3,7px dintr-un rând de
   37,8 — și acum se văd **5**. Adică se vede *ce* se cere înapoi, nu doar că
   cineva cere ceva. La 320 banda rămâne tot pe un rând (pastile de 90,7px,
   nimic nu iese din cutie); acolo primul retur stă la 692,5, fiindcă antetul
   paginii se înalță singur, nu banda.

   Nu promite mai mult decât dă: **tot niciun retur întreg peste pliu.** Cel mai
   înalt card măsurat are 645,2px la 390, iar antetul aplicației singur ține
   246,5 — 246,5 + 645,2 = 891,7 într-o fereastră de 844. Nu există așezare a
   capului de pagină care să încapă un retur întreg; ce se poate câștiga aici e
   *cât* se vede din primul, și atât. Restul stă în cardul însuși (`ul.retur-linii`
   241,3px, `div.retur-decizie` 139,0), adică în cuvinte care nu se ating.

   **Capcana de specificitate, scrisă ca să nu se mai calce nimeni pe ea:**
   `.pasi.larg` are specificitate (0,2,0), `.pasi-filtru` (0,1,0), iar un
   `@media` nu adaugă nimic. Prima variantă scrisă pe `.pasi-filtru` singur a
   ieșit cu 57px **mai rău** — `flex-wrap: wrap` de la `.pasi.larg` câștiga, deci
   pastilele rămâneau pe trei rânduri și se mai și înălțau de la direcția care
   apucase să se aplice. De-aia se scrie `.pasi.larg.pasi-filtru` (0,3,0): ca să
   bată regula comună fără s-o atingă. `/perioada` și `_tura.html` folosesc
   `.pasi.larg` fără `.pasi-filtru`, deci nu se mișcă din loc.

   Ce s-a cântărit și n-a fost ales, cu cifre (aceeași încărcare a paginii,
   martor verificat că se întoarce la cifrele lui): două pe un rând plus una
   strânsă dădea 88,7px, cu 17,3 mai bine, dar rupe exact ce scrie casa în
   comentariul de sus — „trei cifre de comparat dintr-o privire”; a treia mutată
   singură jos nu se mai compară cu primele două. Aceeași așezare cu eticheta la
   `--t-sm` dădea 92,5, adică 13,5px pentru o literă mai mică pe un telefon de
   depozit — direcția greșită. Rămâne `--t-md`, mărimea pe care o avea deja.

   La 1440 și la 1024: zero pixeli mișcați, verificat și cu poza — patru capturi
   la 1440 cu aceeași sumă de control. `audit/masuratori.md`, A42. */
@media (max-width: 560px) {
  .pasi.larg.pasi-filtru { flex-wrap: nowrap; gap: var(--s2); margin-bottom: var(--s3); }
  .pasi.larg.pasi-filtru .pas { flex: 1 1 0; min-width: 0; flex-direction: column;
        align-items: flex-start; gap: var(--s1); padding: var(--s2); }
  .pasi-filtru .pas-n { min-width: 0; text-align: left; }
}

/* ── ecranul comenzii: drumul strâns și contextul clientului ─────────────── */
details.card.drum-intreg > summary {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer; list-style: none;
}
details.card.drum-intreg > summary::-webkit-details-marker { display: none; }
details.card.drum-intreg > summary > h2 {
  display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: var(--s2);
  margin: 0;
}
details.card.drum-intreg > summary > .sageata { color: var(--mute); flex: none; }
details.card.drum-intreg > summary:hover > h2 { color: var(--ink); }
details.card.drum-intreg > summary:focus-visible {
  outline: var(--contur-focus); outline-offset: var(--s1);
}
details.card.drum-intreg > summary + .drum { margin-top: var(--s4); }


.profil-client > .profil-cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profil-client > .profil-cifre > div { display: flex; flex-direction: column; min-width: 0; }
.profil-client > .profil-cifre > div + div {
  border-left: 1px solid var(--line); margin-left: var(--s3); padding-left: var(--s3);
}
.profil-client > .profil-cifre b {
  font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink); white-space: nowrap;
}
.profil-client > .profil-cifre span {
  margin-top: var(--s-tip); font-size: var(--t-sm); color: var(--mute);
}
.profil-client > .mut { margin: var(--s3) 0 0; font-size: var(--t-sm); }
/* Cele două rânduri stinse sunt de același rang — banii și datele, amândouă
   note la cifrele de deasupra. Între ele se lasă cât între lucruri înrudite,
   nu cât între grupuri. */
.profil-client > .mut + .mut { margin-top: var(--s2); }
.profil-client > details.mai { margin-top: var(--s3); }

/* ── ce cere o mână azi, și grupele care se strâng — `incasari.html` ───────
   Ecranul banilor desenează același loc de patru ori (munca noastră și
   istoricul preluat, fiecare pe România și pe Ungaria), iar fiecare loc are
   trei cartonașe. Toate rămân desenate: cel care se face roșu când SmartBill
   nu răspunde trebuie găsit în prima zi rea, deci nu poate lipsi în zilele
   bune. Măsurat pe baza de producție din 8 august: douăzeci de propoziții
   identice care spun „nu e nimic” și trei rânduri de lucru adevărat între ele.
   Regulile de aici nu șterg nimic — pun în față ce e de făcut și strâng ce e
   curat într-un rând. */
.verdict { border-color: var(--line-strong); }
.todo { list-style: none; margin: 0; padding: 0; display: flex;
        flex-direction: column; gap: var(--s2); }
/* Rândul întreg e ținta, nu cuvintele: pe telefon un rând de listă de 14px
   înălțime nu se apasă, iar rândurile astea sunt singurul drum spre secțiunea
   de dedesubt. */
.todo a { display: flex; align-items: center; min-height: var(--tinta-min);
          gap: var(--s2); color: var(--ink); text-decoration: none;
          font-size: var(--t-base); line-height: var(--il-md); }
.todo a::before { content: ""; flex: none; width: 6px; height: 6px;
                  border-radius: 50%; background: var(--accent); }
.todo a:hover { color: var(--accent); }
/* Ce cade sub o apăsare are bulina casei; ce cere un om o are chihlimbarie și
   textul în ton — sunt două feluri de treabă, nu două grade ale aceleiași. */
.todo .cere-om a::before { background: var(--warn); }
.todo .cere-om a { color: var(--warn-ink); }
.verdict .note { margin: var(--s4) 0 0; }

/* Grupa strânsă. Rândul rămâne oricum, cu numele ei: un loc care dispare în
   zilele bune e un loc pe care nu-l mai caută nimeni în ziua rea. */
.grupa { margin-bottom: var(--s3); }
.grupa-cap { list-style: none; cursor: pointer; display: flex;
             align-items: center; gap: var(--s2); flex-wrap: wrap;
             min-height: var(--tinta-min); font-size: var(--t-md);
             color: var(--mute); }
.grupa-cap::-webkit-details-marker { display: none; }
.grupa-cap:hover { color: var(--ink); }
.grupa-cap b { color: var(--ink); font-weight: 600; }
.grupa[open] > .grupa-cap { margin-bottom: var(--s3); }
.grupa-stare { color: var(--warn-ink); font-weight: 600; }
/* „Curat" nu e o veste, deci nu se îngroașă și nu ia culoare: se citește din
   colțul ochiului și se sare peste. */
.grupa-stare.curat { color: var(--faint); font-weight: 400; }

/* ── capul pe două rânduri și dicționarul lui — `evidenta.html` ───────────
   Nouă coloane de cifre care arată toate la fel, dintre care șase sunt o
   împărțire (fiecare AWB cade în exact una, suma dă „Generate") și două
   răspund la alte întrebări. Cine se uită la tabel n-avea de unde ști: faptul
   era scris într-un comentariu de cod și în numele unei probe. Rândul de grup
   îl spune înaintea primei cifre. */
.grup th { font-weight: 600; }
.grup .cutii, .grup th[colspan] { color: var(--mute); font-weight: 500;
                                  font-size: var(--t-sm); text-transform: none;
 }
/* Cele șase se despart de vecinele lor cu o linie, nu cu spațiu: pe un tabel
   strâns spațiul se citește ca aerul dintre coloane, care e peste tot. */
.grup .cutii { border-left: 1px solid var(--line-strong);
               border-right: 1px solid var(--line-strong); }
.grid thead .grup + tr th:nth-child(1) { border-left: 1px solid var(--line-strong); }
.grid thead .grup + tr th:nth-child(6) { border-right: 1px solid var(--line-strong); }

/* Dicționarul de sub tabel: un rând pentru fiecare coloană, strâns. Se citește
   o dată și pe urmă se știe — deci nu are ce căuta deschis în fiecare lună. */
.lamurire { margin-top: var(--s4); }
.dictionar { margin: 0; font-size: var(--t-md); line-height: var(--il-md); }
.dictionar dt { font-weight: 600; color: var(--ink); margin-top: var(--s3); }
.dictionar dt:first-child { margin-top: 0; }
.dictionar dd { margin: var(--s1) 0 0; color: var(--mute); }

/* ── coloanele care rămân la birou ──────────────────────────────────────────
   Pe telefon, un rând de tabel devine cartonaș: fiecare celulă își scrie
   numele deasupra ei și ocupă un rând întreg. Bun la patru coloane, scump la
   nouă — lista tranșelor, cu 40 de rânduri × 9 celule, măsura 24.596px pe un
   telefon de 390px. Douăzeci și patru de ecrane de derulat ca să se ajungă la
   tranșa de alaltăieri, exact plângerea din 14.08.2026: „ori trebuie să
   derulezi”.

   Ce se taie nu se pierde: brutul, comisionul și numărul de comenzi se văd
   întregi pe ecranul tranșei, la o apăsare distanță. Ce rămâne pe telefon e
   întrebarea cu care se deschide ecranul — ziua, cât a intrat, dacă a intrat,
   și dacă mai are hârtie de închis. Pe birou nu se schimbă nimic. */
@media (max-width: 720px) {
  .grid td.la-birou, .grid th.la-birou { display: none; }
}

/* ── iPhone: focus fără zoom automat și tap fără dublu-zoom ────────────────
   Safari mărește singur pagina când un control focalizat are sub 16px. Scara
   casei este de 13px pe calculator, deci nu ridicăm tokenul
   global: regula intră numai când indicatorul principal este un deget
   (pointer gros, fără hover). `!important` este plasa pentru toate controalele
   de azi și pentru un selector mai specific adăugat mâine cu 13px. Este un
   prag minim: Body 17 al telefonului nu este micșorat la 16. Desktopul cu
   pointer precis își păstrează scara.

   `touch-action: manipulation` păstrează pan și pinch-zoom — omul poate mări
   în continuare pagina — dar scoate gestul de dublu-tap de pe țintele apăsate.
   De aceea viewport-ul rămâne accesibil și nu primește `maximum-scale` ori
   `user-scalable=no`. */
/* Primul cont: pașii, pe o dungă (`_pregatire_cont.html`), în aceeași ordine
   ca fluxul de expediere. Fiecare pas e un link cu numele lui; bifa îl
   stinge, nu-l scoate — omul vede și ce a făcut, nu doar ce mai are. */
.pregatire-scurta { margin: 0 0 var(--s5); }
.pregatire-scurta nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.pregatire-scurta nav a { display: inline-flex; align-items: center; gap: var(--s1);
  min-height: var(--tinta-min); color: var(--ink); font-weight: 500; }
.pregatire-scurta nav a.gata { color: var(--mute); font-weight: 400; }
.pregatire-scurta nav a.gata svg { color: var(--ok); }
.pregatire-pas { flex: 1 1 220px; min-width: 0; }
.pregatire-pas p { margin: 0; color: var(--mute); font-size: var(--t-sm);
  white-space: normal; overflow-wrap: anywhere; }
.pregatire-scurta > .grow { min-width: 0; }
/* La 17 px titlul e mai lat decât dunga și cădea singur sub pictogramă; așa se
   rupe în locul lui, lângă ea. */
@media (max-width: 720px) {
  .pregatire-scurta > span { flex: 1 1 0; min-width: 0; }
  .pregatire-scurta nav { flex-basis: 100%; }
}
#abonament .settings-section-head p { margin-left: 0; }

@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea,
  [contenteditable]:not([contenteditable="false"]) {
    font-size: max(16px, var(--t-base)) !important;
  }

  a[href],
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [contenteditable]:not([contenteditable="false"]),
  [tabindex]:not([tabindex="-1"]) {
    touch-action: manipulation;
  }
}

/* ── o singură pagină de bani ─────────────────────────────────────────────
   Densitatea este intenționată: managerul compară patru răspunsuri, nu patru
   destinații. Listele de comenzi se deschid numai la cerere. */
.pagina-bani { max-width: 1180px; margin: 0 auto; }
.bani-a { padding: var(--s5) 0 var(--s4); }
.bani-litera { color: var(--accent); font-weight: 700; font-size: var(--t-sm); }
.bani-a h1 { margin: var(--s1) 0; }
.bani-bloc h2 { margin: var(--s1) 0; }
.bani-total-mare { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap; margin: var(--s3) 0 var(--s1); }
.bani-total-mare b { font-size: clamp(32px, 5vw, 58px); line-height: 1; }
.bani-explicatie, .bani-bloc-cap p { margin: 0; color: var(--mute); }
.bani-galeti { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s4); }
.bani-galeata { display: grid; gap: var(--s2); padding: var(--s3); color: inherit; text-decoration: none; border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); }
.bani-galeata:hover, .bani-galeata.deschisa { border-color: var(--accent); }
.bani-galeata-cap, .bani-galeata-sume { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.bani-galeata-sume b { font-size: var(--t-lg); }
.bani-galeata > small { color: var(--mute); line-height: 1.35; }
.bani-lista { margin-top: var(--s4); }
.bani-lista-cap, .bani-bloc-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.bani-lista-cap h2 { margin: 0; }
.bani-bloc { margin-top: var(--s3); padding: var(--s4); }
.bani-bloc-cap > div:nth-child(2) { flex: 1; }
.bani-total { display: grid; justify-items: end; gap: var(--s1); white-space: nowrap; }
.bani-total b { font-size: var(--t-xl); }
.bani-d .bani-total { color: var(--ink); }
.bani-sursa { display: inline-flex; padding: var(--s-tip) var(--s-6); border-radius: var(--r-pill); color: var(--warn-ink); background: var(--warn-bg); font-size: var(--t-xs); font-style: normal; }
.bani-sursa.real { color: var(--ok-ink); background: var(--ok-bg); }
.bani-luni { margin-top: var(--s3); }
.bani-luni td span { display: block; white-space: nowrap; }
.bani-luni tr.total td { font-weight: 700; border-top: 2px solid var(--line-strong); }
.bani-ramane-luni { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: var(--s3); background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.bani-ramane-luni div { display: grid; gap: var(--s1); padding: var(--s2); background: var(--card); }
.bani-ramane-luni span { color: var(--mute); font-size: var(--t-sm); }
.bani-ramane-luni b { white-space: nowrap; }
.bani-istoric { margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line-strong); color: var(--mute); }
.bani-istoric p { margin: 0; }
.bani-istoric span { white-space: nowrap; }
@media (min-width: 721px) {
  .bani-a { padding-top: var(--s3); padding-bottom: var(--s2); }
  .bani-a h1 { margin-top: 0; }
  .bani-bloc { margin-top: var(--s1); padding: var(--s3); }
  .bani-luni { margin-top: var(--s2); font-size: var(--t-md); }
  .bani-luni th, .bani-luni td { padding-top: 3px; padding-bottom: 3px; line-height: 1.15; }
  .bani-ramane-luni { margin-top: var(--s2); }
  .bani-istoric { margin-top: var(--s2); padding-top: var(--s1);
                   font-size: var(--t-sm); line-height: var(--il-sm); }
}
@media (max-width: 720px) {
  .bani-galeti { grid-template-columns: 1fr; }
  .bani-total-mare { gap: var(--s2); }
  .bani-total-mare b { width: 100%; }
  .bani-bloc-cap { display: grid; grid-template-columns: auto 1fr; }
  .bani-total { grid-column: 1 / -1; justify-items: start; }
  .bani-ramane-luni { grid-template-columns: 1fr 1fr; }
  .bani-luni tbody tr { content-visibility: visible; contain-intrinsic-size: none; }
}

/* ============ Pontajul ============
   A doua formă a ecranului, desenată după vorbele lui Gabriel (23.08.2026):
   „în stânga … să poți selecta dintr-un switcher ziua”, „oamenii într-o
   listă, ca niște mini-blocuri”, „să pot apăsa pe un element și să se
   deschidă mai lung”, și — cel mai apăsat — „când treci la ziua următoare,
   se modifică înălțimea și se mută elementele între ele, iar eu urăsc
   chestia asta”. De-aia coloana din stânga are mereu aceleași cartonașe cu
   aceleași rânduri, iar un om strâns e mereu un singur rând de aceeași
   înălțime: schimbi ziua, se schimbă doar cifrele. */
.pontaj-rama { display: grid; grid-template-columns: 280px minmax(0, 1fr);
               gap: var(--s4); align-items: start; }
.pontaj-stanga { min-width: 0; }
.pontaj-lista { min-width: 0; }
.zi-titlu { display: flex; align-items: center; gap: var(--s3);
            margin-bottom: var(--s4); min-height: 32px; }
.zi-titlu > b { font-size: var(--t-lg); }
.pontaj-zile { display: flex; flex-direction: column; gap: var(--s-tip); }
.zi-leg { display: flex; justify-content: space-between; align-items: baseline;
          gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm);
          font-size: var(--t-md); color: var(--ink-2); }
.zi-leg:hover { background: var(--ap-fill-4); text-decoration: none; }
.zi-leg.on { background: var(--meniu-ales); color: var(--pe-accent); }
.zi-leg .zi-data { font-size: var(--t-sm); color: var(--mute);
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
.zi-leg.on .zi-data { color: var(--on-dark); opacity: .7; }
.zi-cauta { display: flex; gap: var(--s2); margin-top: var(--s3); }
.zi-cauta input[type="date"] { flex: 1; min-width: 0; }
.luna-rand { display: flex; align-items: center; justify-content: space-between;
             gap: var(--s2); margin-bottom: var(--s3); }
/* Totalurile din stânga: mereu aceleași rânduri, doar cifrele se schimbă. */
.pe-scurt { display: flex; flex-direction: column; gap: var(--s2); }
.pe-scurt > div { display: flex; justify-content: space-between; align-items: baseline;
                  gap: var(--s3); font-size: var(--t-md); }
.pe-scurt span { color: var(--mute); }
.pe-scurt b { font-variant-numeric: tabular-nums; }

/* Mini-blocul unui om: strâns, un singur rând cu aceleași patru cifre la
   aceleași locuri; apăsat, se desface în propoziții întregi. `<details>`,
   ca la sursele live: fără niciun rând de JavaScript. */
.om-pontaj { background: var(--surface); border: 0;
             border-radius: var(--r); corner-shape: var(--colt-continuu); margin-bottom: var(--s2); }
.om-pontaj > summary { display: grid; align-items: center; cursor: pointer;
  grid-template-columns: minmax(140px, 1.1fr) repeat(4, minmax(72px, .6fr)) 24px;
  gap: var(--s3); padding: var(--s3) var(--s4); list-style: none; min-height: 56px; }
.om-pontaj > summary::-webkit-details-marker { display: none; }
.om-nume { display: flex; align-items: center; gap: var(--s2); font-weight: 600;
           min-width: 0; overflow-wrap: anywhere; }
.punct { flex: none; width: 8px; height: 8px; border-radius: 50%;
         background: var(--line-strong); }
.punct.aici { background: var(--ok); }
.om-cifra { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.om-cap { font-size: var(--t-xs); color: var(--mute);
 }
.om-cifra b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.om-cifra .e-aici { color: var(--ok-ink); }
.om-chev { display: flex; justify-content: center; color: var(--faint); }
.om-chev .ic { transition: transform var(--durata-2); }
.om-pontaj[open] > summary .om-chev .ic { transform: rotate(180deg); }
.om-pontaj > summary:hover { background: var(--surface); border-radius: var(--r); corner-shape: var(--colt-continuu); }
.om-corp { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--line); }
.om-corp p { margin: var(--s3) 0 0; font-size: var(--t-md); line-height: var(--il-md); }
.pontaj-legenda { margin-top: var(--s3); max-width: 70ch; }
/* Foaia lunară: rândul de azi puțin aprins, zilele goale stinse, totalul jos. */
.foaia .gol td { color: var(--faint); }
.foaia .azi-rand td { background: var(--surface); }
.foaia tfoot td { border-top: 2px solid var(--line-strong); }
@media (max-width: 980px) {
  .pontaj-rama { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Pe telefon rândul strâns se rupe în două: numele sus, cifrele sub el. */
  .om-pontaj > summary { grid-template-columns: repeat(4, minmax(0, 1fr));
                         row-gap: var(--s2); }
  .om-nume { grid-column: 1 / 4; }
  .om-chev { grid-column: 4; justify-content: flex-end; }
}

/* ── Lista de picking ─────────────────────────────────────────────────────
   Ecranul e o foaie: un tabel de produse și două butoane. Singura lui grijă
   de stil e hârtia — „ai opțiunea să o printezi" (Gabriel, 23.08.2026) — așa
   că la tipărire cade tot ce nu e listă: meniul, antetul, butoanele. Regulile
   de print sunt generale dinadins: orice ecran dat la imprimantă vrea același
   lucru — conținutul, nu mobilierul aplicației. */
.foaia-picking .picking-frunte { display: flex; align-items: baseline; gap: var(--s3);
                                 flex-wrap: wrap; margin-bottom: var(--s3); }
.foaia-picking .picking-frunte h2 { margin: 0; }
.foaia-picking tfoot td { border-top: 2px solid var(--line-strong); }
.picking-nota { margin-top: var(--s3); }

@media print {
  #bara, .app-head, .sidebar, .side-toggle, .telefon-mini, .banner,
  .page-head-act, .picking-nota, .toast { display: none !important; }
  body { background: var(--hartie); }
  .app-shell { display: block; }
  .card { box-shadow: none; border: 1px solid var(--tus-linie); }

  /* Foaia de picking pe hârtie e doar tabelul — cerințele lui Gabriel din
     23.08.2026: „la print lista de picking trebuie să fie clară pe pagină,
     gen un tabel doar" și „este un cârnat lung, maxim 1 pagină ar fi
     superb". Fără lede, fără titluri de secțiune, fără card: un rând de
     identificare (câte produse, câte bucăți, de când) și tabelul cu linii
     pline, îndesat cât să încapă o dimineață întreagă pe o singură foaie
     A4 și să se poată bifa rând cu rând cu pixul. */
  .lede, .picking-frunte h2, #mediu, .jos { display: none !important; }
  .page-head { margin: 0 0 var(--s-tip); }
  .page-head h1 { font-size: 10pt; margin: 0; }
  .picking-frunte { padding: 0; margin: 0 0 var(--s-tip); }
  .picking-frunte .sub { color: var(--tus); font-size: 7.5pt; }
  .foaia-picking { border: none !important; padding: 0 !important; }
  .foaia-picking .tabel { overflow: visible; }
  .foaia-picking table {
    width: 100%; border-collapse: collapse; color: var(--tus);
    font-size: 7.5pt; line-height: 1.2;
  }
  /* Selectorii duc și clasele `.grid.tight` fiindcă regula de ecran
     `.grid.tight td` e mai specifică decât un simplu `.foaia-picking td`
     și i-ar bate fontul și spațierea — verificat pe primul PDF, care a
     ieșit „cârnat" de 3 pagini exact din cauza asta. */
  .foaia-picking .grid.tight th, .foaia-picking .grid.tight td {
    border: 1px solid var(--tus-slab); padding: 1.5px var(--s1); font-size: 7.5pt;
    text-align: left; vertical-align: top; line-height: 1.15;
  }
  .foaia-picking .grid.tight thead th {
    padding-top: 1px; padding-bottom: 1px;
    border-bottom: 2px solid var(--tus); font-size: 7pt;
  }
  .foaia-picking .grid.tight tfoot td { border-top: 2px solid var(--tus); }
  /* Totalul se tipărește o singură dată, la coadă — altfel browserul
     repetă tfoot pe fiecare pagină. */
  .foaia-picking tfoot { display: table-row-group; }
  /* Coloanele cu cifre stau strâmte ca titlul produsului să aibă loc pe
     un singur rând de cele mai multe ori — rândurile pe două etaje sunt
     cele care umflau „cârnatul". */
  .foaia-picking .grid.tight th:nth-child(n+2),
  .foaia-picking .grid.tight td:nth-child(n+2) {
    white-space: nowrap; width: 1%;
  }
  /* Dacă totuși lista dă pe-afară, un rând nu se rupe între pagini, iar
     capul de tabel se repetă pe foaia următoare. */
  .foaia-picking tr { break-inside: avoid; }
  .foaia-picking thead { display: table-header-group; }

  /* Sub 720 de pixeli tabelul de ecran se face cartonașe — și lățimea aia
     nu e doar a telefonului: zoomul browserului micșorează și „hârtia"
     din dialogul de print, iar la Gabriel foaia a ieșit 6 pagini de
     carduri cu umbre, nu tabel. Pe hârtie tabelul e tabel, indiferent
     de breakpoint. */
  .foaia-picking .grid { display: table; width: 100%; min-width: 0; }
  .foaia-picking .grid tbody { display: table-row-group; }
  .foaia-picking .grid tr {
    display: table-row; background: var(--hartie); border: 0;
    border-radius: 0; margin: 0; padding: 0;
  }
  .foaia-picking .grid td { display: table-cell; width: auto; }
  .foaia-picking .grid td::before { content: none; }
}

/* Marginile hârtiei, mici — tot pentru „maxim 1 pagină”. */
@page { margin: 6mm 9mm; }

/* ── Setări → WhatsApp: legarea numărului (1.36.0) ─────────────────────────
   Poza QR în stânga, pașii în dreapta; pe telefon, una sub alta. Poza are
   fundal alb și margine proprie — camera telefonului citește mai bine un cod
   cu „liniște” în jur decât unul lipit de chenar. */
.wa-legare { display: flex; flex-direction: column; gap: var(--s3); }
.wa-qr { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: start;
         padding: var(--s4); border: 0;
         border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); }
.wa-qr[hidden] { display: none; }
.wa-qr-poza { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.wa-qr-poza img { width: 256px; height: 256px; padding: var(--s2); background: var(--card);
                  border-radius: var(--r-sm); box-shadow: var(--umbra-1);
                  image-rendering: pixelated; }
.wa-qr-nota { margin: 0; font-size: var(--t-xs); color: var(--mute); text-align: center; max-width: 256px; }
.wa-qr-pasi { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.wa-qr-pasi ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s1); }
.wa-camp { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-xs);
           font-weight: 600; color: var(--ink-2); }
.wa-camp :is(input, select) { font-weight: 400; max-width: 22rem; }
.wa-cod { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.wa-cod-afisat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem;
                 /* singurul tracking scris de mână: un cod de citit cifră cu cifră */
                 letter-spacing: .18em; font-weight: 700; color: var(--ink-2); }
.wa-cod-afisat[hidden] { display: none; }
@media (max-width: 720px) {
  .wa-qr { grid-template-columns: 1fr; }
  .wa-qr-poza img { width: 220px; height: 220px; }
}

/* ── mesajul de eroare care nu mai dispare singur (03.09.2026) ───────────────
   Auditul: eroarea se scria ca un toast identic cu succesul, care se ștergea
   după 4-9 secunde — cine nu se uita chiar atunci în colț nu afla niciodată
   că apăsarea lui a picat. `app.js` acum ține eroarea pe ecran până o
   închide omul sau până reușește acțiunea; ce urmează e doar înfățișarea:
   o formă (nu doar roșu — cine nu distinge culoarea tot vede triunghiul),
   un semn de închidere, și mesajul lipit de câmpul care a greșit. */
/* Rămân `display:block` și `width:max-content` de la regula de sus, dinadins:
   sunt măsurate exact în `audit/interfata/toast-rupere.js`, la trei lățimi —
   `::before`/`::after` de mai jos sunt implicit `inline`, curg cu textul, nu
   ating ruperea deja verificată. */
.toast {
  cursor: pointer; /* clic oriunde pe cutie o închide, nu doar pe semnul din colț */
  padding-right: calc(var(--s5) + 14px); /* loc pentru „✕" din ::after, ca să nu se scrie peste text */
}
.toast::before { content: '✓  '; font-weight: 700; }
/* Triunghiul „⚠" spune „eroare" și pentru cine nu distinge roșul de gri —
   forma, nu doar culoarea de fond, e semnul cerut de audit. */
.toast.bad::before { content: '⚠  '; }
.toast::after {
  /* `.toast` e deja `position: fixed` (regula de la începutul fișierului) —
     ajunge ca părinte poziționat pentru semnul de închidere. */
  content: '✕'; position: absolute; right: var(--s3); top: var(--s3);
  font-size: var(--t-xs); opacity: .75;
}
/* Pe ecran îngust bara de sub listă (`.bara-lot`) și bara de setări
   (`.setari-actions`) stau tot jos, lipite de margine — iar o eroare care nu
   mai dispare singură ar sta peste butonul tocmai apăsat cât timp omul
   citește. Sub 480px toastul urcă sus, unde n-are ce acoperi. */
@media (max-width: 480px) {
  .toast { top: 12px; bottom: auto; }
}

/* Mesajul lipit de câmp: aceeași culoare de eroare ca restul aplicației
   (`--err`), dar mic și lângă câmp, nu într-o cutie plutitoare — omul tocmai
   s-a uitat acolo ca să scrie, nu trebuie să-și mute ochii ca să afle de ce. */
.camp-eroare {
  margin-top: var(--s1); font-size: var(--t-xs); color: var(--err-ink); font-weight: 600;
}
.camp-eroare::before { content: '! '; }
.camp-eroare[hidden] { display: none; }
.camp-invalid { border-color: var(--err-line) !important; background: var(--err-bg); }

/* === bara comună de listă ═══════════════════════════════════════════════
   `_bara_lista.html`. Poziția, numărul de rezultate și „Șterge filtrele"
   sunt unificate pe cele opt ecrane cu listă; filtrele de dedesubt rămân
   ale fiecărui ecran (`.filtre-bara`, `.pasi.larg.pasi-filtru`, `.banda`…),
   fiecare cu regula ei de derulare pe telefon, deja scrisă mai sus în
   fișier — bara nu le repetă, doar le pune în aceeași cutie.

   Fundalul e `--bg`, nu `--card`: bara nu e un cartonaș nou peste ecran, e
   o continuare a paginii care rămâne agățată sus cât se derulează. Un
   cartonaș propriu, cu umbră și margine, ar fi arătat ca o a doua bară de
   titlu deasupra celei pe care o are deja fiecare ecran. */
.bara-lista {
  position: sticky; top: var(--h-dunga, 0px); z-index: 10;
  background: var(--bg); padding: var(--s2) 0;
  display: flex; flex-direction: column; gap: var(--s2);
}
/* Într-un grup gri bara agățată ia fondul grupului — altfel rămâne un dreptunghi
   alb tăiat în gri. `--surface` e opac, deci rândurile care trec pe sub ea nu se văd. */
.card .bara-lista { background: var(--surface); }
.bara-lista-corp { min-width: 0; }
.bara-lista-numar {
  margin: 0; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); font-size: var(--t-sm); color: var(--mute);
}
.bara-lista-sterge {
  display: inline-flex; align-items: center; gap: var(--s1); flex: none;
  color: var(--mute); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.bara-lista-sterge:hover { color: var(--ink); }
.bara-lista-sterge svg { opacity: .7; }

/* Chip-ul „×" scoate un singur filtru (de exemplu căutarea de pe
   Contabilitate) fără să atingă restul — vezi `bara_lista.fara`. */
.chip-x { display: inline-flex; align-items: center; gap: var(--s-6); }
.chip-x .x { display: inline-flex; opacity: .7; }
.chip-x:hover .x { opacity: 1; }

/* De la pragul de birou în sus (721px), antetul aplicației e și el lipit sus,
   deci bara se lipește de marginea lui de jos, nu de a ferestrei. Fără distanță
   între ele: în orice fâșie rămasă descoperită rândurile listei se văd
   trecând. Aerul de deasupra filtrelor e `padding`-ul barei, care are fundal. */
@media (min-width: 721px) {
  .bara-lista {
    top: calc(var(--h-dunga, 0px) + var(--app-head-height));
  }
}

/* ── adăugiri, lane/refuz (1.37) — numai adăugat, nimic rescris mai sus ─────
   Fișierul e comun cu munca lui Codex din aceeași noapte; regula ținută aici
   e simplă: se adaugă la coadă, niciodată nu se schimbă o linie de deasupra. */

/* Semaforul de adresă (`_randuri.html`, insigna `.tag.stare-adr.ton-*`) era
   numai culoare — un ochi daltonist vede „respinsă” la fel ca „validată”.
   Glifele de mai jos adaugă a doua cale, de formă, fără să atingă markup-ul:
   `aria-label`-ul cu motivul în română a fost adăugat direct pe span, în
   `_randuri.html` — ce lipsea aici era doar diferența vizuală. Cifrele de
   producție (2.793 comenzi, citite read-only) arată `neverificată` pe 1.834
   din ele — 66%, starea cea mai deasă, nu o excepție — deci `ton-mut` nu mai
   are voie să însemne „șters, fără importanță”: primește chenar și literă
   citeață, ca oricare altă stare, nu doar fundalul gri de dinainte. */
.tag.stare-adr::before { margin-right: .35em; font-weight: 700; }
.tag.ton-ok::before      { content: "✓"; }
.tag.ton-lucru::before   { content: "…"; }
.tag.ton-atentie::before { content: "!"; }
.tag.ton-rau::before     { content: "✕"; }
.tag.ton-mut::before     { content: "○"; }
.tag.ton-mut {
  background: var(--surface); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Ecranul „Colet întors” (`inchidere_colet.html`) — pasul care se apasă o
   singură dată. Consecințele reuse lista-traseu `.drum` (punct verde pentru ce
   e deja făcut, punct neutru pentru ce urmează); ce lipsea era doar spațiul de
   deasupra formularului și fieldset-ul cu motivele, cu ținte de-o singură
   atingere ca la produsele de retur (`.retur-alege-produse`), nu un `<select>`
   care ar fi cerut un al doilea gest pentru o alegere fixă. */
.pasi-colet { margin: var(--s3) 0 var(--s4); }
.motiv-refuz { border: 0; padding: 0; margin: 0 0 var(--s4); }
.motiv-refuz legend { font-size: var(--t-sm); color: var(--mute); margin-bottom: var(--s2); padding: 0; }
.form .pick-opt input[type="radio"] { margin-top: var(--s-tip); }
.actions.actions-row { flex-direction: row; flex-wrap: wrap; align-items: center; }

/* === bara de acțiuni în bloc ===============================================
   `app/bloc.py` + `app/routes/bloc.py` + `_bara_bloc.html` + `bloc_rezultat.html`
   + `bloc.js`. Bloc adăugat la finalul fișierului, cum cere brief-ul comun —
   nu se rescrie nimic din ce era deja aici.

   De la 03.09.2026 `.col-bloc` e singura coloană de bife din tabel: bara de
   acțiuni în bloc, bara de lot (`app.js`) și puntea spre foaia de picking
   (`lista_picking_pe_ecran.js`) citesc toate aceeași bifă. Bifa simplă e tot
   mecanismul, cu sau fără JavaScript — dar coloana tot pleacă stinsă din CSS:
   `_randuri.html` e același șablon pe `/comenzi` și pe `/perioada`, iar acolo
   nu există formularul care să trimită bifele undeva. `table.grid.bloc` o
   aprinde doar unde chiar duce la ceva.

   Regula de „stinsă” trebuie să rămână scrisă cu o singură clasă, iar cea de
   „aprinsă” cu `table.grid.bloc`: pe ecranul de comenzi coloana e mereu
   vizibilă, deci nu mai există nicio stare în care operatorul bifează într-un
   loc și un buton citește din altul. */
.col-bloc { display: none; }
table.grid.bloc .col-bloc { display: table-cell; width: 34px; text-align: center; padding-right: 0; }
/* Lățimea impusă a tabelului crește cu coloana: fără rândul ăsta, cele 34px se
   fură din „Adresă”, adică din singura coloană care nu se poate strânge.
   Aceleași margini ca regula de bază (`.tabel.lat > .grid`, rândul 2102):
   peste 1080px lățimea nu se impune deloc, iar sub 721px tabelul e cartonaș și
   n-are ce lățime să ceară — scrisă altfel, cele 1074px ar împinge în lături o
   pagină de telefon, fiindcă `.grid.bloc` cântărește mai mult decât anularea
   de-acolo. */
@media (min-width: 721px) and (max-width: 1080px) {
  .tabel.lat > .grid.bloc { min-width: 1074px; }
}
.bloc-bifa-rand, #bloc-toti { margin: var(--s-tip) 0 0; }
/* Pe telefon tabelul e cartonaș (`@media (max-width: 720px)`, rândul 2169),
   deci și celula de bifă e un rând al lui, cu numele coloanei deasupra
   (`.grid td.col-bloc::before`). Aceeași margine, 720px, ca restul cartonașului.
   Regula stă aici, nu sus în blocul de telefon, fiindcă `table.grid.bloc
   .col-bloc` de deasupra are aceeași greutate (0,2,1) și e scrisă mai jos în
   fișier — la egalitate câștigă cea de pe urmă, deci acolo n-ar fi ținut. */
@media (max-width: 720px) {
  table.grid.bloc .col-bloc { display: block; width: auto; text-align: left; }
  /* La desktop 17 px într-un rând de 44 e densitate; aici e o țintă de deget. */
  .bloc-bifa-rand { width: var(--tinta-min); height: var(--tinta-min); margin: 0; }
}

/* Comanda: cele trei clase care stăteau în șablon fără nicio regulă. */
.retur-fizic { margin-top: var(--s4); }                     /* recepția fizică, sub decizie */
.card.ton-warn { box-shadow: inset 3px 0 0 var(--warn); }   /* dosar lipsă: dunga de atenție */
.detalii-secundare { margin-top: var(--s3); }
.detalii-secundare > summary { color: var(--mute); font-size: var(--t-sm); cursor: pointer; }

/* A patra stare a pastilei — „reușit”/„sărit” aveau deja `.ok`/`.mut`, dar
   „eșuat” n-avea nicio variantă în tot fișierul până la lotul din
   `bloc_rezultat.html`. */
.pastila.rau { background: var(--err-bg); color: var(--err-ink); }
.pastila.rau b { color: var(--err-ink); }

/* Fără JavaScript, bara e un rând obișnuit sub tabel, mereu vizibilă —
   apăsarea unui buton tot trimite formularul. `bloc.js` adaugă `.lipita`
   numai după prima bifă, ca să stea lipită de marginea de jos, la fel ca
   `.bara-lot` de mai sus — dar bara veche rămâne a ei, neatinsă. */
.bara-bloc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border: 0; border-radius: var(--r-md); corner-shape: var(--colt-continuu);
  background: var(--fond-plutitor); backdrop-filter: var(--filtru-plutitor); box-shadow: var(--umbra-2);
  font-size: var(--t-md);
}
.bara-bloc.lipita { position: sticky; bottom: var(--s3); z-index: 5; }
.bara-bloc-cate { color: var(--mute); }
.bara-bloc-tot { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.bara-bloc-butoane { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 640px) {
  .bara-bloc { flex-direction: column; align-items: stretch; }
  .bara-bloc-butoane { justify-content: flex-start; }
}

/* ── toastul din modul telefon nu mai acoperă Scanner/Scanează ─────────────
   Sub 480px `.toast` urcă la `top: 12px` (regula de mai sus, lângă
   `.toast::before`), ca să nu stea peste bara de jos. Dar omul din depozit
   cu `mod-telefon` pornit are altă bară SUS: `.telefon-mini` (rândul 208),
   cu ‹ Scanner și Scanează, la `z-index: 20`. Un toast de eroare — persistent,
   `role="alert"`, nu se ascunde singur — stă la `z-index: 50`, deci deasupra
   ei, exact peste butoane. Omul ține scannerul în mână; n-are cum să aștepte
   ca eroarea să dispară singură ca să mai apese pe Scanează (Constatarea 6,
   audit Codex 03.09.2026).

   Rezolvarea: în modul telefon, toastul coboară sub banda de 58px — plus
   orice crestătură, cu aceeași formulă `env(safe-area-inset-top)` pe care o
   folosește deja `.telefon-mini` la rândul 208, ca înălțimea reală a benzii
   și punctul de plecare al toastului să crească împreună pe orice telefon.
   Selectorul cu două clase (`.mod-telefon .toast`) câștigă fără `!important`
   asupra regulii simple `.toast { top: 12px }` de mai sus, prin
   specificitate — indiferent de ordinea din fișier. Nu se ascunde nimic din
   eroare, doar se mută unde nu acoperă nimic apăsabil. Vezi
   `teste/proba_toastul_nu_acopera_scanerul.py` pentru relația verificată
   numeric. */
@media (max-width: 480px) {
  .mod-telefon .toast {
    top: calc(env(safe-area-inset-top) + 58px + var(--s2));
    bottom: auto;
  }
}

/* ── Rapoarte → Pierderi ────────────────────────────────────────────────
   Nu un tablou de bord: cinci propoziții, citite de sus în jos, fiecare cu
   sursa ei de adevăr (o legătură spre exact comenzile numărate). Aceeași
   formă repetabilă ca „Închiderea zilei”, ca ochiul care a învățat-o pe una
   să nu reînvețe alta. */
.pierderi-calculat {
  margin: 0 0 var(--s4); color: var(--mute); font-size: var(--t-xs);
}
.pierderi-board { display: grid; gap: var(--s4); }
.pierderi-cauza {
  padding: var(--s4) var(--s5); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu);
  background: var(--surface);
}
.pierderi-cauza h2 { margin: 0 0 var(--s2); font-size: var(--t-lg); }
.pierderi-propozitie {
  margin: var(--s2) 0 0; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--il-sm);
}
.pierderi-propozitie:first-of-type { margin-top: 0; }
.pierderi-link { margin-top: var(--s3); }
.pierderi-nota {
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border: 1px dashed var(--line);
  border-radius: var(--r); corner-shape: var(--colt-continuu); color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs);
}

@media (max-width: 760px) {
  .pierderi-cauza { padding: var(--s4); }
}

/* ── toastul nu stă peste bara de acțiuni în bloc ─────────────────────────
   `.bara-bloc.lipita` (mai sus) stă la `bottom: var(--s3)`, `z-index: 5`;
   `.toast` (rândul 1656) stă la `bottom: 20px`, `z-index: 50`. Aceleași
   douăzeci de pixeli, și cutia care câștigă e tocmai mesajul — deci mesajul
   care spune „apasă” acoperea butonul de apăsat. Sub 480px scăparea exista
   deja (toastul urcă sus, `top: 12px`), dar de la 481px în sus nimic: telefonul
   întors pe orizontală, tableta mică, laptopul — toate lăsate cu butonul sub
   mesaj (Constatarea 5, audit Codex 03.09.2026).

   Se mută mesajul, nu bara: bara e ținta apăsării și locul ei jos e tot ce o
   ține la îndemână; mesajul e ceva de citit și poate sta oriunde se vede.

   De ce nu urcă sus, ca sub 480px: în `mod-telefon` banda `.telefon-mini`
   (rândul 208) e sus pe ORICE lățime, nu doar sub 480px — mutat acolo,
   toastul ar cădea exact în coliziunea reparată la rândul 6255. Rămâne jos și
   se ridică deasupra barei.

   Înălțimea barei nu se poate scrie aici: se schimbă cu lățimea (sub 640px
   butoanele trec unul sub altul) și cu textul lor viu, „(3 din 5)”. O măsoară
   `bloc.js` și o lasă în `--bara-bloc-inaltime`, pe `<html>`, împreună cu
   semnul `bloc-lipit` de pe `<body>` — aceeași convenție ca `mod-telefon`:
   stare pe un strămoș, regulă cu doi pași, care câștigă prin specificitate
   (0,2,1 față de 0,1,0), fără `!important` și fără să depindă de ordinea din
   fișier. Cei 96px de rezervă sunt doar plasa pentru clipa dinaintea primei
   măsurători; cifra adevărată vine de la `getBoundingClientRect()`.

   `min-width: 481px` se lipește de `max-width: 480px` de mai sus, fără nicio
   lățime între ele și fără capăt de sus: la orice lățime, ori toastul e sus,
   ori e deasupra barei. Vezi `teste/proba_toastul_nu_acopera_bara_bloc.py`
   pentru relația verificată numeric. */
@media (min-width: 481px) {
  body.bloc-lipit .toast {
    bottom: calc(var(--s3) + var(--bara-bloc-inaltime, 96px) + var(--s2));
  }
}

/* Formularele operațiunilor din comandă. */
.operation-form { display: grid; gap: var(--s-14); max-width: 680px; }
.operation-form label { display: grid; gap: var(--s-6); font-weight: 500; }
.operation-form input, .operation-form select, .operation-form textarea {
  width: 100%; min-width: 0; min-height: var(--h-camp); box-sizing: border-box;
  padding: var(--s1) var(--pad-camp); border: 0; border-radius: var(--r-camp);
  background: var(--ap-field-bg); color: var(--ink); font: inherit;
  box-shadow: inset 0 0 0 1px var(--ap-field-border); caret-color: var(--accent);
}
.operation-form input[type="hidden"] { display: none; }
.operation-form input:where([type="checkbox"], [type="radio"]) {
  width: var(--bifa); min-height: 0; padding: 0; border-radius: var(--bifa-r);
  background: var(--bifa-oprit); box-shadow: none;
}
.operation-form input:where([type="radio"]) { border-radius: 50%; }
.operation-form input:where([type="checkbox"], [type="radio"]):checked { background: var(--accent-plin); }
.operation-form :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1px var(--ap-field-border), var(--inel-accent); }
.operation-form input:where([type="checkbox"], [type="radio"]):focus { box-shadow: none; }
.operation-form textarea { padding-block: var(--s-6); resize: vertical; }
.operation-form input[type="file"] { padding: var(--s1) var(--s2); }
.operation-form .btn { justify-self: start; }
/* Importuri financiare și mapări: etichete deasupra câmpului, două coloane
   când încap, aceeași geometrie de formular în fiecare etapă. */
.operation-form.ui-form-grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding: var(--s3) var(--s4) var(--s4); }
.ui-form-grid > .btn { grid-column: 1 / -1; justify-self: end; }
.ui-form-grid > label { min-width: 0; }
.operation-form.ui-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); max-width: none; margin-block: var(--s4); }
.ui-form-inline > label { flex: 1 1 180px; min-width: 0; }
.ui-form-inline > .btn { flex: none; }
@media (max-width: 720px) {
  .operation-form.ui-form-grid { grid-template-columns: minmax(0, 1fr); padding: var(--s4); }
  .ui-form-inline > .btn { width: 100%; }
  .ui-form-grid > .btn { width: 100%; }
}

/* Categoria e un subtitlu în grup, sub titlul secțiunii (Headline 13): 11/14
   semibold, gri, aliniat cu textul rândurilor. */
.module-group-head { padding: var(--s5) var(--s4) var(--s2); border-top: 1px solid var(--line-moale); }
.module-group-head h3 {
  margin: 0; color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 600;
}
.module-group-head p { margin: 0; color: var(--mute); }

/* Account plans are a comparison, not independent per-store checkouts. */
#abonament { scroll-margin-top: calc(var(--h-dunga, 0px) + var(--app-head-height) + var(--s7) + var(--s6) + var(--s2)); }
.subscription-catalog { padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line-moale); }
.subscription-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
/* Plăcuță albă în grupul gri — a doua treaptă a kitului (alb pe negru 3%),
   rază 8 ca selecția. Nivelul contului se spune cu inelul accentului. */
.subscription-plan { padding: var(--s4); border: 0; border-radius: var(--r-sm); background: var(--card); }
.subscription-plan.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.subscription-plan h4 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.subscription-cap { margin: var(--s4) 0 var(--s2); font-size: var(--t-sm); }
.subscription-cap strong { font-size: var(--t-xl); font-weight: 600; }
.subscription-price { margin: 0; color: var(--mute); font-size: var(--t-sm); }
.subscription-price b { color: var(--ink); }
.subscription-description { margin: var(--s4) 0; color: var(--ink-2); font-size: var(--t-sm); line-height: var(--il-sm); }
@media (max-width: 767px) { .subscription-plans { grid-template-columns: 1fr; } }

/* Predarea la curier (`app/modules/predare_curier`). Câmpul de scanat e mare
   și primul pe ecran; borderoul se printează ca foaia de picking — tabelul și
   rândul de semnături, nimic altceva. */
.predare-form { grid-template-columns: 1fr auto; align-items: end; max-width: none; }
.predare-form input { font-size: 20px; }
.predare-form .btn { justify-self: stretch; }
.predare-alarma { border-color: var(--warn); }
.predare-alarma h2 { display: flex; align-items: center; gap: var(--s-6); }
.predare-inchide { margin-top: var(--s3); }
.predare-semnare { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.predare-semnare .operation-form { margin: 0; }
.predare-cazut td { color: var(--mute); }
tr.predare-veche td { background: var(--warn-bg); }
.borderou-cap { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.borderou-semnaturi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4, var(--s7)); margin-top: var(--s4, var(--s7)); }
.borderou-semnaturi div { display: grid; gap: var(--s1); padding-top: 28px; border-top: 1px solid var(--line-strong); }
.borderou-semnaturi span { color: var(--mute); font-size: var(--t-sm); }
.borderou-semnaturi i { color: var(--mute); font-size: var(--t-xs); font-style: normal; }
@media (max-width: 640px) {
  .predare-form { grid-template-columns: 1fr; }
  .pagina-predare main .btn { min-height: var(--h-ctl); font-size: var(--t-md); }
  .pagina-predare main input:not([type="hidden"]) { min-height: var(--h-camp); font-size: var(--t-md); }
  .pagina-predare main .predare-form input[name="cod"] { font-size: var(--t-t3); }
  .borderou-cap { flex-direction: column; }
  .borderou-semnaturi { grid-template-columns: 1fr; }
}
@media print {
  .pagina-predare main > nav, .pagina-predare .page-head { display: none !important; }
  .foaia-borderou { border: none !important; padding: 0 !important; }
  .foaia-borderou .tabel { overflow: visible; border: 0; border-radius: 0; }
  .foaia-borderou .grid { display: table; width: 100%; min-width: 0; border-collapse: collapse; color: var(--tus); }
  .foaia-borderou .grid thead { display: table-header-group; }
  .foaia-borderou .grid tbody, .foaia-borderou .grid tfoot { display: table-row-group; }
  .foaia-borderou .grid tr { display: table-row; break-inside: avoid; content-visibility: visible; contain-intrinsic-size: none; border: 0; margin: 0; padding: 0; }
  .foaia-borderou .grid.tight th, .foaia-borderou .grid.tight td { display: table-cell; width: auto; border: 1px solid var(--tus); padding: 3px 5px; font-size: 8pt; line-height: 1.3; }
  .foaia-borderou .grid td::before { content: none; }
  .borderou-cap, .borderou-semnaturi span, .borderou-semnaturi i { color: var(--tus); }
  .borderou-cap { flex-direction: row; }
  .borderou-semnaturi { grid-template-columns: 1fr 1fr; margin-top: 24pt; page-break-inside: avoid; }
  .borderou-semnaturi div { border-top: 1px solid var(--tus); padding-top: 30pt; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Reguli mutate din șabloane, 05.09.2026: o singură foaie (L1, L7). Fiecare
   bloc poartă numele ecranului de unde a venit; domeniul rămâne cel al
   ecranului (`.pagina-*`, `.patronul`), deci nimic nu se schimbă în altă
   parte. Regulile consolei (`.cs-*`) au plecat în `consola.css` (24.09.2026).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Lista de comenzi (fost <style> în index.html) ── */
/* Piața coboară lângă filtre numai pe lista de comenzi. Dacă ar rămâne și în
   antet, RO/HU ar fi al patrulea sistem care schimbă aceeași listă. */
.pagina-comenzi .app-head .shops { display: none; }
.unelte-lista { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
/* Bara de grupuri (.filtre-bara) are destule reguli încât stau în app.css,
   lângă .chip/.tab de la care împrumută vocabularul vizual. Aici rămân
   doar bucățile care nu răspund la nicio întrebare de filtrare. */
.filtre-piete { display: inline-flex; align-items: center; flex: none; }
.filtre-piata-grup {
  display: flex; flex-direction: column; gap: var(--s1); flex: none;
}
.filtru-piata {
  min-height: var(--tinta-min); display: inline-flex; align-items: center;
  padding: var(--s1) var(--s2); color: var(--mute); font-weight: 600;
}
.filtru-piata.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.filtru-piete i { color: var(--line-strong); font-style: normal; }
.filtru-data-unica { flex: 0 0 190px; }
.filtru-data-unica input {
  width: 100%; min-height: var(--h-ctl); padding: 0 var(--s3);
  border: 0; box-shadow: inset 0 0 0 1px var(--ap-field-border); border-radius: var(--r-camp);
  background: var(--ap-field-bg); color: var(--ink); font: inherit;
}
.filtre-mesaj { margin: 0 0 var(--s3); padding: var(--s3); border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn-ink); }
.vederi-selector { margin: var(--s2) 0 var(--s4); }
.vederi-selector > summary { cursor: pointer; font-weight: 700; }
.vederi-selector-panou { display: grid; gap: var(--s2); max-width: 34rem; padding: var(--s3) 0; }
.vederi-selector-optiuni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.vederi-rand { align-items: start; }
.vederi-actiuni { display: grid; gap: var(--s2); min-width: min(100%, 24rem); }
.vederi-form, .vederi-actiuni form { margin: 0; padding: var(--s3); }
.vederi-form fieldset, .vederi-actiuni fieldset { display: grid; gap: var(--s2); border: 0; padding: 0; margin: 0; }
.vederi-form label, .vederi-actiuni label { display: grid; gap: var(--s1); }
.vederi-form input, .vederi-form select, .vederi-actiuni input, .vederi-actiuni select { max-width: 100%; }
.vederi-verificare { display: flex !important; align-items: center; }
.vederi-butoane { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filtre-detaliu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem); gap: var(--s2); }
.filtre-detaliu .filtre-camp { min-width: 0; }
@media (max-width: 42rem) { .filtre-detaliu { grid-template-columns: 1fr; } }


/* ── Nepotriviri (fost <style> în nepotriviri.html) ── */
.nepotriviri-cap { display:flex; align-items:baseline; justify-content:space-between;
                   gap:var(--s3); margin:var(--s4) 0 var(--s2); flex-wrap:wrap; }
.nepotriviri-cap h1 { margin:0; }
.nepotriviri-total { display:flex; align-items:baseline; gap:var(--s2) var(--s4);
                     flex-wrap:wrap; padding:var(--s3) var(--s4); margin-bottom:var(--s4);
                     border:1px solid var(--line); border-radius:var(--r); corner-shape: var(--colt-continuu); background:var(--surface); }
.nepotriviri-total b { font-size:var(--t-xl); }
.nepotriviri-total span { color:var(--mute); font-size:var(--t-sm); }
.nepotriviri-gol { padding:var(--s5) var(--s4); text-align:center; color:var(--mute); }
.nepotriviri-gol b { display:block; color:var(--ink); font-size:var(--t-base); margin-bottom:var(--s1); }
.nepotriviri-sectiune { margin-top:var(--s4); }
.nepotriviri-sectiune.bani-detalii > summary { list-style:none; cursor:pointer; min-height:var(--tinta-min); }
.nepotriviri-sectiune.bani-detalii > summary::-webkit-details-marker { display:none; }
.nepotriviri-sectiune.bani-detalii > summary h2 { display:flex; align-items:center; gap:var(--s2); margin:0; }
.nepotriviri-sectiune.bani-detalii > summary h2::after {
  content:'›'; margin-left:auto; color:var(--mute); transform:rotate(90deg);
  transition:transform var(--durata-1);
}
.nepotriviri-sectiune.bani-detalii[open] > summary h2::after { transform:rotate(-90deg); }
.nepotriviri-sectiune .bani-detalii-corp { margin-top:var(--s3); }
.nepotriviri-explicatie { margin:0 0 var(--s3); color:var(--mute); font-size:var(--t-sm); }
.nepotriviri-sectiune-suma { font-weight:600; }
.nepotriviri-goala { padding:var(--s3) var(--s4); color:var(--mute); font-size:var(--t-sm); }
.nepotriviri-sursa { display:block; margin-top:var(--s-tip); color:var(--mute); font-size:var(--t-xs); }
.nepotriviri-diferenta { font-weight:600; }
@media (max-width:720px) {
  .nepotriviri-total { flex-direction:column; gap:var(--s1); }
}


/* ── Cabina de telefon (fost <style> în cabina_telefon.html) ── */
/* Istoria omului, pe telefon: pagina e deja gândită „întâi pentru deget
   și 390px" (vezi comentariul din app.css), dar grila de mai jos rămăsese
   pe 3 coloane de ~100px late — acolo „colete întoarse" se rupe pe două
   rânduri, într-un chenar strâmt, greu de citit dintr-o privire în timp ce
   ții telefonul la ureche. N-am găsit nicio regulă care s-o ascundă ori s-o
   taie (nici clipping, nici JS): grila era vizibilă tot timpul, doar
   incomod de citit. Trecem la trei rânduri late — cifra și eticheta pe
   același rând, ca pe un bon — fără să atingem app.css. */
@media (max-width: 620px) {
  .cabina-history-grid { grid-template-columns: 1fr; gap: var(--s1); }
  .cabina-history-grid > span {
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: var(--s2); padding: var(--s2) var(--s3);
  }
  .cabina-history-grid b { min-width: 1.6em; }
}

/* Data comenzii lipsea din capul cardului. Apare lângă TGO-..., cu formatul
   deja folosit pe /comanda (`| when`: „azi, 16:25” / „ieri, 09:04” /
   „4 aug, 18:40”) — nu una relativă și vagă ca „acum 3 zile”. */
.cabina-order-date {
  display: inline-flex; align-items: center; min-height: var(--tinta-min);
  margin-top: var(--s1); margin-left: var(--s2);
  color: var(--mute); font-size: var(--t-sm);
}


/* ── Board financiar ── */
.fin-board .page-head { margin-bottom: var(--s4); }
.fin-data { margin: 0 0 var(--s5); color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.fin-board-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s3); }
.fin-board-card, .fin-flow, .fin-actions, .fin-lista, .fin-secondary, .fin-empty {
  min-width: 0; background: var(--surface); border-radius: var(--r); corner-shape: var(--colt-continuu);
}
.fin-board-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s4); }
.fin-board-top, .fin-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); width: 100%; }
.fin-kicker, .fin-sursa { color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); }
.fin-kicker { font-weight: 600; }
.fin-board-card h2, .fin-section-head h2 { margin: var(--s2) 0 0; font-size: var(--t-lg); line-height: var(--il-lg); font-weight: 600; }
.fin-valoare { margin-top: var(--s4); font-size: var(--t-xl); line-height: var(--il-xl); }
.fin-sume { display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.fin-sume b { white-space: nowrap; font-weight: 700; }
.fin-necunoscut { color: var(--mute); font-size: var(--t-md); font-weight: 500; }
.fin-card-fact { margin: var(--s2) 0 0; font-size: var(--t-md); line-height: var(--il-md); }
.fin-card-empty { margin: var(--s4) 0 0; color: var(--mute); font-size: var(--t-md); line-height: var(--il-md); }
.fin-card-note, .fin-alert { margin: var(--s2) 0 0; color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.fin-alert { color: var(--warn); font-weight: 600; }
.fin-card-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-ctl-mic); margin-top: auto; padding-top: var(--s4); font-weight: 600; }
.fin-flow, .fin-actions, .fin-lista, .fin-secondary { margin-top: var(--s4); padding: var(--s4); }
.fin-section-head h2 { margin-top: var(--s1); }
.fin-flow-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--s2); margin-top: var(--s4); }
.fin-flow-grid > * { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border-radius: var(--r-sm); background: var(--card); }
.fin-flow-grid b { font-size: var(--t-xl); line-height: var(--il-xl); }
.fin-flow-grid span { color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.fin-flow-grid a:hover { background: var(--surface-2); }
.fin-action-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s2); margin-top: var(--s4); }
.fin-action-list a { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border-radius: var(--r-sm); background: var(--card); }
.fin-action-list a:hover { background: var(--surface-2); }
.fin-action-list b { font-size: var(--t-md); line-height: var(--il-md); font-weight: 600; }
.fin-action-list span { color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.fin-lista .tabel { margin-top: var(--s3); }
.fin-empty { margin-bottom: var(--s4); padding: var(--s4); }
.fin-empty h2 { margin: 0; font-size: var(--t-lg); line-height: var(--il-lg); }
.fin-empty p { margin: var(--s2) 0 0; color: var(--mute); }
.fin-secondary { padding: 0; }
.fin-secondary > summary { min-height: var(--tinta-min); padding: var(--s3) var(--s4); cursor: pointer; font-weight: 600; }
.fin-secondary > summary:focus-visible { outline: var(--contur-focus); }
.fin-secondary-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s5); padding: 0 var(--s4) var(--s4); }
.fin-secondary-body h2 { font-size: var(--t-md); line-height: var(--il-md); }
.fin-secondary-body p, .fin-secondary-body li { color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.fin-secondary-body ul { padding-left: var(--s4); }
@media (max-width: 900px) {
  .fin-board-grid { grid-template-columns: 1fr; }
  .fin-flow-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .fin-tabs { display: flex; }
  .fin-tab { flex: 1; min-height: var(--tinta-min); }
  .fin-flow-grid, .fin-action-list, .fin-secondary-body { grid-template-columns: 1fr; }
  .fin-board-card, .fin-flow, .fin-actions, .fin-lista { padding: var(--s3); }
  .fin-secondary-body { padding: 0 var(--s3) var(--s3); }
}


/* ── Patronul (fost <style> în patronul.html) ── */
.patronul { --patron-gap: var(--s4); }
.patronul .cifre { grid-template-columns: 1fr; margin-bottom: var(--s5); }
.patronul .cif { min-height: 210px; }
.patronul .cif-n { display: flex; flex-direction: column; gap: var(--s1); }
.patronul .cif-n > span { display: block; }
.patronul .cif-n .doi { font-size: var(--t-xl); color: var(--ink-2); }
.patronul .cif-sigur { border-color: var(--err-line); }
.patronul .cif-decizie { border-color: var(--warn-line); background: var(--warn-bg); }
.patronul .bloc { scroll-margin-top: var(--s7); }
.patronul .sectiune-cap { margin: var(--s7) 0 var(--s4); }
.patronul .sectiune-cap h2 { margin: 0; font-size: var(--t-lg); }
.patronul .sectiune-cap p { margin: var(--s1) 0 0; color: var(--mute); max-width: 72ch; }
.patronul .sume-separate { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.patronul .sume-separate b { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.patronul .etape-bani,
.patronul .drum,
.patronul .dovezi-grid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.patronul .etapa-bani,
.patronul .pas,
.patronul .dovada { padding: var(--s4); border: 0; border-radius: var(--r-sm); background: var(--surface); }
.patronul .etapa-bani h3,
.patronul .pas h3,
.patronul .dovada h3 { margin: 0 0 var(--s2); font-size: var(--t-md); }
.patronul .etapa-bani p,
.patronul .pas p,
.patronul .dovada p { margin: var(--s1) 0; }
.patronul .piata { display: grid; grid-template-columns: 42px 1fr; gap: var(--s2); align-items: baseline; padding: var(--s2) 0; border-top: 1px solid var(--line-moale); }
.patronul .piata:first-of-type { border-top: 0; }
.patronul .piata > b:first-child { color: var(--mute); font-size: var(--t-sm); }
.patronul .piata-valoare { font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.patronul .piata small { grid-column: 2; color: var(--mute); }
.patronul .lipsa { padding: var(--s3); border-radius: var(--r-sm); background: var(--surface-2); color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.patronul .semn-nereverificat { display: inline-flex; padding: var(--s1) var(--s2); border: 1px solid var(--warn-line); border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--t-xs); font-weight: 700; text-transform: lowercase; }
.patronul .rand-bani { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(90px, .65fr) 1fr auto; gap: var(--s2); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid var(--line-moale); font-size: var(--t-sm); }
.patronul .rand-bani:last-child { border-bottom: 0; }
.patronul .rand-bani.alarma { color: var(--err); }
.patronul .rand-bani .suma { text-align: right; font-variant-numeric: tabular-nums; }
.patronul .scurgeri-lista { list-style: none; margin: 0; padding: 0; }
.patronul .scurgeri-lista li { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.patronul .scurgeri-lista li:last-child { border-bottom: 0; }
.patronul .scurgeri-lista strong { font-size: var(--t-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.patronul .scurgeri-lista p { grid-column: 1 / -1; margin: 0; color: var(--mute); font-size: var(--t-sm); }
.patronul .decizie-transport { border-color: var(--warn-line); background: var(--warn-bg); }
.patronul .transport-piete { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.patronul .transport-piete h3 { margin: 0 0 var(--s2); }
.patronul .transport-piete dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); margin: 0; }
.patronul .transport-piete dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.patronul .dovada-valoare { font-size: var(--t-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.patronul .dovada .form { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.patronul .dovada .form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.patronul .dovada .btn { margin-top: var(--s2); }
.patronul details > summary { cursor: pointer; }
.patronul details > summary::-webkit-details-marker { display: none; }
.patronul .nota-masurare { margin-top: var(--s4); color: var(--mute); font-size: var(--t-sm); }
@media (min-width: 700px) {
  .patronul .cifre,
  .patronul .etape-bani,
  .patronul .transport-piete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patronul .drum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patronul .dovezi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patronul .dovada .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .patronul .rand-bani { grid-template-columns: 1fr auto; }
  .patronul .rand-bani .etapa,
  .patronul .rand-bani .vechime { grid-column: 1; }
  .patronul .rand-bani .suma { grid-column: 2; grid-row: 1; }
  .patronul .scurgeri-lista li { grid-template-columns: 1fr; }
  .patronul .scurgeri-lista strong,
  .patronul .scurgeri-lista p { grid-column: 1; white-space: normal; }
}


/* ── Pagina comenzii (fost <style> în order.html) ── */
/* Reordonarea coloanei principale: vezi comentariul Jinja de mai sus.
   Cartonașul clientului trece primul, adresa a doua, produsele ultimele —
   ordinea DOM din fișier rămâne cea veche, ca mutarea să nu rescrie sute de
   rânduri din cartonașele de adresă și de produse pentru un simplu schimb
   de loc vizual. */
.cols > .order-primary > .profil-client { order: 1; margin-bottom: var(--s4); }
.cols > .order-primary > .address-card { order: 2; }
.cols > .order-primary > .colet-card { order: 3; }

/* Numărul comenzii, scris vizibil în cartonașul „Client” — vezi comentariul
   de acolo. Mărimea și culoarea normale (nu `.mut`, nu `.tag`) fiindcă e o
   informație cerută explicit, nu o notă secundară și nici o insignă de
   stare. */
.profil-comanda { margin: 0 0 var(--s4); font-size: var(--t-base); font-weight: 600; color: var(--ink); }

/* Antetul cartonașului „Schimburi și semnale”: aceeași structură ca la
   `details.card.drum-intreg` din `app.css`, sub un nume nou, fiindcă acolo
   regula e scrisă legată de clasa aia, nu generic pentru orice
   `<details class="card">`. Rotirea săgeții la deschidere vine gratis din
   `details[open] > summary > .sageata`, regulă generică deja din foaia
   mare — nu se repetă aici. */
details.card.schimburi-semnale > summary {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer; list-style: none;
}
details.card.schimburi-semnale > summary::-webkit-details-marker { display: none; }
details.card.schimburi-semnale > summary > h2 {
  display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: var(--s2); margin: 0;
}
details.card.schimburi-semnale > summary > .sageata { color: var(--mute); flex: none; }
details.card.schimburi-semnale > summary:hover > h2 { color: var(--ink); }
details.card.schimburi-semnale > summary:focus-visible {
  outline: var(--contur-focus); outline-offset: var(--s1);
}
details.card.schimburi-semnale > summary + .schimburi-semnale-corp { margin-top: var(--s4); }
/* Datoria de schimb și scorul de risc nu erau vecine în „Expediere” — una
   stătea sus, cealaltă la capătul listei de rânduri. Aici pot apărea
   amândouă, una după alta, și au nevoie de-un rând între ele ca să nu se
   citească drept un singur bloc. */
.schimburi-semnale-corp > * + * { margin-top: var(--s4); }


/* ── Densitate desktop (fost desktop.css) ── */
.magazin-comanda { color: var(--mute); font-size: var(--t-xs); overflow-wrap: anywhere; }
.filtru-sursa { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.filtru-sursa label { color: var(--mute); font-size: var(--t-xs); }
.filtru-sursa select { max-width: 240px; min-height: var(--h-ctl); padding: 0 var(--s2); border: 0; border-radius: var(--r-camp); background: var(--ap-ctl-bg); color: var(--ink); font: inherit; font-size: var(--t-sm); }
.filtru-perioada { position: relative; margin: 0; }
.filtru-perioada > summary { display: flex; gap: var(--s2); align-items: center; min-height: var(--h-ctl); padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: var(--ap-ctl-bg); color: var(--ink-2); font-size: var(--t-sm); cursor: pointer; list-style: none; }
.filtru-perioada > summary::-webkit-details-marker { display: none; }
.filtru-perioada > summary:hover { background: var(--ap-ctl-bg-hover); }
.filtru-perioada[open] > summary { background: var(--ap-ctl-bg-active); }
.filtru-perioada[data-activ] > summary { border-color: var(--ink-2); }
.filtru-perioada .filtru-data-unica { position: absolute; right: 0; top: calc(100% + var(--s2)); width: 280px; display: grid; gap: var(--s3); padding: var(--s4); border: 0; border-radius: var(--r-md); corner-shape: var(--colt-continuu); background: var(--fond-plutitor); backdrop-filter: var(--filtru-plutitor); box-shadow: var(--umbra-2-lat); z-index: 12; }
.filtru-data-unica label { display: grid; gap: var(--s1); font-size: var(--t-sm); color: var(--ink-2); }
.filtru-perioada summary:focus-visible, .filtru-sursa select:focus-visible { outline: var(--contur-focus); outline-offset: var(--decalaj-focus); }
.bara-bloc-tot[hidden], .bara-bloc[hidden] { display: none; }
.pagina-comenzi .bara-bloc.lipita { position: sticky; bottom: var(--s3); border-color: var(--line-strong); box-shadow: var(--umbra-2); }
.pagina-comenzi .bara-bloc-cate { color: var(--ink); font-weight: 600; }
.bara-bloc-eroare { flex-basis: 100%; margin: 0; color: var(--err-ink); font-size: var(--t-sm); }
.bara-bloc-eroare[hidden] { display: none; }
.pagina-comenzi .bara-bloc-tot { font-size: var(--t-xs); }
.pagina-comenzi .bara-bloc-butoane { gap: var(--s1); }
.pagina-comenzi .bara-bloc-butoane .btn { white-space: nowrap; }
.pagina-comenzi .bara-bloc-butoane #bloc-renunta { order: 2; margin-left: auto; }
@media (min-width: 1024px) {
  .pagina-comenzi .app-body > main { max-width: none; }
  .pagina-comenzi .app-body > main { padding: var(--s4) var(--s5); }
  .pagina-comenzi .view-nav { padding: 0; margin: 0 0 var(--s4); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .pagina-comenzi .view-nav > a { flex: none; padding: var(--s2) var(--s3); border-radius: 0; font-size: var(--t-sm); }
  .pagina-comenzi .view-nav > a[aria-current="page"] { box-shadow: inset 0 -2px var(--ink); background: transparent; }
  .pagina-comenzi .lucru-head { margin: 0 0 var(--s3); align-items: center; }
  .pagina-comenzi .unelte-lista { margin: 0; align-items: center; }
  .pagina-comenzi .lucru-urmatoarea { min-height: 34px; padding: var(--s1) var(--s3); font-size: var(--t-sm); }
  /* Bara rămâne lipită sub antet cât se derulează lista, deci fundalul ei acoperă rândurile care trec pe dedesubt: transparentă, comenzile se citeau printre file și peste căutare. Golul de deasupra și de dedesubt e umplutura barei, nu margine, ca să fie și el acoperit; marginea negativă ține filele exact unde erau când pagina stă sus. */
  .pagina-comenzi .bara-lista { padding: var(--s2) 0; margin: calc(-1 * var(--s2)) 0 0; background: var(--bg); border: 0; }
  .pagina-comenzi .filtre-bara { gap: var(--s2); }
  .pagina-comenzi .filtru-grup.unica { width: 100%; }
  .pagina-comenzi .filtru-grup.unica .filtru-grup-optiuni { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0; gap: var(--s1); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .pagina-comenzi .filtru-grup .tab { flex: none; padding: var(--s2); min-height: 36px; border-radius: 0; font-size: var(--t-sm); background: transparent; border: 0; box-shadow: none; }
  .pagina-comenzi .filtru-grup .tab.on { color: var(--ink); box-shadow: inset 0 -2px var(--ink); font-weight: 600; }
  .pagina-comenzi .filtru-grup .tab.zero { color: var(--mute); }
  .pagina-comenzi .filtre-rand-jos { gap: var(--s3); padding: var(--s1) 0; align-items: center; }
  .pagina-comenzi .filtre-rand-jos .searchbar { flex: 1 1 270px; max-width: 400px; min-height: 36px; height: 36px; }
  .pagina-comenzi .filtre-piata-grup { flex-direction: row; align-items: center; gap: var(--s1); }
  .pagina-comenzi .filtru-grup-titlu { text-transform: none; font-size: var(--t-xs); }
  .pagina-comenzi .filtre-citit { font-size: var(--t-xs); color: var(--mute); line-height: var(--il-xs); }
  .pagina-comenzi .paginare-sus { padding: 0 0 var(--s2); margin: 0; border: 0; min-height: 32px; }
  .pagina-comenzi .paginare-sus .pagina-numar, .pagina-comenzi .paginare-sus .pagina-sageata { width: 28px; height: 28px; min-height: 28px; }
  .pagina-comenzi .paginare-sus select { padding-block: var(--s1); }
  .pagina-comenzi .tabel { border-radius: var(--r-sm); }
  .pagina-comenzi table.grid.bloc { width: 100%; min-width: 1000px; table-layout: fixed; }
  .pagina-comenzi .grid th { padding: var(--s2); font-size: var(--t-xs); text-transform: none; font-weight: 600; color: var(--mute); background: var(--surface); }
  .pagina-comenzi .grid td { padding: var(--s2); font-size: var(--t-sm); }
  /* Lățimile se dau pe clasele din `_randuri.html`. Adresa se scria
     `.col-address` — clasa din șablon e `.col-addr`, deci regula nu prindea
     nimic și coloana lua ce rămânea. Acțiunile primesc 17%: șase butoane de
     28px cu 4px între ele fac 188px, iar sub atât banda se rupea pe două
     rânduri și dubla înălțimea rândului fără să spună nimic în plus. Adresa
     ia 19%: la 16% (1560px, 05.09.2026) 10 din 25 de adrese cu bloc/scară se
     rupeau pe trei rânduri; starea și confirmarea dau câte 1–2%, aveau loc.
     Comanda ia 14%: sub „TGO-8621” stau data și butonul de bucăți pe un rând
     („12 iul., 09:38 · 8 buc”, 142px la 1560px) — la 12% se rupeau pe două. */
  /* `table-layout: fixed` citește lățimile din PRIMUL rând — antetul — deci
     clasele `.col-*` stau și pe `th` (index.html, perioada.html), altfel
     procentele de aici nu prind nimic, oricât ar avea celulele de sub ele. */
  .lista-comenzi .col-bloc { width: 36px; }
  .lista-comenzi .col-order { width: 14%; min-width: 0; }
  .lista-comenzi .col-who { width: 14%; min-width: 0; }
  .lista-comenzi .col-addr { width: 18%; min-width: 0; }
  .lista-comenzi .col-pay { width: 10%; min-width: 0; }
  .lista-comenzi .col-confirm { width: 13%; min-width: 0; }
  .lista-comenzi .col-state { width: 11%; min-width: 0; }
  .lista-comenzi .col-do { width: 17%; min-width: 0; }
  .pagina-comenzi .order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }
  .pagina-comenzi .order-meta button { min-height: 24px; padding-block: 0; }
  .pagina-comenzi .grid .stack { gap: var(--s-tip); }
  .pagina-comenzi .grid .ord { font-size: var(--t-sm); }
  .pagina-comenzi .grid .tools { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: flex-end; }
  .pagina-comenzi .grid .tools .ib { width: 28px; height: 28px; min-width: 28px; color: var(--mute); }
  .pagina-comenzi .grid .tools .ib.next, .pagina-comenzi .grid tr:hover .tools .ib.next { background: var(--info-bg-2); border-color: transparent; color: var(--info-ink); }
  .pagina-comenzi .grid .tools .ib[disabled] { color: var(--faint); }
  .pagina-comenzi .grid .insemnare.goala { padding-block: var(--s1); }
  .pagina-comenzi .wa-coada-rezumat { margin-bottom: var(--s2); padding-block: var(--s1); }
  .pagina-comanda .app-body > main { padding-top: var(--s4); max-width: 1600px; }
  .pagina-comanda .back { margin-bottom: var(--s2); }
  .pagina-comanda .page-head { margin-bottom: var(--s3); }
  .pagina-comanda .traseu { margin-bottom: var(--s3); padding: var(--s3) var(--s4); }
  .pagina-comanda .urmeaza { margin-bottom: var(--s4); padding: var(--s3) var(--s4); }
  .pagina-comanda .urmeaza .st-cap { font-size: var(--t-xs); }
}
@media (max-width: 1023px) {
  .filtru-perioada .filtru-data-unica { right: auto; left: 0; }
  .filtru-sursa select { max-width: 210px; }
}
@media (pointer: coarse) {
  .pagina-comenzi .grid .tools .ib { width: 44px; height: 44px; min-width: 44px; }
  .filtru-sursa select, .filtru-perioada > summary { min-height: 44px; }
}

.pagina-comenzi .filtre-citit:has([data-citit-q][hidden]):not(:has(a)) { display: none; }

/* ── rândul strâns ──────────────────────────────────────────────────────────
   Lista de comenzi e ecranul pe care se stă toată ziua, și se stă ca să se
   vadă cât mai multe comenzi deodată, nu cât mai multe despre una. Măsurat pe
   05.09.2026, la 1560px: rândul median 101px, cinci comenzi în 900px de
   ecran; pe telefon (390px) un cartonaș avea 386–707px și niciunul nu încăpea
   întreg în primul ecran.

   Rândul strâns nu scoate nimic din HTML. Regula e cea din `design/LEGE.md`
   și din `unelte/ce_are_ecranul.py`: ce era pe ecran rămâne pe ecran, doar
   că o parte stă la o apăsare distanță. Trei stări, pe două clase:
     · `tr.deschis`        — rândul ăsta, desfăcut cu o apăsare pe el (JS);
     · `.grid.detaliat`    — toată lista, din butonul „Detalii” (ținut în
                             localStorage, ca „Produse”);
     · nimic               — rândul strâns: fiecare celulă pe cel mult două
                             rânduri de text, ~48–56px.
   Ce se stinge pe rândul strâns poartă `la-detalii` în șablon (e-mailul,
   suma în moneda magazinului, nota amânării, estimarea livrării, textul de
   urmărire) sau are deja o clasă proprie (magazinul, „Notează”-ul gol). Nota
   clientului și însemnarea scrisă rămân, pe un singur rând.

   Pe telefon aceeași pereche de clase face din cartonașul de șapte blocuri un
   rând de două: numărul și banii sus, numele cu telefonul și starea jos.
   Adresa, confirmarea și butoanele stau sub deget: o apăsare pe rând le
   desface în cartonașul întreg de dinainte, cu etichetele lui cu tot. */
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .la-detalii,
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .magazin-comanda,
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .insemnare.goala { display: none; }
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .nota-mica > .nota-text,
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .insemnare span { -webkit-line-clamp: 1; }
/* Rândul desfăcut se cunoaște după ce arată, nu după o culoare în plus: pe un
   tabel în care rândurile sunt deja galbene sau roșii de la stare, încă un
   fond ar fi al treilea. Doar cursorul spune că rândul răspunde la apăsare. */
.lista-comenzi tr[data-order] { cursor: pointer; }
/* Ceasul de lângă oră nu spune nimic ce ora nu spune; pe rândul strâns stă
   ascuns, ca data și bucățile să încapă pe un rând sub număr. */
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .order-meta .line svg { display: none; }
/* Stările implicite nu se scriu pe rândul strâns. „Plătită online” e regula
   (`.implicit` în `_randuri.html`: comanda fără „Ramburs” pe ea e plătită), iar
   „Necontactată” pe WhatsApp (`wa-mute`) e lipsa unui fir, nu un fir — la un
   cont fără punte WhatsApp stătea scrisă pe fiecare rând din listă. Se
   stilizează excepția, nu regula: rambursul, în oricare formă, și orice fir
   viu rămân scrise; pe rândul desfăcut și pe lista cu „Detalii” se citesc
   toate, ca până acum. */
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .col-pay .implicit,
.lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .wa-comanda.wa-mute { display: none; }

/* Tastatura pe listă (`app.js`): rândul curent se vede ca rândul de sub maus,
   iar conturul de focus stă înăuntrul rândului, nu peste vecinii lui. Legenda
   tastelor e o linie mută sub listă; unde nu există tastatură, nu există nici
   legendă. */
.lista-comenzi tr.curent[data-order] { background: var(--surface-2); }
.lista-comenzi tr[data-order]:focus-visible { outline: var(--contur-focus); outline-offset: -2px; }
.taste-lista { margin: var(--s2) 0 0; color: var(--mute); font-size: var(--t-xs); }
.taste-lista kbd { display: inline-block; min-width: 1.4em; padding: 0 var(--s1); margin-right: var(--s-tip);
  border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface);
  color: var(--ink-2); font: inherit; text-align: center; }
@media (pointer: coarse), (max-width: 720px) { .taste-lista { display: none; } }
.lista-comenzi tr[data-order] a, .lista-comenzi tr[data-order] button,
.lista-comenzi tr[data-order] input, .lista-comenzi tr[data-order] label { cursor: pointer; }
.lista-comenzi tr[data-order] .ib[disabled], .lista-comenzi tr[data-order] .ib.static { cursor: default; }

@media (min-width: 1024px) {
  /* 4/8 în loc de 8/8: două rânduri de text cu 4px deasupra și dedesubt fac
     48px, adică rândul de lucru din L5. Și pe „Comenzi pe perioadă”, care
     nu poartă `.pagina-comenzi`. */
  .lista-comenzi td, .pagina-comenzi .lista-comenzi td { padding: var(--s1) var(--s2); font-size: var(--t-sm); }
  /* Aceeași greutate pe amândouă listele: „Comenzi pe perioadă” lua regulile
     de bază ale tabelului (13/14px, 4px între rânduri, coloane după conținut)
     și la 1024px adresa se rupea pe trei rânduri. */
  .lista-comenzi { width: 100%; min-width: 1000px; table-layout: fixed; }
  .lista-comenzi .stack { gap: var(--s-tip); }
  .lista-comenzi .ord { font-size: var(--t-sm); }
  .lista-comenzi .tools .ib { width: 28px; height: 28px; min-width: 28px; }
  /* Confirmarea era coloana cea mai înaltă (7 rânduri din 25, la măsurare):
     verdictul, insigna WhatsApp, cele trei butoane, „Neapelată” și
     „Notează”, unul sub altul. Aici curg pe rânduri: insigna cu starea
     apelului pe unul, butoanele pe următorul, însemnarea (lată cât celula)
     pe al treilea doar dacă e scrisă. */
  .lista-comenzi .col-confirm .stack {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--s-tip) var(--s2);
  }
  /* Grupul de butoane avea 3px aer de jur împrejur (fond transparent, deci aer
     și atât): 30px pentru butoane de 24. Numărul comenzii coboară la 20px
     înălțime de rând — e link cât linia lui, nu buton. Împreună, rândul de
     lucru cade de la 60 la ~54px. */
  .lista-comenzi .col-confirm .seg { padding: 0; }
  .lista-comenzi .col-confirm .seg .ib { width: 24px; height: 24px; }
  .lista-comenzi .ord { min-height: 20px; }
  .lista-comenzi .col-confirm .seg .ib svg { width: 14px; height: 14px; }
  .lista-comenzi .col-confirm .insemnare { margin-top: 0; }
  /* Ora și bucățile stau pe același rând sub număr, nu una sub alta. */
  .lista-comenzi .order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }
  /* 20px, nu 24: butonul „N buc” e un rând de text cu săgeată, iar cei 4px
     în plus erau exact ce ridica rândul de la 52 la 60px. Pe deget
     (`pointer: coarse`) rămâne ținta întreagă. */
  .lista-comenzi .order-meta button, .pagina-comenzi .order-meta button { min-height: 20px; padding-block: 0; }
}
@media (min-width: 1280px) {
  /* Peste 1280px cele șase butoane încap pe un rând în 17% din tabel; sub
     atât se rup pe două, ca până acum. */
  .pagina-comenzi .grid .tools, .lista-comenzi .tools { flex-wrap: nowrap; }
}

@media (max-width: 720px) {
  /* Scheletul e același pe rândul strâns și pe cel desfăcut: bifa în stânga,
     numărul cu ora și banii sus, numele cu starea jos. Până pe 06.09.2026
     rândul desfăcut (o apăsare, sau „Detalii” pentru toată lista) cădea
     înapoi în cartonașul de șapte blocuri cu șapte etichete — 707px la 390px,
     adică nici desfăcută o singură comandă nu încăpea în ecran. Acum păstrează
     cele două rânduri și adaugă sub ele adresa, confirmarea și butoanele,
     fiecare pe lățimea rândului, cu eticheta ei mică deasupra (cea din
     `.grid td::before`): doar cele trei au nevoie de etichetă, restul se
     citește din formă. */
  .lista-comenzi tr[data-order] {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "bloc order pay" "bloc who state";
    column-gap: var(--s2); row-gap: var(--s1); align-items: center;
    margin-bottom: var(--s2); padding: var(--s2);
  }
  .lista-comenzi tr[data-order] > td { padding: 0; border: 0; min-width: 0; }
  .lista-comenzi tr[data-order] > .col-bloc::before,
  .lista-comenzi tr[data-order] > .col-order::before,
  .lista-comenzi tr[data-order] > .col-pay::before,
  .lista-comenzi tr[data-order] > .col-who::before,
  .lista-comenzi tr[data-order] > .col-state::before { content: none; }
  .lista-comenzi tr[data-order] > .col-bloc { grid-area: bloc; }
  .lista-comenzi tr[data-order] > .col-order { grid-area: order; }
  .lista-comenzi tr[data-order] > .col-pay { grid-area: pay; text-align: right; }
  .lista-comenzi tr[data-order] > .col-who { grid-area: who; }
  .lista-comenzi tr[data-order] > .col-state { grid-area: state; justify-self: end; }
  .lista-comenzi tr[data-order] .col-order .stack,
  .lista-comenzi tr[data-order] .col-who .stack,
  .lista-comenzi tr[data-order] .col-pay .stack {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  }
  .lista-comenzi tr[data-order] .col-pay .stack { justify-content: flex-end; text-align: right; }
  .lista-comenzi tr[data-order] .col-pay .line.end { justify-content: flex-end; }
  .lista-comenzi tr[data-order] .col-state .stack { align-items: flex-end; text-align: right; }
  .lista-comenzi tr[data-order] .order-meta { display: flex; gap: 0 var(--s2); }
  /* Ca numărul și ora să încapă pe un rând lângă bani, la 390px: coloana din
     dreapta se oprește la 156px (măsurat: „Plătită online” + suma = 153px fără
     pictogramă), restul rămâne numărului. Coloana `auto` a grilei lua altfel
     cât cerea eticheta cu pictogramă (171px) și împingea ora sub număr.
     Ceasul de lângă oră și pictogramele etichetei de plată nu spun nimic ce
     cuvântul nu spune; ora coboară la mărimea cea mică. Eticheta lungă
     („Ramburs achitat online”) se rupe deasupra sumei — rar, și corect. */
  .lista-comenzi tr[data-order] > .col-pay,
  .lista-comenzi tr[data-order] > .col-state { max-width: 156px; }
  .lista-comenzi tr[data-order] .col-pay .line.end svg { display: none; }
  .lista-comenzi tr[data-order] .order-meta .line { font-size: var(--t-xs); }
  .lista-comenzi tr[data-order] .col-order .line { gap: var(--s1); }
  .lista-comenzi tr[data-order] .col-order .stack,
  .lista-comenzi tr[data-order] .col-pay .stack { column-gap: var(--s1); }
  .lista-comenzi tr[data-order] .col-pay .line.end { font-size: var(--t-xs); }
  .lista-comenzi tr[data-order] .col-state .pill { font-size: var(--t-xs); padding: var(--s-tip) var(--s2); }

  /* Rândul strâns: adresa, confirmarea și butoanele stau sub deget; telefonul,
     nota și bucățile la fel — pe rândul desfăcut telefonul e link `tel:`
     întreg. Refuzurile de dinainte rămân: alea schimbă apelul, nu-l amână. */
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) > .col-addr,
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) > .col-confirm,
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) > .col-do,
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .col-who .nota-mica,
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .col-who .line.sub:not(.bad-text),
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .col-order [data-pick],
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .col-state .stack > :not(:first-child) { display: none; }
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .col-who .strong {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lista-comenzi:not(.detaliat) tr[data-order]:not(.deschis) .amount { font-size: var(--t-base); }

  /* Rândul desfăcut și lista cu „Detalii”: trei rânduri în plus, pe toată
     lățimea. Confirmarea curge pe rânduri, ca la birou; starea își arată
     hârtiile sub pastilă, aliniate la dreapta ca ea, cu loc cât jumătate de
     rând pentru textul de urmărire. */
  .lista-comenzi.detaliat tr[data-order],
  .lista-comenzi tr.deschis[data-order] {
    grid-template-areas: "bloc order pay" "bloc who state"
                         "addr addr addr" "confirm confirm confirm" "do do do";
    row-gap: var(--s2);
  }
  .lista-comenzi.detaliat tr[data-order] > .col-addr,
  .lista-comenzi tr.deschis[data-order] > .col-addr { grid-area: addr; }
  .lista-comenzi.detaliat tr[data-order] > .col-confirm,
  .lista-comenzi tr.deschis[data-order] > .col-confirm { grid-area: confirm; }
  .lista-comenzi.detaliat tr[data-order] > .col-do,
  .lista-comenzi tr.deschis[data-order] > .col-do { grid-area: do; }
  .lista-comenzi.detaliat tr[data-order] .col-confirm .stack,
  .lista-comenzi tr.deschis[data-order] .col-confirm .stack {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  }
  .lista-comenzi.detaliat tr[data-order] > .col-state,
  .lista-comenzi tr.deschis[data-order] > .col-state { max-width: 60%; align-self: start; }
}

/* Scris după regulile de birou de mai sus, fiindcă la aceeași greutate câștigă
   ultima: pe o tabletă de 1024px cu deget, ținta rămâne cea de deget. */
@media (pointer: coarse) {
  .lista-comenzi .tools .ib { width: 44px; height: 44px; min-width: 44px; }
  .lista-comenzi .order-meta button, .pagina-comenzi .order-meta button { min-height: var(--tinta-min); }
}


/* Foaia meniului pe telefon: sub pragul de birou (721px) navigația este o foaie peste ecran
   (fost <style> în base.html).
   Meniul strâns lasă pe ecran doar butonul care o deschide, în colțul din
   dreapta sus; Escape o închide (scriptul din base.html). */
@media (max-width: 720px) {
  html:not(.side-collapsed) { overflow: hidden; }
  /* Sub pragul de birou antetul nu stă lipit (rândurile lui cad unul sub
     altul și ar ține jumătate de ecran), iar meniul se deschide din butonul
     plutitor al foii, nu din cel de lângă companie. */
  .app-head { position: static; display: block; }
  .company-toggle { display: none; }
  .sidebar {
    position: fixed; inset: 0; z-index: 60; width: 100%; height: 100dvh;
    align-self: auto; padding: max(var(--s4), env(safe-area-inset-top)) var(--s4)
      max(var(--s4), env(safe-area-inset-bottom)); overflow-y: auto;
    background: var(--fond-sidebar); border: 0; box-shadow: none;
  }
  .side-nav { display: flex; flex-direction: column; }
  .side-scroll, .side-section, .side-foot { gap: var(--s2); }
  .side-label { padding-left: var(--pad-rand); }
  /* Rândul de sertar iOS: 44, selecție cu raza 22 (§12, sidebar iPad). Cifra
     rămâne scrisă: `proba_meniul_refacut.py` păzește contractul de 44 al foii. */
  .side-link { min-height: 44px; border-radius: calc(var(--tinta-min) / 2); padding-inline: var(--pad-rand); }
  .side-link > .side-num { right: var(--pad-rand); }
  .side-sub {
    padding-left: calc(var(--pad-rand) + 20px + var(--s2));
    border-radius: calc(var(--tinta-min) / 2);
  }
  .side-theme { width: 44px; height: 44px; margin-right: 0; border-radius: calc(var(--tinta-min) / 2); }
  .side-cont-buton {
    min-height: 44px; border-radius: calc(var(--tinta-min) / 2);
    padding-inline: calc(var(--pad-rand) - var(--s-tip)) var(--pad-rand);
  }
  .side-toggle { display: flex; order: -1; align-self: flex-end; min-height: 44px; }

  /* Strânsă, foaia nu mai alunecă (ca pe tabletă): rămâne doar butonul
     plutitor, deci coloana nu se mută și nu se ascunde — un `transform` pe ea
     ar fi și cadrul butonului fix. */
  .side-collapsed .sidebar {
    display: flex; position: static; width: 0; height: 0; padding: 0; overflow: visible;
    border: 0; background: transparent; transform: none; visibility: visible;
  }
  .side-collapsed .side-nav, .side-collapsed .side-cont { display: none; }
  .side-collapsed .side-toggle {
    position: fixed; top: max(var(--s3), env(safe-area-inset-top));
    right: var(--s3); z-index: 61; width: auto; min-width: 44px;
    min-height: 44px; padding-inline: var(--s4); border: 0;
    border-radius: var(--r-pill); background: var(--fond-plutitor);
    -webkit-backdrop-filter: var(--filtru-plutitor); backdrop-filter: var(--filtru-plutitor);
    box-shadow: var(--umbra-sticla); color: var(--ink-pagina);
  }
  /* Butonul plutitor stă pe pagină, nu pe coloana închisă: cerneala și
     sticla paginii, nu ale meniului. */
  .side-collapsed .side-toggle:hover { color: var(--ink-pagina); background: var(--fond-plutitor); }
  .side-collapsed .side-toggle > span { display: inline; }
}

/* Cine a cerut sistemului mai puțină mișcare primește mai puțină mișcare
   peste tot, nu doar în cele două locuri care și-au amintit să întrebe. */
/* ── Pagina comenzii, liniștită (18.09.2026) ─────────────────────────────────
   Gabriel, pe candidatul 1.40.0: „pagina este enorm de încărcată, cu foarte
   multe chestii deschise direct (…) prea multe lucruri unul peste altul,
   spațiate aiurea”. Măsurat înainte: 2810 px la 1440 pe o comandă nouă, din
   care 1180 erau cartonașul de adresă desfăcut; coloana stângă ieșea de trei
   ori mai înaltă decât dreapta și lăsa peste 1000 px de gol sub „Factură”.
   Golurile dintre blocuri erau regulate (12/16 px) — dezordinea venea din
   dezechilibru și din câte lucruri strigau deodată, nu din margini.

   Ce s-a închis s-a închis în șablon (`order.html`, comentariile cu data de
   azi). Aici e doar așezarea. Tot blocul stă sub `.pagina-comanda`, la capătul
   foii, ca să câștige în fața regulilor de densitate de mai sus fără `!important`. */

/* Antetul: două benzi, nu trei. Traseul și „Ce urmează” spun același lucru —
   unde e comanda și ce se face cu ea — deci sunt un singur grup (L4): un chenar,
   o linie moale între ele. Când între ele intră un avertisment (intervenții,
   dubluri), rămân două cartonașe: avertismentul e o întrerupere și așa arată. */
.pagina-comanda .traseu:has(+ .urmeaza) {
  margin-bottom: 0; border-bottom-color: var(--line-moale);
  border-radius: var(--r) var(--r) 0 0; corner-shape: var(--colt-continuu);
}
.pagina-comanda .traseu + .urmeaza { border-top: 0; border-radius: 0 0 var(--r) var(--r); corner-shape: var(--colt-continuu); }

/* „Ce urmează”: rândul 1 = pasul, cu faptele lui la dreapta; firul WhatsApp și
   avertismentele pe rândul lor, pe toată lățimea; literele mici la urmă.
   Înainte toate erau copii ai aceluiași rând flex cu `space-between`, deci
   locul fiecăruia depindea de cât text avea vecinul. Ordinea din DOM rămâne —
   cititorul de ecran și Tab-ul merg ca până acum. */
.pagina-comanda .urmeaza {
  gap: var(--s3); margin-bottom: var(--s6); padding: var(--s4) var(--s5);
  border-left-width: 1px; border-left-color: var(--line);
}
.pagina-comanda .urmeaza-ce { order: 1; flex: 1 1 18rem; align-items: center; }
/* Dunga din stânga a plecat odată cu lipirea de traseu (ar fi început de la
   jumătatea grupului). Sensul ei — cerneală cât mai e de făcut, verde când s-a
   terminat — îl poartă acum semnul pasului, desenat ca opririle de deasupra. */
.pagina-comanda .urmeaza-ce > svg {
  box-sizing: content-box; margin-top: 0; padding: var(--s2); border-radius: 50%;
  background: var(--ink); color: var(--pe-cerneala);
}
.pagina-comanda .urmeaza.gata .urmeaza-ce > svg { background: var(--ok); color: var(--pe-cerneala); }
.pagina-comanda .urmeaza > .btn,
.pagina-comanda .urmeaza > .insemnare,
.pagina-comanda .urmeaza > .seg,
.pagina-comanda .urmeaza > .telefon-strans { order: 2; flex: none; margin: 0; }
.pagina-comanda .urmeaza > .banner { order: 3; flex: 0 0 100%; margin: 0; }
.pagina-comanda .urmeaza > .wa-fir { order: 4; flex: 0 0 100%; min-width: 0; margin: 0; }
.pagina-comanda .urmeaza > .telefon-strans[open] { order: 5; flex: 0 0 100%; }
.pagina-comanda .urmeaza > .note { order: 8; flex: 0 0 100%; margin: 0; }
.pagina-comanda .urmeaza > .urmeaza-apoi { order: 9; }
/* Confirmarea telefonică e o faptă, deci arată a buton (L8, treapta simplă),
   nu a rând de text gri pe care nu-l bagi de seamă lângă „Adaugă notă”. */
.pagina-comanda .telefon-strans > summary {
  min-height: var(--h-ctl); padding: 0 var(--s3); border: 0;
  border-radius: var(--r-pill); background: var(--ap-ctl-bg); color: var(--ink-2);
  font-size: var(--t-md); font-weight: 500;
}
/* Firul WhatsApp era o cutie galbenă în mijlocul rândului. Rămâne un rând
   liniștit; culoarea stării o poartă pastila din capul lui, nu chenarul. */
.pagina-comanda .urmeaza > .wa-fir,
.pagina-comanda .urmeaza > .wa-fir.wa-ok,
.pagina-comanda .urmeaza > .wa-fir.wa-warn { border-color: var(--line-moale); background: var(--surface-2); }

/* Aer între grupuri (L5), densitate înăuntrul lor. */
.pagina-comanda .cols { gap: var(--s5); }
.pagina-comanda .card { margin-bottom: var(--s5); }
.pagina-comanda .cols + .card,
.pagina-comanda .cols + details.card { margin-top: var(--s2); }

/* Propoziția de sub titlul adresei se lipea de numele clientului și se rupea
   la 46 de litere într-un cartonaș de 80. */
.pagina-comanda .stare-adr-de-ce { max-width: 72ch; margin-bottom: var(--s3); }

/* Cartonașul pliat: aceeași construcție ca „Traseul coletului” și „Schimburi
   și semnale”, scrisă o dată, pe un nume care nu ține de conținut. */
details.card.card-pliat > summary {
  display: flex; align-items: center; gap: var(--s3); cursor: pointer; list-style: none;
}
details.card.card-pliat > summary::-webkit-details-marker { display: none; }
details.card.card-pliat > summary > h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 0;
}
details.card.card-pliat > summary > .card-pliat-ce {
  flex: 1; min-width: 0; color: var(--mute); font-size: var(--t-sm);
}
details.card.card-pliat > summary > .sageata { margin-left: auto; color: var(--mute); flex: none; }
details.card.card-pliat > summary:hover > h2 { color: var(--ink); }
details.card.card-pliat > summary:focus-visible { outline: var(--contur-focus); outline-offset: var(--s1); }
details.card.card-pliat > summary + .card-pliat-corp { margin-top: var(--s4); }

/* Suma de ramburs pe o comandă încheiată: aceleași cuvinte, fără galben. */
.bani-mare.cod-incheiat b { color: var(--ink); }

/* Linkul de plată care nu se poate face: un rând, nu o cutie hașurată de 90 px.
   Titlul rămâne tăiat („a fost și nu mai e”), motivul rămâne scris. */
.pagina-comanda .plink.oprit {
  margin-top: 0; padding: 0; border: 0; background: none;
}
.pagina-comanda .plink.oprit .note { margin: var(--s-tip) 0 0; }

/* Stornarea și ștergerea, la o apăsare distanță. */
.factura-alte > .row { margin-top: var(--s3); }

/* Dashboardul: aceeași sursă de date, două moduri de citire. Tipografia și
   grupurile folosesc kitul Apple (§1/6/11/12); grilele și datele rămân aceleași. */
.dash-header {
  display: flex; justify-content: space-between; align-items: end; gap: var(--s6);
  padding: var(--s-6) var(--s-tip) var(--s6); border-bottom: 1px solid var(--line);
}
.dash-eyebrow, .dash-kicker {
  display: block; color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 600;
}
.dash-header h2 { margin: var(--s2) 0 var(--s1); font-size: var(--t-2xl); line-height: var(--il-2xl); }
.dash-header > div, .dash-section-head > div { min-width: 0; }
.dash-header p { margin: 0; color: var(--mute); font-size: var(--t-md); line-height: var(--il-md); }
.dash-views { display: inline-flex; gap: var(--s-tip); padding: var(--s-tip); border-radius: calc(var(--r-camp) + var(--s-tip)); corner-shape: var(--colt-continuu); background: var(--ap-ctl-bg); max-width: 100%; }
.dash-views a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-ctl); padding: 0 var(--s4); border-radius: var(--r-camp); corner-shape: var(--colt-continuu); color: var(--mute); font-size: var(--t-md); line-height: var(--il-md); font-weight: 500; text-decoration: none; white-space: nowrap; }
.dash-views a[aria-current="page"] { background: var(--ap-seg-raised); color: var(--ink); box-shadow: var(--umbra-segment); }
.dash-views a:focus-visible, .dash-text-link:focus-visible, .dash-step:focus-visible,
.dash-issue-list a:focus-visible, .dash-metric:focus-visible,
.dash-context-grid a:focus-visible, .dash-stat-row a:focus-visible,
.dash-courier .curier-mini > summary:focus-visible { outline: var(--contur-focus); outline-offset: var(--s-tip); }
.dash-section { margin-top: var(--s6); }
.dash-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s-14); }
.dash-section-head h3 { margin: var(--s1) 0 0; font-size: var(--t-lg); line-height: var(--il-lg); }
.dash-text-link { display: inline-flex; align-items: center; gap: var(--s-6); min-height: max(var(--h-ctl), var(--tinta-min)); color: var(--ink-2); font-size: var(--t-md); line-height: var(--il-md); font-weight: 500; text-decoration: none; }
.dash-text-link:hover { text-decoration: underline; text-underline-offset: var(--s-tip); }
.dash-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.dash-metric { display: flex; flex-direction: column; min-height: 129px; padding: var(--s4) var(--s4); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); color: inherit; text-decoration: none; }
.dash-metric:hover { background: var(--ap-fill-5); }
.dash-metric > span { font-size: var(--t-md); line-height: var(--il-md); font-weight: 500; color: var(--ink-2); }
.dash-metric strong { margin: var(--s-10) 0 auto; font-size: var(--t-2xl); line-height: var(--il-2xl); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-metric small { margin-top: var(--s2); font-size: var(--t-sm); line-height: var(--il-sm); color: var(--mute); }
.dash-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); gap: var(--s-14); align-items: start; margin-top: var(--s4); }
.dash-side-stack { display: grid; gap: var(--s-14); min-width: 0; }
.dash-panel { min-width: 0; padding: var(--s5); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); }
.dash-panel-intro { margin: 0 0 var(--s4); color: var(--mute); font-size: var(--t-md); line-height: var(--il-md); }
.dash-panel-intro b { color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-steps { display: flex; flex-direction: column; }
.dash-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--s-10); min-height: var(--h-rand); padding: var(--s1) var(--s1); border-top: 1px solid var(--line-moale); color: inherit; text-decoration: none; }
.dash-step:hover { background: var(--ap-fill-5); }
.dash-step-order { color: var(--faint); font-size: var(--t-xs); line-height: var(--il-xs); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-step-label { min-width: 0; font-size: var(--t-md); line-height: var(--il-md); font-weight: 500; }
.dash-step b { min-width: 30px; font-size: var(--t-lg); line-height: var(--il-lg); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-step > svg { color: var(--mute); }
.dash-step.is-empty .dash-step-label, .dash-step.is-empty b { color: var(--mute); font-weight: 500; }
.dash-issue-list { display: flex; flex-direction: column; }
.dash-issue-list a { display: grid; grid-template-columns: minmax(var(--h-ctl), max-content) minmax(0, 1fr) 16px; gap: var(--s-10); align-items: center; min-height: var(--h-rand); padding: var(--s2) var(--s-tip); border-top: 1px solid var(--line-moale); color: inherit; text-decoration: none; }
.dash-issue-list a:hover { background: var(--ap-fill-5); }
.dash-issue-list a > b { align-self: start; font-size: var(--t-lg); line-height: var(--il-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-issue-list a > span { display: flex; flex-direction: column; gap: var(--s-tip); }
.dash-issue-list strong { font-size: var(--t-md); line-height: var(--il-md); font-weight: 500; }
.dash-issue-list small { font-size: var(--t-xs); line-height: var(--il-xs); color: var(--mute); }
.dash-issue-list svg { color: var(--mute); }
.dash-empty { margin: 0; padding: var(--s-14) 0 var(--s-tip); color: var(--mute); font-size: var(--t-md); line-height: var(--il-md); }
.dash-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.dash-context-grid a { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--ap-fill-5); color: inherit; text-decoration: none; }
.dash-context-grid a:hover { background: var(--ap-ctl-bg-hover); }
.dash-context-grid b { font-size: var(--t-xl); line-height: var(--il-xl); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-context-grid span { color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); }
.dash-followup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-14); margin-top: var(--s-14); }
.dash-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.dash-stat-row > * { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s3); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--ap-fill-5); color: inherit; text-decoration: none; }
.dash-stat-row a:hover { background: var(--ap-ctl-bg-hover); }
.dash-stat-row b { font-size: var(--t-xl); line-height: var(--il-xl); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-stat-row span { color: var(--mute); font-size: var(--t-xs); line-height: var(--il-xs); }
.dash-courier { display: flex; align-items: center; margin-top: var(--s4); padding-top: var(--s-14); border-top: 1px solid var(--line-moale); }
.dash-courier::before { content: "Ridicare programată"; flex: 1; font-size: var(--t-sm); line-height: var(--il-sm); color: var(--mute); }
.dash-courier .curier-mini { color: var(--ink); }
.dash-courier .curier-mini > summary { background: var(--ap-ctl-bg); min-height: max(var(--h-ctl), var(--tinta-min)); }
.dash-work-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--s-14); margin-top: var(--s4); }
.dash-next { display: flex; flex-direction: column; align-items: flex-start; min-height: 245px; padding: var(--s6); border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); border: 0; }
.dash-next h3 { margin: var(--s3) 0 var(--s2); font-size: var(--t-xl); line-height: var(--il-xl); }
.dash-next p { overflow-wrap: anywhere; margin: 0 0 var(--s4); font-size: var(--t-md); line-height: var(--il-md); color: var(--mute); }
.dash-next-button { display: inline-flex; align-items: center; gap: var(--s2); margin-top: auto; }
.dash-next-foot { margin-top: var(--s4); font-size: var(--t-sm); line-height: var(--il-sm); color: var(--mute); }
.dash-next-foot b { color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-work-tools { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.dash-work-tools > label { font-size: var(--t-md); line-height: var(--il-md); font-weight: 500; }
.dash-work-tools .dash-courier { margin: var(--s-tip) 0 0; }
.dash-work-tools > .dash-text-link { align-self: flex-start; }
.dash-work-columns { margin-top: var(--s-14); }
.dash-utilities, .dash-details { margin-top: var(--s4); border: 0; border-radius: var(--r); corner-shape: var(--colt-continuu); background: var(--surface); }
.dash-utilities > summary, .dash-details > summary { display: flex; align-items: center; gap: var(--s-10); min-height: var(--h-rand); padding: var(--s-10) var(--s4); cursor: pointer; list-style: none; color: var(--ink-2); font-size: var(--t-md); line-height: var(--il-md); font-weight: 600; }
.dash-utilities > summary::-webkit-details-marker, .dash-details > summary::-webkit-details-marker { display: none; }
.dash-utilities > summary > svg, .dash-details > summary > svg { margin-left: auto; color: var(--mute); }
.dash-utilities > summary:focus-visible, .dash-details > summary:focus-visible { outline: var(--contur-focus); outline-offset: var(--s-tip); }
.dash-utility-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); padding: var(--s1) var(--s4) var(--s4); border-top: 1px solid var(--line-moale); }
.dash-utility-content > div { padding-top: var(--s-14); }
.dash-utility-content b { font-size: var(--t-md); line-height: var(--il-md); }
.dash-utility-content p, .dash-utility-content li { color: var(--mute); font-size: var(--t-sm); line-height: var(--il-sm); }
.dash-utility-content ul { margin: var(--s2) 0 0; padding-left: var(--s4); }
.dash-details-content { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); border-top: 1px solid var(--line-moale); }
.dashboard-page .ledger.atentie { border-color: var(--line); background: var(--surface); box-shadow: inset 3px 0 0 var(--ink-2); }
.dashboard-page .ledger.atentie svg { color: var(--ink-2); }
.dash-details .panou.rau, .dash-details .panou.retur.cere, .dash-details .panou.retur-colete.cere { box-shadow: none; }
.dash-details .rele li.grav, .dash-details .pas.bad, .dash-details .pas.warn,
.dash-details .pas.ok, .dash-details .pasi.mare.critice .pas.warn { background: var(--surface); box-shadow: none; }
.dash-details .rele .ce, .dash-details .pas.bad .pas-n, .dash-details .pas.warn .pas-n,
.dash-details .pas.ok .pas-n { color: var(--ink-2); }
@media (max-width: 1120px) {
  .dash-columns { grid-template-columns: minmax(0, 1fr); }
  .dash-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-followup-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dash-header { align-items: stretch; flex-direction: column; }
  .dash-views { align-self: flex-start; }
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-side-stack, .dash-work-top { grid-template-columns: minmax(0, 1fr); }
  .dash-utility-content { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 440px) {
  .dash-metrics { gap: var(--s2); }
  .dash-metric { min-height: 112px; padding: var(--s3); }
  .dash-panel, .dash-next { padding: var(--s4); }
  .dash-context-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-next-button { width: 100%; justify-content: center; }
  .dash-courier { align-items: flex-start; gap: var(--s2); flex-direction: column; }
}

/* Pe ecrane tactile, controalele au țintă HIG 44; segmented-ul este 48
   cu cele două margini măsurate, fără să micșoreze textul iOS. */
@media (max-width: 720px), (pointer: coarse) {
  .dash-views a, .dash-text-link, .dash-next-button,
  .dash-courier .curier-mini > summary { min-height: max(var(--h-ctl), 44px); }
  .dash-step, .dash-issue-list a,
  .dash-utilities > summary, .dash-details > summary { min-height: max(var(--h-rand), 44px); }
}

/* WhatsApp fără niciun mesaj: rama rămâne (locul gol e el însuși răspunsul),
   dar pe un rând, nu pe trei. */
.istoricul .banda.wa.pregatita { padding-block: var(--s2); }
.istoricul .banda.wa.pregatita > h4 { margin-bottom: 0; }
.istoricul .banda.wa.pregatita > .gol { margin: var(--s-tip) 0 0; font-size: var(--t-sm); }

/* Scara (L6). Câmpurile de formular nu moșteneau litera paginii — browserul le
   dădea 13,33 px, o a șaptea mărime pe care n-a ales-o nimeni —, iar `code`/`pre`
   din dovada istoricului aveau 11,5. */
.pagina-comanda input, .pagina-comanda select,
.pagina-comanda textarea, .pagina-comanda button { font-size: var(--t-md); }
.pagina-comanda .istoricul code, .pagina-comanda .istoricul pre { font-size: var(--t-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Instrumentele au pagini proprii; bara principală păstrează cele cinci categorii. */
.comenzi-instrumente { margin-bottom: var(--s3); }
.comenzi-instrumente > summary { cursor: pointer; width: fit-content; padding: var(--s2); color: var(--ink-2); font-size: var(--t-md); }
.comenzi-instrumente > summary:focus-visible { outline: var(--contur-focus); outline-offset: var(--decalaj-focus); }
.comenzi-instrumente .view-nav { margin-top: var(--s2); }
@media (max-width: 720px), (pointer: coarse) {
  .comenzi-instrumente > summary { min-height: 44px; }
}
.bani-import-form { display: grid; gap: var(--s3); }
.bani-import-form label { display: grid; gap: var(--s1); }
.bani-import-form input, .bani-import-form select { width: 100%; min-width: 0; min-height: var(--h-ctl); padding: var(--s2); border: 0; border-radius: var(--r-camp); box-shadow: inset 0 0 0 1px var(--ap-field-border); background: var(--ap-field-bg); color: var(--ink); font: inherit; }
.bani-import-form details { min-width: 0; }
.bani-import-form details label { margin-top: var(--s2); }
.bani-dovada-lot { padding-block: var(--s3); border-top: 1px solid var(--ap-field-border); }
.bani-dovada-lot ul { padding-inline-start: var(--s5); }

.portal-retur { background: var(--bg); color: var(--ink); }
.portal-retur-foaie { max-width: 36rem; margin: 0 auto; padding: var(--s4); }
.portal-retur-foaie header, .portal-retur-foaie form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); corner-shape: var(--colt-continuu); padding: var(--s4); margin-bottom: var(--s3); }
.portal-retur-foaie h1 { margin: 0; }
.portal-retur-foaie label { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.portal-retur-foaie input:not([type=hidden]):not([type=radio]), .portal-retur-foaie select, .portal-retur-foaie textarea { width: 100%; min-height: 44px; padding: var(--s2); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); }
.portal-retur-foaie input[type=radio] { min-width: 22px; min-height: 22px; }
.portal-retur-foaie fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: var(--s3); }
.portal-retur-foaie button { min-height: 44px; padding: var(--s2) var(--s3); background: var(--ink); color: var(--card); border: 0; border-radius: var(--r-sm); cursor: pointer; }
.portal-retur-foaie button:disabled { opacity: .5; cursor: default; }
.portal-retur-eroare { border: 1px solid var(--line-strong); padding: var(--s3); }
.portal-setari-form .setting-copy { display: grid; gap: var(--s2); }
.portal-setari-form label { display: block; }
.portal-setari-form fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2); }
.portal-setari-form textarea, .portal-setari-form input[type=text], .portal-setari-form input[type=number] { display: block; width: min(100%, 32rem); min-height: 44px; background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--s2); }

.masa-ambalare { display: grid; gap: var(--s3); max-width: 900px; margin-inline: auto; }
.masa-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.masa-ambalare form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2); }
.masa-ambalare form label { display: grid; flex: 1 1 230px; gap: var(--s1); }
.masa-ambalare input, .masa-ambalare select { width: 100%; min-height: var(--h-ctl); padding: var(--s2); border: 0; border-radius: var(--r-camp); box-shadow: inset 0 0 0 1px var(--ap-field-border); background: var(--ap-field-bg); color: var(--ink); font: inherit; }
.masa-ambalare details { margin-top: var(--s3); }
.masa-ambalare details summary { cursor: pointer; min-height: 44px; }
.masa-raspuns { min-height: 2.5em; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface); }
.masa-raspuns.masa-bun { color: var(--ok); }
.masa-raspuns.masa-rau { color: var(--err); }
.masa-linii, .masa-coada { list-style: none; padding: 0; margin: var(--s2) 0 0; }
.masa-linii li, .masa-coada li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.masa-linii li b { white-space: nowrap; }
.masa-coada li span { color: var(--ink-2); }
.masa-pagini { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.masa-camera { margin-top: var(--s3); }
.masa-camera video { width: 100%; max-height: 270px; object-fit: cover; border-radius: var(--r); corner-shape: var(--colt-continuu); }
.masa-urmatoarea { margin-top: var(--s3); }
@media (max-width: 720px) {
  .masa-ambalare form { display: grid; }
  .masa-ambalare form label { min-width: 0; }
  .masa-ambalare button { min-height: 44px; }
}
/* Eticheta deschisă din masa de ambalare. */
.masa-eticheta { max-width: 44rem; margin: 2rem auto; padding: 1rem; }
.masa-eticheta iframe { display: block; width: 100%; height: 80vh; margin-top: 1rem; border: 0; }
@media print { .masa-eticheta > h1, .masa-eticheta > p, .masa-eticheta > a { display: none; }
  .masa-eticheta { max-width: none; margin: 0; padding: 0; }
  .masa-eticheta iframe { height: 100vh; margin: 0; } }


/* Stilurile inboxului sunt în mesaje.css, încărcată numai la Mesaje. */
.shift-handover-case {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin: var(--s4) 0;
  padding: var(--s4);
}
.shift-handover-list { display: grid; gap: var(--s4); }
.shift-handover-replan { margin-top: var(--s4); }
.shift-handover-replan form { margin-top: var(--s4); }
.curier-ritm { margin-top: var(--s3); font-size: var(--t-sm); }
.curier-ritm p { margin: 0 0 var(--s1); }