/* ---- Istoric -------------------------------------------------------------- */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-12);
  flex-wrap: wrap;
  margin-bottom: var(--se-space-14);
  flex: 0 0 auto;
}
.segmented-tabs {
  display: flex;
  gap: 4px;
  background: var(--se-color-bg-console);
  border: 1px solid var(--se-color-border-default);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.segmented-tab {
  background: none;
  border: none;
  padding: 7px var(--se-space-14);
  border-radius: 7px;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-muted);
}
.segmented-tab.active {
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-title);
  font-weight: var(--se-type-bodysb-weight);
  box-shadow: var(--shadow-card);
}
/* Un tablist adevărat are UN singur opritor de Tab și se umblă între file cu
   săgețile (linii-tabs.js), deci conturul de focalizare e singurul lucru care
   spune unde a ajuns cineva care nu folosește mouse-ul. Pe panou la fel: e
   `role="tabpanel"` cu `tabindex="0"`, adică Tab din bandă intră în el. */
.segmented-tab:focus-visible,
[role="tabpanel"]:focus-visible {
  outline: 2px solid var(--se-color-focus-ring);
  outline-offset: 2px;
}

/* ---- Setări: ce e citit, și ce e scris ------------------------------------
   O valoare CONFIGURATĂ PE SERVER nu mai e o casetă. Se desenează ca o valoare,
   nu ca un câmp dezactivat: un chenar gri fără un titlu care spune de ce se
   citește drept câmp stricat, iar operatorul cheamă pe cineva să-l „repare".
   Eticheta ei nu e un <label> — n-are ce eticheta — deci `.setari-label` repetă
   exact ce spune `.setari-field label` în styles-components.css.
   Fișierul ăsta, nu acela: styles-components.css e la 597 de rânduri, plafonul e
   600, iar clasele astea sunt noi și nu se ciocnesc cu nimic desenat până aici. */
.setari-label {
  display: block;
  color: var(--se-color-text-muted);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  margin-bottom: 5px;
}
.setari-value {
  margin: 0;
  padding: 0 var(--se-space-16);
  min-height: var(--se-size-control);
  display: flex;
  align-items: center;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-console);
  color: var(--se-color-text-title);
  overflow-wrap: anywhere;
}
.setari-group-title {
  margin: var(--se-space-24) 0 var(--se-space-8);
  font-size: var(--se-type-bodysb-size);
  line-height: var(--se-type-bodysb-line);
  font-weight: var(--se-type-bodysb-weight);
  color: var(--se-color-text-title);
}
.tab-count {
  color: var(--se-color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Rândul de filtru nu-și mai desenează pastila: de când data se alege cu componenta
   designului (ui-kit/se-dateday.js), chenarul e al lui `.cal-field`, iar unul aici ar fi
   al doilea chenar în jurul primului. Rămâne doar așezarea — pastila și butonul de
   ștergere pe același rând. */
.date-filter {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  min-height: 40px;
}
.date-filter .ph {
  color: var(--se-color-text-muted);
}
/* Paginarea e a kitului comun (ui-kit/se-pagination.css) — aici rămâne doar ce
 * kitul nu poate ști: containerul stă într-o coloană flexibilă a paginii și n-are
 * voie să se întindă peste lista de deasupra lui. */
.pagination {
  flex: 0 0 auto;
}
.status-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--se-space-8);
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  font-weight: var(--se-type-micromed-weight);
  padding: 0 9px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-badge-green-100);
  color: var(--se-color-badge-green-600);
}

/* ---- Fișa completă (pagină) ----------------------------------------------- */
#page-pacient-detail > .card-outer {
  flex: 0 0 auto;
}
.patient-detail-header {
  display: flex;
  align-items: center;
  gap: var(--se-space-14);
}
.patient-detail-avatar {
  width: 56px;
  height: 56px;
  font-size: var(--se-type-titlelgsb-size);
}
.patient-detail-header h3 {
  font-size: var(--se-type-h4med-size);
  line-height: var(--se-type-h4med-line);
  font-weight: var(--se-type-h4med-weight);
  color: var(--se-color-text-title);
}
.patient-detail-header p {
  font-size: var(--se-type-bodyreg-size);
  color: var(--se-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.patient-detail-header .btn-primary {
  margin-left: auto;
}
.patient-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--se-space-16);
  align-items: start;
  flex: 0 0 auto;
}

/* ---- De știut despre pacient (web/js/safety.js) ----------------------------
   Cardul de siguranță, peste grila fișei și pe toată lățimea ei. Rama albastră
   e cea a prototipului (`.fisa-alerte`, --info-bg/--info-border), tradusă prin
   dialect.json în perechea canonică `badge.blue.100/600`. Albastru și nu roșu,
   deliberat: cardul e prezent la fiecare fișă, iar o ramă roșie permanentă ar
   cheltui exact culoarea de care are nevoie rândul care chiar oprește ceva
   (LAYOUT.md §3, „paleta de stare rămâne doar stare"). Rândurile dinăuntru
   poartă starea, pe insignele obișnuite. */
.patient-safety {
  border-color: var(--se-color-badge-blue-600);
  background: var(--se-color-badge-blue-100);
  margin-bottom: var(--se-space-16);
  flex: 0 0 auto;
}
.patient-safety .section-header h2 {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  color: var(--se-color-badge-blue-600);
}
/* Rândurile stau pe hârtia cardului, nu pe albastru: un rând de stare citit
   peste un fundal colorat pierde tocmai contrastul insignei de pe el. */
.patient-safety .row-item {
  background: var(--se-color-bg-surface);
  border-radius: var(--se-radius-md);
  padding-left: var(--se-space-12);
  padding-right: var(--se-space-12);
}
.safety-note {
  margin-top: var(--se-space-12);
}
/* ---- Alerta medicală (web/js/patient-view.js, customers.medical_alert) -----
   Rama ROȘIE pe care panoul de siguranță și-o refuză deliberat: acela e permanent
   și albastru ca să nu tocească culoarea de stare — bannerul ăsta există DOAR
   când e ceva scris, deci roșul aici e exact rândul care chiar oprește ceva
   (LAYOUT.md §3). Perechea alert-red-100/600 e cea a insignelor `missed`. */
.patient-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--se-space-12);
  border-color: var(--se-color-alert-red-600);
  background: var(--se-color-alert-red-100);
  color: var(--se-color-alert-red-600);
  margin-bottom: var(--se-space-16);
  flex: 0 0 auto;
}
.patient-alert .ph {
  width: var(--se-size-icon-functional);
  height: var(--se-size-icon-functional);
  flex: 0 0 auto;
}
.patient-alert-title {
  font-weight: 600;
}
.patient-alert-text {
  color: var(--se-color-text-primary);
  white-space: pre-wrap;
}
.btn-back {
  align-self: flex-start;
}
.note-text {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-description);
  white-space: pre-wrap;
}
.note-actions {
  display: flex;
  gap: var(--se-space-8);
  margin-top: 10px;
}

/* Corectarea fișei și numerele ei. Aceeași regulă ca la încărcarea de mai jos:
   formularul stă în pagină și doar se arată, fiindcă un câmp redesenat cât se
   scrie în el pierde ce s-a scris — aici, numele pe care pacientul tocmai îl
   dictează. Câmpurile sunt cele din `.setari-field`, nu altele: două formulare
   din două sisteme pe același card se văd de la un metru. */
.patient-edit {
  margin-top: var(--se-space-12);
}
.patient-edit[hidden] {
  display: none;
}
.patient-edit .setari-field:last-of-type {
  margin-bottom: var(--se-space-8);
}

/* Încărcarea unui document în fișă. Controlul stă în pagină, nu în randare — un
   <input type="file"> redesenat își pierde fișierul ales — deci ce se schimbă cât
   o cerere e pe drum e doar starea lui, nu HTML-ul din jur. Butonul de sistem al
   inputului e singurul buton al consolei pe care nu-l desenăm noi; îl îmbrăcăm ca
   pe `.mini`, altfel două butoane mici de pe același card arată din două sisteme. */
.file-upload {
  margin-top: var(--se-space-12);
}
.file-upload[hidden] {
  display: none;
}
.file-upload-row {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  margin-bottom: var(--se-space-8);
}
.file-upload-row input[type="file"] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
}
.file-upload-row input[type="file"]::file-selector-button {
  margin-right: var(--se-space-8);
  background: var(--se-color-bg-surface);
  color: var(--se-color-primary-60);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  padding: 5px var(--se-space-12);
  font-family: inherit;
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-captionmed-weight);
}
.file-upload-row select {
  flex: 0 0 auto;
  padding: 5px var(--se-space-12);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-title);
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
}
.file-upload-row input[type="file"]:disabled,
.file-upload-row select:disabled {
  opacity: 0.5;
}
.file-upload .field-error:not([hidden]) {
  display: block;
}

/* Istoricul de apeluri al fișei, tăiat pe zile (Centrala-2): eticheta zilei
   poartă data, rândurile de sub ea doar ora. */
.call-history-day-label {
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--se-color-text-muted);
  margin: var(--se-space-16) 0 var(--se-space-8);
}
.call-history-day-label:first-child {
  margin-top: 0;
}

/* ---- Vocabularul de tabele al familiei (RECEPTION-20) ----------------------
   ACELEAȘI nume de clase ca în back-office (ui-tables.css): .table-scroll,
   .data-table, banda gri pe antet — consola nu avea niciun vocabular tabular,
   și a-l inventa sub alt nume ar fi despărțit cele două console pe aceeași
   componentă. Subsetul de aici e ce folosesc paginile recepției; ce lipsește
   se aduce de acolo, nu se improvizează. */
.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-weight: 400;
  color: var(--se-color-text-description);
  background: var(--se-color-bg-console);
  padding: 10px var(--se-space-12);
  border-bottom: 1px solid var(--se-color-border-default);
  white-space: nowrap;
}
.data-table tbody td {
  padding: var(--se-space-12);
  border-bottom: 1px solid var(--se-color-border-default);
  vertical-align: middle;
  color: var(--se-color-text-title);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover td {
  background: var(--se-color-bg-console);
}
.data-table .cell-sub {
  display: block;
  color: var(--se-color-text-description);
  font-size: var(--se-type-captionreg-size);
}
/* Numele pacientului: coloana a doua, imediat după status (regula 2.4 a
   designului). E singura celulă care se citește ca identitate, deci poartă
   greutatea, restul rândului rămâne text obișnuit. */
.data-table .cell-primary {
  font-weight: 500;
}
/* Coloana de status stă mereu prima și nu se lasă strivită de una lungă de
   lângă ea: pastila are o lățime a ei și nu se rupe pe două rânduri. */
.data-table .col-status {
  white-space: nowrap;
}
/* Cele trei puncte imediat după coloanele de identitate, nu la capătul
   rândului: pe un ecran îngust capătul intră sub bara de derulare orizontală și
   meniul devine inaccesibil (aceeași alegere ca în back-office). */
.data-table .col-kebab {
  width: 1%;
  padding-top: var(--se-space-4);
  padding-bottom: var(--se-space-4);
  white-space: nowrap;
}

/* ---- Capul de coloană care chiar sortează (web/js/table.js) ----------------
   Aceleași nume de clase ca în back-office (ui-tables.css): .sortable,
   .sort-ic-dual și direcția aprinsă pe .dir-asc/.dir-desc. Săgețile sunt
   simboluri din sprite aici, nu glife de font, deci se măsoară în lățime și
   înălțime — nu în font-size, cum le măsoară consola cealaltă. */
.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.sortable:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
}
.data-table th.sort-active {
  color: var(--se-color-text-title);
  font-weight: 500;
}
.sort-ic-dual {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: var(--se-space-4);
}
.sort-ic-dual .ph {
  width: 9px;
  height: 9px;
  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);
}

/* ---- Subsolul listei -------------------------------------------------------
   „1–8 din 42 apeluri" în stânga, paginarea în dreapta. Textul vine dintr-un
   singur loc (formatTableFooterText), ca formatul să se schimbe o dată pentru
   toate listele. `.pagination` își pune singură marginea de sus când stă
   liberă în pagină; aici ar aduna-o a doua oară, deci se anulează pe (0,2,0),
   ca să câștige pe specificitate și nu pe ordinea fișierelor. */
.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);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
}
.table-footer .pagination {
  margin-top: 0;
}
.table-footer .pagination:empty {
  display: none;
}
/* `display:flex` bate regula implicită a lui [hidden], deci ascunderea se scrie
   aici — altfel un subsol gol ar păstra marginea de deasupra lui. */
.table-footer[hidden] {
  display: none;
}

/* ---- Programări ------------------------------------------------------------
   Lista zilei și alegerea pacientului de deasupra formularului. Formularul
   însuși e al lui booking-form.js (styles-booking.css) — aceeași instanță ca în
   panoul apelului; regulile lui `.prog-form`/`.prog-grid`/`.prog-payer`/
   `.prog-referral`/`.prog-recap`/`.prog-error`/`.prog-actions` au murit cu
   marcajul lor (RULE 0.03). `.prog-result` e rândul de căutare — al pacientului
   aici, al medicului în formular (booking-doctor.js). */
.prog-patient {
  max-width: 520px;
}
.prog-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.prog-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--se-space-8) var(--se-space-12);
  background: var(--se-color-bg-console);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  font: inherit;
  color: var(--se-color-text-title);
  cursor: pointer;
}
.prog-result:hover {
  border-color: var(--se-color-secondary-60);
}
.prog-result .cell-sub {
  display: block;
  color: var(--se-color-text-description);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}
.prog-cancelled td {
  color: var(--se-color-text-muted);
  text-decoration: line-through;
}
.prog-cancelled td .cell-sub {
  text-decoration: none;
}

/* ---- Acordeoanele din Setări ----------------------------------------------
   Un singur tipar pentru toate sertarele paginii, ca „Jurnal evenimente" să nu
   fie a doua invenție. <details> nativ: se deschide fără o linie de JS, ține
   starea la tastatură și rămâne deschis la print. Titlul e stânga, nota e
   dreapta, iar săgeata e scrisă în ::before ca la .logbox — același vocabular,
   nu o a doua săgeată desenată altfel. */
.se-accordion {
  border: 1px solid var(--se-color-border-soft);
  border-radius: var(--se-radius-md);
  background: var(--se-color-surface-raised, #fff);
  margin-bottom: var(--se-space-16);
}
.se-accordion > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--se-space-12);
  padding: var(--se-space-12) var(--se-space-16);
}
.se-accordion > summary::-webkit-details-marker {
  display: none;
}
.se-accordion > summary::before {
  content: "\25b8";
  color: var(--se-color-text-muted);
  flex: 0 0 auto;
}
.se-accordion[open] > summary::before {
  content: "\25be";
}
.se-accordion-title {
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  color: var(--se-color-text-heading);
}
.se-accordion-note {
  margin-left: auto;
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  color: var(--se-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.se-accordion-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--se-space-16);
  padding: 0 var(--se-space-16) var(--se-space-16);
}
/* Rândul de consum al transcrierii nu mai stă sub o bandă de replici, deci nu
   mai are nevoie de marginea care îl despărțea de ea. */
.se-accordion-body .tally-foot {
  margin: 0;
}