/* SCRISUL - Inter, adus ÎN KIT, nu de pe internet.
*
* Până azi, 20 septembrie 2026, toate trei foile cereau
* `font-family:Inter,system-ui,Arial,sans-serif`, dar Inter nu era adus de
* nicăieri. Măsurat pe stand: un text scris cu „Inter" ieșea EXACT cât unul
* scris cu un nume de font inventat - adică browserul cădea pe `system-ui`.
* Pe Windows înseamnă Segoe UI; pe altă mașină, altceva. Ecranele scriau cu
* fontul mașinii, iar numele din foaie era o vorbă goală.
*
* HALA N-ARE INTERNET, deci fontul nu se poate lua de pe fonts.googleapis.com:
* stă în kit, lângă foi, și memoria offline a fiecărui ecran îl ține.
*
* DOUĂ FIȘIERE, fiindcă literele românești stau în două locuri: `Â` și `Î`
* sunt în subsetul `latin`, dar `ă`, `ș` și `ț` sunt în `latin-ext`. Fără al
* doilea, stația ar scrie „Stația" cu ț luat din alt font - se vede.
*
* `font-display:swap`: cât se încarcă fontul, scrisul se vede cu cel de
* rezervă. Altfel ecranul ar rămâne gol o clipă la fiecare pornire.
*
* Licența (SIL OFL 1.1) pleacă odată cu fișierele: `fonturi/LICENTA-Inter.txt`.
*/
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/shared/fonturi/inter-latin-ext-wght-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/shared/fonturi/inter-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PALETA WOODFLOW - un singur loc pentru culori.
*
* Până azi, 20 septembrie 2026, culorile stăteau scrise cu mâna în fiecare
* foaie de stil: 270 de coduri diferite, 592 de apariții, în opt fișiere.
* Multe dintre ele erau aceeași culoare scrisă a doua oară cu o treaptă
* alături - `#174a33` și `#174a35`, `#6b7b71` și `#6d7c73` - urme de copiat
* dintr-un loc în altul. O schimbare de culoare cerea căutare prin tot
* proiectul, iar ce scăpa rămânea alături, cu o nuanță în minus.
*
* Au rămas 104 nume aici și 70 de culori scrise cu mâna prin foi (fiecare
* folosită o singură dată, pe un singur ecran).
*
* Aici fiecare culoare are UN NUME și o SINGURĂ scriere. Numele spune familia
* și treapta de lumină: `--wf-verde-28` e un verde închis (28 din 100),
* `--wf-verde-96` e unul aproape alb. Așa se vede din nume dacă o culoare e
* bună de fundal ori de scris, și cât de departe sunt două nuanțe.
*
* CULORILE NU S-AU SCHIMBAT LA OCHI. Două coduri s-au strâns într-unul singur
* numai când diferența dintre ele era sub pragul la care ochiul prinde ceva
* (ΔE sub 1,5; se vede pe la 2,3). Restul și-au căpătat doar numele.
*
* DEDESUBT, sub paletă, stau ROLURILE: `--wf-text`, `--wf-linie`,
* `--wf-primejdie`. Ecranele ar trebui să ceară rolul, nu treapta - rolul
* spune la ce folosește culoarea, treapta spune doar cum arată.
*/
:root {
/* --- CENUȘII VERZUI - hârtia, liniile, scrisul stins --- */
--wf-alb: #ffffff; /* x58 fundal · comun, manager, stație, transport · a strâns 3 apropiate */
--wf-cenusiu-98: #f7faf8; /* x36 fundal · manager, stație, transport · a strâns 11 apropiate */
--wf-cenusiu-97: #f2f8f4; /* x2 fundal · manager, stație · a strâns 1 apropiat */
--wf-cenusiu-96: #eef7f1; /* x26 fundal · comun, manager, stație · a strâns 10 apropiate */
--wf-cenusiu-95: #eef3f0; /* x4 ramă · manager, stație · a strâns 2 apropiate */
--wf-cenusiu-95b: #e3f5e9; /* x5 fundal · stație, transport · a strâns 3 apropiate */
--wf-cenusiu-95c: #eaf2ed; /* x7 fundal · manager, stație, transport · a strâns 2 apropiate */
--wf-cenusiu-93: #def1e5; /* x4 fundal · comun, manager, stație · a strâns 3 apropiate */
--wf-cenusiu-93b: #e4efe7; /* x2 fundal · manager, stație · a strâns 1 apropiat */
--wf-cenusiu-93c: #d8f0e0; /* x2 fundal · comun, stație */
--wf-cenusiu-93d: #e3ece6; /* x16 fundal · manager, stație, transport · a strâns 9 apropiate */
--wf-cenusiu-92: #dcebe2; /* x8 fundal · manager, stație, transport · a strâns 3 apropiate */
--wf-cenusiu-90: #d8e6dd; /* x3 fundal · manager, stație · a strâns 1 apropiat */
--wf-cenusiu-88: #d4e0d8; /* x2 ramă · stație */
--wf-cenusiu-87: #c9ded1; /* x2 ramă · stație */
--wf-cenusiu-86: #cbdcd1; /* x2 ramă · manager · a strâns 1 apropiat */
--wf-cenusiu-86b: #cddbd2; /* x13 ramă · comun, manager, stație · a strâns 1 apropiat */
--wf-cenusiu-84: #c6d6cc; /* x3 ramă · stație, transport · a strâns 1 apropiat */
--wf-cenusiu-82: #b9d3c3; /* x3 ramă · manager */
--wf-cenusiu-81: #b9cfc2; /* x2 ramă · manager · a strâns 1 apropiat */
--wf-cenusiu-78: #b1c6ba; /* x3 --line · manager, stație, transport */
--wf-cenusiu-57: #7d8d84; /* x2 scris · manager, stație */
--wf-cenusiu-51: #6d7c73; /* x19 scris · manager, stație, transport · a strâns 1 apropiat */
--wf-cenusiu-46: #5f7166; /* x10 scris · manager, stație · a strâns 3 apropiate */
--wf-cenusiu-45: #5b6e62; /* x3 scris · comun, manager, stație */
--wf-cenusiu-35: #45564d; /* x2 --semn-neutru · comun, stație */
--wf-cenusiu-32: #385046; /* x9 scris · manager, stație, transport · a strâns 1 apropiat */
--wf-cenusiu-32b: #365044; /* x4 scris · manager, stație */
--wf-cenusiu-14: #1b251f; /* x3 scris · manager, transport · a strâns 1 apropiat */
--wf-cenusiu-12: #17231c; /* x1 scris · stație */
/* --- VERZI - culoarea casei: rame, butoane, scrisul greu --- */
--wf-verde-83: #b9d7c2; /* x5 ramă · stație · a strâns 2 apropiate */
--wf-verde-69: #7fb394; /* x1 --semn3d-mijloc · comun */
--wf-verde-66: #57b276; /* x2 scris · comun */
--wf-verde-56: #5f9440; /* x1 --semn3d-muschi · comun */
--wf-verde-54: #2e9364; /* x4 fundal · comun, manager, stație */
--wf-verde-52: #2c8b5e; /* x5 scris · manager, stație, transport */
--wf-verde-48: #19834f; /* x3 ramă · stație */
--wf-verde-46: #2b7b55; /* x4 ramă · stație */
--wf-verde-45: #197a4b; /* x4 fundal · comun, stație */
--wf-verde-45b: #0f7a3d; /* x2 scris · manager, stație */
--wf-verde-44: #28744f; /* x4 ramă · manager, stație · a strâns 1 apropiat */
--wf-verde-41: #2c6c4d; /* x2 scris · manager */
--wf-verde-41b: #2f6b4f; /* x1 --semn3d-inchis · comun */
--wf-verde-40: #1a6b45; /* x5 --semn-verde · comun, manager, stație · a strâns 1 apropiat */
--wf-verde-38: #236646; /* x2 fundal · stație, transport · a strâns 1 apropiat */
--wf-verde-36: #1e6044; /* x3 fundal · manager, transport */
--wf-verde-36b: #12603a; /* x2 scris · comun, stație */
--wf-verde-35: #2c5b42; /* x6 scris · manager, stație */
--wf-verde-35b: #1c5c40; /* x2 --green · stație · a strâns 1 apropiat */
--wf-verde-30: #20503a; /* x2 scris · stație */
--wf-verde-30b: #155038; /* x5 scris · manager, stație, transport · a strâns 2 apropiate */
--wf-verde-28: #214b38; /* x13 scris · manager, stație, transport · a strâns 2 apropiate */
--wf-verde-28b: #174a33; /* x7 scris · manager, stație · a strâns 1 apropiat */
--wf-verde-27: #254637; /* x2 scris · manager */
--wf-verde-23: #123e2c; /* x6 scris · manager, transport · a strâns 1 apropiat */
--wf-verde-23b: #143d2d; /* x9 fundal · comun, manager, stație, transport · a strâns 3 apropiate */
--wf-verde-22: #1b3b2c; /* x3 ramă · manager */
--wf-verde-17: #10301d; /* x2 scris · manager, stație */
/* --- CHIHLIMBAR - ia seama, dar nu e oprire --- */
--wf-chihlimbar-98: #fdfaef; /* x3 fundal · manager, stație · a strâns 1 apropiat */
--wf-chihlimbar-97: #fff7e8; /* x4 fundal · manager, stație · a strâns 2 apropiate */
--wf-chihlimbar-97b: #fdf6ec; /* x2 fundal · manager, transport · a strâns 1 apropiat */
--wf-chihlimbar-97c: #fdf6e3; /* x7 fundal · manager, stație · a strâns 2 apropiate */
--wf-chihlimbar-96: #fff4da; /* x3 fundal · manager, stație · a strâns 1 apropiat */
--wf-chihlimbar-96b: #fff1dc; /* x2 fundal · stație · a strâns 1 apropiat */
--wf-chihlimbar-95: #fff0c7; /* x4 fundal · comun, manager */
--wf-chihlimbar-94: #fdeccd; /* x2 fundal · manager */
--wf-chihlimbar-93: #ffe7d2; /* x4 fundal · comun, stație, transport */
--wf-chihlimbar-88: #e8dcb8; /* x2 ramă · manager, stație */
--wf-chihlimbar-85: #e3d5ac; /* x2 ramă · stație */
--wf-chihlimbar-82: #e9c78d; /* x1 --semn3d-inima · comun */
--wf-chihlimbar-67: #c79a5b; /* x1 --semn3d-inel · comun */
--wf-chihlimbar-62: #c98a13; /* x2 ramă · manager, stație */
--wf-chihlimbar-50: #b76118; /* x3 --orange · manager, stație, transport · a strâns 1 apropiat */
--wf-chihlimbar-47: #b45309; /* x2 --semn-chihlimbar · comun, stație */
--wf-chihlimbar-45: #7a6a3e; /* x2 scris · manager, stație */
--wf-chihlimbar-42: #8a5a12; /* x2 scris · manager, stație */
--wf-chihlimbar-41: #8a5415; /* x2 scris · manager, stație */
--wf-chihlimbar-41b: #7a5a2a; /* x4 scris · manager, stație */
--wf-chihlimbar-39: #7c5400; /* x8 scris · comun, manager */
--wf-chihlimbar-38: #8a4a12; /* x3 scris · manager, stație */
--wf-chihlimbar-36: #7c4a10; /* x2 scris · manager, stație · a strâns 1 apropiat */
--wf-chihlimbar-35: #74490e; /* x2 scris · manager, stație */
--wf-chihlimbar-34: #843d00; /* x2 scris · stație */
--wf-chihlimbar-34b: #6b4a2f; /* x1 --semn3d-coaja · comun */
--wf-chihlimbar-33: #7a3f08; /* x2 scris · transport */
/* --- ROȘII - oprire, lipsă, greșeală --- */
--wf-rosu-96: #fdf2f2; /* x6 fundal · manager, stație · a strâns 4 apropiate */
--wf-rosu-94: #fbeaea; /* x4 fundal · manager, stație · a strâns 2 apropiate */
--wf-rosu-90: #f7dede; /* x12 fundal · comun, manager, stație, transport · a strâns 4 apropiate */
--wf-rosu-80: #e3bcbc; /* x2 ramă · manager */
--wf-rosu-45: #c0392b; /* x2 umbră · manager, stație */
--wf-rosu-40: #b3261e; /* x3 scris · manager, stație */
--wf-rosu-40b: #b02a2a; /* x2 --semn-rosu · comun, stație */
--wf-rosu-39: #a63333; /* x5 --red · manager, stație, transport · a strâns 1 apropiat */
--wf-rosu-36: #9a3030; /* x2 scris · manager, stație */
--wf-rosu-33: #8d2828; /* x3 scris · comun, stație */
--wf-rosu-32: #8e2525; /* x11 scris · manager, stație, transport */
--wf-rosu-31: #862626; /* x8 scris · manager, stație, transport · a strâns 1 apropiat */
--wf-rosu-30: #7a2b2b; /* x3 scris · manager, stație */
/* --- ALBAȘTRI - lămurire, legătură, semn de sistem --- */
--wf-albastru-92: #dceafb; /* x6 fundal · comun, manager, stație, transport */
--wf-albastru-91: #e8e1fa; /* x2 fundal · comun, manager */
--wf-albastru-42: #2b65a8; /* x3 --semn-albastru · comun, manager, stație */
--wf-albastru-40: #0a58ca; /* x3 ramă · stație */
--wf-albastru-38: #1f5f8b; /* x2 scris · manager, stație */
--wf-albastru-32: #174d83; /* x6 scris · comun, manager, stație, transport */
/* Scrisul. Rezerva nu e de prisos: dacă fișierul lipsește ori nu apucă să
vină, ecranul cade pe fontul de interfață al mașinii, nu pe Times. */
--wf-scris: 'Inter', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
/* ===================================================================
ROLURILE - ce cer ecranele.
Treapta spune cum arată culoarea; rolul spune LA CE e. Un ecran care
cere `--wf-primejdie` rămâne bun și dacă mâine roșul se schimbă; unul
care cere `--wf-rosu-39` trebuie căutat și el.
=================================================================== */
--wf-hartie: var(--wf-alb); /* cardurile, tabelele */
--wf-pagina: var(--wf-cenusiu-98); /* fundalul de sub ele */
--wf-rand-lovit: var(--wf-cenusiu-96); /* rândul sub mouse */
--wf-rand-sarit: var(--wf-cenusiu-98); /* al doilea rând, ca să se urmărească */
--wf-text: var(--wf-verde-28); /* scrisul obișnuit */
--wf-text-greu: var(--wf-verde-23); /* titluri, cifre mari */
--wf-text-stins: var(--wf-cenusiu-51); /* unități, lămuriri mici */
--wf-text-sters: var(--wf-cenusiu-57); /* ce nu se mai poate atinge */
--wf-linie: var(--wf-cenusiu-78); /* rama care se vede */
--wf-linie-subtire: var(--wf-cenusiu-86b); /* despărțirea dintre rânduri */
--wf-firma: var(--wf-verde-28b); /* verdele casei */
--wf-firma-vie: var(--wf-verde-54); /* verdele aprins: butonul care lucrează */
--wf-firma-adanc: var(--wf-verde-23b); /* bara de sus, scurgerile */
--wf-bine: var(--wf-verde-45); /* a mers */
--wf-bine-fundal: var(--wf-cenusiu-95b);
--wf-primejdie: var(--wf-rosu-39); /* nu se poate, s-a stricat */
--wf-primejdie-fundal: var(--wf-rosu-90);
--wf-seama: var(--wf-chihlimbar-50); /* ia seama, dar nu e oprire */
--wf-seama-fundal: var(--wf-chihlimbar-97c);
--wf-lamurire: var(--wf-albastru-32); /* semn de sistem, legătură */
--wf-lamurire-fundal: var(--wf-albastru-92);
}
/* MĂSURA DEGETULUI - după CE ATINGE ecranul, nu după cât e de lat.
*
* Regula exista de mult, scrisă chiar așa: „Degetul are altă măsură decât
* cursorul. Sub 44 de puncte se ratează". Numai că stătea închisă în
* `@media(max-width:640px)`, adică se aprindea NUMAI pe ecran îngust. Un ecran
* lat cu atingere, ori o tabletă ținută în lung, primea butoane de mouse.
*
* Măsurat pe stand, la stație, 20 septembrie 2026: 35 din 42 de butoane
* vizibile erau sub 44 de puncte; cele de descărcare (XLSX, CSV) aveau 19 -
* mai puțin de jumătate de deget.
*
* `pointer: coarse` întreabă exact ce trebuie: dacă arătătorul cel mai bun al
* mașinii e imprecis, adică un deget. Se aprinde pe orice ecran atins, oricât
* de lat, și nu supără pe nimeni care lucrează cu mouse-ul.
*/
@media (pointer: coarse) {
/* CU GREUTATE, fiindcă `@media` nu aduce niciuna.
Măsurat pe stand: paleta se încarcă ÎNAINTEA foii fiecărui ecran, iar
`.mini{min-height:28px}` de acolo, fiind la fel de grea și scrisă mai
târziu, bătea regula de aici - comutatorul de noapte rămăsese la 28 de
puncte pe un ecran atins. Pragul degetului nu e o părere, e o măsură:
cine vrea altceva trebuie s-o spună anume, cum face Managerul mai jos
pentru semnul de scos specia. */
button, .button, .mini { min-height: 44px !important; }
/* ȘI ÎN LAT: un buton înalt și îngust e la fel de greu de nimerit.
Măsurat pe stand: comutatorul de noapte avea 28 de puncte lățime la
44 înălțime - o dungă. Butoanele cu scris sunt oricum mai late;
pragul îi prinde pe cei numai cu semn. */
.mini { min-width: 44px !important; padding-left: 12px; padding-right: 12px; }
}
/* SE VEDE UNDE EȘTI CU TASTATURA - pe orice fond.
*
* Până azi, 20 septembrie 2026, niciun ecran n-avea un contur al său: se
* lăsau pe cel al browserului, altul la fiecare. Transportul n-avea nicio
* regulă de focus. Iar două reguli îl ȘTERGEAU de tot, fără să dea nimic în
* loc - `.info-i` din rapoarte și `.nota-i` din Manager, amândouă elemente la
* care SE AJUNGE cu Tab. Cine umblă la tastatură ajungea pe ele și nu vedea
* nimic: nu știa unde e.
*
* DOUĂ INELE, fiindcă unul singur nu ajunge. Măsurat pe fondurile adevărate
* ale aplicației: un inel închis se pierde pe bara de sus și pe butonul verde
* (1,0 și 2,1), unul alb se pierde pe hârtie (1,0). Împreună, cel mai slab
* fond dă 3,8 - peste pragul de 3 cerut pentru un semn gros.
*
* Inelul ALB stă lipit de element (umbra), cel ÎNCHIS pe dinafară (conturul).
* Conturul nu se taie niciodată la marginea unui tabel cu derulare; umbra se
* poate tăia, dar acolo unde se taie - în tabele - fondul e deschis, iar
* inelul închis se vede oricum.
*
* `:focus-visible`, nu `:focus`: cel care apasă cu mouse-ul nu vede nimic, cum
* e și firesc. Semnul e pentru cine umblă cu tastatura.
*/
:focus-visible {
outline: 3px solid var(--wf-verde-23);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--wf-alb);
}
/* FORMA - scara colțurilor și a ridicării.
*
* Măsurat pe 20 septembrie 2026, înainte: 18 feluri de rază în 122 de locuri
* (9px de 29 de ori, 10px de 27, 8px de 18, iar restul o coadă lungă - 6, 7,
* 11, 12, 13, 14, 18), și 20 de umbre, fiecare folosită EXACT O DATĂ. Trei
* dintre ele desenau același lucru, placa unui card, în cele trei ecrane.
* Nimeni nu poate ține minte care e care, deci fiecare regulă nouă își alegea
* una - și așa s-au adunat.
*
* Trei raze ajung: mică pentru câmpuri și butoane mici, obișnuită pentru
* butoane și panouri, mare pentru cardurile care țin o secțiune întreagă.
* Plus rotundul pastilelor și cercul punctelor.
*
* Trei trepte de ridicare: 1 pentru ce stă pe pagină (carduri), 2 pentru ce e
* ales ori scos în față, 3 pentru ce plutește deasupra tuturor (liste
* deschise, ferestre de intrare, bule de lămurire).
*
* INELELE DE STARE NU SUNT AICI. `0 0 0 3px rgba(...)` nu ridică nimic: e un
* semn - punctul care pulsează, câmpul greșit, rândul ales. Ele rămân scrise
* la locul lor, fiindcă fiecare spune altceva.
*/
:root {
--wf-raza-mica: 8px; /* câmpuri, butoane mici, pastile de tabel */
--wf-raza: 10px; /* butoane, panouri, rânduri scoase în față */
--wf-raza-mare: 14px; /* cardurile care țin o secțiune */
--wf-raza-rotunda: 999px; /* pastile, bare de progres */
--wf-raza-cerc: 50%; /* puncte, bulinele de stare */
--wf-ridicare-1: 0 4px 20px rgba(20, 60, 42, .06); /* stă pe pagină */
--wf-ridicare-2: 0 3px 12px rgba(24, 74, 51, .14); /* ales, scos în față */
--wf-ridicare-3: 0 12px 40px rgba(10, 40, 26, .28); /* plutește deasupra */
}
/* PLACA CARDULUI, o singură dată.
*
* Era scrisă de trei ori, cu alt padding (16 / 15 / 16), altă umbră și aceeași
* rază din întâmplare. Ecranele păstrează numai ce au ele ANUME: bara colorată
* din stânga la Transport, marginea de jos la Manager. */
.card {
min-width: 0;
background: var(--wf-hartie);
border: 1px solid var(--wf-linie);
border-radius: var(--wf-raza-mare);
padding: 16px;
box-shadow: var(--wf-ridicare-1);
}
/* TABELELE - capul, rândurile, și ce se vede când n-au ce arăta.
*
* CAPUL RĂMÂNE SUS. Managerul și stația îl lipeau, fiecare cu regula lui, iar
* Managerul cu DOUĂ, cu fundaluri diferite. Transportul nu-l lipea deloc: la o
* listă lungă de curse, numele coloanelor plecau de pe ecran și rămâneai cu
* șapte coloane de cifre fără nume.
*
* RÂNDURILE SE URMĂRESC. Nicăieri nu era niciun rând alternat - măsurat, zero
* reguli `nth-child`. În stocul stației, cu unsprezece coloane, ochiul sare
* rândul, iar cifra citită e a altei piese. Alternarea e ABIA vizibilă: un
* rând vărgat tare obosește mai rău decât lipsa lui.
*
* GOLUL SE CUNOAȘTE DUPĂ FORMĂ. Un rând singur într-un tabel, cu o celulă
* lățită peste toate coloanele, ESTE un gol - nu trebuie marcat cu nicio
* clasă pe care cineva să și-o amintească. Așa arată la fel și tabelele
* scrise mâine.
*/
thead th {
position: sticky;
top: 0;
z-index: 2;
}
tbody tr:nth-child(even) > td {
background: var(--wf-cenusiu-98);
}
tbody tr:only-child > td[colspan] {
text-align: center;
padding: 28px 16px;
color: var(--wf-text-stins);
font-weight: 600;
background: none;
}
/* Ieșirea din gol stă sub vorbă, nu lângă ea: rândul are o singură celulă,
lățită peste tot tabelul, iar butonul pus în rând ar pluti în mijlocul ei. */
tbody tr:only-child > td[colspan] .sterge-filtrele {
display: block;
margin: 12px auto 0;
}
/* BARA FILTRELOR - una singură, pentru amândouă ecranele.
*
* Era scrisă de DOUĂ ORI, la fel, în foaia Managerului și în a stației. Iar la
* Manager filtrele stocului nici nu o foloseau: stăteau într-un al doilea etaj
* al capului de tabel, câte unul sub coloana lui, cu butonul „Resetează" într-o
* celulă de cap. Un buton într-un `| ` se ceartă cu coloana de sub el, iar o
* casetă care spune „Toate" nu zice toate CE - filtrele n-aveau niciun nume.
*/
.report-filters {
display: grid;
grid-template-columns: repeat(6, minmax(150px, 1fr));
gap: 10px;
align-items: end;
padding: 12px;
background: var(--wf-cenusiu-98);
border: 1px solid var(--wf-linie);
border-radius: var(--wf-raza);
}
@media (max-width: 1100px) { .report-filters { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .report-filters { grid-template-columns: 1fr; } }
/* PASTILELE - ce e ales acum, la vedere.
*
* Cu filtrele strânse în liste cu bife, un ecran filtrat arată ca unul gol:
* omul nu-și mai amintește ce a bifat acum un minut și crede că nu mai are
* marfă. Fiecare valoare aleasă își are pastila ei, cu crucea ei, iar la
* capăt stă «Șterge tot». Când nu e nimic ales, rândul TACE - o bară cu un
* buton care nu face nimic e mai rea decât niciuna.
*/
.filtre-alese {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.filtre-alese:empty { display: none; }
.pastila-filtru {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 10px;
border: 1px solid var(--wf-linie);
border-radius: var(--wf-raza-rotunda);
background: var(--wf-hartie);
font-size: 13px;
font-weight: 600;
}
.pastila-filtru b { font-weight: 800; }
.pastila-filtru button {
padding: 0;
width: 22px;
min-width: 22px;
height: 22px;
min-height: 22px;
border-radius: var(--wf-raza-cerc);
background: none;
}
.pastila-filtru button .semn { width: 14px; height: 14px; margin: 0; }
.filtre-alese .sterge-tot { margin-left: 4px; }
/* AȘTEPTAREA NU ARATĂ A GOL.
*
* La punctul 9 golul de tabel și-a căpătat chipul lui - centrat, cu spațiu
* larg, scris stins - recunoscut DUPĂ FORMĂ: un rând singur cu o celulă lățită
* peste toate coloanele. Numai că un rând de ÎNCĂRCARE are exact aceeași
* formă, deci a moștenit același chip. Măsurat pe stand, cele două alăturate:
*
* încărcare: center / 28px 16px / rgb(109,124,115) / 600
* gol: center / 28px 16px / rgb(109,124,115) / 600
*
* Identice. Cât se încarcă tabelul, omul citea „nu e nimic aici" - și pleca,
* ori apăsa iar, ori credea că marfa lui a dispărut.
*
* CE LE DEOSEBEȘTE E MIȘCAREA. Un gol stă nemișcat, fiindcă asta e starea lui
* finală; o așteptare pulsează încet, fiindcă nu e finală. Nu se poate
* confunda, și nu cere nicio vorbă în plus.
*/
@keyframes wf-puls-asteptare {
0%, 100% { opacity: .45; }
50% { opacity: 1; }
}
.se-incarca {
animation: wf-puls-asteptare 1.4s ease-in-out infinite;
color: var(--wf-text-stins);
font-weight: 600;
}
/* În tabel, așteptarea dă la o parte chipul golului: acolo se calcă. */
tbody tr:only-child > td[colspan].se-incarca,
tbody tr:only-child > td[colspan] .se-incarca {
padding: 14px 16px;
font-weight: 600;
}
tbody tr:only-child > td[colspan].se-incarca {
animation: wf-puls-asteptare 1.4s ease-in-out infinite;
}
/* CINE A CERUT MAI PUȚINĂ MIȘCARE O PRIMEȘTE. Deosebirea rămâne prin scris:
așteptarea își păstrează spațiul strâns, golul pe cel larg. */
@media (prefers-reduced-motion: reduce) {
.se-incarca,
tbody tr:only-child > td[colspan].se-incarca { animation: none; opacity: .75; }
}
/* PASTILELE DIN ANTET ÎȘI CENTREAZĂ ȘI RÂNDUL AL DOILEA.
*
* Măsurat pe stand, 20 septembrie 2026, la 1280x900, cu textele din hală
* („Stefan Zavragiu", „SERVER CONECTAT · CITITORUL MERGE"): fiecare pastilă
* își centra scrisul pe verticală - 7 puncte sus, 7 jos - dar când el se
* rupea pe două rânduri, amândouă porneau din aceeași margine din stânga.
* Butoanele de lângă ele erau centrate, deci rândul ieșea zdrențuit: jumătate
* din pastile cu al doilea rând atârnat la stânga, jumătate cu el la mijloc.
*
* Pe deasupra, `.version-badge` era `display: block`, singura dintre ele - un
* bloc nu-și poate centra cuprinsul nici pe verticală.
*
* Trei bare, fiindcă fiecare ecran și-a botezat-o altfel: `.header-actions` la
* stație, `.top-actions` la manager, `.actions` la transport.
*/
.header-actions .badge, .header-actions .version-badge,
.header-actions .operator-badge,
.top-actions .badge, .top-actions .version-badge,
.top-actions .operator-badge,
.actions .badge, .actions .version-badge, .actions .operator-badge {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* TITLUL DEFALCĂRII PE CLASE.
*
* Pastilele se adună la volumul din Ø brut, nu la cel înregistrat - iar
* amândouă stau în cartonașe chiar deasupra lor. Fără un nume lipit de ele,
* omul care le adună găsește o depărtare pe care n-are de unde s-o priceapă:
* 1.332,733 față de 1.332,309, măsurat pe baza din hală.
*/
.quality-titlu {
margin: 14px 0 6px;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
color: var(--wf-text-stins);
}
/* RÂNDUL DE TOTAL al rapoartelor (1 octombrie 2026): o linie deasupra și un fond
* ușor, ca să nu se piardă printre rânduri. Stă în | , sub tabel.
*
* RĂMÂNE LA VEDERE CÂT SE DERULEAZĂ („totalul volum pe raport să fie fix la
* derulare"): lipit de marginea de jos a casetei tabelului. Linia de deasupra
* este și umbră, nu numai chenar - la tabelele cu chenare unite, chenarul unei
* celule lipite pleacă odată cu rândurile de sub ea. */
tr.rand-total td,
.report-table tfoot td {
border-top: 2px solid var(--wf-linie);
background: var(--wf-cenusiu-96);
font-weight: 600;
position: sticky;
bottom: 0;
z-index: 2;
box-shadow: inset 0 2px 0 var(--wf-linie);
}