/* ══════════════════════════════════════════════════════════════════════════
   Metriq — stratul de aplicație peste `organic.css`.

   ## De ce două fișiere

   `organic.css` e design system-ul: tokenuri, rampe tonale în OKLCH, și clasele
   de componente (.btn, .card, .table, .field, .input, .tag, .dialog, .seg,
   .nav). E sursa de adevăr a sistemului și poate fi folosit și de alt proiect.
   **Nu se modifică de aici.** Ce lipsește pentru Metriq se adaugă în fișierul
   ăsta, ca strat deasupra.

   ## De unde vin clasele de mai jos

   Nu din gust, din numărătoare. Livrarea de design (4 pagini de rol) are 1254
   de atribute `style=""`, din care 406 distincte. Tiparele care se repetă:

       266  border-radius:999px          din care 97 sunt NO-OP: organic.css
                                         pune deja 999px pe .btn/.tag/.seg/.input
       217  text-align:center
       207  font-variant-numeric:tabular-nums
       185  display:flex
       146  font-size:12.5px
        97  color:#fff
        66  background:var(--color-accent-2-700)
        55  padding:2px 9px

   Fiecare clasă de mai jos acoperă un tipar din lista aia. Ce apare o dată sau
   de două ori a rămas inline, unde îi e locul: o clasă folosită o dată e doar
   un nume în plus de ținut minte.

   ## Butonul principal e VERDE, nu portocaliu

   `organic.css` are `.btn-primary` pe `--color-accent` (#c67139, portocaliu).
   Ecranele folosesc însă `--color-accent-2-700` (verde) pentru acțiunea
   principală — „Înrolează telefon", „Creează angajat", „Înrolează 37 taguri".

   Nu redefinesc `.btn-primary`: ar schimba înțelesul lui pentru orice alt
   proiect care folosește sistemul. `.btn-go` e numit după rol, nu după culoare,
   ca o retunare a rampei să nu-l facă mincinos.
   ══════════════════════════════════════════════════════════════════════════ */

/* — tipografia Metriq —
   Titlurile merg pe Nunito, nu pe Caprasimo din sistem: un panou operațional se
   citește toată ziua, iar Caprasimo e o literă de afiș. */
:root {
  --font-heading: "Nunito", "Figtree", system-ui, sans-serif;
  --font-heading-weight: 800;

  /* Stări, numite după ce înseamnă. Pastilele și textul de alarmă le folosesc
     pe amândouă, deci stau o dată aici și nu de două ori mai jos. */
  --color-ok: var(--color-accent-2-700);
  --color-warn: var(--color-accent-700);
  --color-bad: #a8402f;

  /* Tonurile de fundal ale notelor. In livrare traiau ca variabile locale pe
     `.dv-turn` - schela galeriei, care nu trece in aplicatie. Mutate aici cu
     nume care spun rolul: un `--sage-soft` nu-i spune nimanui ca e tonul
     „asta e in regula". */
  --color-bad-deep: #7f2d1f;
  --color-bad-tint: #f7e2dc;
  --color-ok-soft: #e6ebda;
  --color-ok-line: #c3cdae;
}

body {
  margin: 0;
  background: #e7e5d5;
  font-family: "Figtree", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── carcasa panoului ──────────────────────────────────────────────────────
   Bara de sus și containerul paginii. Forma vine din `.site-nav` al livrării,
   care în galerie servea la comutat între rolurile demonstrate; aici e
   navigația reală a panoului. */
.panel-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 48px;
  background: var(--color-accent-2-900);
}
.panel-nav b {
  margin-right: 14px;
  font: 700 16px "Figtree", system-ui, sans-serif;
  color: var(--color-accent-2-100);
}
.panel-nav a {
  padding: 6px 12px;
  border-radius: 999px;
  font: 600 13px "Figtree", system-ui, sans-serif;
  color: color-mix(in srgb, var(--color-accent-2-100) 85%, transparent);
  text-decoration: none;
  white-space: nowrap;
}
.panel-nav a:hover {
  background: color-mix(in srgb, var(--color-accent-2-100) 12%, transparent);
  color: #fff;
}
.panel-nav a[aria-current] {
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-900);
}

/* Latime marginita, centrata.
   Machetele sunt cartele de 1100px. La conversie am scos latimea si am lasat
   panoul sa se intinda cat tine fereastra: pe un monitor lat, tabelul isi
   imprastie coloanele pe doua mii de pixeli, iar ochiul nu mai leaga terminalul
   de starea lui de la celalalt capat al randului. Densitatea e tot designul. */
.panel-main {
  max-width: 1200px;
  margin-inline: auto;
  padding: 28px 48px 48px;
}

@media (max-width: 760px) {
  .panel-nav  { padding-inline: 16px; }
  .panel-main { padding-inline: 16px; }
}

/* ── numere ────────────────────────────────────────────────────────────────
   Cifre de lățime fixă. Fără ele, o coloană de procente sau de ore „dansează"
   de la un rând la altul, iar ochiul nu mai poate compara pe verticală — exact
   ce i se cere într-un tabel de flotă. 207 de apariții în livrare. */
/* `nowrap` nu e stil, e tot despre comparat: un IMEI rupt pe patru randuri nu
   mai e un numar, e o coloana de cifre. Pe ecran ingust coloana se ingusteaza,
   tabelul deruleaza - vezi `.table-scroll`. */
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── aliniere ──────────────────────────────────────────────────────────────
   `.table th` din sistem aliniază deja la stânga, deci `.ta-l` e pentru
   celulele care trebuie readuse acolo după o aliniere pe coloană. */
.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }

/* ── pastile de stare ──────────────────────────────────────────────────────
   „conform", „versiune veche", „neconfirmat", „offline" din ecranul 12e, și
   echivalentele din restul paginilor.

   Nu e `.tag` din sistem: ăla e o etichetă de clasificare, pe fundaluri de
   nuanță 100 și text de nuanță 800 — citibil, discret, pentru ceva care descrie.
   O pastilă de stare trebuie să SARĂ în ochi pe un rând printre o sută, deci e
   plină, cu contrast invers. Două roluri, două clase. */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  white-space: nowrap;
}
.pill-ok   { background: var(--color-ok);   color: #fff; }
.pill-warn { background: var(--color-warn); color: #fff; }
.pill-bad  { background: var(--color-bad);  color: #fff; }
/* Neutră: o stare care nu e nici bună nici rea, doar de spus — „neînrolat".
   Cu contur, nu doar cu fundal: `--color-neutral-200` e la două trepte de
   `--color-bg`, deci pe panou pastila dispărea și textul părea o celulă simplă.
   Văzut pe ecranul randat, nu dedus din tokenuri. */
.pill-mut {
  background: var(--color-neutral-200);
  color: var(--color-neutral-800);
  box-shadow: inset 0 0 0 1px var(--color-neutral-400);
}

/* ── butonul de acțiune principală ─────────────────────────────────────────
   Vezi antetul fișierului pentru de ce nu e `.btn-primary`. */
.btn-go {
  background: var(--color-accent-2-700);
  color: #fff;
}
.btn-go:hover  { background: var(--color-accent-2-800); }
.btn-go:active { background: var(--color-accent-2-900); }

/* ── panou ─────────────────────────────────────────────────────────────────
   Cutia în care stă un ecran: antet cu titlu, subtitlu numeric și acțiuni la
   dreapta, apoi conținutul. E forma pe care o au toate ecranele de tabel din
   livrare — 12e, 12b, 12c, 13c, 18b.

   `.card` din sistem nu se potrivește: ăla e o cartelă de conținut, cu padding
   uniform și gap între copii. Un panou are antet lipit de margine, linie de
   despărțire, și corp cu alt padding. */
.panel {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 3px 14px rgba(46, 43, 37, 0.12);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  /* Se rupe pe ecran ingust: titlul plus doua butoane nu incap pe 375px, iar
     fara `wrap` butoanele se strang pana cand textul lor se rupe pe trei randuri. */
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-divider);
}

/* Pe ingust, `.spacer` ar lasa butoanele pe randul titlului si le-ar strivi.
   Anulat, ca ele sa treaca pe randul lor, intregi. */
@media (max-width: 620px) {
  .panel-head .spacer { flex-basis: 100%; }
}
/* Titlul de panou NU e pe fontul de titlu.
   Livrarea are o clasă dedicată pentru asta — `.ht`, adică „ieși din Nunito" —
   și o pune pe fiecare antet de ecran. Nunito e pentru titlurile de pagină; un
   antet de tabel care se repetă pe douăzeci de ecrane se așază mai bine în
   litera de text. Măsurat pe ecranul 12e: Figtree 700, linie moștenită. */
.panel-title {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.panel-body { padding: 16px 24px 24px; }

/* ── tabel dens ───────────────────────────────────────────────────────────
   `.table` din sistem e 14px — potrivit pentru un tabel care se citește.
   Tabelele operaționale de aici se SCANEAZĂ: 128 de telefoane, opt coloane, iar
   omul caută rândul roșu. 12.5px intră pe lățime fără scroll orizontal și apare
   de 146 de ori în livrare. */
.table-dense { font-size: 12.5px; }

/* Anteturile nu se rup. Sunt etichete de doua cuvinte („Ultim semn", „Rol
   aplicatie"); rupte, arata ca un defect de randare, iar tabelul deruleaza
   oricum pe ecran ingust. */
.table-dense th { white-space: nowrap; }

/* Un tabel de opt coloane nu incape pe un telefon, si nici n-ar trebui sa incerce:
   stramtat destul ca sa incapa, devine ilizibil. Deruleaza orizontal INAUNTRUL
   panoului, cu `-webkit-overflow-scrolling` implicit al browserelor moderne.

   Fara wrapper, tabelul impinge panoul peste marginea ferestrei si taie si
   notele de sub el - masurat pe 375px, nu presupus. */
.table-scroll {
  overflow-x: auto;
  /* Marginile corpului se intind sub zona derulabila, ca randul derulat sa nu
     para ca iese din cutie. */
  margin-inline: calc(var(--space-3) * -1);
  padding-inline: var(--space-3);
}

/* Cifre colorate de un prag: baterie sub 35%, sub 15%. Culoarea e DATA, nu
   decor, deci e o clasă și nu un `style` pe celulă — altfel pragul ar trăi în
   șablon, scris cu mâna, pe fiecare rând.
   Tonurile sunt cele din livrare: `--color-accent-800` și `--color-bad-deep`,
   nu variantele deschise. Un roșu aprins pe un rând dintr-o sută strigă; unul
   adânc se citește ca o stare, nu ca o alarmă. */
.num-warn { color: var(--color-accent-800); }
.num-bad  { color: var(--color-bad-deep); }

/* ── text secundar ─────────────────────────────────────────────────────────
   Subtitlul numeric de sub titlu („128 telefoane · 3 fără semn de viață"), și
   orice altă linie care explică fără să ceară atenție. Poartă `.num` în el
   fiindcă aproape mereu conține cifre. */
.meta {
  font-size: 12.5px;
  color: var(--color-neutral-700);
  font-variant-numeric: tabular-nums;
}

/* ── note ─────────────────────────────────────────────────────────────────
   Cutiile de sub tabel care explică ce înseamnă ce s-a văzut: „Fără semn de
   viață ≠ absență", „Un terminal = un obiectiv + un rol".

   Trei tonuri, și tonul e argumentul: cel de avertisment spune că o citire
   evidentă e greșită, cel neutru doar enumeră, iar cel verde confirmă o regulă.
   Aceeași cutie cu trei culori ar fi decor; aici fiecare culoare e o afirmație
   despre cât de mult trebuie să te uiți. */
/* `line-height: 1.55` uniform. In livrare doua note au 1.55 si a treia 1.6 —
   aproape sigur o scapare la export, fiindca nimic nu deosebeste nota aia de
   celelalte doua. Normalizat; e singura diferenta de randare ramasa fata de
   original dupa ridicare, si e deliberata.

   ## Cum s-a verificat ridicarea, ca sa se poata repeta pe celelalte ecrane
   Pagina cu ecranul original (cu `.dv-card`/`.ht`/`--red-deep` reproduse) si cel
   convertit, una sub alta, apoi `getComputedStyle` pe fiecare element al
   amandurora si diferenta intre liste. Ochiul rateaza un `line-height` de
   1.45 vs 1.55; comparatia calculata nu. Asa s-au gasit patru abateri pe care
   capturile le aratau identice. */
.note {
  border: 1px solid var(--color-neutral-300);
  line-height: 1.55;
  border-radius: var(--radius-md);
  padding: 15px 17px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}
.note-title { font-weight: 600; margin-bottom: 5px; }
.note-warn {
  border-color: var(--color-accent-600);
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}
.note-ok {
  border-color: var(--color-ok-line);
  background: var(--color-ok-soft);
  color: var(--color-accent-2-900);
}

/* Notele de sub un tabel sau un formular, una sub alta. Erau trei coloane: într-un panou
   îngust (formularul de încărcare APK) ieșeau coloane de două cuvinte, mai înalte decât
   formularul. Butoanele formularului nu stau aici, ci în `.form-foot`. */
.notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

/* ── dialogul, cand e INCHIS ───────────────────────────────────────────────
   `organic.css` da `.dialog { display: flex }`, si e corect pentru el: in design
   system clasa sta pe un `<div>` intr-un backdrop fals, desenat ca sa se vada.

   Pe elementul `<dialog>` adevarat, aceeasi regula calca peste `display: none`
   pe care browserul il pune cand dialogul e inchis - o regula de autor bate
   foaia de stil a agentului. Rezultatul: dialogul sta permanent in pagina, gol,
   sub panou. Exact asa s-a si vazut.

   Restaurat aici, nu in organic.css: sistemul nu e gresit pentru folosirea lui. */
dialog.dialog:not([open]) { display: none; }

/* ── codul de înrolare, afișat ─────────────────────────────────────────────
   Se citește de pe ecran și se tastează pe un telefon, uneori de doi oameni
   diferiți. Monospațiat ca grupele să se alinieze, mare ca să se citească de la
   un metru, `user-select: all` ca un clic să-l selecteze întreg — jumătate de
   cod copiat e un refuz pe care nimeni nu-l întelege. */
.cod-mare {
  font: 700 28px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 14px 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  user-select: all;
  min-height: 62px;
}

/* Coloana de acțiuni a unui tabel: butoanele nu se rup pe doua randuri.
   „Re-emite cod" rupt dupa „Re-" arata ca un defect, iar coloana castiga din
   latime exact cat pierde randul in inaltime. */
.ta-actiuni { text-align: right; white-space: nowrap; }

/* ── rânduri ───────────────────────────────────────────────────────────────
   `display:flex` apare de 185 de ori, dar cu gap-uri diferite. `.row` ia cazul
   dominant (aliniat pe centru, gap 10px); restul rămân inline, fiindcă o clasă
   per gap ar fi un sistem de utilitare, iar ăsta nu e proiectul pentru așa ceva. */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Împinge ce urmează la dreapta. Apare de 36 de ori ca `style="flex:1"` pe un
   `<span>` gol, între titlu și butoane. */
.spacer { flex: 1; }

/* ── accesibilitate ────────────────────────────────────────────────────────
   `organic.css` are deja `:focus-visible`, dar `button` fără `type` moștenește
   fontul paginii doar dacă i se spune. */
button { font: inherit; border: 0; cursor: pointer; }

/* ── segmente ca linkuri ───────────────────────────────────────────────────
   `.seg-opt` din app.css e gândit pentru <span>. În panou filtrele sunt linkuri
   (`?stare=…`), ca lista filtrată să se poată trimite și să reziste la reîncărcare;
   fără regula asta browserul le subliniază. */
a.seg-opt { text-decoration: none; }

/* Un card care e link (pagina de start): arată ca un card, nu ca text subliniat. */
a.card { color: inherit; text-decoration: none; }

/* Un cartonaș KPI care e filtru (scanările eșuate): fără subliniere, iar cel ales se vede. */
a.panel.kpi { color: inherit; text-decoration: none; }
a.panel.kpi:hover { border-color: var(--color-neutral-400); }
a.panel.kpi[aria-current="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

/* ── asocierea cu telefonul (asociere.js, pairingpanel/index.tpl, pairing/telefon.tpl) ──
   Doar tokenuri din organic.css / tema-operational.css; nicio culoare scrisă de mână. */
/* Banda restrânsă: jos, în dreapta, ca să nu acopere bara de sus. */
.nfc-pastila { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: 50; padding: 2px var(--space-3);
  border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-surface);
  color: var(--color-text); box-shadow: var(--shadow-md); font-size: var(--fs-sm); white-space: nowrap; }
.nfc-pastila[hidden] { display: none; }
/* Panoul lateral „Cititor NFC”: nu e modal, pagina rămâne utilizabilă pe lângă el. */
.nfc-panou { position: fixed; top: calc(var(--nav-h) + var(--space-2)); right: var(--space-2); left: auto; bottom: auto;
  margin: 0; padding: 0; overflow: hidden;
  max-height: calc(100vh - var(--nav-h) - 2 * var(--space-2));
  z-index: 45; width: min(340px, calc(100vw - 2 * var(--space-2))); flex-direction: column;
  background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.nfc-panou[open] { display: flex; }
.nfc-panou::backdrop { background: transparent; }
.nfc-panou-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.nfc-panou-corp { flex: 1 1 auto; min-height: 0; padding: var(--space-3); overflow: auto; font-size: var(--fs-base); }
.nfc-panou-corp [hidden] { display: none; }
.nfc-panou .nfc-qr svg { width: 220px; height: 220px; display: block; margin: var(--space-2) auto; }
.nfc-panou .nfc-link { word-break: break-all; font-size: var(--fs-xs); }
.nfc-panou .nfc-stare { font-weight: 600; margin: var(--space-2) 0; }
.nfc-panou .nfc-timp { margin: var(--space-2) 0; }
.nfc-citiri { list-style: none; margin: var(--space-2) 0; padding: 0; }
.nfc-citiri li { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-divider); word-break: break-all; }
.nfc-actiuni { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.nfc-buton { margin-top: var(--space-1); }
.nfc-flash { outline: 3px solid var(--color-ok); outline-offset: 1px; }
.nfc-nota { display: block; margin-top: var(--space-1); }
.nfc-telefon { max-width: 480px; margin: 0 auto; padding: var(--space-4); }
/* Pagina telefonului nu încarcă app.css (cu [hidden] global); `.btn` ar bate atributul. */
.nfc-telefon [hidden] { display: none !important; }
.nfc-lista { list-style: none; padding: 0; }
.nfc-lista li { padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; border-radius: var(--radius-md);
  font-family: ui-monospace, Menlo, monospace; }
.nfc-lista li.ok { background: var(--color-ok-soft); }
.nfc-lista li.err { background: var(--color-bad-tint); }

/* ── dialog cu mai multe secțiuni (fișa telefonului, „Trimite comandă") ─────
   Fiecare secțiune e propriul ei formular, cu titlul mic, conținutul și butonul de acțiune la
   dreapta, ca „Trimite" din celelalte dialoguri. Secțiunile se despart printr-o linie subțire și
   spațiu egal. `.actions` nu merge aici: e făcută pentru antetele de panou (`margin-left:auto`
   într-un grid își pierde rostul și iese indentată). */
.dialog-section { display: grid; gap: 12px; }
.dialog-section + .dialog-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.dialog-section-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.dialog-section-note { margin: 0; font-size: var(--fs-sm); color: var(--color-neutral-700); }
.dialog-section-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-section details > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--color-neutral-800); }
.dialog-section details[open] > summary { margin-bottom: 12px; }
.dialog-section details > .form { margin-bottom: 12px; }

/* Alegerea zilei (`_day-nav.tpl`). Cu JS, câmpul nativ stă invizibil sub etichetă (calendarul se
   deschide sub ea) și se vede eticheta în română; fără JS, invers. */
.day-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.day-nav .day-nav-step{width:var(--ctl-h);justify-content:center;padding:0;font-size:20px;font-weight:500;line-height:1}
.day-nav-step[aria-disabled]{opacity:.4;cursor:default;pointer-events:none}
.day-nav-pick{position:relative;display:inline-flex}
.day-nav .day-nav-input{width:auto}
.day-nav .day-nav-label{display:none;min-width:16em;font-weight:600}
.day-nav-today{color:var(--color-neutral-600);font-weight:500}
.day-nav-icon{margin-left:auto;color:var(--color-neutral-600)}
.day-nav.is-js .day-nav-label{display:inline-flex}
.day-nav.is-js .day-nav-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}

/* O dată într-un formular (`_date-field.tpl`): același tipar ca la `.day-nav`. Cu JS se vede eticheta în
   română, iar câmpul nativ stă invizibil dedesubt (calendarul se deschide sub ea, iar bula de „câmp
   obligatoriu" tot acolo apare); fără JS e vizibil doar câmpul nativ. */
.date-field{position:relative;display:inline-flex;width:100%}
.date-field .date-field-label{display:none;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}
.date-field-empty{color:var(--color-neutral-500)}
.date-field-icon{flex:none;color:var(--color-neutral-600)}
.date-field.is-js .date-field-label{display:inline-flex}
.date-field.is-js .date-field-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}

/* Confirmările de după salvare (`[data-flash]`, `app.js` 10): jos-dreapta, 6 secunde. `.toast` e din design
   (app.css); aici e doar locul lor. Nu stau peste un dialog deschis: apar la încărcarea paginii. */
.toast-stack{position:fixed;right:16px;bottom:16px;z-index:60;display:grid;gap:8px;width:max-content;max-width:min(26rem,calc(100vw - 32px))}
.toast-text{flex:1 1 auto;min-width:0}
.toast .toast-close{flex:none;height:24px;min-width:24px;padding:0 6px;font-size:18px;line-height:1;margin-left:auto}

/* ── butoane periculoase și iconițe ──────────────────────────────────────────
   `btn-danger` = acțiunile care opresc, retrag, șterg sau blochează (Suspendă, Dezactivează,
   Oprește, Retrage, Șterge, Blochează…): fond ca `btn-secondary`, text și contur roșu, hover cu
   fond roșu pal. Roșul PLIN (`btn-bad`) rămâne doar pe butonul final de confirmare din dialogul
   unei acțiuni periculoase, deci nu se vede două ori același roșu.

   `tema-operational.css` vine după acest fișier și redefinește `.btn`, `.btn:hover` și
   `.btn:active` (unul, respectiv două clase). Regulile de mai jos au câte o clasă în plus, ca să
   câștige indiferent de ordine. `--color-bad-tint` e tokenul existent pentru roșul pal.

   Un buton periculos stă ULTIMUL în rândul de acțiuni, despărțit de restul. */
.btn.btn-danger{background:var(--color-bg);color:var(--color-bad-deep);border-color:var(--color-bad-deep)}
.btn.btn-danger:hover{background:var(--color-bad-tint);border-color:var(--color-bad-deep);color:var(--color-bad-deep)}
.btn.btn-danger:active{background:var(--color-bad-tint);filter:brightness(.97)}
/* Separarea: primul `btn-danger` din rândul de acțiuni ia 12px în plus și o linie verticală în mijlocul
   golului. `margin-left:auto` n-ar împinge nimic: `.actions` din antet e cât conținutul lui. Un buton
   din formular (`<form style="display:contents">`, ca „Oprește" pe tag) nu e frate cu celelalte, de
   aceea selectorii de mai jos trec și prin formular. Al doilea periculos, unul singur în rând sau
   unul dintr-un tabel nu mai primesc separator. */
.actions .btn-danger{margin-left:12px;position:relative}
.actions .btn-danger::before{content:"";position:absolute;left:-10px;top:4px;bottom:4px;width:1px;background:var(--color-neutral-400)}
.actions .btn-danger ~ .btn-danger,
.actions .btn-danger ~ form .btn-danger,
.actions > .btn-danger:first-child,
.actions > form:first-child .btn-danger,
.table .btn-danger{margin-left:0}
.actions .btn-danger ~ .btn-danger::before,
.actions .btn-danger ~ form .btn-danger::before,
.actions > .btn-danger:first-child::before,
.actions > form:first-child .btn-danger::before,
.table .btn-danger::before{display:none}
/* Cu `:has()`, fiecare în regula lui: un browser care nu-l știe aruncă toată regula în care îl găsește,
   deci nu-l amestecăm cu alți selectori, nici între ei. */
.actions form:has(.btn-danger) ~ .btn-danger{margin-left:0}
.actions form:has(.btn-danger) ~ form .btn-danger{margin-left:0}
.actions form:has(.btn-danger) ~ .btn-danger::before{display:none}
.actions form:has(.btn-danger) ~ form .btn-danger::before{display:none}

/* Opțiunea periculoasă dintr-o alegere (ex. Pierdut / Casat la schimbarea statusului): text roșu. */
.check-danger,.check-danger .hint{color:var(--color-bad-deep)}

/* Iconița stă lângă text, niciodată singură; mărimea vine din atribute, aici doar aliniere. */
.btn .icon{flex:none;display:block;width:16px;height:16px}

/* ── spațierea, în clase și nu în `style` ───────────────────────────────────
   Șabloanele nu mai poartă `style="margin-…"`. Fiecare clasă ia exact spațiul pe care îl dădea stilul scos.

   - Notele și bannerele care sunt copii direcți ai paginii (confirmări, avertismente de sus) stau la
     `--gap` de ce urmează, ca panourile între ele. Selectorul e `.panel-main`, nu `.page`: pagina
     telefonului din QR (`pairing/telefon.tpl`) are `.page`, dar nu are carcasa panoului.
   - `.gap-top` pune `--gap` deasupra unui panou, a unei grile sau a unui formular de filtre, în
     locul `<div style="height:var(--gap)">` dintre ele. Margine de sus, nu un `.stack` în jurul lor:
     un `.stack` e grilă, iar un tabel lat sau o grilă `.cols-*` pe un singur rând automat își schimbă lățimea. */
.panel-main > .note,
.panel-main > .banner { margin-bottom: var(--gap); }
.gap-top { margin-top: var(--gap); }
/* O notă dintr-un panou (fără padding lateral al corpului) stă la `--gap` de margini, pe orizontală. */
.mx-gap { margin: 0 var(--gap); }

/* Fără marginea implicită a paragrafului sau a câmpului (mesaje goale, text dintr-un dialog,
   câmp într-un rând de tabel, formularul de filtre dintr-un dialog). */
.flush { margin: 0; }

/* Un formular care doar înconjoară un buton dintr-un rând de acțiuni: `contents` lasă butonul să fie
   elementul rândului (flex), `inline` îl lasă în text, într-o celulă de tabel. */
.form-contents { display: contents; }
.inline-form { display: inline; }

/* Butonul de la capătul din stânga al rândului de acțiuni al unui dialog („Scoate modelul"). */
.dialog-actions .actions-lead { margin-right: auto; }

/* Logo-ul în tabel și în fișa telefonului: întreg, nu tăiat. */
.logo-thumb { object-fit: contain; display: block; }

/* Poza unei treceri umple pătratul, cu colțurile lui. */
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Un banner într-un `.notes` (ex. eroarea unei excepții): `.banner` are padding pe orizontală și doar
   linie jos, gândite pentru lățimea paginii, iar `.notes` are deja padding-ul lui, deci ieșea indentat dublu.
   Aici e o cutie ca o notă: contur întreg (`border-style` explicit, fiindcă `.banner` îl dă doar jos), colțuri rotunjite, același padding. Culoarea conturului rămâne
   cea a tonului (`banner-bad`). */
.notes .banner { padding: 10px 12px; border-width: 1px; border-style: solid; border-radius: var(--radius-md); }

/* Vocalul unei predări de tură (pagina obiectivului): sub notă, pe lățimea unui player obișnuit. */
.handover-audio { display: block; width: 100%; max-width: 320px; margin-top: 6px; }