/* ui-detail.css — suprafețele de detaliu (taburi, carduri KPI, panourile pe
   două coloane, disciplina mișcării), desprinse din ui-tables.css
   (BACKOFFICE-19): listele și detaliul evoluează separat. Se leagă din
   layout.html imediat după ui-tables.css, deci cascada rămâne cea veche. */

/* ---- taburi de detaliu -------------------------------------------------------------------- */

.detail-tabs {
  display: flex;
  gap: var(--se-space-4);
  background: var(--se-color-bg-console);
  border: 1px solid var(--se-color-border-default);
  border-radius: 10px;
  padding: var(--se-space-4);
  width: fit-content;
  flex-wrap: wrap;
  margin-bottom: var(--se-space-24);
}

.detail-tab {
  background: none;
  border: none;
  padding: 7px var(--se-space-16);
  border-radius: 7px;
  font-size: var(--se-type-captionmed-size);
  font-weight: var(--se-type-captionmed-weight);
  color: var(--se-color-text-description);
  white-space: nowrap;
}

/* Un tab poate fi și LINK, nu numai buton: taburile Setărilor sunt trei pagini
 * (Program sucursale, Funcții, Audit acces), iar Funcții e chiar altă felie, cu
 * ruta și cheia ei. Un link e ce trebuie să fie — se deschide într-o filă nouă,
 * se poate copia — dar are subliniere și e `inline`, deci cele două proprietăți
 * se scriu aici. */
a.detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* Cifra de lângă eticheta unui tab — câte sucursale are orașul. Lipită de
 * etichetă, nu într-o coloană a ei: e o precizare, nu un al doilea câmp. */
.detail-tab-count {
  font-size: var(--se-type-captionreg-size);
  font-weight: var(--se-type-captionreg-weight);
  color: var(--se-color-text-description);
}

.detail-tab.active .detail-tab-count {
  color: var(--se-color-text-title);
}

.detail-tab.active {
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-title);
  box-shadow: var(--ui-shadow-tab);
}

/* Un tab e un buton gol, deci fără regulile astea cădea pe hover-ul navy al
 * regulii generice din ui-forms.css și își păstra textul închis: 1.29:1 pe
 * tabul activ, 3.33:1 pe cel inactiv. Perechea se scrie întreagă. */
.detail-tab:hover:not(:disabled) {
  background: var(--se-color-border-default);
  color: var(--se-color-text-title);
}

/* Tabul deschis nu se mișcă sub cursor — altfel selecția pare să se piardă
 * exact când e arătată. */
.detail-tab.active:hover:not(:disabled) {
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-title);
}

/* Focusul se declară DUPĂ `.detail-tab.active` și o bate pe SPECIFICITATE
 * (0,3,0 față de 0,2,0), nu pe ordinea din fișier. Fără asta umbra tabului
 * activ (0,2,0) bate box-shadow-ul din `button:focus-visible` (0,1,1) și
 * inelul nu se desenează tocmai pe tabul la care ajungi cu Tab. Conturul intră
 * în interior: taburile stau lipite într-un container cu 4px de padding, iar
 * un contur în afară ar călca pe vecin. */
.detail-tab:focus-visible,
.detail-tab.active:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ---- carduri KPI ---------------------------------------------------------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--se-space-16);
  margin-bottom: var(--se-space-20);
}

.kpi-card {
  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);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-card .ph {
  font-size: var(--se-size-icon-functional);
  color: var(--se-color-secondary-60);
}

.kpi-value {
  font-size: 26px; /* lint-tokens-ignore — the prototype's own base KPI size, off its own 12-48 scale; raised upstream with the mint list, and the dashboard rework (BACKOFFICE-09) brings the 40px hero tier */
  font-weight: 600;
  color: var(--se-color-text-title);
  font-variant-numeric: tabular-nums;
}

/* The dashboard's hero variant (the Figma-corrected Panou): six flat cards on
 * a fixed 3x2 grid, the value on the 40/54 display tier, no icons. */
.kpi-grid-hero {
  grid-template-columns: repeat(3, 1fr);
}

/* ...but on a wide screen every row of cards fits on ONE line, and the design
 * says so in its own words: „Pe ecrane foarte late orice rând de carduri intră
 * pe o singură linie — cardurile se împart egal, câte sunt (6 la Panou, 4 la
 * Apeluri și Rapoarte)." Written on `.kpi-grid`, the class every card row
 * carries, so it is not a rule that only Panou gets.
 *
 * Both this and the rule below were in the prototype and missing here, which is
 * why the Panou wrapped to 3+3 on a 2560px screen where the prototype does not. */
@media (min-width: 1700px) {
  .kpi-grid,
  .kpi-grid-hero {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

/* And under 1024 the three fixed columns crowd, so the hero falls back to the
 * same auto-fit formula the plain grid uses — not a third number. */
@media (max-width: 1024px) {
  .kpi-grid-hero {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

/* Apeluri' four. `auto-fit` would let them flow; the design keeps the row whole,
 * the way `.kpi-grid-hero` keeps Panou's six. It sits HERE and not in the calls
 * stylesheet because it is a variant of the card row, and putting it there took
 * that file over the 600-line ceiling. */
.kpi-grid-four {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

@media (max-width: 900px) {
  .kpi-grid-four {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

.kpi-card-flat .kpi-value {
  font-size: var(--se-type-h2med-size);
  line-height: var(--se-type-h2med-line);
  font-weight: var(--se-type-h2med-weight);
  color: var(--se-color-primary-60);
}

.kpi-card-flat .kpi-label {
  font-size: var(--se-type-bodyreg-size);
  color: var(--se-color-text-title);
}

a.kpi-card-link {
  text-decoration: none;
  transition: border-color 0.15s;
}

a.kpi-card-link:hover {
  border-color: var(--se-color-secondary-60);
}

.kpi-label,
.kpi-sub {
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-description);
}

/* ---- panouri pe două coloane + rânduri scurte -------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--se-space-16);
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.panel {
  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);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--se-space-4);
  gap: var(--se-space-8);
}

.panel-header h3 {
  /* The 2026-08 Figma correction lifts section titles onto the 20/28 tier.
   * The prototype draws them at weight 500, a weight that tier does not
   * carry upstream (titleLg is 400/600) — raised with the mint list. */
  font-size: var(--se-type-titlelgreg-size);
  line-height: var(--se-type-titlelgreg-line);
  font-weight: 500;
  color: var(--se-color-text-title);
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  margin: 0;
}

.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-12);
  padding: 10px 0;
  border-bottom: 1px solid var(--se-color-border-default);
}

.mini-row:last-child {
  border-bottom: none;
}

.mini-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mini-row .ph {
  font-size: 18px;
  color: var(--se-color-secondary-60);
  flex-shrink: 0;
}

.section-sub-title {
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
  margin: var(--se-space-24) 0 var(--se-space-12);
}

.section-sub-title:first-child {
  margin-top: 0;
}

/* Un tabel „dintr-o privire" sub rândul de carduri — Panoul e singurul care are
 * unul, dar spațierea e a formei, nu a paginii, deci stă cu restul vocabularului
 * și nu într-o foaie de stil pe care felia aceea nici nu o are. */
.dash-glance {
  margin-top: var(--se-space-28);
}

/* ---- o absență declarată -------------------------------------------------------------------------
 * Forma pe care o ia pe ecran o cifră pe care schema asta nu o poate calcula.
 * Propozițiile stau în `internal/schemagaps` și marcajul în internal/web/gaps.html;
 * asta e a treia parte, culoarea.
 *
 * Era scrisă de trei ori — `.rap-gaps` în Rapoarte, `.ach-gap` în Achiziții,
 * `.medic-gap` pe fișa medicului — și cele trei începuseră deja să difere: un
 * chenar galben și două portocalii. Aceeași absență arăta altfel în funcție de
 * pagina pe care o întâlneai. Aici e o dată. */

.gap-note {
  background: var(--se-color-badge-yellow-100);
  border: 1px solid var(--se-color-badge-yellow-600);
  border-radius: var(--se-radius-md);
  padding: var(--se-space-12) var(--se-space-16);
  margin: 0 0 var(--se-space-16);
}

.gap-note-head {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  margin: 0 0 var(--se-space-8);
  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-badge-yellow-600);
}

.gap-note-head .ph {
  font-size: var(--se-size-icon-functional);
  flex-shrink: 0;
}

.gap-note-why {
  margin: 0;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-secondary);
  max-width: 82ch;
}

.gap-note-list {
  margin: 0;
  display: grid;
  gap: var(--se-space-8);
}

.gap-note-list dt {
  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);
}

.gap-note-list dd {
  margin: 0;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-secondary);
  max-width: 82ch;
}

/* ---- disciplina mișcării ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

/* ---- „nu e nimic aici" — o singură dată, pentru toată consola ---------------
 * Familia „pagina asta nu are ce să-ți arate" stă în ACEST fișier fiindcă
 * `.gap-note` de mai sus e deja membrul ei cel mai vechi: absența declarată,
 * starea goală și refuzul de drepturi răspund toate la aceeași întrebare.
 * (Componenta a fost cerută în ui-tables.css; acela era la 595 de linii, iar
 * plafonul de 600 e o regulă mai tare decât locul.)
 *
 * Escape-uri față de scala de tokeni, adunate aici: designul respiră pe 48px
 * între ilustrație și text și taie textul la 512px, iar cardul refuzului are
 * lățimea cardului de autentificare — niciuna nu are token. */

:root {
  --empty-pad-y: 48px;
  --empty-text-w: 512px;
  --empty-art-w: 120px;
  --denied-w: 568px;
  --denied-gap: 56px;
}

/* Învelișul centrează starea goală pe TOT spațiul rămas, nu doar pe conținutul
   ei: fără el ilustrația se lipește de bara de sus a cardului. */
.empty-state-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.empty-state-wrap[hidden] {
  display: none;
}

/* Aceeași stare goală și într-un tab de fișă, nu doar pe o pagină întreagă.
   Fără înălțimea minimă, ilustrația s-ar lipi de bara de taburi. */
.empty-state-wrap[data-shape="in-tab"] {
  min-height: 52vh;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--empty-pad-y) var(--se-space-24);
}

.empty-state[hidden] {
  display: none;
}

/* Ilustrația e OPȚIONALĂ: designul desenează una doar pentru Panou și
   Programări. O pagină fără ilustrație în design primește componenta fără
   imagine — niciodată una inventată pentru simetrie. */
.empty-state img {
  width: var(--empty-art-w);
  height: auto;
  margin-bottom: var(--se-space-24);
}

/* Unde designul n-are ilustrație, iconița pe care pagina o avea deja ține locul
   ei — e vocabularul consolei, nu o imagine născocită. */
.empty-state > .ph {
  font-size: var(--se-size-icon-nav);
  color: var(--se-color-text-muted);
  margin-bottom: var(--se-space-8);
}

.empty-state h2 {
  margin: 0;
  max-width: var(--empty-text-w);
  color: var(--se-color-text-title);
  font-size: var(--se-type-h4med-size);
  line-height: var(--se-type-h4med-line);
  font-weight: var(--se-type-h4med-weight);
}

.empty-state p {
  margin: var(--se-space-8) 0 0;
  max-width: var(--empty-text-w);
  color: var(--se-color-text-description);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}

.empty-state .btn-primary {
  margin-top: var(--se-space-24);
}

/* ---- „niciun rând pentru filtrele alese" -----------------------------------
 * CEALALTĂ stare goală, și cele două nu se confundă niciodată: asta e o celulă
 * într-un tabel care ARE coloane și n-are potriviri, nu o pagină care n-a avut
 * niciodată conținut. Scanări ține argumentul întreg în CLAUDE.md; aici stă
 * doar forma, care era copiată aproape identic în cinci fișiere de slice. */
.table-empty {
  padding: var(--se-space-24);
  text-align: center;
  color: var(--se-color-text-secondary);
  white-space: normal;
}

/* Aceeași frază, dar acolo unde ține locul unui RÂND DE LISTĂ, nu al unui tabel:
   fără pastila de padding, aliniată la stânga ca vecinii ei. */
.table-empty[data-shape="inline"] {
  padding: var(--se-space-4) 0;
  text-align: left;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}

/* ---- refuzul de drepturi ----------------------------------------------------
 * Nu un ecran de eroare: sesiunea e validă, restul consolei se deschide, iar ce
 * lipsește e un drept. Trăiește în shell-ul normal, deci vorbește vocabularul
 * paginilor, nu al porții — dar pastila de avertizare e aceeași. Stătea în
 * ui-auth.css până când fișierul acela a trecut de 600 de linii; e aici fiindcă
 * e a treia față a aceleiași familii, alături de `.gap-note` și `.empty-state`. */

.denied {
  max-width: var(--denied-w);
  margin: var(--denied-gap) auto;
  display: flex;
  flex-direction: column;
  gap: var(--se-space-16);
}

.denied h1 {
  margin: 0;
  color: var(--se-color-text-title);
  font-size: var(--se-type-h4med-size);
  line-height: var(--se-type-h4med-line);
  font-weight: var(--se-type-h4med-weight);
}

.denied p {
  margin: 0;
  color: var(--se-color-text-description);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}

.denied-lede {
  color: var(--se-color-text-title);
}

/* Dreptul lipsă e motivul refuzului, deci e marcat ca o valoare, nu ca proză. */
.denied-role {
  display: inline-block;
  padding: 0 var(--se-space-8);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  color: var(--se-color-text-title);
  white-space: nowrap;
}

.denied-actions {
  display: flex;
  align-items: center;
  gap: var(--se-space-12);
  margin-top: var(--se-space-8);
  padding-top: var(--se-space-16);
  border-top: 1px solid var(--se-color-border-default);
}

/* Aceeași pastilă de avertizare, pentru refuzul care ajunge peste o pagină deja
   deschisă (htmx): operatorul e în mijlocul unei acțiuni, nu la o ușă. */
.denied-strip {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  padding: var(--se-space-8) var(--se-space-16);
  background: var(--se-color-badge-red-100);
  border-bottom: 1px solid var(--se-color-alert-red-600);
  color: var(--se-color-alert-red-600);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}

.denied-strip .ph {
  font-size: var(--se-size-icon-functional);
  flex: 0 0 auto;
}