/* Emerald Hub — tabloul de conducere.
 *
 * Macheta vine din prototipul `Emerald-CashFlow.html`. E deliberat altfel decât
 * Control: acolo e un ecran de telefon, închis la culoare, ținut cu o mână, în
 * locație; aici e un tablou de birou, deschis, cu tabele late și cifre multe.
 * De aceea sunt două foi de stil, nu una cu excepții. */

:root{
  --navy:#0B1220; --neon:#A6FF00; --green:#1E9E52; --amber:#E8A317; --red:#C0392B;
  --ink:#1a2230; --muted:#5A6479; --line:#E2E7F0;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
  background:#eef1f6;padding:22px;-webkit-text-size-adjust:100%;}
.wrap{max-width:1240px;margin:0 auto;}
.wrap-wide{max-width:100%;}

/* Cutia paginii. Se numește `.page`, nu `.card`, fiindcă `.card` e un rând de listă
   în paginile venite din Control — vezi stratul de traducere de la sfârșitul fișierului. */
.page{background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(11,18,32,.08);padding:26px 30px;}

/* ------------------------------------------------------------------ antet */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-bottom:3px solid var(--navy);padding-bottom:15px;margin-bottom:20px;flex-wrap:wrap;}
.top .brand{font-size:1.35rem;font-weight:900;letter-spacing:-.02em;text-decoration:none;color:var(--ink);}
.top .brand i{font-style:normal;color:var(--green);}
.top .brand .sub{display:block;color:var(--muted);font-size:.82rem;font-weight:500;margin-top:2px;letter-spacing:0;}
.top .who{font-size:.9rem;text-align:right;font-weight:700;}
.top .who .sub{color:var(--muted);font-size:.82rem;margin-top:2px;font-weight:500;}

/* ------------------------------------------------------------------- file */
/* Meniul pe două niveluri. Nivelul 1 sunt domeniile, nivelul 2 paginile domeniului
   deschis. Ierarhia se citește din greutate, nu din indentare: domeniul e mai mare și
   mai apăsat, pagina e mai mică și fără contur. */
.meniu{margin-bottom:18px;border-bottom:2px solid var(--line);}
.meniu .nivel1{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-bottom:9px;}
.meniu .nivel1 a{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:20px;
  padding:7px 16px;font-size:.86rem;font-weight:700;text-decoration:none;white-space:nowrap;}
.meniu .nivel1 a:hover{border-color:var(--navy);}
.meniu .nivel1 a.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.meniu .nivel1 a.away{color:var(--muted);font-weight:600;border-style:dashed;}
.meniu .nivel1 a.away.on{background:var(--navy);color:#fff;border-style:solid;}
.meniu .sp{flex:1;}

.meniu .nivel2{display:flex;gap:4px;flex-wrap:wrap;padding:0 0 9px 2px;}
.meniu .nivel2 a{color:var(--muted);border-radius:14px;padding:5px 12px;font-size:.8rem;
  font-weight:600;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;}
.meniu .nivel2 a:hover{color:var(--ink);background:#F2F5F9;}
.meniu .nivel2 a.on{color:var(--navy);background:#EDF2FA;border-color:#CBD9EC;}

/* numele vechi, cât timp mai există pagini care îl folosesc */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:2px solid var(--line);padding-bottom:10px;}
.tabs a{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:20px;
  padding:7px 16px;font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap;}
.tabs a:hover{border-color:var(--navy);}
.tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.tabs .sp{flex:1;}
.tabs a.away{color:var(--muted);}

/* ------------------------------------------------------------------- KPI */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;}
.kpi{border:1.5px solid var(--line);border-radius:10px;padding:13px 16px;}
.kpi b{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px;}
.kpi .v{font-size:1.25rem;font-weight:800;}
.kpi.paid .v{color:var(--green);} .kpi.rest .v{color:var(--amber);} .kpi.bad .v{color:var(--red);}
.kpi .s{font-size:.7rem;color:var(--muted);margin-top:3px;}
.kpi.clk{cursor:pointer;} .kpi.clk:hover{border-color:var(--navy);}
.kpi.sel{border-color:var(--navy);background:#F7F9FC;box-shadow:inset 0 0 0 1px var(--navy);}
.kpi.sel .s{color:var(--navy);font-weight:700;}
a.kpi{text-decoration:none;color:inherit;display:block;}

/* ----------------------------------------------------------------- tabele */
table{width:100%;border-collapse:collapse;font-size:.88rem;}
th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:9px 8px;border-bottom:2px solid var(--line);white-space:nowrap;}
th.r,td.r{text-align:right;white-space:nowrap;} th.c,td.c{text-align:center;}
/* Capete de coloană pe care se dă click. Săgeata e mereu acolo, ca să se vadă că se
   poate sorta — palidă pe coloanele inactive, plină pe cea după care e ordonată lista. */
th.sort a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
th.sort a:hover{color:var(--navy);}
th.sort a:hover .sageata{opacity:1;}
th.sort .sageata{font-size:.62rem;opacity:.35;line-height:1;}
th.sort.on{color:var(--navy);}
th.sort.on .sageata{opacity:1;}
th.sort.right a{flex-direction:row-reverse;}
td{padding:9px 8px;border-bottom:1px solid #F0F2F7;vertical-align:middle;}
tr.clickable{cursor:pointer;} tr.clickable:hover{background:#F7F9FC;}
tr.clickable td a.rowlink{color:inherit;text-decoration:none;display:block;}
tfoot td{font-weight:800;border-top:2px solid var(--navy);background:#F7F9FC;}
.table-scroll{overflow-x:auto;}

/* --------------------------------------------------------------- pastile */
.pill{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:20px;
  letter-spacing:.02em;white-space:nowrap;}
.p-ok{background:#DFF5E7;color:#12703A;} .p-warn{background:#FFF3D6;color:#8A6100;}
.p-bad{background:#FBE3E0;color:#932018;} .p-none{background:#EEF1F6;color:var(--muted);}
.p-navy{background:#E7ECF5;color:var(--navy);}
.name{font-weight:700;} .sml{font-size:.74rem;color:var(--muted);display:block;margin-top:2px;}
.nw,.nowrap{white-space:nowrap;}
.tag{display:inline-block;background:#EEF1F6;color:var(--muted);border-radius:6px;padding:2px 7px;
  font-size:.7rem;font-weight:700;margin-right:4px;}

/* --------------------------------------------------------------- butoane */
.btn{display:inline-block;border:none;background:var(--navy);color:#fff;border-radius:9px;padding:10px 16px;
  font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.2;}
.btn:hover{background:#16233b;}
.btn.g{background:var(--green);} .btn.g:hover{background:#177E41;}
.btn.ghost{background:#fff;color:var(--muted);border:1.5px solid var(--line);font-weight:600;}
.btn.ghost:hover{border-color:var(--navy);color:var(--ink);}
.btn.sm{padding:6px 12px;font-size:.76rem;border-radius:8px;}
.btn.dgr{background:#fff;color:var(--red);border:1.5px solid #F3D4D0;}
.btn.dgr:hover{background:#FBE3E0;}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.acts .sp{flex:1;}

/* --------------------------------------------------------------- alerte */
.alert{border:1.5px solid #F0C36B;background:#FFF8E8;border-radius:10px;padding:14px 18px;margin-bottom:18px;}
.alert > b{display:block;font-size:.84rem;color:#8A6100;margin-bottom:7px;}
.alert ul{list-style:none;font-size:.83rem;line-height:1.75;}
.alert li.bad{color:#932018;}
.alert li a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px dotted var(--navy);}
.alert.ok{border-color:#A9DCC0;background:#F2FBF5;} .alert.ok > b{color:#12703A;}
.alert.bad{border-color:#F3D4D0;background:#FDF4F3;} .alert.bad > b{color:#932018;}
.alert.info{border-color:#C3D3EC;background:#F4F8FE;} .alert.info > b{color:var(--navy);}

/* „de verificat" — strâns implicit, cu pastile pe grupe.
   E un <details> ca să meargă și fără JavaScript; săgeata o întoarce hub.js. */
.alert.watch{padding:0;overflow:hidden;}
details.watch > summary{list-style:none;}
details.watch > summary::-webkit-details-marker{display:none;}
details.watch > summary::marker{content:'';}
.watch-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;background:none;border:none;
  padding:12px 18px;cursor:pointer;font-family:inherit;text-align:left;text-decoration:none;}
.watch-head:hover{background:rgba(232,163,23,.09);}
.watch-head .wt{font-size:.84rem;font-weight:800;color:#8A6100;}
.watch-head .wcaret{margin-left:auto;color:#8A6100;font-size:.75rem;font-weight:700;}
.watch-body{padding:2px 18px 15px;}
.wgrp + .wgrp{margin-top:14px;padding-top:12px;border-top:1px solid rgba(232,163,23,.3);}
.wgrp h4{font-size:.67rem;text-transform:uppercase;letter-spacing:.05em;color:#8A6100;font-weight:800;margin-bottom:4px;}

/* -------------------------------------------------------------- secțiuni */
.sec{margin-top:26px;}
.sec h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;
  border-bottom:2px solid var(--line);padding-bottom:7px;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.sec h2 .btn{margin:-4px 0;}
h1{font-size:1.15rem;}
/* Titlurile din paginile vechi nu stau într-un `.sec`; fără regula asta iau mărimea
   implicită a browserului și ies mai mari decât capetele de secțiune ale Hub-ului. */
h2{font-size:.95rem;font-weight:800;margin:22px 0 10px;}
h3{font-size:1rem;margin-bottom:10px;}
.back{display:inline-block;color:var(--muted);font-size:.82rem;font-weight:600;text-decoration:none;margin-bottom:14px;}
.back:hover{color:var(--navy);}
.empty{color:var(--muted);padding:22px 10px;text-align:center;font-size:.86rem;
  border:1.5px dashed var(--line);border-radius:10px;}
/* `:not(.btn)` — vezi nota de la stratul de traducere: în paginile venite din Control,
   `.small` pe un buton înseamnă mărime, nu culoare de text. */
.note,.small:not(.btn){color:var(--muted);font-size:.74rem;margin-top:12px;line-height:1.55;}
.lead{color:var(--muted);font-size:.85rem;margin-top:4px;}
.muted{color:var(--muted);}

/* ------------------------------------------------------------- formulare */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
label.f{display:block;margin-bottom:12px;}
label.f > span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;margin-bottom:5px;}
input,select,textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;
  font-size:.9rem;font-family:inherit;color:var(--ink);background:#fff;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);}
input[readonly],input:disabled,select:disabled{background:#F7F9FC;color:var(--muted);}
textarea{min-height:60px;resize:vertical;}
.hint{font-size:.74rem;color:var(--muted);margin-top:5px;line-height:1.5;}
.hint b{color:var(--ink);}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;}
.filters select,.filters input{width:auto;min-width:140px;}
.filters label.f{margin-bottom:0;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chips a{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 13px;
  font-size:.8rem;font-weight:600;color:var(--ink);text-decoration:none;}
.chips a.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.calc{background:#F7F9FC;border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;margin:6px 0 12px;}
.calc .row{display:flex;justify-content:space-between;font-size:.85rem;padding:4px 0;}
.calc .row.tot{border-top:1.5px solid var(--line);margin-top:6px;padding-top:8px;font-weight:800;font-size:.95rem;}
.money{font-weight:800;} .neg{color:var(--red);} .pos{color:var(--green);}
.split{border:1.5px solid var(--line);border-radius:8px;padding:10px;margin-top:6px;max-height:230px;overflow:auto;}
.split .sr{display:flex;gap:8px;align-items:center;padding:4px 0;}
.split .sr select{flex:1;} .split .sr input{width:120px;text-align:right;} .split .sr button{flex:none;}

/* --------------------------------------------------------------- grafic */
.bars{display:flex;align-items:flex-end;gap:4px;height:130px;padding:10px 0;overflow-x:auto;}
.bars .b{flex:1;min-width:10px;display:flex;align-items:flex-end;gap:1px;height:100%;}
.bars .b i{display:block;flex:1;min-width:3px;border-radius:2px 2px 0 0;}
.bars .b .in{background:var(--green);} .bars .b .out{background:#C9D2E0;}
.bars .b:hover .in{background:#177E41;} .bars .b:hover .out{background:var(--amber);}
.lgd{display:flex;gap:16px;font-size:.74rem;color:var(--muted);margin-top:4px;}
.lgd i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;}

.tools{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px;padding-top:14px;
  border-top:1px solid var(--line);}

/* ------------------------------------------------------------ autentificare */
body.plain{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.wrap-narrow{max-width:380px;width:100%;background:#fff;border-radius:10px;
  box-shadow:0 4px 20px rgba(11,18,32,.08);padding:30px 28px;}
.login-logo{text-align:center;margin-bottom:22px;}
.login-logo .mark{font-size:2.4rem;line-height:1;margin-bottom:8px;}
.login-logo h1{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;}
.login-logo p{color:var(--muted);font-size:.82rem;margin-top:3px;}
.wrap-narrow label{display:block;margin-bottom:14px;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:700;}
.wrap-narrow label input{margin-top:5px;text-transform:none;letter-spacing:0;font-weight:400;}
.pin-input{letter-spacing:.3em;}
.btn-row{margin-top:18px;} .btn.wide{width:100%;text-align:center;}
.mt{margin-top:14px;} .center{text-align:center;}

@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr);} .grid3{grid-template-columns:1fr;}}
@media(max-width:760px){
  body{padding:12px;} .card{padding:18px 16px;} .grid2{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr 1fr;} table{font-size:.8rem;} th,td{padding:7px 6px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRAT DE TRADUCERE — clasele venite din Emerald Control

   Modulele mutate în Hub (checklist-uri, bani, personal, parc auto, administrare)
   au fost scrise în limbajul vizual al aplicației de teren: `.card` ca rând de listă,
   `.badge` în loc de `.pill`, `.kpi-row` cu `.n`/`.l` în loc de `.kpis` cu `.v`/`.s`.

   În loc să rescriu cincisprezece pagini, le traduc aici, o singură dată. Regula pentru
   cine scrie pagini noi: folosește clasele Hub de mai sus (`.pill`, `.kpis`, `.sec`);
   bucata asta există doar ca vechiul cod să arate ca acasă.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rânduri de listă. La Control erau cartonașe cu umbră pe fundal închis; aici sunt
   rânduri cu chenar subțire, ca să nu iasă cutii albe peste cutia albă a paginii. */
.card{border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:#fff;}
.card.tight{padding:10px 14px;}
a.card{display:block;text-decoration:none;color:inherit;}
a.card:hover{border-color:var(--navy);background:#F7F9FC;}
/* `a.card` are specificitate mai mare decât `.card-row`, deci fără regula asta
   săgeata din dreapta cade pe rândul de dedesubt. */
.card-row,a.card.card-row{display:flex;align-items:center;gap:12px;}
.card-row .grow{flex:1;min-width:0;}
.card-row .chev{color:var(--muted);font-size:1.2rem;flex:none;}
.card h4{font-size:.95rem;font-weight:700;margin-bottom:2px;}
.card .sub{font-size:.78rem;color:var(--muted);}

/* Pastilele de stare. Aceeași formă ca `.pill`, doar alt nume de clasă. */
.badge{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:20px;
  letter-spacing:.02em;white-space:nowrap;background:#EEF1F6;color:var(--muted);}
.badge.ok{background:#DFF5E7;color:#12703A;}
.badge.warn{background:#FFF3D6;color:#8A6100;}
.badge.bad{background:#FBE3E0;color:#932018;}
.badge.grey{background:#EEF1F6;color:var(--muted);}

/* Indicatorii din paginile vechi: `.kpi-row` cu `.n` (cifra) și `.l` (eticheta). */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.kpi-row .kpi{border:1.5px solid var(--line);border-radius:10px;padding:13px 16px;}
.kpi .n{font-size:1.25rem;font-weight:800;}
.kpi .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:4px;}
.kpi.ok .n{color:var(--green);} .kpi.warn .n{color:var(--amber);} .kpi.bad .n{color:var(--red);}

/* Text mărunt și aliniere, cu numele din Control.
   `:not(.btn)` nu e o subtilitate — e o reparație. În Control, `.small` pe un buton
   însemna „buton mai mic"; aici `.small` însemna „text gri". Puse împreună, textul alb
   al butonului devenea gri pe fundal închis și abia se mai citea. Utilitarul de text
   nu are voie să atingă butoanele; mărimea lor se dă mai jos. */
.sml,.small:not(.btn){font-size:.74rem;color:var(--muted);}
.center{text-align:center;} .right{text-align:right;}

/* Butoane cu numele din Control: `small` e mărime, `brand` e acțiunea principală. */
.btn.small{padding:6px 12px;font-size:.76rem;border-radius:8px;}
.btn.brand{background:var(--navy);color:#fff;}
.btn.brand:hover{background:#16233b;}
.btn.danger{background:#fff;color:var(--red);border:1.5px solid #F3D4D0;}
.btn.danger:hover{background:#FBE3E0;}
/* Ghost-ul e tot un buton, nu o notă de subsol: textul lui trebuie să se citească. */
.btn.ghost{color:var(--ink-soft);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
/* În Control, `.btn-row` întinde butoanele pe toată lățimea — corect pe un telefon,
   unde ținta trebuie să fie mare. Aici e o bară de unelte pe un ecran lat, iar un buton
   întins pe jumătate de pagină pentru „+ Angajat" arată ca o greșeală. Rămâne rând
   simplu; cine chiar vrea lățime întreagă cere `.wide`. */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;}
.alert.warn{border-color:#F0C36B;background:#FFF8E8;}
.alert.warn > b{color:#8A6100;}
.btn.wide{width:100%;text-align:center;}

/* Raportul unei rulări: un punct verificat, cu starea în stânga și poza în dreapta.
   Structura e cea din app.css — aici se schimbă doar culorile și mărimile. */
.answer-line{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
.answer-line:last-child{border-bottom:0;}
.answer-line .st{flex:0 0 26px;font-size:1rem;text-align:center;}
.answer-line .txt{flex:1;min-width:0;}
.answer-line .txt .lbl{font-size:.9rem;font-weight:600;}
.answer-line .txt .val{font-size:.8rem;color:var(--muted);margin-top:2px;}
.answer-line .thumb img{width:62px;height:62px;object-fit:cover;border-radius:8px;border:1.5px solid var(--line);}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.photo-grid a{display:block;position:relative;border-radius:10px;overflow:hidden;border:1.5px solid var(--line);}
.photo-grid img{width:100%;height:120px;object-fit:cover;display:block;}
.photo-grid .flag{position:absolute;top:5px;right:5px;background:rgba(192,57,43,.92);color:#fff;
  border-radius:6px;padding:2px 6px;font-size:.66rem;font-weight:700;}

/* Tabloul zilei: locații pe rânduri, checklist-uri pe coloane, o bulină per căsuță. */
.matrix td.cell{text-align:center;padding:6px 4px;}
.dot{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:8px;
  font-size:.78rem;font-weight:700;}
.dot.done{background:#DFF5E7;color:#12703A;}
.dot.late{background:#FFF3D6;color:#8A6100;}
.dot.miss{background:#FBE3E0;color:#932018;}
.dot.na{background:#EEF1F6;color:var(--muted);}
a .dot{text-decoration:none;}

/* Fișa unui incident și a unui raport Z: poza în stânga, ce e de făcut în dreapta. */
.inc-file{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;}
.inc-slot{flex:1 1 340px;min-width:0;}
.inc-state{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* Închiderea de zi: rânduri de formular și blocul de calcul. */
.bani-row{display:flex;gap:12px;flex-wrap:wrap;}
.bani-row > label{flex:1 1 190px;margin:0;}
.bani-calc{border:1.5px dashed var(--line);border-radius:10px;padding:12px 14px;margin:14px 0;}
.bani-calc .r{display:flex;justify-content:space-between;gap:16px;padding:3px 0;font-size:.9rem;
  text-align:left;white-space:normal;}
.bani-calc .sep{border-top:1px solid var(--line);margin:6px 0;}

@media(max-width:760px){
  .card-row{gap:8px;} .photo-grid img,.thumb img{width:96px;height:72px;}
}

/* ── Matricea de drepturi pe rol ────────────────────────────────────────────
   Trei lucruri o fac utilizabilă la 10 roluri × 14 drepturi, și toate trei lipseau:

   1. Panoul are înălțime proprie și derulează pe amândouă axele. Înainte `sticky` era
      pus pe un container care nu derula pe verticală — deci capul de tabel se pierdea
      exact când începeai să cauți drepturile de jos, și nu mai știai pe ce rol bifezi.
   2. `width: max-content` în loc de `100%`: tabelul își cere lățimea lui și derulează,
      în loc să fie strâns până când ultimele coloane ies din ecran, tăiate.
   3. Coloana cu numele dreptului și rândul cu rolurile rămân lipite, iar colțul dintre
      ele stă peste amândouă — altfel se suprapun la derulare pe diagonală. */
.tabel-scroll {
  overflow: auto;
  max-height: calc(100vh - 260px);
  min-height: 320px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overscroll-behavior: contain;
}
table.drepturi { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .84rem; }
table.drepturi th, table.drepturi td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: center; }

table.drepturi thead th {
  position: sticky; top: 0; z-index: 2;
  background: #F5F7FB; color: var(--ink);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--line); white-space: nowrap;
}
table.drepturi th.col-drept, table.drepturi td.col-drept {
  position: sticky; left: 0; z-index: 3;
  text-align: left; min-width: 290px; max-width: 290px;
  background: #fff; border-right: 2px solid var(--line);
}
table.drepturi thead th.col-drept { z-index: 4; background: #F5F7FB; }
table.drepturi td.col-drept strong { display: block; font-weight: 700; font-size: .84rem; }
table.drepturi td.col-drept .desc { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; line-height: 1.35; }
table.drepturi th .cati { display: block; color: var(--muted); font-weight: 500; font-size: .66rem; letter-spacing: 0; text-transform: none; margin-top: 2px; }

table.drepturi tr.grup td {
  background: #EDF2FA; text-align: left; padding: 7px 12px;
  border-bottom: 1px solid var(--line);
}
table.drepturi tr.grup span {
  position: sticky; left: 12px;
  display: inline-block; font-weight: 800; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
}

/* Coloana Administrator, blocată. */
table.drepturi .blocat { background: #F3F8F4; }
table.drepturi thead th.blocat { background: #E9F2EC; }
table.drepturi .fix { color: var(--green); font-weight: 800; }

table.drepturi input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--navy); }

/* Urmărirea coloanei: pe unde trece mouse-ul și, mai ales, coloana fixată cu un clic
   pe numele rolului. Fără ea, la al zecelea rând în jos nu mai știi cui bifezi. */
table.drepturi td.hov, table.drepturi th.hov { background: #F2F5F9; }
table.drepturi td.col-drept.hov, table.drepturi tr.grup td.hov { background: #E7EDF6; }
table.drepturi th.fixat, table.drepturi td.fixat { background: #E8F0FD; box-shadow: inset 1px 0 0 #B9CDEA, inset -1px 0 0 #B9CDEA; }
table.drepturi thead th.fixat { background: #DCE8FA; }
table.drepturi thead th[data-rol] { cursor: pointer; }
table.drepturi thead th[data-rol]:hover { color: var(--navy); }

.matrice-ajutor { display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin: 0 0 10px; font-size: .78rem; color: var(--muted); }