/* ---- Pagini și carduri ---------------------------------------------------- */
.page {
  display: none;
}
.page.active {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-16);
  flex: 1 1 auto;
  min-height: 0;
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-24);
  overflow-y: auto;
}
.page-title {
  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);
  flex: 0 0 auto;
}
.card-outer {
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-16);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.card-outer.fill {
  flex: 1 1 auto;
}

.card-accent {
  background: var(--se-color-secondary-20);
  border-color: var(--se-color-secondary-20);
}
.card-inner {
  background: var(--se-color-bg-console);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-16);
  min-height: 0;
  overflow-y: auto;
}
.card-inner.grow {
  flex: 1 1 auto;
  max-height: 560px;
}
/* Pe tabloul principal cardurile stau pe canvas, ca în prototip: cartonul alb e
   pagina, nu fiecare card din ea. */
.workspace-grid > .stack > .card-outer:not(.card-accent),
.linii-cols > .stack > .card-outer {
  background: var(--se-color-bg-console);
  border-color: var(--se-color-border-default);
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--se-space-8);
  margin-bottom: var(--se-space-12);
  flex: 0 0 auto;
}
.section-header h2 {
  font-size: var(--se-type-bodysb-size);
  line-height: var(--se-type-bodysb-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
  display: flex;
  align-items: baseline;
  gap: var(--se-space-8);
  flex-wrap: wrap;
}
.section-sub {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
  margin-top: 2px;
}
.section-tools {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  flex: 0 0 auto;
}
.tally {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  font-weight: 400;
  color: var(--se-color-text-muted);
}
.tally-foot {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  color: var(--se-color-text-muted);
  margin-top: var(--se-space-8);
}
.tally-foot:empty {
  display: none;
}
h3.sub {
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  font-weight: var(--se-type-micromed-weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--se-color-text-muted);
  margin: var(--se-space-12) 0 var(--se-space-8);
}
.hint {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-muted);
  margin-top: var(--se-space-8);
}

/* ---- Butoane --------------------------------------------------------------
   Navy plin e acțiunea; alb cu contur e alternativa; roșu e doar pentru ce
   închide sau respinge un apel. Nimic decorativ nu poartă culoare. */
.btn-primary {
  background: var(--se-color-primary-60);
  color: var(--se-color-text-on-dark);
  border: 1px solid var(--se-color-primary-60);
  border-radius: var(--se-radius-pill);
  padding: 0 var(--se-space-24);
  min-height: var(--se-size-control);
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
}
/* Sensul e cel al designului: mai DESCHIS la hover, mai închis la apăsare.
   Fiecare stare scrie fundal ȘI culoare — o stare care mută numai fundalul lasă
   textul pe ce a ales starea normală, iar de acolo vin perechile ilizibile. */
.btn-primary:hover:not(:disabled) {
  background: var(--se-color-primary-50);
  border-color: var(--se-color-primary-50);
  color: var(--se-color-text-on-dark);
}
.btn-primary:active:not(:disabled) {
  background: var(--se-color-primary-80);
  border-color: var(--se-color-primary-80);
  color: var(--se-color-text-on-dark);
}
.btn-primary:disabled {
  background: var(--se-color-border-default);
  border-color: var(--se-color-border-default);
  color: var(--se-color-primary-20);
}
.btn-secondary {
  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: 0 var(--se-space-24);
  min-height: var(--se-size-control);
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
}
/* Culoarea se rescrie anume: hover-ul de dinainte muta doar conturul, deci
   starea depindea de ce moștenea textul — exact reflexul care în back-office a
   produs navy pe navy. */
.btn-secondary:hover:not(:disabled),
.btn-secondary:active:not(:disabled) {
  background: var(--se-color-border-default);
  border-color: var(--se-color-primary-70);
  color: var(--se-color-primary-60);
}
.btn-secondary:disabled {
  background: var(--se-color-bg-surface);
  border-color: var(--se-color-border-default);
  color: var(--se-color-primary-20);
}
.btn-quiet {
  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: var(--se-space-8) var(--se-space-16);
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-captionmed-weight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--se-space-8);
}
.btn-quiet:hover:not(:disabled) {
  background: var(--se-color-bg-console);
  color: var(--se-color-primary-60);
}
.btn-quiet:disabled {
  color: var(--se-color-primary-20);
}
.btn-sm:disabled {
  opacity: 0.5;
}
.btn-sm {
  padding: 5px var(--se-space-12);
  font-size: var(--se-type-captionmed-size);
}
.wide {
  width: 100%;
}
.btn-primary.wide,
.btn-secondary.wide {
  margin-top: var(--se-space-8);
}
.btn-danger {
  background: var(--se-color-alert-red-600);
  color: var(--se-color-text-on-dark);
  border: 1px solid var(--se-color-alert-red-600);
  border-radius: var(--se-radius-pill);
  padding: var(--se-space-8) var(--se-space-16);
  font-size: var(--se-type-captionmed-size);
  font-weight: var(--se-type-captionmed-weight);
}
/* Roșul nu are trepte 50/80 în tokeni, deci treapta e `filter`, ca în prototip
   și ca la `.btn-answer`/`.btn-reject` din styles-overlays.css. */
.btn-danger:hover:not(:disabled) {
  filter: brightness(1.08);
}
.btn-danger:active:not(:disabled) {
  filter: brightness(0.92);
}
/* 44×44, din `--se-size-hit-target`, nu 28: zona de apăsare a unei iconițe e o
   regulă a designului, nu o preferință — kitul comun o scrie la fel pe butonul
   de trei puncte („ramă de 44x44 (zona de click WCAG)", se-row-menu.css).
   Creșterea trebuie să fie a CUTIEI, nu a unei zone invizibile lipite peste ea:
   `.section-tools` pune butoanele astea unul lângă altul cu 8px între ele, iar
   28+8=36 — două zone de 44 s-ar suprapune și ultima ar fura apăsarea primeia.
   Cutia reală rezolvă și distanța, nu doar suprafața. */
.icon-btn {
  background: none;
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  width: var(--se-size-hit-target);
  height: var(--se-size-hit-target);
  color: var(--se-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: var(--se-type-captionreg-size);
  line-height: 1;
}
.icon-btn:hover {
  color: var(--se-color-text-title);
  border-color: var(--se-color-primary-30);
}
.icon-btn.bare {
  border-color: transparent;
}
.icon-btn .ph {
  width: 16px;
  height: 16px;
}
/* Stă în aceleași antete de card, lângă `.icon-btn`, deci aceeași zonă de
   apăsare — două butoane vecine de mărimi diferite sunt și mai greu de nimerit
   decât două mici. */
.redirect-btn {
  display: inline-flex;
  background: none;
  border: none;
  padding: 0;
  width: var(--se-size-hit-target);
  height: var(--se-size-hit-target);
  align-items: center;
  justify-content: center;
  color: var(--se-color-primary-60);
  flex: 0 0 auto;
}
.redirect-btn:hover {
  color: var(--se-color-primary-40);
}

/* ---- Formulare ------------------------------------------------------------ */
.setari-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--se-space-24);
  flex: 0 0 auto;
}
.setari-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--se-space-12);
}
.setari-field {
  margin-bottom: var(--se-space-14);
}
.setari-field 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-field input,
.setari-field select {
  width: 100%;
  padding: 0 var(--se-space-16);
  min-height: var(--se-size-control);
  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);
}
.setari-field textarea {
  width: 100%;
  padding: var(--se-space-12) var(--se-space-16);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-title);
  resize: vertical;
}
.setari-field input:read-only {
  background: var(--se-color-bg-console);
  color: var(--se-color-text-description);
}
.setari-field input:focus,
.setari-field textarea:focus,
.setari-field select:focus {
  outline: none;
  border-color: var(--se-color-secondary-60);
  box-shadow: 0 0 4px 2px rgba(202, 56, 93, 0.1);
}
.setari-field input.has-error,
.setari-field textarea.has-error {
  border-color: var(--se-color-input-error);
}
/* Pastila de dată e a kit-ului și chenarul ei tot al lui e (styles-pages.css o
   spune) — dar starea de REFUZ e a formularului, iar fără rândul ăsta `markBad`
   pe un câmp-dată adăuga o clasă pe care n-o picta nimeni. Măsurat 2026-09-13 pe
   refuzul creatininei („are nevoie de data analizei"): propoziția roșie apărea
   deasupra formularului și câmpul vinovat rămânea nemarcat. Nu e doar al
   formularului §3.1 — `booking-form.js` (`referral_date`) și `waitlist-form.js`
   (`WAITLIST_DATE_KEYS`) trec prin același `markBad` și aveau aceeași scăpare. */
.setari-field .cal-field.has-error {
  border-color: var(--se-color-input-error);
}
input::placeholder,
textarea::placeholder {
  color: var(--se-color-text-placeholder);
}
/* Tot ce e cifră se citește pe literă cu lățime fixă. */
input[type="tel"],
input[inputmode="tel"],
input[inputmode="numeric"],
input[type="search"],
input[type="time"],
#number {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.field-error {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-input-error-text);
  margin: 0 0 var(--se-space-12);
}
.search-field {
  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);
  margin-bottom: var(--se-space-14);
  flex: 0 0 auto;
}
.search-field.slim {
  min-height: 36px;
  margin-bottom: var(--se-space-8);
}
.search-field .ph {
  color: var(--se-color-text-muted);
}
.search-field input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  background: none;
}
.search-field.has-error {
  border-color: var(--se-color-input-error);
}

/* ---- Liste ---------------------------------------------------------------
   Rândurile prototipului: cartonaș alb, contur de un fir, colț mic. Sunt și ce
   desenează renderele vechi (`.item`), deci cele două clase se poartă la fel —
   un al doilea fel de rând pe același ecran s-ar citi ca un al doilea sistem. */
.list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.list.grow {
  flex: 1 1 auto;
}
.row-item,
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px var(--se-space-12);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  margin-bottom: var(--se-space-8);
  flex: 0 0 auto;
}
.row-item:last-child,
.item:last-child {
  margin-bottom: 0;
}
.row-item.clickable,
.item.clickable {
  cursor: pointer;
}
.row-item.clickable:hover,
.item.clickable:hover {
  border-color: var(--se-color-primary-30);
}
.row-item .r-main,
.item .who b {
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.row-item .r-sub,
.item .who small {
  display: block;
  color: var(--se-color-text-description);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  margin-top: 2px;
}
.item .who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.item .acts,
.row-actions {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  flex: 0 0 auto;
}
/* Un rând de apel activ poartă și două câmpuri de transfer: nu încap lângă cine
   sună, deci își iau propriul rând în loc să ciopârțească numărul. */
.item.row-stack {
  flex-direction: column;
  align-items: stretch;
}
.item.row-stack .acts {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--se-space-8);
}
.item.row-stack .acts input {
  flex: 1 1 6rem;
  min-width: 5rem;
  padding: 6px var(--se-space-12);
  min-height: 32px;
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-surface);
  font-family: var(--mono);
  font-size: var(--se-type-captionreg-size);
}
.empty,
.loading-msg {
  color: var(--se-color-text-muted);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  padding: var(--se-space-8) 2px;
  margin: 0;
  text-align: center;
}
/* Comenzile mici din rânduri: aceleași ca `.btn-quiet`, fiindcă renderele vechi
   scriu `.mini` și nu trebuie să existe două feluri de buton mic. */
.mini,
a.mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  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);
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-captionmed-weight);
}
.mini:hover,
a.mini:hover {
  background: var(--se-color-bg-console);
  color: var(--se-color-primary-60);
}
.mini.active {
  background: var(--se-color-primary-60);
  border-color: var(--se-color-primary-60);
  color: var(--se-color-text-on-dark);
}
.mini.call {
  color: var(--se-color-status-success);
  border-color: var(--se-color-status-success);
}
.mini.call:hover {
  background: var(--se-color-status-success-bg);
  color: var(--se-color-status-success);
}
/* Roșul e al lucrurilor care iau ceva înapoi — închis, șters, revocat. `hangup` e
   numele primului dintre ele; `danger` e același roșu pentru ștergerea unui rând,
   scris separat ca un buton „Șterge” să nu poarte în markup numele „închide
   apelul”. */
.mini.hangup,
.mini.danger {
  color: var(--se-color-alert-red-600);
  border-color: var(--se-color-alert-red-600);
}
/* Culoarea se repetă pe stare, nu se moștenește: un hover care mută doar
   fundalul depinde de regula de deasupra ca să rămână lizibil. */
.mini.hangup:hover,
.mini.danger:hover {
  background: var(--se-color-alert-red-100);
  color: var(--se-color-alert-red-600);
}
.mini:disabled {
  opacity: 0.5;
}
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  padding: 2px var(--se-space-8);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-badge-gray-100);
  color: var(--se-color-badge-gray-600);
  white-space: nowrap;
}
.pill.green {
  background: var(--se-color-badge-green-100);
  color: var(--se-color-badge-green-600);
}
.pill.red {
  background: var(--se-color-badge-red-100);
  color: var(--se-color-badge-red-600);
}
.pill.amber {
  background: var(--se-color-badge-yellow-100);
  color: var(--se-color-badge-yellow-600);
}
/* Capul unei cozi și apelanții ei: grupul se citește ca un titlu de secțiune,
   nu ca încă un rând. */
.item.q-head {
  background: var(--se-color-bg-console);
  border-style: dashed;
}
.item.q-head .who b {
  font-size: var(--se-type-micromed-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--se-color-text-muted);
}
.item.q-caller {
  margin-left: var(--se-space-16);
  border-left: 3px solid var(--se-color-badge-yellow-600);
}
.q-tag {
  color: var(--se-color-text-muted);
  font-weight: 400;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--se-space-8);
}