/* ═══ FIȘIER PARTAJAT (afood-shared/css/tables.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */

/* ══════════ Wrapper de scroll (§10.15) ══════════ */

.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* În card e edge-to-edge (cardul îl taie după forma lui, raza 24); de sine stătător
   E cardul: alb pe pânza caldă, raza 24, plat — fără contur, fără umbră. */
.table-wrap:not(.card *) {
  background: var(--surface);
  border-radius: var(--r-3);
}

/* Marginile care se estompează = singurul semn că tabelul mai are coloane la
   dreapta. Wrapper-ul E scroller-ul, deci un pseudo-element absolut se rezolvă
   față de caseta LUI NEDERULATĂ și ar pleca odată cu conținutul: de aceea
   `Tables.observeOverflow` publică `--table-scroll-x` (scrollLeft-ul viu) și
   estomparea îl adună înapoi, rămânând lipită de marginea vizibilă.
   z-index 1 = deasupra celulelor obișnuite, sub prima coloană lipită (z-index 2). */
.table-wrap.has-overflow-left::before,
.table-wrap.has-overflow-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sp-8);
  z-index: 1;
  pointer-events: none;
}

.table-wrap.has-overflow-left::before {
  left: var(--table-scroll-x, 0px);
  background: linear-gradient(to right, var(--scroll-shade), transparent);
}

.table-wrap.has-overflow-right::after {
  left: calc(var(--table-scroll-x, 0px) + 100% - var(--sp-8));
  background: linear-gradient(to left, var(--scroll-shade), transparent);
}

/* Anteturi lipite — posibile doar când wrapper-ul e scroller vertical */
.table-wrap--scroll {
  max-height: 70dvh;
  overflow-y: auto;
}

.table-wrap--scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* ══════════ Tabelul ══════════ */

.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-body);
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}

/* Sub 4 coloane: fără lățime minimă */
.data-table--narrow { min-width: 0; }

/* Fără rânduri: antetul nu mai poartă informație, iar starea goală trebuie
   centrată pe zona VIZIBILĂ, nu pe cei 640 px ai unui tabel derulat (un mesaj
   „Nu există cheltuieli pentr…" tăiat la 390 px). Clasa o pun DataTable și
   Tables.enhance (orice tbody cu un singur td[colspan]). */
.data-table.is-empty { min-width: 0; }
.data-table.is-empty thead { display: none; }

/* Lățimi de coloană pe th — înlocuiesc orice width inline */
.data-table .w-check   { width: 44px; min-width: 44px; padding: 0; text-align: center; }
/* Bifa de selectie e singurul control din celula, deci celula ii E zona de
   atingere: pe ecrane cu deget, checkbox-ul umple caseta de 44px (--touch),
   fara sa creasca vizual. Altfel randul dadea o tinta de ~18px, lipita de
   coloana vecina. */
.data-table .w-check > .form-checkbox { display: inline-block; vertical-align: middle; }
@media (pointer: coarse) {
  .data-table .w-check { position: relative; }
  .data-table .w-check > .form-checkbox::after {
    content: ''; position: absolute; inset: 0;
  }
}
.data-table .w-icon    { width: 48px; }
/* Coloana de comutator (plătit / achitat / reglat): cât pista + padding-ul. Ca
   .w-check, e o coloană de CONTROL — pe telefon se îngheață împreună cu prima
   coloană de date (vezi „Coloana-cheie" mai jos). */
.data-table .w-toggle  { width: 1%; text-align: center; }
.data-table .w-date    { width: 112px; }
.data-table .w-amount  { width: 128px; }
.data-table .w-status  { width: 120px; }
.data-table .w-code    { width: 128px; }
.data-table .w-actions { width: 88px; }
/* varianta cu 3 acțiuni */
.data-table .w-actions-3 { width: 120px; }
/* exact una pe tabel — absoarbe restul lățimii */
.data-table .w-grow { width: 100%; }

/* ══════════ Antet ══════════ */

.data-table thead tr { background: var(--surface); }

/* Antetul stă pe aceeași suprafață ca rândurile: îl desparte doar grosimea (13/800)
   și hairline-ul de dedesubt, nu o bandă colorată. */
.data-table thead th {
  height: 44px;
  /* 16 px între coloane; prima și ultima coloană primesc 20 px (vezi „Marginile
     tabelului" mai jos), ca antetul de coloană, titlul cardului, toolbar-ul și
     paginarea să pornească de pe aceeași margine (§5.4). */
  padding: 0 var(--sp-4);
  font-size: var(--fs-13);
  font-weight: var(--fw-strong);
  line-height: 18px;
  color: var(--ink-3);
  background: var(--surface);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  transition: color var(--dur-3) var(--ease-emph);
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}

/* Coloana sortată: textul urcă pe --ink-1 (antetul e deja 800) */
.data-table th[aria-sort='ascending'],
.data-table th[aria-sort='descending'] { color: var(--ink-1); font-weight: var(--fw-strong); }

.dt-sort-icon {
  font-size: var(--icon-16);
  margin-left: var(--sp-1);
  vertical-align: -3px;
  color: var(--ink-4);
  transition: color var(--dur-3) var(--ease-emph);
}

/* Săgeata coloanei sortate: --accent-onsoft (accentul plin e prea slab ca text pe alb) */
.data-table th[aria-sort='ascending'] .dt-sort-icon,
.data-table th[aria-sort='descending'] .dt-sort-icon { color: var(--accent-onsoft); }

/* ══════════ Rânduri și celule ══════════ */

.data-table tbody tr { background: var(--surface); transition: background-color var(--dur-3) var(--ease-emph); }

.data-table tbody td {
  height: 52px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  color: var(--ink-1);
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: 0; }

/* Textul curge doar unde se cere explicit (descrieri) */
.data-table td.wrap {
  white-space: normal;
  min-width: 200px;
  max-width: 320px;
}
/* Tabel îngust (≤ 3 coloane: dată · descriere · sumă) — 200 px n-ar încăpea în 356 */
.data-table--narrow td.wrap { min-width: 160px; }

.data-table tr.row-clickable { cursor: pointer; }
.data-table tr.is-selected { background: var(--accent-softer); }

.data-table tr.row-total { background: var(--subtle); }
/* Totalul se distinge prin suprafață + grosime, nu printr-o linie groasă */
.data-table tr.row-total td {
  border-top: 1px solid var(--line-1);
  font-weight: var(--fw-strong);
}

/* Rândul de total (Page.table footerRow → <tfoot><tr class="row-total">) are
   aceeași casetă ca rândurile din corp: fără ea, celulele primeau padding-ul
   implicit de 1 px și totalurile pluteau sub alte coloane. */
.data-table tfoot td {
  height: 52px;
  padding: 0 var(--sp-4);
  vertical-align: middle;
  color: var(--ink-1);
  white-space: nowrap;
}

.data-table tr.row-group { background: var(--subtle); }
.data-table tr.row-group td {
  height: 36px;
  font-size: var(--fs-13);
  font-weight: var(--fw-strong);
  line-height: 18px;
  color: var(--ink-3);
}

/* Numere: dreapta, unitatea stă în antet */
.data-table th.num,
.data-table td.num,
.data-table td.amount {
  text-align: right;
  font-weight: var(--fw-label);
  font-variant-numeric: tabular-nums;
}

.data-table .is-negative { color: var(--danger-ink); }
.data-table .is-positive { color: var(--success-ink); }

.data-table td.date {
  font-size: var(--fs-13);
  line-height: 18px;
  color: var(--ink-2);
}

.data-table td.code {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: 18px;
  font-weight: var(--fw-strong);
}

/* Celule compuse */
.cell-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-half);
  min-width: 0;
}
/* Un badge într-o celulă compusă nu se întinde pe toată lățimea coloanei */
.cell-stack > .badge { align-self: flex-start; }

.cell-main {
  font-size: var(--fs-14);
  font-weight: var(--fw-label);
  line-height: 20px;
}

.cell-sub {
  font-size: var(--fs-13);
  font-weight: var(--fw-body);
  line-height: 18px;
  color: var(--ink-3);
}

.cell-person {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

@media (hover: hover) {
  .data-table tbody tr:hover { background: var(--subtle); }
  .data-table tbody tr.is-selected:hover { background: var(--accent-softer); }
  .data-table th.sortable:hover { color: var(--ink-1); }
}

/* ══════════ Marginile tabelului (≥ 640) ══════════
   Între coloane 16 px; prima și ultima coloană primesc 20 px = padding-ul cardului,
   ca textul să pornească de pe marginea titlului și să se termine simetric în dreapta.
   Excepții: coloanele de control (bifa / comutatorul au lățimea lor), celulele
   editabile (input-ul umple celula), starea goală (td[colspan]) și varianta densă
   (rămâne 16 — trăiește în carduri înguste, §10.15). Pe telefon toate celulele au 16
   = padding-ul cardului acolo. */

@media (min-width: 640px) {
  .data-table:not(.data-table--compact) > * > tr > :first-child:not(.w-check):not(.w-toggle):not(.editable):not([colspan]) {
    padding-left: var(--sp-5);
  }
  .data-table:not(.data-table--compact) > * > tr > :last-child:not(.w-check):not(.w-toggle):not(.editable):not([colspan]) {
    padding-right: var(--sp-5);
  }
  .data-table:not(.data-table--compact) tr.row-group > td[colspan] { padding: 0 var(--sp-5); }
}

/* ══════════ Bara de selecție în masă ══════════ */

.bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-5);
  background: var(--accent-soft);
  color: var(--accent-onsoft);
  font-size: var(--fs-14);
  font-weight: var(--fw-strong);
  line-height: 20px;
}
.bulk-bar-count { white-space: nowrap; }
/* „Deselectează" stă la capătul barei; pe telefon rămâne doar iconița `close`. */
.bulk-bar .bulk-clear { margin-left: auto; }

/* ══════════ Acțiuni pe rând ══════════ */

.data-table td.actions {
  text-align: right;
  white-space: nowrap;
}

.data-table td.actions .dt-action-btn + .dt-action-btn { margin-left: var(--sp-1); }

/* Acțiunile de rând AU contur, dar la greutatea liniaturii tabelului, nu a unui
   buton secundar: `--line-2` e exact hairline-ul care desparte rândurile, deci cele
   ~75 de butoane ale unei pagini de 25 de rânduri se citesc ca parte din grila
   tabelului, nu ca 75 de obiecte noi. La hover conturul urcă pe `--line-3` — adică
   pe conturul real al oricărui `.btn-secondary` — și butonul devine, la atingere,
   identic cu restul sistemului. (§10.15) Plat: niciodată umbră. */
.dt-action-btn {
  width: var(--ctl-sm);
  height: var(--ctl-sm);
  padding: 0;
  border-radius: var(--r-2);
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink-3);
}

.dt-action-btn .material-icons { font-size: var(--icon-18); }

/* Pe un rând selectat sau la hover-ul rândului, fundalul alb al butonului ar tăia
   o gaură în tentă: butonul devine transparent și rămâne doar conturul. */
.data-table tbody tr.is-selected .dt-action-btn { background: transparent; }

@media (hover: hover) {
  .data-table tbody tr:hover .dt-action-btn { background: transparent; }
  .dt-action-btn:hover,
  .data-table tbody tr:hover .dt-action-btn:hover {
    background: var(--surface);
    border-color: var(--line-3);
    color: var(--ink-1);
  }
  .dt-action-btn.danger:hover,
  .dt-action-btn.is-danger:hover,
  .data-table tbody tr:hover .dt-action-btn.danger:hover,
  .data-table tbody tr:hover .dt-action-btn.is-danger:hover {
    background: var(--danger-soft);
    border-color: rgba(var(--danger-rgb), .28);
    color: var(--danger-ink);
  }
}

/* ══════════ Celule editabile (salarii, pontaj) ══════════ */

.data-table td.editable { padding: 0 var(--sp-2); }

.data-table td.editable .form-input {
  width: 100%;
  min-width: 96px;
}

.data-table td.editable .form-input.num { text-align: right; }

/* Inelul de focus rămâne în interiorul celulei (2 px, inset — nu sare layout-ul) */
.data-table td.editable .form-input:focus,
.data-table td.editable .form-input:focus-visible {
  position: relative;
  z-index: 1;
  border-color: var(--accent);
  box-shadow: var(--ring-inset);
}

/* ══════════ Variantă densă (modale, liste „top N") ══════════ */

/* Varianta densă trăiește în carduri înguste („top N" pe dashboard) și în modale:
   acolo o coloană tăiată costă mai mult decât 4 px de nealiniere cu titlul. */
.data-table--compact thead th {
  height: 36px;
  padding: 0 var(--sp-4);
}

.data-table--compact tbody td,
.data-table--compact tfoot td {
  height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-13);
  line-height: 18px;
}

/* ══════════ Stări goale / încărcare ══════════ */

/* Un singur td cu colspan ține .empty-state — fără înălțimea de rând */
.data-table tbody tr:not(.row-group) > td[colspan] {
  height: auto;
  padding: 0;
  white-space: normal;
  text-align: center;
}

.data-table tbody tr:not(.row-group) > td[colspan] .empty-state { width: 100%; }

.data-table td .skeleton { max-width: 160px; }

/* ══════════ Coloana-cheie lipită (o pun datatable.js / Tables.enhance ≤ 639) ══════════

   Pe telefon tabelul derulează orizontal, deci prima coloană de DATE (numele
   partenerului, descrierea) rămâne pe loc ca rândul să nu-și piardă identitatea.
   - `.data-table--sticky-first`: prima celulă a fiecărui rând (antet, corp, total).
   - `.data-table--sticky-2` (în plus): prima coloană e una de CONTROL (`.w-check`
     bifa de selecție, `.w-toggle` comutatorul „plătit") — atunci se îngheață
     perechea control + prima coloană de date, cu `left` = lățimea măsurată a
     controlului (`--sticky-lead`, publicată de Tables). Altfel singura coloană
     rămasă pe loc ar fi o bifă anonimă.
   - Coloana-cheie are lățime FIXĂ (160 px) și textul se rupe pe rânduri: un nume
     lung de partener nu mai lărgește coloana la 300 px (max-width pe o celulă de
     tabel e ignorat de browsere; `width` + `overflow-wrap:anywhere` nu). */

.data-table--sticky-first > * > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 1px 0 0 var(--line-2);
}

.data-table.data-table--sticky-first:not(.data-table--sticky-2) > * > tr > :first-child:not([colspan]),
.data-table.data-table--sticky-2 > * > tr > :first-child:not([colspan]) + * {
  width: 160px;
  min-width: 160px;   /* altfel, la lățimea minimă a tabelului (640), coloana ceda primă */
  max-width: 160px;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.data-table--sticky-2 > * > tr > :first-child:not([colspan]) { box-shadow: none; }

.data-table--sticky-2 > * > tr > :first-child:not([colspan]) + * {
  position: sticky;
  left: var(--sticky-lead, 44px);
  z-index: 2;
  background: inherit;
  box-shadow: 1px 0 0 var(--line-2);
}

/* ══════════ Toolbar-ul tabelului (§10.15) ══════════ */

.dt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line-2);
}

.dt-toolbar .search-input-wrapper { width: 240px; }
.dt-toolbar .select-wrap { width: 160px; }

.dt-toolbar-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ══════════ Paginare (§10.16) ══════════ */

.dt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line-2);
}

.dt-pagination-info {
  font-size: var(--fs-13);
  font-weight: var(--fw-label);
  line-height: 18px;
  color: var(--ink-3);
}

.dt-pagination-info b {
  color: var(--ink-1);
  font-weight: var(--fw-strong);
}

.dt-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.dt-pagination-controls .select-wrap { width: 84px; }

/* Butoanele ‹ › sunt .btn-secondary.btn-sm.btn-icon: pătrat de 40, raza 16 */
.dt-pagination-controls .btn-icon {
  width: var(--ctl-sm);
  height: var(--ctl-sm);
  padding: 0;
  border-radius: var(--r-2);
}

/* Pagina curentă („3 / 13") = pastila selectată: accent-soft + text apăsat */
.dt-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctl-sm);
  min-width: var(--ctl-sm);
  padding: 0 var(--sp-3);
  border-radius: var(--r-2);
  background: var(--accent-soft);
  color: var(--accent-onsoft);
  font-size: var(--fs-13);
  font-weight: var(--fw-strong);
  line-height: 18px;
  white-space: nowrap;
}

.dt-pagination-icon { font-size: var(--icon-18); }

/* ══════════ Mobil ≤ 639 ══════════ */

@media (max-width: 639px) {
  .data-table thead th,
  .data-table tbody td,
  .data-table tfoot td,
  .data-table--compact thead th,
  .data-table--compact tbody td,
  .data-table--compact tfoot td { padding: 0 var(--sp-4); }

  /* Pe mobil coloana isi pastreaza latimea: fara ea, celula se strange la
     latimea bifei (~18px) si se lipeste de coloana urmatoare. */
  .data-table .w-check { width: 44px; min-width: 44px; padding: 0; }

  .dt-toolbar { padding: var(--sp-3) var(--sp-4); }

  /* singurul loc unde select-urile se stivuiesc — pagina folosește sheet-ul */
  .dt-toolbar .search-input-wrapper {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .dt-toolbar .select-wrap { width: 100%; }

  .dt-pagination { padding: var(--sp-3) var(--sp-4); }

  .dt-pagination-controls .select-wrap { display: none; }

  /* Bara de selecție plutește la baza ecranului cât timp există selecție: după
     25 de rânduri derulate și bifate, acțiunea nu mai e sus, în afara ecranului.
     (`sticky` nu poate funcționa aici: `.card` are overflow:hidden.) Acțiunile se
     rup pe rânduri în loc să iasă din ecran; „Deselectează" devine iconiță. */
  .bulk-bar {
    position: fixed;
    left: var(--sp-2);
    right: var(--sp-2);
    bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
    z-index: var(--z-sticky);
    min-height: 56px;
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    /* Plutește peste rânduri fără umbră: conturul fin o desparte (ca la meniuri) */
    border: 1px solid rgba(var(--accent-rgb), .24);
    border-radius: var(--r-3);
  }
  .bulk-bar .bulk-clear { width: var(--ctl-sm); padding: 0; }
  .bulk-bar .bulk-clear-label { display: none; }
  /* Loc sub ultimul rând / paginare, ca bara să nu le acopere. */
  body:has(.bulk-bar:not([hidden])) .page { padding-bottom: calc(var(--sp-8) + 64px); }
}