/* ScanExpert backoffice — vocabularul de liste și date al prototipului.
 *
 * A doua jumătate a ui.css (despărțite de plafonul de 600 de linii): tot ce
 * desenează o listă — bara de unelte, tabelul, etichetele, paginarea, meniul
 * de rând, confirmarea, taburile de detaliu, cardurile KPI și panourile.
 * Aceleași reguli de autorat ca în antetul ui.css: numai tokeni canonici din
 * tokens.css, traduși prin design-kit/dialect.json; escape-urile documentate
 * (--ui-shadow-*, --ui-overlay) sunt declarate acolo. */

/* ---- bara de unelte a listelor -------------------------------------------------- */

.table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--se-space-16);
}

.table-search,
.filter-select,
.date-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-14);
  min-height: 40px;
}

.table-search {
  flex: 1;
  max-width: 320px;
}

/* A list whose search IS the page's main affordance, rather than one filter among
 * several, draws a wider pill — Programări and Lista de așteptare are both that
 * shape in the design, Consumabile is not. A modifier here rather than a per-page
 * copy of the whole pill: the width is the only thing that differs. */
.table-search.is-wide {
  max-width: 640px;
}

.table-search .ph,
.date-select .ph {
  color: var(--se-color-text-description);
  font-size: 18px;
}

.table-search input,
.date-select input,
.filter-select select {
  border: none;
  outline: none;
  background: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;
  box-shadow: none;
  color: var(--se-color-text-title);
}

.table-search input {
  font-size: var(--se-type-bodyreg-size);
  flex: 1;
}

.filter-select select {
  font-size: var(--se-type-captionmed-size);
  font-weight: var(--se-type-captionmed-weight);
}

.date-select input {
  font-size: var(--se-type-bodyreg-size);
  width: 150px;
}

/* PASTILA DE PERIOADĂ ÎNTR-O BARĂ DE UNELTE E O PASTILĂ, NU UN CÂMP PE TOT RÂNDUL.
 *
 * `.cal-field` din kitul comun e `width: 100%` fiindcă acolo unde a fost scrisă —
 * într-un formular, sub o etichetă — asta e forma corectă. Într-un rând flex, un
 * element de 100% își cere singur tot rândul: bara se rupe și perioada cade sub
 * căutare și filtre, pe toată lățimea. Așa arăta Panoul, Programările și Rapoartele.
 *
 * Regula se scrie AICI, la (0,2,0), nu în kit: kitul e împărțit cu recepția, iar
 * lățimea unui câmp într-o bară de unelte e o hotărâre a consolei care desenează
 * bara. Cele trei copii per pagină (`.cons-period`, `.pac-period`, `.rap-period`)
 * dispar odată cu ea. */
.table-toolbar .cal-field {
  width: auto;
  min-width: 230px;
  flex: 0 0 auto;
}

/* A date filter that is not obvious from its own value says what it filters, inside
 * the pill. „Data biletului" and „Data vizitei" are both that case: the control is a
 * bare date box, and a label stacked above it was what put the toolbar's own submit
 * button 12px out of line. */
.date-select .field-name {
  font-size: var(--se-type-captionmed-size);
  font-weight: var(--se-type-captionmed-weight);
  color: var(--se-color-text-description);
  white-space: nowrap;
}

/* ---- tabelul de listă ------------------------------------------------------------ */

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--se-type-bodyreg-size);
}

.data-table thead th {
  text-align: left;
  font-size: var(--se-type-bodyreg-size);
  font-weight: 400;
  color: var(--se-color-text-description);
  /* The 2026-08 Figma correction: the header row is a grey band, not bare
   * text — background plus symmetric padding replaced the old 0-top shape. */
  background: var(--se-color-bg-console);
  /* Înălțimea rândului, nu padding-ul, e ce ține capetele la fel peste tot: un
   * cap cu iconiță „i" sau cu săgeți de sortare e mai înalt decât unul cu text
   * simplu, iar cu padding singur cele două tabele de pe același ecran ieșeau
   * diferite. 44px = designul. */
  height: 44px;
  padding: 0 var(--se-space-12);
  vertical-align: middle;
  border-bottom: 1px solid var(--se-color-border-default);
  white-space: nowrap;
}

.data-table th.col-actions,
.data-table td.col-actions {
  text-align: right;
}

/* O coloană de CIFRE se citește la dreapta, cu cifre de aceeași lățime, ca ordinele
 * de mărime să se alinieze pe verticală. Regula stătea copiată în patru foi de stil
 * de felie — `.ach-num`, `.wl-num`, `.cat-num`, `.dash-num` — patru nume pentru
 * exact aceleași două proprietăți. E a tabelului, deci stă aici o dată. */
.data-table th.col-num,
.data-table td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- capetele care chiar sortează ------------------------------------------------
 * Săgeata de lângă un cap de coloană nu sorta nimic — era decor. Acum orice coloană
 * marcată `sortable` chiar sortează (se-tables.js), și trebuie să se și simtă
 * apăsabilă: fără cursor de mână și fără răspuns la trecerea cu mausul arată tot ca
 * o podoabă, iar omul nici nu încearcă. Prototipul: index.html L726-730. */

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

.data-table th.sortable:hover {
  color: var(--se-color-text-title);
}

.data-table th.sortable:not(.sort-active):hover .sort-ic-dual .ph {
  color: var(--se-color-text-title);
}

.data-table th.sort-active {
  color: var(--se-color-text-title);
  font-weight: var(--se-type-bodymed-weight);
}

/* Un `<th>` nu e buton, deci cu tastatura nu s-ar ajunge la el deloc. se-tables.js îl
 * face oprire de Tab; inelul se desenează aici, altfel oprirea e invizibilă. Offset
 * negativ fiindcă un cap de tabel n-are loc în afara benzii lui. */
.data-table th.sortable:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
}

/* Săgeata dublă: amândouă stinse cât coloana nu e cea sortată, iar pe cea activă se
 * aprinde doar vârful care arată direcția — așa se citește dintr-o privire și CARE
 * coloană sortează, și încotro. */
.sort-ic-dual {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: var(--se-space-4);
}

/* Cele două săgeți sunt un singur semn, nu text: 9px e mărimea din prototip
 * (.sort-ic-dual .ph), iar scala tipografică începe la 12px (micro) — o treaptă
 * la care perechea nu mai încape în înălțimea rândului. Valoarea vine din
 * design, nu e inventată aici; dacă scala primește vreodată o treaptă de glifă,
 * locul ăsta trece pe ea. */
.sort-ic-dual .ph {
  font-size: 9px; /* lint-tokens-ignore */
  height: 9px;
  line-height: 9px; /* lint-tokens-ignore */
  color: var(--se-color-text-description);
}

.sort-ic-dual.dir-asc .ph-caret-down,
.sort-ic-dual.dir-desc .ph-caret-up {
  color: var(--se-color-text-placeholder);
}

.sort-ic-dual.dir-asc .ph-caret-up,
.sort-ic-dual.dir-desc .ph-caret-down {
  color: var(--se-color-primary-60);
}

/* Fundalul la trecerea cu mausul apare DOAR pe rândurile care chiar se deschid la
 * clic. Pe un tabel doar de citit — Scanări spune singură că de acolo nu se editează
 * nimic — rândul care se aprinde pare apăsabil, iar omul încearcă să dea clic
 * degeaba. Prototipul: index.html L535-537. */
.data-table tbody tr.clickable:hover td {
  background: var(--se-color-bg-console);
}

.data-table tbody td {
  /* 58px, ca la design. Înălțimea rândului stă pe `height`, nu pe padding, ca un
   * rând cu pastilă sau cu avatar să iasă la fel de înalt ca unul cu text simplu —
   * altfel două tabele de pe același ecran au rânduri de înălțimi diferite. */
  height: 58px;
  padding: 0 var(--se-space-12);
  border-bottom: 1px solid var(--se-color-border-default);
  vertical-align: middle;
  /* Same correction: row text reads in the title colour at regular weight. */
  color: var(--se-color-text-title);
  font-weight: 400;
}

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

.data-table tbody tr.clickable {
  cursor: pointer;
}

.cell-primary {
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}

.cell-sub {
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-description);
  margin-top: 2px;
}

/* A doua linie a unei celule stă SUB prima, nu după ea: „Sucursală" scrie orașul sub
 * numele sediului. Regula stătea copiată în waitlist.css și investigations.css, câte
 * o dată pentru fiecare tabel al lor; e a vocabularului, deci stă aici o singură dată.
 * Un `<span>` fără ea rămâne în linie și `margin-top` nu face nimic pe el. */
.data-table td .cell-sub {
  display: block;
}

.col-kebab {
  width: 36px;
}

.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);
  font-weight: 600;
  flex-shrink: 0;
}

.patient-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- etichete de stare ------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--se-type-captionmed-size);
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--se-radius-pill);
  white-space: nowrap;
}

.tag-cas {
  background: var(--se-color-badge-green-100);
  color: var(--se-color-badge-green-600);
}

.tag-monitor {
  background: var(--se-color-badge-yellow-100);
  color: var(--se-color-badge-yellow-600);
}

.tag-cash {
  background: var(--se-color-bg-console);
  color: var(--se-color-text-description);
  border: 1px solid var(--se-color-border-default);
}

.tag-alert {
  background: var(--se-color-badge-red-100);
  color: var(--se-color-badge-red-600);
}

.status-pill {
  font-size: var(--se-type-captionmed-size);
  font-weight: var(--se-type-captionmed-weight);
  padding: 2px var(--se-space-8);
  border-radius: var(--se-radius-pill);
  flex-shrink: 0;
}

.status-pill.coded {
  background: var(--se-color-badge-green-100);
  color: var(--se-color-badge-green-600);
}

.status-pill.new {
  background: var(--se-color-secondary-20);
  color: var(--se-color-secondary-60);
}

/* ---- subsolul listei ------------------------------------------------------------------
 * Paginarea nu mai e aici: `.pagination`, `.pagination-numbered`, `.page-num` și
 * `.page-nav` sunt în kitul comun (`/assets/ui-kit/se-pagination.css`,
 * r3/packages/scanexpert/ui), fiindcă designul le-a făcut identice în cele două
 * console. O a doua copie aici ar fi exact desincronizarea pe care mutarea o închide. */

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-12);
  flex-wrap: wrap;
  margin-top: var(--se-space-16);
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-description);
}

/* Marginea de sus a paginării e pentru containerul care stă singur sub tabel (așa o
 * scrie kitul comun); în subsol o pune deja `.table-footer`, deci aici s-ar aduna de
 * două ori. Se scrie pe `.table-footer .pagination` — (0,2,0) peste (0,1,0) — ca să
 * câștige pe specificitate, nu pe ordinea fișierelor din layout. */
.table-footer .pagination {
  margin-top: 0;
}

/* Un subsol fără paginare (tabelul încape pe o pagină) rămâne cu textul lipit stânga,
 * fiindcă `space-between` n-are al doilea capăt: containerul gol păstrează locul. */
.table-footer .pagination:empty {
  display: none;
}

/* ---- meniul de rând (kebab) + confirmarea ----------------------------------------------
 * `.row-menu` / `.row-menu-item` sunt ale acestei console și rămân aici: prototipul
 * Centralei nu le are deloc, deci nu sunt componenta convergentă. Meniul de acțiuni pe
 * care designul l-a făcut identic în amândouă e `.action-menu*` + `.row-actions-btn`, și
 * el stă în kitul comun (`/assets/ui-kit/se-row-menu.css`). */

.row-menu {
  position: fixed;
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  box-shadow: var(--ui-shadow-float);
  padding: 6px;
  z-index: 30;
  min-width: 180px;
}

.row-menu.hidden {
  display: none;
}

.row-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--se-space-8);
  border: none;
  background: none;
  padding: 10px var(--se-space-12);
  border-radius: var(--se-radius-md);
  color: var(--se-color-text-title);
  font-size: var(--se-type-bodyreg-size);
  font-weight: 400;
  text-align: left;
}

/* Griul rămâne: `.row-menu` e alb, deci starea se vede. Se adaugă culoarea. */
.row-menu-item:hover:not(:disabled) {
  background: var(--se-color-bg-console);
  border: none;
  color: var(--se-color-text-title);
}

.row-menu-item .ph {
  font-size: 18px;
  color: var(--se-color-primary-60);
}

.row-menu-item.danger {
  color: var(--se-color-badge-red-600);
}

.row-menu-item.danger .ph {
  color: var(--se-color-badge-red-600);
}

/* Hover-ul de mai sus mută numai fundalul, deci roșul rândului venea din regula
 * de deasupra lui. Se rescrie aici, pe tenta lui de badge — aceeași pereche pe
 * care o poartă `.tag-alert`, deci roșul nu-și schimbă nuanța sub cursor: 5.13:1. */
.row-menu-item.danger:hover:not(:disabled) {
  background: var(--se-color-badge-red-100);
  color: var(--se-color-badge-red-600);
}

.row-menu-item.danger:hover:not(:disabled) .ph {
  color: var(--se-color-badge-red-600);
}

.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ui-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

.confirm-modal-overlay.hidden {
  display: none;
}

.confirm-modal-card {
  /* Positioned, so a close button in the corner is in the CARD'''s corner.
   * `.confirm-close` is absolute, and until this line only `.confirm-ask` was a
   * containing block for it — every other window that grew one (Adaugă în listă,
   * Adaugă utilizator) had its „×" fly to the top-right of the viewport. */
  position: relative;
  width: 380px;
  background: var(--se-color-bg-surface);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-24);
  box-shadow: var(--ui-shadow-float);
}

.confirm-modal-card.wide {
  width: 440px;
}

.confirm-modal-card h3 {
  font-size: var(--se-type-bodylgmed-size);
  font-weight: 500;
  color: var(--se-color-text-title);
  margin: 0 0 var(--se-space-8);
}

.confirm-modal-card p {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-description);
  margin: 0 0 var(--se-space-20);
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--se-space-12);
}

/* ---- fereastra de ÎNTREBARE (`.confirm-ask`) --------------------------------------------
 * Modificator, nu o a doua bază: `.confirm-modal-card` desenează și formularul de program
 * din Setări (settings/admin.html, `schedule-form`), care nu e o acțiune ireversibilă și
 * n-are ce căuta nici cu ilustrație, nici cu butoane egale. Designul își numește singur
 * modificatorul așa (index.html L305-325), și tot el spune de ce: „Ferestrele care conțin
 * un formular rămân cum erau — acolo textul aliniat la stânga se citește mai bine."
 *
 * Ce adaugă: închiderea în colț, ilustrația în cerc, textul centrat și, jos, despărțite
 * printr-o linie, două butoane de lățime EGALĂ. Le deschide `se-confirm.js`, din
 * `htmx:confirm` — până la el fiecare acțiune distructivă scotea popup-ul sistemului de
 * operare, cu alt font, alte butoane și un titlu care spunea numele gazdei. */

.confirm-ask {
  text-align: center;
  /* Bara de butoane își aduce propriul padding și se lipește de marginea de jos a
   * cardului, ca linia despărțitoare să meargă dintr-un capăt în celălalt. */
  padding-bottom: 0;
}

/* Un `<button>` gol e pictat navy-plin de regula generică din ui-forms.css, al cărei
 * selector de hover e (0,2,1). Perechea fundal+culoare se scrie aici întreagă, la
 * (0,3,0), altfel „×" dispare pe navy exact când cursorul ajunge pe el. */
.confirm-close {
  position: absolute;
  top: var(--se-space-8);
  right: var(--se-space-8);
  width: var(--se-size-hit-target);
  height: var(--se-size-hit-target);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--se-color-text-title);
  padding: 0;
}

.confirm-close .ph {
  font-size: var(--se-size-icon-nav);
}

.confirm-close:hover:not(:disabled) {
  background: var(--se-color-bg-console);
  color: var(--se-color-text-title);
}

.confirm-close:active:not(:disabled) {
  background: var(--se-color-border-default);
  color: var(--se-color-text-title);
}

.confirm-close:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

/* Cercul cu glifa. 96/48 sunt mărimile din design; nu sunt trepte ale scalei de
 * spațiere, fiindcă nu spațiază nimic — sunt dimensiunile unui singur semn desenat. */
.confirm-ill {
  width: 96px;
  height: 96px;
  margin: var(--se-space-8) auto var(--se-space-20);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--se-color-secondary-20);
  color: var(--se-color-secondary-60);
}

.confirm-ill .ph {
  font-size: 48px;
}

.confirm-ask h3 {
  font-size: var(--se-type-titlelgsb-size);
  line-height: var(--se-type-titlelgsb-line);
  font-weight: var(--se-type-titlelgsb-weight);
  margin: 0 0 var(--se-space-8);
}

.confirm-ask p {
  margin: 0 0 var(--se-space-24);
}

/* Marginea negativă scoate bara la marginile cardului, ca linia de sus să fie o
 * despărțire adevărată și nu un chenar plutind la 24px de pereți. */
.confirm-ask .confirm-modal-actions {
  margin: 0 calc(-1 * var(--se-space-24));
  padding: var(--se-space-16) var(--se-space-24);
  border-top: 1px solid var(--se-color-border-default);
  gap: var(--se-space-16);
}

/* Egale, și de aceeași lățime oricât de lung ar fi numele acțiunii: designul le dă
 * amândurora aceeași greutate anume, ca „Anulează" să nu fie opțiunea mică. */
.confirm-ask .confirm-modal-actions button {
  flex: 1 1 0;
  min-width: 0;
}