/* se-frozen-table — tabelul cu primele coloane înghețate și restul derulabil pe
 * orizontală (handover §2.4, `data-table-frozen`), unul singur pentru amândouă
 * consolele.
 *
 * Forma și valorile vin din prototipul BackOffice (Figma, nodul 14:599):
 * `.table-scroll-split` / `.sticky-table-wrap` / `.data-table-frozen` /
 * `.data-table-scroll-region` / `.data-table-scrollable`, L615-628 din
 * r2/apps/external/scanexpert-backoffice/index.html.
 *
 * DE CE NU SE COPIAZĂ PERECHEA DE TABELE: motivul e mecanic și e scris pe larg în
 * se-frozen-table.js — `se-tables.js` sortează UN tabel, iar două jumătăți ar rămâne
 * desincronizate la fiecare sortare. Aici e un singur `<table>` cu primele N coloane
 * pe `position: sticky`, deci regulile prototipului își schimbă purtătorul:
 *
 *   prototip                        aici
 *   ----------------------------    ----------------------------------------------
 *   .data-table-scroll-region       .se-frozen-region (părintele tabelului)
 *   .data-table-frozen (tabel)      .se-frozen-cell   (celulele înghețate)
 *   .data-table-scrollable          restul celulelor — nu au nevoie de nicio regulă
 *
 * Golul de 24px de la cusătură (L618 + L627) NU se mai scrie: acolo cele două reguli
 * există ca să anuleze marginea de card pe care fiecare tabel și-o punea la capătul
 * lui. Într-un singur tabel `:first-child` și `:last-child` sunt chiar marginile
 * cardului, iar celulele de la cusătură rămân la cei 12px ai lor — exact ce desenează
 * prototipul, fără nicio regulă în plus.
 *
 * Fiecare culoare e un token canonic `--se-*`, tradusă prin `design-kit/dialect.json`:
 * #F2F4F7 (fundalul barei de derulare) = color.scroll.track, #D1D3DC (degetul barei) =
 * --btn-disabled-text = primary-20, --card-inner-bg = bg-console (banda de antet),
 * --card-outer-bg = bg-surface (fundalul rândului), --card-inner-border = --input-border
 * = border-default (linia de la cusătură), --radius-pill = radius.pill.
 *
 * UN SINGUR ESCAPE, documentat: umbra de la cusătură. Umbrele n-au token
 * (`dialect.json`: `--shadow-float` are `canonical: null`), deci se scrie cu valoarea
 * ei — aceeași cerneală ca `--ui-shadow-float` din consolă și ca umbra din
 * se-row-menu.css. Prototipul n-are umbră acolo deloc: la el cusătura e golul de 24px
 * dintre două tabele, care într-un singur tabel nu există, iar fără niciun semn textul
 * înghețat s-ar lipi de textul care trece pe sub el.
 */

/* ---- regiunea care se derulează ---------------------------------------------------
 * Părintele tabelului, marcat de componentă. Derularea se dă de aici, nu se presupune
 * din marcajul paginii: altfel un tabel pus într-un container fără `overflow` n-ar
 * îngheța nimic și n-ar spune de ce.
 *
 * ATENȚIE: `overflow-x: auto` cu `overflow-y: visible` nu există — valoarea folosită
 * pentru `overflow-y` devine tot `auto`. Orice meniu de rând dintr-un tabel înghețat
 * trebuie deci să fie `position: fixed`, ca `.action-menu` din se-row-menu.js. */

.se-frozen-region {
  overflow-x: auto;
  /* Bara subțire a prototipului (L619-625): 6px, deget primary-20 pe fundal
   * scroll-track. `scrollbar-*` pentru Firefox, `::-webkit-scrollbar` pentru restul —
   * niciun browser nu le citește pe amândouă. */
  scrollbar-width: thin;
  scrollbar-color: var(--se-color-primary-20) var(--se-color-scroll-track);
}

.se-frozen-region::-webkit-scrollbar {
  height: 6px;
}

.se-frozen-region::-webkit-scrollbar-track {
  background: var(--se-color-scroll-track);
}

.se-frozen-region::-webkit-scrollbar-thumb {
  background: var(--se-color-primary-20);
  border-radius: var(--se-radius-pill);
}

/* Oprirea de Tab pe regiune e a componentei (WCAG 2.1.1: ce se derulează cu mausul se
 * derulează și cu tastatura), deci trebuie să se și vadă unde a ajuns focusul.
 * Tratamentul e cel de familie — contur primary-60, halo focus-ring — scris aici
 * fiindcă regiunea e un `<div>` al paginii, nu un control care l-ar primi de la sine.
 * Offset negativ: regiunea e lipită de marginile cardului și n-are loc pe dinafară. */
.se-frozen-region:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

/* ---- celulele înghețate ----------------------------------------------------------
 * `left` îl scrie JS-ul, în pixeli, din lățimea reală a capetelor de coloană: `sticky`
 * își socotește decalajul față de cutia de derulare, nu față de tabel, deci un procent
 * ar însemna altceva. Aici stă doar ce nu depinde de măsurătoare. */

.data-table-frozen .se-frozen-cell {
  position: sticky;
  left: 0;
}

/* ORDINEA DE PICTARE, cele trei straturi. Un `z-index` pe un element nepoziționat nu
 * face nimic, deci regula de mijloc e inertă pe un tabel al cărui antet nu e lipit —
 * și e exact ce trebuie pe unul care e (`.wl-table thead th` e `sticky top:0`): fără
 * ea, celulele înghețate din corp ar trece peste antetul lipit la derulare pe
 * verticală, fiindcă `<tbody>` vine după `<thead>` în document. */

.data-table-frozen tbody td.se-frozen-cell {
  z-index: 1;
  /* O celulă lipită trebuie să fie OPACĂ: pe sub ea trece conținutul care se derulează.
   * Fundalul stării unui rând (hover, necitit, anulat) se scrie deci pe `td`, nu pe
   * `tr` — `.data-table` face deja asta și are specificitate mai mare decât regula
   * asta, deci o repictează cum trebuie. Un fundal pus pe `<tr>` rămâne SUB celulele
   * înghețate și dispare exact pe ele. */
  background: var(--se-color-bg-surface);
}

.data-table-frozen thead th {
  z-index: 2;
}

.data-table-frozen thead th.se-frozen-cell {
  z-index: 3;
  /* Aceeași bandă gri ca orice cap de tabel; se rescrie fiindcă opacitatea nu e
   * opțională pe o celulă lipită, iar selectorul ăsta e mai specific decât cel care o
   * pune de obicei. */
  background: var(--se-color-bg-console);
}

/* ---- cusătura --------------------------------------------------------------------
 * Linia de 1px e permanentă și e chiar tokenul de bordură al oricărei celule: ea ține
 * locul golului de 24px dintre cele două tabele ale prototipului. Se desenează cu o
 * umbră `inset`, nu cu `border-right`: tabelul e `border-collapse: collapse`, unde
 * bordura aparține grilei tabelului, nu celulei, iar o celulă lipită și-ar lăsa-o în
 * urmă la derulare. O umbră se pictează mereu cu celula ei.
 *
 * Umbra moale apare doar cât chiar s-a derulat ceva (`is-scrolled`, pus de JS): pe un
 * tabel care încape întreg n-are ce anunța, iar o umbră permanentă ar spune că mai e
 * conținut acolo unde nu mai e. */

.data-table-frozen .se-frozen-edge {
  box-shadow: inset -1px 0 0 var(--se-color-border-default);
}

.data-table-frozen.is-scrolled .se-frozen-edge {
  box-shadow:
    inset -1px 0 0 var(--se-color-border-default),
    6px 0 8px -6px rgba(20, 24, 31, 0.16); /* cerneala lui --ui-shadow-float; umbrele n-au token */
}