/* ---- Antetul de pagină și bara de deasupra tabelului -----------------------
   Vocabularul pe care designul îl folosește pe FIECARE pagină de listă și pe
   care consola nu-l avea: titlul cu descrierea lui sub el, acțiunea principală
   în dreapta titlului, bara de filtre pe UN SINGUR rând, și cele două celule de
   tabel care lipseau (chipul cu inițiale și pastila de stare la mărimea din
   tabel).

   DE CE UN FIȘIER PROPRIU. `styles-components.css` era la 596 de rânduri și
   `styles-pages.css` la 511; plafonul e 600, iar regulile astea sunt un tier al
   lor — sunt ale PAGINII, nu ale unui card. Legătura din index.html stă imediat
   după `styles-pages.css`, adică exact acolo unde se termină vocabularul de
   tabele pe care îl continuă, și înaintea lui `styles-parity.css`, care adaugă
   peste amândouă. Niciun nume de clasă de aici nu există în celelalte foi, deci
   poziția nu schimbă nimic din ce se desena înainte; e aleasă ca să se citească
   în ordinea în care se construiește pagina.

   Sursa e prototipul (`r2/apps/external/scanexpert-Centrala-2/index.html` din
   repo-ul de design), tradus prin `design-kit/dialect.json`: `--input-border` →
   `--se-color-border-default`, `--text-heading` → `--se-color-text-title`,
   `--text-body` → `--se-color-text-description`, `--accent-pink-dark` →
   `--se-color-secondary-60`, `--accent-pink-soft` → `--se-color-secondary-20`.
   Niciun hex nu se copiază. */

/* ---- Antetul paginii ------------------------------------------------------ */
/* Titlul și, sub el, o propoziție care spune ce ține pagina. Rândul poartă
   acțiunea principală în dreapta (`has-action`), aliniată la TITLU și nu la
   mijlocul blocului titlu+descriere — de-aia `align-items: flex-start`. */
.page-title-row {
  display: flex;
  align-items: center;
  gap: var(--se-space-12);
  margin-bottom: var(--se-space-16);
  flex: 0 0 auto;
}
/* Titlul și descrierea stau lipite: marginea de sub rând dispare când rândul e
   urmat direct de descriere sau o conține. O regulă, nu stiluri per pagină. */
.page-title-row:has(+ .page-sub),
.page-title-row:has(.page-sub) {
  margin-bottom: 0;
}
.page-title-row.has-action {
  justify-content: space-between;
  align-items: flex-start;
  /* 48px: `space-between` singur nu garantează atât, fiindcă o descriere fără
     lățime maximă se întinde până la buton. */
  gap: calc(var(--se-space-24) * 2);
}
.page-sub {
  color: var(--se-color-text-description);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  margin: 0 0 calc(var(--se-space-16) * 2);
  flex: 0 0 auto;
  max-width: 92ch;
}
/* Butonul principal din antet nu se lasă strivit de un titlu lung. */
.page-title-row.has-action > .btn-primary,
.page-title-row.has-action > .btn-secondary {
  flex: 0 0 auto;
}

/* ---- Bara de deasupra tabelului ------------------------------------------- */
/* UN SINGUR rând: căutarea, filtrele, pastila de dată și eventualul comutator
   de vedere. Consola avea `.filter-row` (space-between, două capete); designul
   le pune pe toate în șir, de la stânga, iar căutarea ia locul rămas. */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--se-space-16);
  flex: 0 0 auto;
}
/* Împinge la dreapta ce vine după el (comutatorul de vedere, Export). */
.table-toolbar .toolbar-end {
  margin-left: auto;
}
.table-search {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  padding: 0 var(--se-space-16);
  min-height: var(--se-size-control);
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.table-search .ph {
  color: var(--se-color-text-description);
}
.table-search input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  min-width: 0;
  padding: 0;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-title);
}
.table-search input::placeholder {
  color: var(--se-color-text-placeholder);
}
/* Căutarea care ia tot rândul: pe Istoric și Programări designul îi dă `flex:1`
   fără plafon, fiindcă bara are patru filtre după ea și nu mai rămâne loc gol. */
.table-search.grow {
  max-width: none;
}

/* Pastila de PERIOADĂ din bară. Are lățime proprie fiindcă textul ei se schimbă
   („Toate perioadele" → „01.08.2026 – 31.08.2026") și un câmp care se lungește cu
   propriul text ar muta restul barei la fiecare alegere. 240px e lățimea
   prototipului (`listaAsteptareDataField`). */
.table-toolbar .cal-field-period {
  width: 240px;
  flex: 0 0 auto;
}

/* Gazda unui `<select>` din bara de filtre. `ui-kit/se-select.js` o recunoaște
   după nume (`inFilter`) și îi ia cromul cu `.has-se-select`, deci regula asta e
   forma NEÎMBUNĂTĂȚITĂ — ce se vede o clipă înainte ca scriptul să pornească, și
   ce rămâne dacă un `<select>` cere `data-se-select="off"`. */
.filter-select {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  padding: 0 var(--se-space-16);
  min-height: var(--se-size-control);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.filter-select > select {
  border: none;
  outline: none;
  background: none;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}

/* Stările câmpurilor, după foaia de componente Input: roz la mouse, navy gros la
   tastatură. Distincția o face `data-input-mode` pe <html>
   (`ui-kit/input-mode.js`) — un clic de mouse n-are voie să aprindă inelul gros,
   care e pentru cine navighează cu Tab. */
.table-search:hover,
.filter-select:hover {
  border-color: var(--se-color-secondary-60);
}
.table-search:focus-within,
.filter-select:focus-within {
  outline: none;
  border-color: var(--se-color-primary-60);
  box-shadow: inset 0 0 0 1px var(--se-color-primary-60);
}
html[data-input-mode="mouse"] .table-search:focus-within,
html[data-input-mode="mouse"] .filter-select:focus-within {
  border-color: var(--se-color-secondary-60);
  box-shadow: 0 0 4px 2px rgba(202, 56, 93, 0.1); /* strălucirea lui color.secondary.60; umbrele n-au token */
}

/* ---- Celulele de tabel pe care designul le cere și consola nu le avea ------ */
/* Chipul cu inițiale de lângă numele unui om. Apare în ORICE tabel care poartă
   un nume de pacient — pacienți, listă de așteptare, programări — fiindcă asta
   e coloana pe care ochiul o caută prima. */
.avatar-soft {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--se-color-secondary-20);
  color: var(--se-color-secondary-60);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-bodysb-weight);
  flex-shrink: 0;
}
.patient-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.patient-cell .cell-primary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PASTILA DE STARE DIN TABEL ARE MĂRIMEA EI, ȘI ASTA NU E O A DOUA PASTILĂ.
   Prototipul are două componente și o spune în atâtea cuvinte: `.badge` pentru
   restul aplicației și `.tag` pentru tabele, la 14px. Consola are o singură
   pastilă — `.badge` (styles.css) — iar a introduce `.tag` alături ar fi două
   nume pentru un lucru. Deci pastila își ia mărimea din CONTEXT: 12px oriunde
   altundeva, 14px într-un rând de tabel, exact ca în design. */
.data-table .badge {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  font-weight: var(--se-type-captionreg-weight);
  padding: 2px 9px;
}

/* Cele trei puncte imediat după coloanele de identitate — `col-kebab` din
   styles-pages.css spune de ce. `-mid` e doar numele pe care îl poartă capul în
   design când nu stă la capătul rândului; se scrie ca să se citească la fel în
   amândouă console. */
.data-table .col-kebab-mid {
  width: 1%;
}

/* Iconița „i" de lângă un cap de coloană. Caseta și așezarea sunt ale kitului
   (`ui-kit/se-info-hint.{css,js}`); aici stă doar ce nu poate ști el: consola
   desenează simboluri SVG, nu glife de font, deci iconița se măsoară în lățime
   și înălțime (regula `.ph` din styles.css) și nu în `font-size`. */
.info-hint .ph.th-info {
  width: var(--se-type-bodyreg-size);
  height: var(--se-type-bodyreg-size);
  vertical-align: -2px;
}
/* Capul de coloană nu-și rupe cuvintele; iconița stă în șir cu ele. */
.data-table th .info-hint {
  margin-left: var(--se-space-4);
  vertical-align: middle;
}

/* ---- Coloana care spune că datele nu există ------------------------------- */
/* O propoziție sub tabel, în vocea paginii: ce coloană a designului lipsește și
   de ce. Se folosește oriunde o coloană a prototipului n-are sursă în baza pe
   care recepția o citește — nu se desenează coloana goală, se scrie motivul. */
.table-note {
  margin: var(--se-space-12) 0 0;
  color: var(--se-color-text-description);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}

/* ---- Lista E pagina; formularul stă în spatele butonului ------------------- */

/* `[hidden]` SINGUR NU ASCUNDE UN CARD, și ăsta era defectul, nu o alegere.
   `.card-outer` (styles-components.css) pune `display: flex`, care bate valoarea
   pe care browserul o dă atributului — exact capcana pe care `.auth-step[hidden]`
   o documentează de mult în styles-auth.css. Cele două formulare care purtau deja
   atributul („Adaugă pe listă" de pe Lista de așteptare, iar acum și „Programare
   nouă" și „Adaugă medic") se desenau oricum, permanent sub listă, împingând ziua
   clinicii dincolo de marginea ecranului.

   Regula stă AICI și nu lângă `.card-outer` fiindcă `styles-components.css` era la
   596 de rânduri, iar plafonul e 600. Vine după el în cascadă, deci câștigă. */
.card-outer[hidden] {
  display: none;
}

/* Și `.list` pune `display: flex`, deci `[hidden]` nu-l ascunde nici pe el: cele
   două vederi ale zilei (tabel / calendar) se ascund una pe alta prin atribut, iar
   fără regula asta tabelul rămânea desenat sub grilă. */
.list[hidden] {
  display: none;
}

/* UN CARD NU SE STRÂNGE SUB CONȚINUTUL LUI, ȘI ASTA E O CORECTURĂ, NU O PREFERINȚĂ.
   `.page.active` e o coloană flexibilă care DERULEAZĂ pe verticală, iar cardurile
   din ea moșteneau `flex-shrink: 1`: cu trei carduri pe o pagină, cel cu tabelul se
   strângea la înălțimea antetului și rândurile dispăreau sub el deși erau desenate,
   iar cardul de comutatoare din Setări ajunsese 34px peste 161px de conținut.
   Pagina are unde să deruleze; cardul n-are unde să se strângă.

   `.fill` e exceptat fiindcă el cere anume să crească și să se împartă cu vecinii
   (Panou principal, Linii & Cozi), iar regula asta ar bloca exact ce vrea el. */
.page.active > .card-outer:not(.fill) {
  flex-shrink: 0;
}

/* Un tabel derulează pe ORIZONTALĂ în `.table-scroll`; pe verticală derulează
   pagina, ca în prototip (`.page.table-page`: `height:auto; min-height:100%`). */
.list:has(> .table-scroll) {
  overflow-y: visible;
}

/* Rândul de comutator din Setări: numele și explicația la stânga, comutatorul la
   dreapta, cu o linie subțire între rânduri (prototipul, `.toggle-row`). */
.toggle-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-16);
  padding: var(--se-space-16) 0;
  border-bottom: 1px solid var(--se-color-border-default);
}
.toggle-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.toggle-name {
  color: var(--se-color-text-title);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}
.toggle-note {
  color: var(--se-color-text-description);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  margin-top: 2px;
}

/* ---- Programări: ziua ca grilă pe ore ------------------------------------- */
/* A doua vedere a aceleiași zile („Calendar | Tabel"). Forma e a prototipului
   (`.day-grid`, scanexpert-Centrala-2): două coloane — intervalul și ziua — un
   rând per oră, programările ca niște cartonașe în celula orei lor. NU e o grilă
   pe aparate: coloana pe care recepția n-o poate umple nu există în vederea asta.
   Dialectul e tradus, ca peste tot: `--card-inner-bg` → `--se-color-bg-console`,
   `--card-inner-border` → `--se-color-border-default`, `--amber-bg` →
   `--se-color-badge-yellow-100`. */
.prog-cal-grid {
  display: grid;
  grid-template-columns: 112px 1fr;
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  overflow: hidden;
  background: var(--se-color-bg-surface);
}
.prog-cal-head {
  padding: var(--se-space-12) var(--se-space-16);
  background: var(--se-color-bg-console);
  border-bottom: 1px solid var(--se-color-border-default);
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}
.prog-cal-head + .prog-cal-head {
  border-left: 1px solid var(--se-color-border-default);
}
.prog-cal-head-sub {
  color: var(--se-color-text-description);
  font-weight: var(--se-type-bodyreg-weight);
}
.prog-cal-hour {
  padding: var(--se-space-12) var(--se-space-16);
  background: var(--se-color-bg-console);
  border-bottom: 1px solid var(--se-color-border-default);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-title);
  font-variant-numeric: tabular-nums;
}
.prog-cal-cell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-space-8);
  align-items: stretch;
  padding: var(--se-space-8);
  min-height: 70px;
  border-left: 1px solid var(--se-color-border-default);
  border-bottom: 1px solid var(--se-color-border-default);
}
/* Ultimul rând nu-și mai desenează bordura de jos: ar cădea peste bordura grilei
   și ar ieși o linie de doi pixeli. Se numără de la coadă — penultimul copil e
   ora, ultimul e celula ei. */
.prog-cal-grid > :nth-last-child(2),
.prog-cal-grid > :last-child {
  border-bottom: none;
}
/* Ora curentă, ca să se vadă dintr-o privire unde e ziua acum. Se aprinde DOAR pe
   ziua de azi — vezi renderCalendar. */
.prog-cal-hour.is-now {
  background: var(--se-color-badge-yellow-100);
  font-weight: var(--se-type-bodysb-weight);
}
.prog-cal-cell.is-now {
  background: var(--se-color-status-warning-bg);
}
/* Ora în care nu e nimic. Se scrie, nu se lasă goală: o coloană de celule albe nu
   spune dacă grila e goală sau stricată — aceeași alegere ca vederea Zi din back
   office (`.ap-slot.slot-liber`). */
.prog-cal-free {
  align-self: center;
  color: var(--se-color-text-placeholder);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}

/* Propoziția „ziua e goală" stă DEASUPRA scheletului, nu în locul lui. */
.prog-cal-empty {
  margin: 0 0 var(--se-space-12);
}

/* Pe o perioadă mai lungă, rândul „calendarul arată o singură zi" stă tot deasupra
   grilei — `.table-note` e scrisă pentru SUB un tabel și își poartă marginea sus. */
.prog-cal-period {
  margin: 0 0 var(--se-space-12);
}

.prog-cal-appt {
  box-sizing: border-box;
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--se-space-4);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-left: 4px solid var(--se-color-primary-60);
  border-radius: var(--se-radius-md);
  padding: var(--se-space-8);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.prog-cal-appt:hover,
.prog-cal-appt:focus-visible {
  box-shadow: var(--shadow-float);
  outline: none;
}
/* O programare anulată RĂMÂNE pe zi — „au anulat" e răspunsul la o întrebare pe
   care cineva o va pune despre intervalul ăla (BR-09) — dar nu mai cere atenție. */
.prog-cal-appt.is-cancelled {
  border-left-color: var(--se-color-badge-red-600);
  opacity: 0.72;
}
.prog-cal-title {
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
  overflow-wrap: anywhere;
}
.prog-cal-meta {
  display: flex;
  align-items: center;
  gap: var(--se-space-4);
  min-width: 0;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-title);
}
.prog-cal-meta .ph {
  width: var(--se-type-bodyreg-size);
  height: var(--se-type-bodyreg-size);
  color: var(--se-color-text-description);
  flex-shrink: 0;
}
.prog-cal-name {
  overflow-wrap: anywhere;
}
.prog-cal-status {
  margin-left: auto;
  flex-shrink: 0;
}