/* ==========================================================================
   Hartwell · Directia B — Design System (port CSS al hwb-tokens.css + hwb-ds.jsx + hwb-shell.jsx)
   Sursa autoritara: source/design/. Mobile-first (~380px), fara scroll orizontal.
   Tokens white-label: cele 4 de baza se pot suprascrie inline per companie (TEN-13).
   ========================================================================== */

:root {
  --hw-primary: #1F4E79;
  --hw-accent: #C9A84C;
  --hw-bg: #F7F5F0;
  --hw-text: #0A1628;
}
:root {
  /* Testare Cornel T-072 (05.11.2026, varianta A aleasa de Cornel): randul titlului de grup din meniu. Culori FIXE ale platformei —
     brandingul firmei (TEN-13) suprascrie doar cei 4 tokeni de mai sus. Text #0A1628 pe #E8892E = 7.0:1 (AA); alb ar fi 2.6:1 (pica). */
  --hw-nav-group-bg: #E8892E;
  --hw-nav-group-ink: #0A1628;
}
:root, .hw-derive {
  --hw-navy: color-mix(in oklab, var(--hw-primary) 78%, #050E18);
  --hw-card: #FFFFFF;
  --hw-card-warm: color-mix(in oklab, var(--hw-bg) 28%, #FFFFFF);
  --hw-sec: color-mix(in oklab, var(--hw-text) 64%, var(--hw-bg));
  /* WCAG AA — text tertiar. 40% (#8E939A) pica AA peste tot unde poarta text: 3.09:1 pe card,
     2.84:1 pe --hw-bg, 3.02:1 pe --hw-card-warm (etichetele INACTIVE din tab bar-ul mobil = navigatia
     principala pe telefon). Toti consumatorii sunt 10–13.5px ⇒ NU „large text" ⇒ prag 4.5:1.
     56% (#676F7A): 5.08:1 pe card · 4.67:1 pe --hw-bg · 4.96:1 pe --hw-card-warm. */
  --hw-ter: color-mix(in oklab, var(--hw-text) 56%, var(--hw-bg));
  /* --hw-line = separator DECORATIV (card/rand/rigla). 1.41:1 pe card — corect ca „linie fina"
     ([[Brief]] §3.3: fara chenare grele), dar insuficient pentru LIMITELE de componenta. */
  --hw-line: color-mix(in oklab, var(--hw-text) 11%, var(--hw-bg));
  /* WCAG 1.4.11 (>= 3:1 pentru limitele componentelor de UI): bordura inputurilor/selectoarelor/
     chips-urilor. 45% (#828890): 3.58:1 pe card · 3.28:1 pe --hw-bg · 3.49:1 pe --hw-card-warm. */
  --hw-line-strong: color-mix(in oklab, var(--hw-text) 45%, var(--hw-bg));
  --hw-prim-bg: color-mix(in oklab, var(--hw-primary) 9%, #FFFFFF);
  --hw-prim-press: color-mix(in oklab, var(--hw-primary) 82%, #000000);
  --hw-accent-bg: color-mix(in oklab, var(--hw-accent) 15%, #FFFFFF);
  /* auriu inchis ca TEXT (badge „nou", valori suprascrise): 62% (#8F762F) da 3.91:1 pe --hw-accent-bg
     si 4.37:1 pe card. 50% (#7E6727): 4.87:1 pe --hw-accent-bg · 5.45:1 pe card. */
  --hw-accent-dark: color-mix(in oklab, var(--hw-accent) 50%, #3A2D05);
  --hw-accent-soft: color-mix(in oklab, var(--hw-accent) 40%, var(--hw-bg));
  /* semantice (fixe — nu se rebrandeuiesc).
     ok: #2E7D5B da 4.41:1 pe --hw-ok-bg ⇒ #2B7455 = 4.96:1 pe --hw-ok-bg (5.63:1 pe card).
     warn are DOUA roluri, matematic incompatibile intr-un singur token:
       · --hw-warn      = SUPRAFATA (banner impersonare, toast, semafor, bara de progres). Trebuie sa
                          ramana suficient de deschis ca textul inchis #1A1300 sa dea 4.98:1 peste el.
       · --hw-warn-ink  = TEXT pe --hw-warn-bg / pe card. #856313: 4.91:1 pe --hw-warn-bg · 5.54:1 pe card.
     (Un singur ton nu poate satisface ambele: pentru 4.5:1 ca text pe --hw-warn-bg ar trebui atat de
      inchis incat nici negrul pur nu ar mai da 4.5:1 peste el ca fundal.) */
  --hw-ok: #2B7455;   --hw-ok-bg: #E9F3EE;
  --hw-warn: #A87E1C; --hw-warn-bg: #F8F1DE; --hw-warn-ink: #856313;
  --hw-err: #B54040;  --hw-err-bg: #F8EAEA;
  --hw-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hw-font-sans: -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --hw-shadow: 0 1px 2px rgba(18,31,48,0.05), 0 6px 20px rgba(18,31,48,0.06);
  --hw-shadow-lift: 0 2px 6px rgba(18,31,48,0.07), 0 14px 36px rgba(18,31,48,0.10);
  --hw-shadow-up: 0 -8px 28px rgba(18,31,48,0.16);
}

/* ── reset / anti-overflow ───────────────────────────────────────────── */
* { box-sizing: border-box; }
/* SYS-01 — `overflow-x: hidden` DOAR pe <html>, NICIODATA si pe <body>.
   Pus si pe <body>, forta `overflow-y` de la `visible` la `auto` (CSS Overflow L3 §3.1: `visible` cu
   celalalt ax ne-`visible` se calculeaza `auto`) ⇒ <body> devenea CONTAINER DE DERULARE, cu `height:auto`.
   `position:sticky` se raporteaza la cel mai apropiat scrollport ancestral, deci tab bar-ul mobil se
   raporta la scrollport-ul lui <body> — care, avand inaltimea continutului, nu deruleaza NICIODATA ⇒
   `bottom:0` nu se activa si bara NU se mai fixa de viewport: pe orice pagina mai inalta decat ecranul
   (dictionarul de termeni, campurile personalizate, hub-ul de setari) navigatia mobila PRINCIPALA pleca
   sub fold. Pe <html>, valorile se propaga la viewport (§3.3) si <html> insusi ramane `visible` ⇒ taierea
   orizontala e IDENTICA, dar <body> nu mai e scrollport si sticky se fixeaza corect. */
html { overflow-x: hidden; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--hw-font-sans);
  color: var(--hw-text);
  background: var(--hw-bg);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Bug hunting 18.10 (BH-A25): plasa de siguranta pentru textul liber al utilizatorilor (URL-uri, coduri, cuvinte lungi fara
     spatii): se rupe la marginea containerului in loc sa iasa din card / din ecran (`html` taie orizontal, deci restul nu se
     mai vedea deloc pe telefon). `break-word` nu schimba latimea minima a elementelor (layout-urile flex raman la fel). */
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--hw-primary); text-decoration: none; }

@keyframes hw-spin { to { transform: rotate(360deg); } }
@keyframes hw-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.hw-skel {
  background: linear-gradient(90deg, var(--hw-line) 25%, color-mix(in oklab, var(--hw-line) 45%, #fff) 50%, var(--hw-line) 75%);
  background-size: 400px 100%; animation: hw-shimmer 1.4s infinite linear; border-radius: 4px;
}

/* ── atomi ───────────────────────────────────────────────────────────── */
.hw-cap { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hw-ter); }
.hw-rule { width: 24px; height: 2px; background: var(--hw-accent); border-radius: 2px; }
.hw-section-title { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.hw-section-title .line { flex: 1; height: 1px; background: var(--hw-line); }
.hw-serif { font-family: var(--hw-font-serif); }

/* ── butoane ─────────────────────────────────────────────────────────── */
.hw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 40px; padding: 0 18px; border-radius: 8px; border: 0; cursor: pointer;
  font-family: var(--hw-font-sans); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  background: var(--hw-navy); color: #fff; border-bottom: 2px solid var(--hw-accent);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--hw-navy) 25%, transparent);
  text-decoration: none; transition: filter .12s ease;
}
.hw-btn:hover { filter: brightness(1.06); }
/* Testare Cornel T-012 (31.10): butoanele care deschid un formular (`<summary class="hw-btn">`) arata ca toate celelalte butoane — textul centrat,
   fara triunghiul implicit (inainte un `display:inline-block` inline lasa textul sus si o cutie goala dedesubt). Cand formularul e DESCHIS, butonul
   devine un comutator discret („▾"), ca sa nu fie confundat cu butonul care salveaza (ex. „Aloca oricum" de sub el). */
summary.hw-btn { display: inline-flex; list-style: none; }
summary.hw-btn::-webkit-details-marker { display: none; }
summary.hw-btn::marker { content: ''; }
summary.hw-btn::after { content: '▸'; font-size: 11px; opacity: .8; }
details[open] > summary.hw-btn {
  background: transparent; color: var(--hw-navy); border-bottom-color: transparent; box-shadow: none;
  outline: 1px solid color-mix(in oklab, var(--hw-navy) 30%, transparent);
}
details[open] > summary.hw-btn::after { content: '▾'; }
.hw-btn--lg { height: 50px; font-size: 15.5px; }
.hw-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; box-shadow: none; }
/* Podea de atingere pe MOBIL (regula design 1: tinte >= 44x44). Scara 32/40/50 vine ca atare din
   handoff-ul autoritar (`hwb-ds.jsx`: sm=32, md=40, lg=50) si e corecta pe desktop (mouse), dar pe
   telefon intra sub minimul de 44px cerut de brief §2 (principiul 2) — iar pe ecrane ca dictionarul
   SYS-02 butonul `--sm` e SINGURUL control de salvare al suprascrierii. Podeaua se aplica doar
   <900px, deci nu altereaza tipografia/densitatea desktopului din handoff. */
@media (max-width: 899px) {
  .hw-btn, .hw-btn--sm { min-height: 44px; }
  /* Podeaua de mai sus e doar pe INALTIME. Un buton icon-only (`✕` = sterge contact/sediu/document/eticheta)
     are `padding: 0 6px` ⇒ ~24px LATIME: tinta ramane sub 44px pe axa orizontala (regula design 1). Acelasi
     tratament e deja aplicat cazului analog `button.hw-badge`. */
  .hw-btn--tertiary { min-width: 44px; }
}
.hw-btn--full { display: flex; width: 100%; }
.hw-btn--secondary { background: var(--hw-card); color: var(--hw-navy); border: 1px solid var(--hw-navy); box-shadow: none; }
.hw-btn--tertiary { background: transparent; color: var(--hw-primary); border: 0; box-shadow: none; padding: 0 6px; }
.hw-btn--destructive { background: var(--hw-card); color: var(--hw-err); border: 1px solid var(--hw-err); box-shadow: none; }
/* `--ghost` = actiune de navigare DE-EMFAZATA (ex. „Registru accidente ›" / „Inapoi la evenimente" din SSM-03/08,
   „Vezi panoul" din COMP, antetele TSK): transparenta peste fundalul paginii, fara umbra si FARA rigla aurie de
   „primar", cu limita de componenta >= 3:1 (WCAG 1.4.11 — `--hw-line-strong`) si text `--hw-navy` (AA pe --hw-bg
   si pe card). Modificatorul era folosit in 13 ecrane dar NEPICTAT in acest fisier ⇒ butonul se randa identic cu
   cel PRIMAR (navy plin + rigla aurie), stergand ierarhia vizuala ceruta de brief §3 (design regula 7). */
.hw-btn--ghost { background: transparent; color: var(--hw-navy); border: 1px solid var(--hw-line-strong); border-bottom: 1px solid var(--hw-line-strong); box-shadow: none; }
.hw-btn:disabled, .hw-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* FAB — se randeaza DOAR pe ecranele care declara unul (`layouts/app.blade.php`, ca in handoff:
   `hwb-shell.jsx` → `{fab && …}`). `bottom` tine cont de safe-area (iPhone cu notch): tab bar-ul creste
   cu env(safe-area-inset-bottom) ⇒ FAB-ul trebuie sa creasca la fel, altfel il atinge. */
.hw-fab {
  position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--hw-navy); color: #fff; border: 2px solid var(--hw-accent);
  display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1;
  box-shadow: 0 10px 26px color-mix(in oklab, var(--hw-navy) 38%, transparent); z-index: 25;
}

/* Testare Cornel T-025: „＋ Adauga” din antet — tinta de 44px, meniul se deschide sub buton, aliniat la dreapta, peste continut. */
.hw-quickadd { position: relative; flex-shrink: 0; }
.hw-quickadd > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border-radius: 999px;
}
.hw-quickadd > summary::-webkit-details-marker { display: none; }
.hw-quickadd > summary::marker { content: ''; }
.hw-quickadd--desk > summary { color: var(--hw-primary); border: 1px solid var(--hw-line); background: var(--hw-card); min-width: 44px; min-height: 44px; }
.hw-quickadd--desk > summary:hover, .hw-quickadd--desk[open] > summary { background: var(--hw-prim-bg); }
.hw-quickadd--mob > summary { color: #fff; }
.hw-quickadd > summary:focus-visible { outline: 2px solid var(--hw-accent); outline-offset: 2px; }
.hw-quickadd__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; max-width: calc(100vw - 32px);
  background: var(--hw-card); color: var(--hw-text); border: 1px solid var(--hw-line); border-radius: 10px;
  box-shadow: 0 12px 30px color-mix(in oklab, var(--hw-navy) 22%, transparent); padding: 6px 0;
}
.hw-quickadd__head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-sec); padding: 6px 14px 4px; }
.hw-quickadd__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--hw-text); text-decoration: none; font-size: 14px; }
.hw-quickadd__panel a:hover, .hw-quickadd__panel a:focus-visible { background: var(--hw-prim-bg); color: var(--hw-primary); }

/* ── badge / semafor / avatar ────────────────────────────────────────── */
.hw-badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: color-mix(in oklab, var(--hw-text) 7%, var(--hw-bg)); color: var(--hw-sec);
}
.hw-badge--ok { background: var(--hw-ok-bg); color: var(--hw-ok); }
.hw-badge--warn { background: var(--hw-warn-bg); color: var(--hw-warn-ink); }   /* 4.91:1 */
.hw-badge--err { background: var(--hw-err-bg); color: var(--hw-err); }
.hw-badge--info { background: var(--hw-prim-bg); color: var(--hw-primary); }
.hw-badge--gold { background: var(--hw-accent-bg); color: var(--hw-accent-dark); }
/* Ton NEUTRU explicit (arhivat/„urmarire interna" MED-c) = tonul de baza al pilulei — declarat ca sa nu
   ramana o clasa fara regula si sa nu drifteze daca `.hw-badge` de baza se schimba. `--hw-sec` (64%) pe
   fundalul deschis: >= ~4.6:1 (peste `--hw-ter` = 5.08:1 pe card) ⇒ AA. */
.hw-badge--neutral { background: color-mix(in oklab, var(--hw-text) 7%, var(--hw-bg)); color: var(--hw-sec); }
.hw-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
/* Pilula al carei text NU e marginit de un vocabular scurt de stari. `.hw-badge` de baza poarta
   `white-space:nowrap` — corect pentru „activa"/„finalizata", gresit pentru cheia de actiune din jurnalul de
   audit (SEC-05), unde textul vine din 166 de actiuni distincte, cea mai lunga de 54 de caractere
   (`finance.allocation.milestone_mark_blocked_tcn_disabled`). Ne-infasurata, o astfel de pilula are min-content
   ~330px si depaseste singura cutia cardului la un viewport de 380px (16px padding pagina + 16px padding card
   pe fiecare parte ⇒ 316px utili) ⇒ scroll orizontal (regula 1) + text taiat (regula 4). */
.hw-badge--wrap { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: right; }
/* Podea de atingere pe MOBIL pentru pilulele folosite ca ACTIUNE (regula design 1: tinte >= 44x44).
   `.hw-badge` e un token de AFISAJ (pilula ~21px: padding 3px + 11.5px text) — corect pentru un status
   (`<span>`), dar dosarul de muncitor (ANG) il foloseste si ca CONTROL (`<button class="hw-badge">`:
   salveaza/sterge calificarea, sterge perioada, confirma/nu poate la mobilizare). Ca `<button>` raman
   singurele comenzi ale acelor actiuni, deci pe telefon ar fi tinte de ~21px — sub minimul din brief §2.
   Acelasi tipar ca podeaua de la `.hw-btn` de mai sus: se aplica DOAR <900px, deci densitatea desktop din
   handoff-ul autoritar (`hwb-ds.jsx`) ramane neatinsa, iar `<span class="hw-badge">` (status) NU e afectat. */
@media (max-width: 899px) {
  button.hw-badge, a.hw-badge { min-height: 44px; padding-inline: 14px; }
}

.hw-semafor { width: 10px; height: 10px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.hw-semafor--ok { background: var(--hw-ok); }
.hw-semafor--warn { background: var(--hw-warn); }
.hw-semafor--err { background: var(--hw-err); }
.hw-semafor--info { background: var(--hw-primary); }

.hw-avatar {
  width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: var(--hw-prim-bg); color: var(--hw-primary);
}
.hw-avatar--gold { background: var(--hw-accent); color: var(--hw-navy); }

/* ── formular ────────────────────────────────────────────────────────── */
.hw-field { margin-bottom: 16px; }
.hw-field > label, .hw-label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--hw-ter); margin-bottom: 6px;
}
/* bordura de control (WCAG 1.4.11): --hw-line-strong = 3.58:1 pe card / 3.28:1 pe --hw-bg. */
.hw-input, .hw-select, .hw-textarea {
  width: 100%; background: var(--hw-card); border: 1px solid var(--hw-line-strong); border-radius: 8px;
  padding: 0 12px; height: 44px; font-size: 15px; color: var(--hw-text); font-family: var(--hw-font-sans);
}
.hw-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
/* BD-b (regula de design 6) — plasa de siguranta pentru `<textarea class="hw-input">`. `height: 44px` de mai sus e o
   inaltime CSS FIXA: pe un <textarea> ea BATE atributul `rows`, deci un `rows="3"` se randa ca o caseta de o singura
   linie (44px) cu scrollbar intern — textul lung ramanea ascuns. Marcajul corect e `.hw-textarea`, dar clasa gresita
   apare in mai multe ecrane livrate (CTR/LOG/COMP/BD): calificam pe ELEMENT, ca sa nu ramana defectul viu pe ecranele
   celorlalte unitati. Nu regreseaza nimic: `min-height` inline (56/60/120px, unde a fost intentionat mai mic) are
   specificitate mai mare si castiga in continuare. */
textarea.hw-input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
/* SYS-02 — campul de VALOARE din dictionar (global + suprascrieri de tenant). Textul e de lungime
   VARIABILA: de la „Acasa" (5 caractere) pana la paragrafe — `dictionary.intro` are 177 RO / 187 EN in
   dictionarul livrat, iar campul accepta 1000. Pe `<input>` de o linie se vedeau ~30 din 187 de caractere,
   fara wrap (regula de design 6). `<textarea>` incadreaza textul; min-height 56px (~2 randuri), NU cei
   96px impliciti, pentru ca ecranul randeaza 145 de termeni x limba: la 96px/camp lista s-ar umfla in
   gauri ilogice (regula de design 5). `resize: vertical` (mostenit) desfasoara paragraful cand e nevoie.
   Acelasi tipar de override contextual ca `.hw-composer .hw-textarea`. */
.hw-dict-form .hw-textarea { min-height: 56px; }
.hw-input:focus, .hw-select:focus, .hw-textarea:focus {
  outline: none; border-color: var(--hw-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hw-primary) 12%, transparent);
}
.hw-input[aria-invalid="true"], .hw-input.is-error { border-color: var(--hw-err); }
/* Starea DEZACTIVAT pe TOATE cele trei controale, nu doar pe `.hw-input`. Regulile de mai sus sunt
   declaratii de autor (background/color/border) si bat stilul implicit al browserului pentru
   `select:disabled` / `textarea:disabled` (declaratii UA) ⇒ fara o regula proprie, un select dezactivat
   se randa IDENTIC cu unul editabil (text inchis pe alb, bordura normala) si mintea utilizatorul.
   Caz viu: hub-ul de setari cu $canEdit=false (Director Operational) — inputul se estompa corect, dar
   cele doua select-uri pareau editabile, desi erau inerte. #555E6A pe #FDFCFB = 6.41:1 (peste AA). */
.hw-input:disabled, .hw-input[readonly],
.hw-select:disabled, .hw-textarea:disabled, .hw-textarea[readonly] {
  background: var(--hw-card-warm); color: var(--hw-sec); cursor: not-allowed;
}
.hw-hint { font-size: 12px; color: var(--hw-ter); margin-top: 5px; }
.hw-error { font-size: 12px; color: var(--hw-err); margin-top: 5px; }
/* dimensionare campuri (regula 6): scurt pt CUI/VAT/serie, lat pt nume/adresa */
.hw-field--short { max-width: 220px; }
.hw-field--wide { width: 100%; }

/* ── carduri ─────────────────────────────────────────────────────────── */
.hw-card { background: var(--hw-card); border-radius: 10px; border: 1px solid var(--hw-line); box-shadow: var(--hw-shadow); }
.hw-card--warm { background: var(--hw-card-warm); }
.hw-card--pad { padding: 16px; }
/* card informativ „inca indisponibil" — NU se estompeaza cu `opacity` (ar cobora textul la 2.4–2.8:1 si
   ar sugera fals un control dezactivat): suprafata calda + contur punctat + text pe token (--hw-sec =
   6.41:1 pe --hw-card-warm) + badge neutru. */
.hw-card--muted { background: var(--hw-card-warm); border-style: dashed; box-shadow: none; }

.hw-hero {
  background: var(--hw-navy); color: #fff; border-radius: 10px; padding: 16px; box-shadow: var(--hw-shadow-lift);
}
.hw-hero .title { font-family: var(--hw-font-serif); font-size: 19px; font-weight: 600; }
.hw-hero .sub { font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 3px; }

.hw-list { list-style: none; margin: 0; padding: 0; }
.hw-list-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px;
  border-top: 1px solid var(--hw-line); text-decoration: none; color: inherit;
}
.hw-list-row:first-child { border-top: 0; }
.hw-list-row .body { flex: 1; min-width: 0; }
.hw-list-row .title { font-size: 14.5px; font-weight: 600; color: var(--hw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-list-row .meta { font-size: 12px; color: var(--hw-ter); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `.meta` e implicit pe UN rand cu ellipsis (secundar: date, status). Cand rANDul poarta informatie ESENTIALA
   in meta — ex. istoricul de alocari ANG-07: „client · tara", unde `clients.legal_name` merge pana la 190 car. —
   ellipsis-ul ASCUNDE informatia la ~380px (regulile de design 2 si 4: text netaiat, fara truncare care ascunde
   informatie esentiala). Modificatorul lasa textul sa curga pe mai multe randuri, FARA sa atinga celelalte liste.
   Declarat DUPA `.hw-list-row .meta` (specificitate egala ⇒ castiga ultimul declarat). */
.hw-list-row .meta--wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Perechea lui `.meta--wrap` pentru randul de TITLU. `.title` e, prin design system, pe UN rand cu ellipsis —
   corect pentru etichete scurte („Factura #123", „Raport de progres"), gresit cand randul poarta TEXT LIBER
   care e SINGURUL identificator al lui: `portal_shared_documents.title` (POR-06 partajare / POR-10 upload de
   client) merge pana la 180 de caractere, iar `.body` are ~161px la 380px ⇒ ~21 caractere vizibile. Chiar
   placeholderul ecranului („ex. Permis de acces santier Monfalcone") pierdea numele santierului.
   Aceeasi specificitate cu `.hw-list-row .title` ⇒ declarat DUPA ea. */
.hw-list-row .title--wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* rand de lista care GAZDUIESTE un panou (ex. `<details>` de editare inline): randul de baza e `flex`
   fara wrap, deci panoul deschis ar strivi campurile „late" (~190px la 380px) si ar taia `.meta`.
   Pe coloana, panoul primeste latimea intreaga a cardului. */
.hw-list-row--stack { flex-direction: column; align-items: stretch; gap: 8px; }

.hw-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hw-stat-card { background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: 10px; box-shadow: var(--hw-shadow); padding: 16px; }
/* `overflow-wrap: anywhere` (+ `min-width:0`) = obligatoriu: `.value` poarta o SUMA DE BANI, adica un token
   fara nicio oportunitate de rupere in interiorul cuvantului („1.234.567,89"; spatiul dinaintea monedei e
   singura rupere). Pistele `.hw-stat-grid` sunt `1fr` = `minmax(auto,1fr)`, iar minimul AUTOMAT al unei
   piste e min-content-ul continutului: la 380px pista are 168px si `.value` are 134px utili, iar de la 7
   cifre intregi tokenul cere ~155px ⇒ gridul iese din `.hw-content` si `html{overflow-x:hidden}` (`:65`)
   il TAIE in loc sa-l faca scrollabil (regulile de design 2 si 4). `anywhere`, nu `break-word`: doar el
   intra in calculul min-content-ului (CSS Text L3 §5.5), deci coboara si PODEAUA pistei — repara si gridul,
   si textul. Acelasi idiom ca `.hw-badge--wrap` (`:161`), `.hw-kv .v` si `.hw-list-row .title--wrap`.
   Pinuit de `tests/Feature/Design/PorBcP1DesignGuardsTest.php`. */
.hw-stat-card .value { font-family: var(--hw-font-serif); font-size: 30px; font-weight: 600; color: var(--hw-navy); line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
.hw-stat-card .label { font-size: 12px; color: var(--hw-sec); margin-top: 4px; }
.hw-stat-card .trend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11.5px; font-weight: 600; }
.hw-stat-card .trend.up { color: var(--hw-ok); }
.hw-stat-card .trend.warn { color: var(--hw-warn-ink); }   /* text 11.5px pe card: 5.54:1 (era 3.71:1) */

/* progres, alerte */
.hw-progress { height: 4px; background: var(--hw-line); border-radius: 999px; overflow: hidden; }
.hw-progress > span { display: block; height: 100%; background: var(--hw-accent); }
.hw-progress--warn > span { background: var(--hw-warn); }
.hw-alert-row { display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 8px 14px; border-top: 1px solid var(--hw-line); }
.hw-alert-row:first-child { border-top: 0; }
.hw-alert-row .bullet { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--hw-primary); }

/* stari */
.hw-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 24px; }
.hw-empty .icon { width: 56px; height: 56px; border-radius: 999px; background: var(--hw-accent-bg); color: var(--hw-accent-dark); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.hw-empty .title { font-family: var(--hw-font-serif); font-size: 17px; font-weight: 600; margin-top: 14px; }
.hw-empty .text { font-size: 13px; color: var(--hw-sec); margin-top: 5px; max-width: 240px; line-height: 1.45; }

/* toast — `bottom` include safe-area: pe iPhone cu notch (viewport-fit=cover) tab bar-ul creste la
   ~95px cu env(safe-area-inset-bottom)=34px, iar un toast la 84px ar cadea PESTE iconurile lui. */
/* CUTIE DEFINITA (left+right), NU `left:50%` + shrink-to-fit. Cu `left:50%` si width:auto, latimea unei
   cutii `position:fixed` se rezolva prin shrink-to-fit fata de spatiul DISPONIBIL = CB − left, adica
   380 − 190 = 190px pe telefon; `transform` ruleaza DUPA layout si nu poate largi cutia inapoi. Deci ORICE
   toast era clampat la ~190px (jumatate de ecran, ~22 caractere/linie) si se rupea in 3-5 linii — iar
   `max-width:92vw` de pe `--warn` era un no-op (max-width poate doar micsora rezultatul shrink-to-fit).
   La 4 linii toastul urca la ~182px peste viewport, adica PESTE rezerva de 160px a continutului, si
   acoperea ultimul element (ex. „Salveaza parametrii" din hub) la z-index 40.
   Fix: cutie definita (left/right) + max-width + margini auto = pilula centrata, 1-2 linii, si pe desktop.
   `pointer-events:none` pe container (copiii interactivi si-l reactiveaza): chiar si cand se suprapune,
   toastul nu mai MANANCA click-urile de dedesubt. */
.hw-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: 560px; margin-left: auto; margin-right: auto;
  z-index: 40; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--hw-navy); color: #fff; text-align: center;
  border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--hw-shadow-lift); border-bottom: 2px solid var(--hw-accent);
  pointer-events: none;
}
.hw-toast a, .hw-toast button { pointer-events: auto; }
/* Brief §3.4: „Toast / confirmare: scurt, jos, AUTO-DISPARE." Nu exista JS in public/, deci disparitia
   se face din CSS. Doar CONFIRMARILE (fara actiune) dispar; alertele cu CTA (`--warn`, ex. „Upgrade")
   raman pe ecran, altfel actiunea ar deveni inaccesibila.
   `--busy` = operatiune IN CURS (uploadul de captura din shell): nu dispare, pentru ca un video de teren
   pe semnal slab depaseste usor 4.5s — iar SYS-01 cere ca starea de INCARCARE sa fie vizibila pe teren,
   nu doar primele 4.5 secunde din ea. Toastul e inlocuit de rezultat (succes/eroare) cand requestul se
   incheie. */
.hw-toast:not(.hw-toast--warn):not(.hw-toast--busy) { animation: hw-toast-out .3s ease 4.5s forwards; }
/* Testare Cornel T-012 (31.10): avertismentul galben (`--warn`) nu mai sta pe ecran la nesfarsit peste formular — dispare dupa 10 s si are „✕".
   Doar alertele cu actiune (`--sticky`, ex. plafonul atins cu „Upgrade") raman pana sunt inchise. */
.hw-toast--warn:not(.hw-toast--sticky) { animation: hw-toast-out .3s ease 10s forwards; }
.hw-toast__close {
  pointer-events: auto; flex: none; min-width: 32px; min-height: 32px; margin-left: 2px;
  background: transparent; border: 0; border-radius: 999px; color: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.hw-toast__close:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
@keyframes hw-toast-out { to { opacity: 0; visibility: hidden; } }
/* toast de avertisment: fundal auriu-inchis + text INCHIS (ca bannerul de impersonare) = 4.98:1.
   Alb pe --hw-warn ar da 3.71:1 (sub AA). Linkul din toast mosteneste aceeasi culoare. */
.hw-toast--warn { background: var(--hw-warn); color: #1A1300; border-bottom-color: var(--hw-navy); }
.hw-toast--warn a { color: inherit; text-decoration: underline; font-weight: 700; }
/* Toastul (z-index 40) se randa PESTE FAB (z-index 25): FAB-ul ocupa 96px..152px de la baza, iar pilula,
   ancorata la 84px si latita pe toata latimea, ii acoperea ~29 din cei 56px (52%) — inclusiv bordura aurie.
   Nu era teoretic: FAB-ul e pe FIECARE ecran de tenant, iar Dictionarul (SYS-02) si Campurile personalizate
   (SYS-13) flash-uiesc `toast` la fiecare salvare; iar `--warn` NU auto-dispare ⇒ FAB pe jumatate acoperit
   permanent dupa o captura esuata. Ridicam toastul DEASUPRA FAB-ului (152px + 8px), dar numai in shell-urile
   care chiar au unul: in Portal/Muncitor pilula ramane jos, langa tab bar. */
body:has(.hw-fab) .hw-toast { bottom: calc(160px + env(safe-area-inset-bottom)); }

/* tabs / lang */
.hw-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--hw-line); }
/* `:not(.hw-btn)` — regula de tab (0,1,1) bate `.hw-btn` (0,1,0) si i-ar deturna culoarea/padding-ul/
   border-bottom-ul daca un ecran ar imbrica butoane in `.hw-tabs`. Tab-urile raman <a> simple. */
.hw-tabs a:not(.hw-btn) { padding-bottom: 8px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--hw-ter); border-bottom: 2px solid transparent; }
.hw-tabs a.active:not(.hw-btn) { color: var(--hw-navy); border-bottom-color: var(--hw-accent); }
/* Podea de atingere pe MOBIL (regula design 1: tinte >= 44px), acelasi tipar ca podelele deja existente de la
   `.hw-btn`/`.hw-btn--sm`, `button.hw-badge`/`a.hw-badge` si `a.hw-chip`. Fara ea, un tab masura ~30px
   (14px x line-height 1.45 + 8px padding + 2px bordura) — 69% din minim. Nu e o subtilitate de densitate:
   sub-nav-ul POR-b (`portal/partials/por-subnav.blade.php`) e SINGURA cale prin care un client pe telefon
   ajunge la „Documente" (POR-06/10) si „Rapoarte" (POR-14) — bara de taburi are 5 destinatii, iar meniul
   „Mai mult" randeaza doar `$primary + $secondary`, in care ele nu figureaza.
   `align-items: flex-end` tine eticheta lipita de linia activa: inaltimea creste IN SUS, in spatiul gol, deci
   desenul din handoff nu se schimba. Se aplica DOAR <900px ⇒ densitatea desktop ramane neatinsa. */
@media (max-width: 899px) {
  .hw-tabs a:not(.hw-btn) { min-height: 44px; display: inline-flex; align-items: flex-end; }
  /* Bug hunting 18.10 (BH-A14): si LATIMEA — „Poze” / „Toate” / „Video” masurau 30-36 x 44 px (tinta = latimea cuvantului).
     Eticheta ramane centrata deasupra liniei active; desktopul (>= 900 px) neatins. */
  .hw-tabs a:not(.hw-btn) { min-width: 44px; justify-content: center; }
}
.hw-lang { display: inline-flex; gap: 2px; border: 1px solid var(--hw-line-strong); border-radius: 999px; padding: 2px; }
.hw-lang span, .hw-lang button { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 999px; color: var(--hw-ter); }
.hw-lang button { border: 0; background: transparent; cursor: pointer; line-height: 1.4; }
.hw-lang span.active, .hw-lang button.active { background: var(--hw-navy); color: #fff; }

/* ── SHELL ───────────────────────────────────────────────────────────── */
.hw-app { display: flex; flex-direction: column; min-height: 100vh; }

/* header mobil (navy) — padding vertical 8px: cu tinte de atingere de 44px inaltimea totala ramane ~60px
   (cat era cu glife „goale" + padding 14px), deci nu fura din zona de continut. */
.hw-mobheader { background: var(--hw-navy); color: #fff; flex-shrink: 0; padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
.hw-mobheader .logo { font-family: var(--hw-font-serif); font-size: 19px; font-weight: 600; }
.hw-mobheader .logo small { display: block; font-family: var(--hw-font-sans); font-size: 9px; letter-spacing: 3px; color: var(--hw-accent); }
.hw-mobheader .title { font-family: var(--hw-font-serif); font-size: 22px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-mobheader .back { color: var(--hw-accent); font-size: 22px; line-height: 1; margin-left: -10px; }

/* Tinte de atingere >= 44x44 (regula design 1). `.back` / `.mob-search` / `.hw-bell` sunt SINGURA
   navigatie din header-ul mobil; ca glife fara padding masurau 13x22 / 20x18 / 22x19 px. */
.hw-mobheader .back, .hw-mobheader .mob-search, .hw-mobheader .hw-bell {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; flex-shrink: 0;
}

/* SYS-02 — HwLang in header-ul mobil (topbar-ul e ascuns <900px): contrast pe navy (WCAG AA) +
   touch targets >= 44px. Nu se strange peste titlu: titlul are flex:1 + ellipsis, deci nu apare overflow.
   Bordura: alb .45 pe navy = 3.52:1 (limita de componenta, WCAG 1.4.11; .28 dadea 2.0:1). */
.hw-mobheader .hw-lang { flex-shrink: 0; border-color: rgba(255, 255, 255, .45); }
.hw-mobheader .hw-lang button { color: rgba(255, 255, 255, .82); min-height: 44px; min-width: 44px; font-size: 11px; }
.hw-mobheader .hw-lang button.active { background: var(--hw-accent); color: var(--hw-navy); }
/* Bug hunting 18.10 (agent D, BH-D11) — pe telefon (375 px) antetul candidatului / muncitorului mai poarta selectorul de limba
   (2 × 44 px) + „i” + „Iesire”: titlului ii raman ~140 px (RO) / ~122 px (EN), iar `nowrap + ellipsis` il taia pe 8 din 10 ecrane
   („Document…”, „My docu…”). Pe ecran ingust titlul se rupe pe cel mult 2 randuri (antetul ramane 60-69 px); in antetele cu
   selectorul de limba corpul scade la 16 px, ca cele mai lungi cuvinte („Confirmations”, „Documentele”) sa incapa intregi.
   Regula de baza de mai sus (ellipsis pe un rand) ramane pentru ecranele late. */
@media (max-width: 480px) {
  .hw-mobheader .title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.2; overflow-wrap: break-word; }
  .hw-mobheader:has(.hw-lang--mob) .title { font-size: 16px; }
  /* Bug hunting 18.10 (BH-A27): doua randuri nu ajung pentru titlurile lungi in antetele cu 3-4 butoane (titlul are 124-181 px):
     „Registru accidente & indici SSM”, „KPI recrutare → plasare”, „Limite de viteza pentru camioane” se taiau. Titlurile de peste
     20 de caractere (`title--long`, pus de layout) primesc pana la 3 randuri, iar in antetele fara selectorul de limba corpul 17 px. */
  .hw-mobheader .title.title--long { -webkit-line-clamp: 3; line-clamp: 3; }
  .hw-mobheader:not(:has(.hw-lang--mob)) .title.title--long { font-size: 17px; }
}

/* SYS-02 — HwLang in top-nav-ul NAVY al shell-urilor Portal client / Muncitor (`.hw-portal-top`).
   Culorile implicite ale `.hw-lang` sunt calibrate pentru topbar-ul DESCHIS al app shell-ului
   (`--hw-ter` pe `--hw-card-warm`); pe navy, acelasi token ar da 2.1:1 (sub AA) si bordura ar disparea.
   Aceleasi valori ca in header-ul mobil: text alb .82 (7.81:1), bordura alb .45 (3.52:1 — WCAG 1.4.11),
   activ = auriu cu text navy (4.76:1 — peste pragul AA de 4.5:1 pentru textul de 10.5-11px al chip-ului;
   cifrele 9.11/4.43 de aici erau gresite, dar in siguranta: valorile RANDATE trec AA). Touch >= 44px se
   mosteneste din regula de mai jos. */
.hw-portal-top .hw-lang { flex-shrink: 0; border-color: rgba(255, 255, 255, .45); }
.hw-portal-top .hw-lang button { color: rgba(255, 255, 255, .82); }
.hw-portal-top .hw-lang button.active { background: var(--hw-accent); color: var(--hw-navy); }

/* SYS-12 — selector de context companie in SIDEBAR (desktop, doar platform admin).
   BLOCKER reparat: controlul era stilat inline cu `color:#fff` + `background:rgba(255,255,255,.06)`, iar
   `<option>`-urile nu aveau pereche proprie ⇒ Chromium/Firefox picteaza lista deschisa cu culorile
   selectului (alb pe alb ≈ 1.0:1) — numele companiilor erau INVIZIBILE la deschidere.
   Acum: lista = --hw-text pe #fff (18.13:1); controlul inchis = #fff pe 6% alb peste navy (9.11:1);
   bordura = alb .55 peste navy (4.51:1 fata de sidebar, 3.78:1 fata de umplutura ⇒ WCAG 1.4.11);
   eticheta = alb .6 (5.02:1). Touch >= 44px. */
.hw-context-switch { padding: 6px 22px 2px; }
.hw-context-switch > label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); margin-bottom: 4px;
}
.hw-context-switch select {
  width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  font-family: var(--hw-font-sans); border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06); color: #fff;
}
.hw-context-switch select option { color: var(--hw-text); background: #fff; }

/* SYS-12 — selector de context companie pe MOBIL (sidebar-ul care il gazduieste e ascuns <900px).
   In-flow in `.hw-main` => fara suprapunere peste continut/tab bar; full-width, touch >= 44px. */
.hw-ctx-mobile { padding: 12px 16px 0; }
.hw-ctx-mobile > label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--hw-ter); margin-bottom: 4px;
}
.hw-ctx-mobile .hw-select { width: 100%; min-height: 44px; }

/* tab bar (bottom, mobil) */
.hw-tabbar {
  position: sticky; bottom: 0; display: flex; border-top: 1px solid var(--hw-line);
  background: var(--hw-card-warm); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); flex-shrink: 0; z-index: 20;
}
.hw-tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--hw-ter); font-size: 10px; font-weight: 600; }
.hw-tabbar a .ic { font-size: 20px; line-height: 1; }
/* Eticheta e randata prin cheie (SYS-02), deci lungimea ei depinde de LIMBA: „Recruitment" > „Candidati".
   Fara `min-width:0` + ellipsis, un tab ingust nu se putea micsora sub latimea textului => bara impingea
   layout-ul in overflow orizontal (regula 1) sau taia textul (regula 4). Acum eticheta se trunchiaza
   controlat, iar iconul + destinatia raman intacte. */
.hw-tabbar a > span:not(.ic):not(.bullet):not(.pip) {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hw-tabbar a.active { color: var(--hw-navy); }
.hw-tabbar a .bullet { width: 4px; height: 4px; border-radius: 999px; background: transparent; }
.hw-tabbar a.active .bullet { background: var(--hw-accent); }

/* bara de actiuni lipita de jos, INTERIOR paginii (ex. actiunile in masa PNT-02/PNT-03 din `pnt/review`).
   `position:sticky` din continut se raporteaza pe mobil la VIEWPORT, nu la o cutie interioara: `<body>`
   NU e scrollport (vezi nota SYS-01 de sus, `overflow-x:hidden` doar pe `<html>`). Deci o bara ancorata
   la `bottom:8px` sta EXACT in banda tab bar-ului mobil (`.hw-tabbar`, ultimii ~60px, `z-index:20`) si,
   cu `z-index:auto`, e ACOPERITA de navigatia opaca pe tot parcursul derularii — actiunile principale ale
   ecranului devin invizibile si neatingibile pana la finalul listei, adica exact pana cand bara nu mai are
   rost. Ancoram deasupra benzii (60.5px rotunjit la 68px = 8px joc) si stivuim peste tab bar (21 > 20).
   Fundalul e OBLIGATORIU: fara el randurile derulate trec vizual prin golurile dintre butoane.
   Pe desktop `.hw-tabbar` e `display:none` si scrollport-ul devine `.hw-content` (vezi blocul >=900px)
   => rezerva de 68px ar deveni o gaura ilogica (regula 5), deci revenim la 8px. */
.hw-stickybar {
  position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 21;
  background: var(--hw-bg); padding-top: 8px; padding-bottom: 8px;
}
@media (min-width: 900px) { .hw-stickybar { bottom: 8px; } }

/* sidebar desktop */
.hw-sidebar { display: none; }
.hw-topbar { display: none; }

/* „Mai mult" (MOBIL, consola de platforma): sidebar-ul e `display:none` <900px, iar bara de taburi a
   platformei are doar 4 destinatii fixe ⇒ restul consolei (inclusiv dictionarul global SYS-02) nu avea
   nicio cale de acces la 380px. Meniu IN-FLOW (nu overlay) ⇒ nu se suprapune peste continut/tab bar. */
.hw-more-mobile { margin: 12px 16px 0; border: 1px solid var(--hw-line); border-radius: 10px; background: var(--hw-card); }
.hw-more-mobile > summary {
  cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; font-size: 13.5px; font-weight: 700; color: var(--hw-primary);
}
.hw-more-mobile > summary::-webkit-details-marker { display: none; }
.hw-more-mobile nav { border-top: 1px solid var(--hw-line); padding: 6px 0 8px; }
/* T-072: titlul de grup = rand portocaliu, text inchis, bold, 10 px (era 9 px gri). */
.hw-more-mobile .grp {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--hw-nav-group-ink); background: var(--hw-nav-group-bg); padding: 6px 14px; margin: 8px 0 2px;
}
.hw-more-mobile nav > .grp:first-child { margin-top: 0; }
.hw-more-mobile nav a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  font-size: 13.5px; color: var(--hw-text); text-decoration: none;
}
.hw-more-mobile nav a.active { background: var(--hw-prim-bg); color: var(--hw-primary); font-weight: 700; }
/* SYS-02 — HwLang traieste AICI pe mobil (spec: „meniul «Mai mult» pe mobil, topbar pe desktop"), nu in
   `.hw-mobheader`, unde consuma 96px ficsi (188px cu DE/IT active) din randul titlului. */
.hw-more-mobile .lang { display: flex; justify-content: center; padding: 10px 14px; border-top: 1px solid var(--hw-line); }
/* Bug hunting 18.10 (agent D, BH-D12): aici HwLang pastra stilul de desktop (padding 3px 8px, 10.5 px) = tinte de 30 × 21 px pe
   telefon; regula de design 1 cere ≥ 44 × 44 (ca in `.hw-mobheader .hw-lang button`). */
.hw-more-mobile .hw-lang button { min-height: 44px; min-width: 44px; font-size: 11px; }
/* Piciorul meniului „Mai mult" = oglinda lui `.hw-sidebar .foot` (identitate + IESIRE). Sidebar-ul e
   `display:none` <900px, deci fara asta shell-ul nu avea NICIUN logout pe telefon (tab bar / header /
   „Cont" nu ofera unul; account.security deconecteaza doar CELELALTE sesiuni). */
.hw-more-mobile .foot {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--hw-line);
}
.hw-more-mobile .foot .who { flex: 1; min-width: 0; }
.hw-more-mobile .foot .who .n {
  font-size: 13px; font-weight: 600; color: var(--hw-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hw-more-mobile .foot .who .r { font-size: 11px; color: var(--hw-sec); }

/* Disclosure (`<summary>`) ca TINTA DE ATINGERE (regula design 1). Un `<summary>` e `display:list-item`
   fara padding ⇒ inaltimea lui = o singura cutie de linie (14px x 1.45 = 20.3px; 12.5px x 1.45 = 18.1px),
   adica ~55% sub minimul de 44px — desi pe ecranele SYS-a el e SINGURUL control care deschide actiunea
   principala (formularul „Camp nou", editarea unui camp, „Suprascrie eticheta"). */
.hw-summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  cursor: pointer; list-style: none;
}
.hw-summary::-webkit-details-marker { display: none; }

/* continut */
.hw-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Rezerva de jos pentru FAB-ul `position:fixed` (altfel ACOPERA ultimul element al paginii — ex.
   „Salveaza parametrii" din hub, aliniat la dreapta jos, exact sub FAB: atingerea deschidea camera in
   loc sa trimita formularul). Rezerva se masoara de la MARGINEA DE JOS A CUTIEI DE CONTINUT, care sta pe
   tab bar (`position:sticky` ramane IN FLOW), nu de la marginea viewportului:
     · FAB: bottom 96px + inaltime 56px  ⇒ muchia lui de SUS = 152px deasupra viewportului;
     · tab bar: 8px + 44.5px (icon 20 + eticheta 14.5 + bullet 4 + 2 gap-uri) + 8px ≈ 60px;
     ⇒ rezerva minima = 152 − 60 = 92px.  (84px = inaltimea FAB + marja lui, masurata gresit fata de
   viewport, lasa ~8px de suprapunere pe coltul din dreapta-jos al ultimului element.)  100px = 92 + 8px marja. */
.hw-content { flex: 1; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); width: 100%; max-width: 100%; }
/* Rezerva se aplica DOAR cand FAB-ul chiar E in DOM (`:has`, ca la `.hw-toast` mai jos). FAB-ul e randat
   conditionat (`layouts/app.blade.php`: doar context tenant + MED-create + ne-client) ⇒ consola de platforma
   (inclusiv dictionarul global SYS-02) si rolurile fara MED-create ramaneau cu ~100px de gol mort deasupra
   tab bar-ului — „gaura ilogica" (regula 5 de design). Confinat la mobil: pe desktop `:has` s-ar potrivi tot
   (FAB-ul e doar `display:none`, deci PREZENT in DOM) si, fiind mai specific (0,2,1) decat resetul
   `.hw-content` (0,1,0) din blocul >=900px, ar reintroduce rezerva exact unde nu exista FAB fixat. */
@media (max-width: 899px) {
  body:has(.hw-fab) .hw-content { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
.hw-content--narrow { max-width: 680px; margin: 0 auto; }
.hw-page-title { font-family: var(--hw-font-serif); font-size: 20px; font-weight: 600; margin: 4px 0 2px; }
.hw-page-sub { font-size: 13px; color: var(--hw-sec); margin-bottom: 12px; }

/* ── DESKTOP (>= 900px): sidebar + topbar, ascunde header/tabbar/fab mobile ── */
@media (min-width: 900px) {
  .hw-app { flex-direction: row; height: 100vh; overflow: hidden; }
  /* `.hw-ctx-mobile` + `.hw-more-mobile`: pe desktop selectorul de context si navigatia completa traiesc
     in sidebar (SYS-12) — fara dublura. (`.hw-lang--mob` e in `.hw-mobheader`, deci deja ascuns aici.) */
  .hw-mobheader, .hw-tabbar, .hw-fab, .hw-ctx-mobile, .hw-more-mobile { display: none; }
  /* Pe desktop nu exista FAB fixat ⇒ nu mai e nevoie de rezerva de jos din shell-ul mobil. */
  .hw-content { padding-bottom: 16px; }
  /* `:has(.hw-fab)` se potriveste pe PREZENTA in DOM, iar FAB-ul e doar `display:none` aici ⇒ fara acest
     reset, toastul ar ramane ridicat la 160px pe desktop, unde nu are peste ce sa treaca. */
  body:has(.hw-fab) .hw-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

  .hw-sidebar {
    display: flex; flex-direction: column; width: 228px; flex-shrink: 0; background: var(--hw-navy);
    color: #fff; padding: 22px 0 16px;
  }
  .hw-sidebar .brand { padding: 0 22px; }
  .hw-sidebar .brand .logo { font-family: var(--hw-font-serif); font-size: 19px; font-weight: 600; }
  .hw-sidebar .brand .logo small { display: block; font-size: 9px; letter-spacing: 3px; color: var(--hw-accent); }
  .hw-sidebar .nav { flex: 1; min-height: 0; overflow-y: auto; margin-top: 14px; }
  /* titluri de grup — Testare Cornel T-072 (05.11.2026, varianta A): rand portocaliu pe toata latimea meniului, text inchis, bold, 10 px
     (era 9 px alb .6 pe navy si nu se distingea de randuri). #0A1628 pe #E8892E = 7.0:1 (AA). */
  .hw-sidebar .group { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hw-nav-group-ink); background: var(--hw-nav-group-bg); padding: 6px 22px; margin: 10px 0 3px; }
  .hw-sidebar .nav > .group:first-child { margin-top: 0; }
  .hw-sidebar a.item {
    display: flex; align-items: center; gap: 11px; padding: 8px 22px; font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,.55); border-left: 3px solid transparent;
  }
  .hw-sidebar a.item .ic { font-size: 15px; width: 18px; text-align: center; }
  .hw-sidebar a.item.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.07); border-left-color: var(--hw-accent); }
  .hw-sidebar .foot { display: flex; align-items: center; gap: 10px; padding: 13px 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
  .hw-sidebar .foot .who { flex: 1; min-width: 0; }
  .hw-sidebar .foot .who .n { font-size: 12.5px; font-weight: 600; }
  .hw-sidebar .foot .who .r { font-size: 10.5px; color: rgba(255,255,255,.55); }   /* .5 = 3.99:1 → .55 = 4.51:1 */

  .hw-main { min-width: 0; }
  .hw-topbar {
    display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 26px;
    border-bottom: 1px solid var(--hw-line); background: var(--hw-card-warm); flex-shrink: 0;
  }
  .hw-topbar .crumb { font-family: var(--hw-font-serif); font-style: italic; font-size: 13.5px; color: var(--hw-sec); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Testare Cornel T-030: bucatile firului sunt linkuri (culoarea actiunilor, subliniere la hover / focus); pagina curenta ramane gri. */
  .hw-topbar .crumb a { color: var(--hw-primary); text-decoration: none; padding: 4px 0; }
  .hw-topbar .crumb a:hover, .hw-topbar .crumb a:focus-visible { text-decoration: underline; }
  .hw-content { overflow-y: auto; padding: 24px 26px; }
  .hw-content--page { max-width: 1200px; }
  .hw-stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── util ────────────────────────────────────────────────────────────── */
.hw-stack > * + * { margin-top: 12px; }
.hw-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hw-row--between { justify-content: space-between; }
.hw-grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* `1fr` = `minmax(auto, 1fr)`: minimul AUTOMAT al unei piste e min-content-ul continutului. Cum `.hw-field`
   nu are `min-width:0`, iar min-content-ul unui `<input>` e latimea lui intrinseca (~185px, `size=20` implicit),
   un `hw-grid-2` INCUIBAT nu poate cobori sub ~2x185+12 = 380px. In fisa clientului (grid 2 coloane de la 640px)
   cardul din coloana are ~294px la 700px viewport ⇒ campurile ies din card, iar `html{overflow-x:hidden}` le
   TAIE in loc sa le faca scrollabile (regula design 2). `minmax(0,1fr)` scoate podeaua de min-content — acelasi
   idiom ca la `.hw-worker-search`. */
@media (min-width: 640px) { .hw-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hw-mt-0 { margin-top: 0; }
.hw-muted { color: var(--hw-sec); }
.hw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hw-readonly-note { font-size: 12px; color: var(--hw-warn-ink); background: var(--hw-warn-bg); border-radius: 8px; padding: 8px 12px; }  /* 4.91:1 */
/* Linkul din interiorul notei nu poate fi identificat DOAR prin culoare (WCAG 1.4.1 / G183): pe fundalul
   `--hw-warn-bg`, `--hw-primary` vs textul `--hw-warn-ink` din jur da 1.56:1 — sub pragul de 3:1. Sublinierea
   il face distinctibil fara culoare. Pe ecranul Integrari (REC-15) e chiar SINGURUL CTA functional (sincronizarea
   automata e deferata) => text esential neidentificabil = regula de design 4. Acelasi tratament ca `.hw-toast--warn a`. */
.hw-readonly-note a { text-decoration: underline; font-weight: 600; }

/* ── branding: logo propagat in shell (TEN-14) ───────────────────────── */
.hw-sidebar .brand .brand-logo { max-width: 160px; max-height: 40px; width: auto; display: block; }
/* Logo-ul de brand e `files` incarcat de tenant (TEN-14): `UploadLogoRequest` valideaza DOAR mime + KB,
   niciun `dimensions` ⇒ orice aspect e stocabil. Cu `max-height` dar FARA `max-width`, latimea
   TRANSFERATA (aspect x 28px) devine min-content-ul unui `<img>` (min-width:auto), deci flex item-ul
   NU se micsoreaza: la 380px raman 292px pentru logo + titlu (352 continut − 44 clopotel − 2 x 8 gap),
   iar un banner 12:1 cere 336px ⇒ elementele fixe ale header-ului ies din ecran, unde
   `html{overflow-x:hidden}` (`:65`) le TAIE. Bugetul difera pe cele doua shell-uri ale ferestrei:
     · portal client (POR-b): 352 − 44 (clopotel, flex-shrink:0) − 2x8 gap        = 292px logo+titlu;
     · muncitor (POR-c): 352 − 188 (HwLang, 4 limbi active, flex-shrink:0) − ~50 („Iesire")
       − 3x8 gap = 88px logo+titlu — cel mai stramt caz REAL al ferestrei.
   Plafon 72px (sub cel mai stramt buget) + `min-width:0` si `object-fit:contain`, ca imaginea sa se poata
   micsora fara distorsiune cand titlul are nevoie de spatiu. Fratele intern `.hw-sidebar .brand .brand-logo`
   (`:609`) foloseste aceeasi conventie de plafon, la bugetul lui de desktop (160px). */
.hw-mobheader .mob-logo { max-height: 28px; max-width: 72px; min-width: 0; object-fit: contain; width: auto; border-radius: 4px; }

/* ── panou branding (Zona 22, TEN-13/14) ─────────────────────────────── */
.hw-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.hw-color-row > .lbl { flex: 1 1 100%; }
.hw-color-row input[type=color] {
  width: 44px; height: 44px; min-width: 44px; padding: 2px; border: 1px solid var(--hw-line-strong);
  border-radius: 8px; background: var(--hw-card); cursor: pointer;
}
.hw-color-row .hex { max-width: 130px; text-transform: uppercase; }
.hw-swatch { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--hw-line-strong); flex-shrink: 0; }
.hw-contrast .pair { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 8px 0; border-top: 1px solid var(--hw-line); }
.hw-contrast .pair:first-child { border-top: 0; }
.hw-logo-slots { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .hw-logo-slots { grid-template-columns: repeat(3, 1fr); } }
.hw-logo-slot { border: 1px dashed var(--hw-line); border-radius: 10px; padding: 12px; }
.hw-logo-slot .preview { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; background: var(--hw-card-warm); border-radius: 8px; }
.hw-logo-slot .preview img { max-height: 56px; max-width: 100%; }
.hw-logo-slot .placeholder { color: var(--hw-ter); font-size: 22px; }
.hw-preview { border-radius: 10px; padding: 16px; background: var(--hw-bg); border: 1px solid var(--hw-line); }
.hw-preview .pv-card { background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: 10px; padding: 12px; margin-top: 10px; }

/* ── ACC-b: 2FA, coduri de recuperare, banner de impersonare ─────────────── */
.hw-otp {
  text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums; padding-left: 8px;
}
.hw-otp-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; letter-spacing: 2px;
  word-break: break-all; background: var(--hw-bg); border: 1px solid var(--hw-line);
  border-radius: 8px; padding: 10px 12px; color: var(--hw-text);
}
.hw-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; letter-spacing: 1px;
}
.hw-codes span { padding: 3px 0; color: var(--hw-text); }

/* Banner de impersonare (ACC-14): sus in zona de continut, flex-shrink 0 (nu se taie), contrast AA
   (text inchis pe fundal --hw-warn), fara suprapunere peste header/tabbar/continut. */
.hw-impersonation-banner {
  flex-shrink: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; background: var(--hw-warn); color: #1A1300; padding: 10px 16px;
  font-size: 13px; font-weight: 600;
}
/* Textul se INFASOARA, nu se taie: „{tinta} — {companie}" e datul FUNCTIONAL al bannerului (in ce tenant
   scrie operatorul de platforma, ACC-14 „contextul e FIXAT pe compania tintei" + transparenta GDPR).
   `.exit` poarta `white-space:nowrap` fara `min-width:0`, deci pe un rand ne-infasurabil min-content-ul lui
   = latimea intreaga a butonului si toata micsorarea cadea aici: la 380px ramaneau ~183px, adica „Operezi
   ca " + ~17 caractere — numele companiei nu aparea NICIODATA. */
.hw-impersonation-banner .txt { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.hw-impersonation-banner b { font-weight: 700; }
.hw-impersonation-banner .exit {
  background: var(--hw-navy); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; min-height: 44px; cursor: pointer;
}

/* ── SEC-a: detaliu intrare de audit (before/after) — wrap, fara scroll orizontal pe mobil ── */
.hw-audit-detail {
  margin: 8px 0 0; padding: 10px 12px; background: var(--hw-bg); border: 1px solid var(--hw-line);
  border-radius: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  line-height: 1.5; color: var(--hw-text); white-space: pre-wrap; word-break: break-word;
  overflow-wrap: anywhere; max-height: 320px; overflow-y: auto;
}

/* ── SEC-a: panou de retentie (label ↔ valoare), ritm consecvent ── */
.hw-kv { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hw-line); }
.hw-kv:first-child { border-top: 0; }
.hw-kv .k { font-size: 12.5px; font-weight: 600; color: var(--hw-sec); flex-shrink: 0; max-width: 42%; }
/* `overflow-wrap:anywhere` = obligatoriu: valorile din `.hw-kv` sunt token-uri NEintreruptibile (email 190 car.,
   IBAN, CNP, referinte externe) si nu au niciun punct de intrerupere UAX #14. Fara asta, cu `text-align:right`,
   textul iese pe STANGA peste eticheta `.k` si apoi in afara ecranului, unde `html{overflow-x:hidden}` il face
   inaccesibil (regulile de design 2 si 4 — text taiat/informatie ascunsa). `min-width:0` singur nu rupe token-ul. */
.hw-kv .v { font-size: 12.5px; color: var(--hw-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ── SYS-b: HwSearch (pill h38), chips de filtre/filtre salvate, manager etichete ── */
.hw-search { position: relative; display: flex; align-items: center; min-width: 0; }
.hw-search input {
  width: 100%; height: 38px; border-radius: 999px; border: 1px solid var(--hw-line-strong);
  background: var(--hw-card); padding: 0 14px 0 34px; font-size: 13.5px; color: var(--hw-text);
  font-family: var(--hw-font-sans); -webkit-appearance: none; appearance: none;
}
.hw-search input:focus { outline: none; border-color: var(--hw-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--hw-primary) 12%, transparent); }
/* ANG-e (regula de design 1 / brief §2 principiul 2) — `height: 38px` de mai sus ramanea SUB podeaua de 44px
   exact pe controlul PRINCIPAL al ecranului ANG-22: campul de cautare libera (`criteria[q]`, spec ANG-e:
   „bara HwSearch (pill) … touch targets >= 44px"). A supravietuit fiindca celalalt consumator al primitivei
   e cautarea din TOPBAR, iar `.hw-topbar` e `display:none` implicit (`:471`) si redevine `flex` abia in
   `@media (min-width: 900px)` (`:575`) — deci `.hw-search` nu era randat pe mobil NICAIERI altundeva.
   Acelasi tipar ca podelele deja existente (`.hw-btn` `:110`, `button.hw-badge` `:170`, `a.hw-chip` `:733`,
   `.hw-chips-choice label` `:849`): se aplica DOAR <900px, deci densitatea desktop din handoff-ul autoritar
   ramane neatinsa. `min-height` are precedenta peste `height`, deci pill-ul creste, nu se deformeaza. */
@media (max-width: 899px) {
  .hw-search input { min-height: 44px; }
}
.hw-search .ic { position: absolute; left: 12px; font-size: 14px; color: var(--hw-ter); pointer-events: none; line-height: 1; }
.hw-topbar .hw-search { width: 220px; flex: 0 0 auto; }
.hw-mobheader .mob-search { color: #fff; font-size: 18px; line-height: 1; margin-left: auto; }

.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hw-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px;
  min-height: 32px; font-size: 12.5px; font-weight: 600; background: var(--hw-card);
  border: 1px solid var(--hw-line-strong); color: var(--hw-navy); text-decoration: none;
}
.hw-chip:hover { border-color: var(--hw-primary); }
.hw-chip--active { background: var(--hw-prim-bg); border-color: var(--hw-primary); }
.hw-chip .x { color: var(--hw-ter); font-weight: 700; }

/* ANG-c — cand `.x` (scoate) e el insusi CONTROLUL (`<button class="x">` din chip-ul de eticheta al fisei de
   muncitor: SINGURUL mod de a scoate o eticheta), nu un ornament (`<span class="x">` din chip-ul de filtru ANG-22,
   unde controlul e `<a>`-ul intreg), tinta de atingere trebuie sa fie >= 44px — spec ANG-c: „selector de etichete
   pe fisa (adauga/scoate, touch >= 44px)". Ca glifa cu padding masura ~24x22px. Acelasi tipar ca podelele de la
   `.hw-btn` si `button.hw-badge`: se aplica DOAR <900px, deci densitatea desktop din handoff-ul autoritar
   (`hwb-ds.jsx`) ramane neatinsa, iar `<span class="x">` decorativ NU e afectat. Un `.hw-chip` care ESTE un control
   (`<a>`/`<button>`, ex. chip-ul de filtru activ) primeste aceeasi podea; `<span class="hw-chip">` (afisaj) nu. */
@media (max-width: 899px) {
  .hw-chip:has(button.x, a.x) { padding-block: 0; }
  .hw-chip form:has(button.x) { display: flex; }
  .hw-chip button.x, .hw-chip a.x {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
  a.hw-chip, button.hw-chip { min-height: 44px; }
}

/* chips de NAVIGATIE (ex. selectorul de entitate din SYS-11): tinta de atingere >= 44px si stare activa
   fara echivoc — navy + subliniere aurie (limbajul DS: vezi `.hw-btn` / `.hw-lang button.active`).
   Activ: #fff pe navy = 10.89:1; auriu pe navy = 4.43:1. Inactiv: navy pe card = 10.89:1. */
.hw-chips--nav .hw-chip { min-height: 44px; padding: 0 14px; font-size: 13px; }
.hw-chips--nav .hw-chip--active {
  background: var(--hw-navy); border-color: var(--hw-navy); color: #fff;
  border-bottom: 2px solid var(--hw-accent);
}

/* grup de rezultate de cautare (grupat pe tip de entitate) */
.hw-search-group { margin-top: 16px; }
.hw-search-group .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.hw-search-group .head .n { font-family: var(--hw-font-serif); font-size: 15px; font-weight: 600; }
.hw-search-group .head .c { font-size: 12px; color: var(--hw-ter); }

/* ── REC-b: pipeline (Kanban desktop / lista pe etape mobil), scorecard, interviuri ───────────
   Regula critica REC-19: pe mobil (~380px) NU se randeaza Kanban orizontal (ar produce scroll
   orizontal = substantive). Mobil = sectiuni stivuite pe etape. Kanban orizontal DOAR pe desktop. */
.rec-board { display: none; }                 /* mobil: ascuns (fara scroll orizontal) */
.rec-mob-stage { margin-bottom: 18px; }
.rec-mob-stage .st-hd { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.rec-mob-stage .st-hd .nm { font-family: var(--hw-font-serif); font-size: 15.5px; font-weight: 600; }
.rec-move { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.rec-move select { flex: 1; min-width: 0; }
.rec-daychip { font-size: 11px; color: var(--hw-ter); }

@media (min-width: 900px) {
  .rec-board {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start;
  }
  .rec-mobile { display: none; }
  .rec-col {
    flex: 0 0 250px; background: var(--hw-card-warm); border: 1px solid var(--hw-line);
    border-radius: 10px; padding: 10px; min-height: 120px;
  }
  .rec-col .col-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .rec-col .col-hd .nm { font-weight: 600; font-size: 13px; }
  .rec-col .col-hd .ct { font-size: 12px; color: var(--hw-ter); }
  .rec-col.dropok { outline: 2px dashed var(--hw-accent); outline-offset: -2px; }
  .rec-card {
    background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: 8px; padding: 10px;
    margin-bottom: 8px; box-shadow: var(--hw-shadow); cursor: grab;
  }
  .rec-card:last-child { margin-bottom: 0; }
  .rec-card.dragging { opacity: .45; }
  .rec-card .nm { font-size: 13.5px; font-weight: 600; color: var(--hw-text); }
  .rec-card .mt { font-size: 11.5px; color: var(--hw-ter); margin-top: 2px; }
}

/* scorecard: grila de criterii (lista pe mobil, nu tabel inghesuit — [[A4]] §4) */
.rec-criteria { display: flex; flex-direction: column; gap: 10px; }
.rec-criterion { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center; }
.rec-criterion .lbl { min-width: 0; }
.rec-compare-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hw-line); }
.rec-compare-row:first-child { border-top: 0; }
.rec-score { font-family: var(--hw-font-serif); font-size: 18px; font-weight: 600; color: var(--hw-navy); }

/* ── ANG-22 ([[ANG-e]]): cautare avansata muncitori — HwSheet (bottom sheet + backdrop pe mobil, panou lateral pe
   desktop — NU taie continutul, [[A4]] §6), controale dimensionate corect, skeleton de incarcare.
   Formularul `.hw-worker-search` e containerul: toggle + backdrop + sheet + rezultate = frati (selector `~`). ── */
.hw-worker-search { display: block; }
.hw-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.hw-filterbar .hw-search { flex: 1 1 200px; min-width: 0; }
.hw-sheet-open { display: inline-flex; }              /* buton „Filtre" (mobil), ≥44px prin hw-btn */
.hw-sheet-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hw-sheet__backdrop { display: none; }

/* sheet: off-canvas jos pe mobil, ascuns pana la deschidere */
.hw-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; max-height: 86vh;
  display: flex; flex-direction: column; background: var(--hw-card);
  border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: var(--hw-shadow-up);
  transform: translateY(101%); transition: transform .22s ease;
}
.hw-sheet__grip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; position: sticky; top: 0; background: var(--hw-card); z-index: 1; }
.hw-sheet__grip .t { font-family: var(--hw-font-serif); font-size: 16px; font-weight: 600; }
.hw-sheet__close { width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--hw-sec); font-size: 20px; cursor: pointer; }
.hw-sheet__panel { overflow-y: auto; padding: 4px 16px 12px; }
.hw-sheet__actions { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: var(--hw-card); border-top: 1px solid var(--hw-line); }
.hw-sheet__actions .hw-btn { flex: 1; }

/* deschis (mobil): backdrop + slide-up (selector `~` — frati de toggle); blocheaza scroll-ul de fundal */
.hw-sheet-toggle:checked ~ .hw-sheet__backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(10,22,40,.44); }
.hw-sheet-toggle:checked ~ .hw-sheet { transform: none; }
/* Blocarea derularii din fundal se pune pe <html>, NU pe <body>: elementul care deruleaza documentul e
   <html> (valorile lui se propaga la viewport), deci `overflow:hidden` pe <body> nu bloca nimic. */
html:has(.hw-sheet-toggle:checked) { overflow: hidden; }

/* grupuri de filtru — latimi corecte (regula 6): multi-select = camp lat, chips pentru enum scurt */
.hw-filter-group { margin-bottom: 16px; }
.hw-filter-group > .lbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hw-ter); margin-bottom: 6px; }
/* 44px, nu 36px (regula design 1). Caseta implicita a browserului e ~13x13px, deci eticheta e singura
   tinta reala — la 36px ramanea sub minim. */
.hw-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; color: var(--hw-text); }
.hw-check input { width: 18px; height: 18px; flex-shrink: 0; }
/* Varianta pentru etichete LUNGI pe mai multe randuri (consimtamantul GDPR de pe pagina publica de cariere,
   REC-16/REC-11): caseta se aliniaza sus, nu la mijlocul unui paragraf de 3 randuri. Podeaua de 44px ramane
   mostenita din `.hw-check` — pe un viewport lat, unde textul incape pe UN rand, altfel randul tapabil ar
   cadea la ~31px (regula design 1). `flex` (nu `inline-flex`) ca randul de consimtamant sa ocupe latimea
   formularului, ca inainte. */
.hw-check--start { display: flex; align-items: flex-start; line-height: 1.45; padding-block: 6px; cursor: pointer; }
.hw-checkwrap { display: flex; flex-direction: column; gap: 4px; }
.hw-chips-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-chips-choice label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hw-line-strong); background: var(--hw-card); font-size: 12.5px; font-weight: 600; color: var(--hw-navy); cursor: pointer; }
.hw-chips-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hw-chips-choice label:has(input:checked) { background: var(--hw-prim-bg); border-color: var(--hw-primary); }
.hw-chips-choice input:focus-visible + span { outline: 2px solid var(--hw-primary); outline-offset: 2px; border-radius: 4px; }

/* Regula 1 (tinte de atingere >= 44px pe mobil): input-ul e ascuns 1x1px (vezi mai sus), deci `label` E intreaga
   suprafata de atingere — la 36px ramanea sub minim, exact ca `.hw-check` inainte de corectie. Pe mobil ridicam
   podeaua la 44px (acelasi tratament ca `.hw-btn` / `a.hw-chip` / `.hw-check`); desktop-ul ramane dens (36px).
   Regula trebuie sa stea DUPA definitia de baza: media query-ul nu adauga specificitate. */
@media (max-width: 899px) {
  .hw-chips-choice label { min-height: 44px; padding-inline: 14px; }
}

select[multiple].hw-select { height: auto; min-height: 104px; padding: 8px 12px; }

/* rezultate + skeleton de incarcare (HwSkelRow) */
.hw-results { min-width: 0; }
.hw-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--hw-line); }
.hw-skel-row:first-child { border-top: 0; }
.hw-skel-row .a { width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; }
.hw-skel-row .b { flex: 1; height: 12px; }

@media (min-width: 900px) {
  /* desktop: formularul devine grid (filtre = panou lateral persistent, rezultate alaturi). Sheet/backdrop = in-flow. */
  .hw-worker-search { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 20px; align-items: start;
    grid-template-areas: "bar bar" "chips chips" "sheet results"; }
  .hw-filterbar { grid-area: bar; }
  .hw-worker-search > .hw-chips { grid-area: chips; }
  .hw-sheet { grid-area: sheet; }
  .hw-results { grid-area: results; }
  .hw-sheet-open, .hw-sheet__close { display: none; }
  .hw-sheet {
    position: static; transform: none; max-height: none; box-shadow: var(--hw-shadow);
    border: 1px solid var(--hw-line); border-radius: 10px;
  }
  .hw-sheet__grip { position: static; padding: 16px 16px 8px; }
  .hw-sheet__panel { overflow: visible; padding: 4px 16px 8px; }
  .hw-sheet__actions { position: static; padding: 12px 16px 16px; }
  .hw-sheet__backdrop { display: none !important; }
}

/* ── POR-a: Portal Client (white-label, SHELL SEPARAT — ZONA 19) ─────────────────────────────────
   Mobil (primar): reuseaza `.hw-mobheader` (sus) + `.hw-tabbar` (jos). Desktop (≥900px): navigatie
   ORIZONTALA pe navy (produs premium de sine statator, diferit de cockpit-ul intern cu sidebar).
   Brand = compania de plasare (tokens/logo per tenant), niciodata platforma. */
.hw-portal { display: flex; flex-direction: column; min-height: 100vh; }
.hw-portal .hw-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hw-portal .hw-content { flex: 1; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); width: 100%; max-width: 100%; }

/* clopotel notificari (header) cu punct auriu de necitit */
.hw-bell { position: relative; color: #fff; font-size: 19px; line-height: 1; margin-left: auto; display: inline-flex; }
/* punctul de necitit se ancoreaza de GLIFA, nu de colturile cutiei — clopotelul din header-ul mobil are
   acum o tinta de atingere de 44x44 (glifa e centrata in ea). */
.hw-bell .dot { position: absolute; top: calc(50% - 12px); right: calc(50% - 12px); width: 9px; height: 9px; border-radius: 999px; background: var(--hw-accent); border: 1.5px solid var(--hw-navy); }
.hw-tabbar a { position: relative; }
.hw-tabbar a .pip { position: absolute; top: 4px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 999px; background: var(--hw-accent); }

/* top-nav portal (desktop) — ascuns pe mobil */
.hw-portal-top { display: none; }
@media (min-width: 900px) {
  .hw-portal .hw-mobheader, .hw-portal .hw-tabbar, .hw-portal .hw-fab { display: none; }
  .hw-portal-top {
    display: flex; align-items: center; gap: 22px; background: var(--hw-navy); color: #fff;
    padding: 0 28px; min-height: 62px; flex-shrink: 0;
  }
  /* Brandul = `companies.name`, text liber validat `max:255` — singurul text LUNG al barei, si e `nowrap`.
     Fara marginire, `min-width:auto` (implicit pe flex item) il face NEcomprimabil: surplusul impinge nav-ul,
     selectorul de limba, numele utilizatorului si butonul „Iesire" in afara ecranului, unde
     `html{overflow-x:hidden}` (`:65`) le TAIE — bara ramane fara navigatie si fara logout. Bugetul masurat al
     lui `.brand` la 900px e ~404px (~50 caractere la 18px serif 600), iar un nume real de 55 de caractere
     („Societatea Nationala de Constructii Navale Hartwell SRL") cere 442px. Marginit ca fratii lui
     (`.hw-mobheader .title` `:379`, `.hw-topbar .crumb` `:580`): plafon + ellipsis, nu taiere de ecran. */
  /* Reparatii 17.10 #38: `.brand` e un <a>, deci mostenea culoarea globala a legaturilor (`a { color: var(--hw-primary) }`) =
     numele firmei bleumarin pe bara bleumarin, ilizibil (sub WCAG AA). Alb, ca restul textului barei. */
  /* Testare Cornel T-052 (01.11.2026): numele nu mai e `nowrap` + elipsa la 34 % („Companie Completa D…”): se rupe pe CEL MULT 2 randuri, intr-un
     plafon de latime (clamp, nu procent din bara); eticheta mica (PORTAL / MUNCITOR / CANDIDAT) sta sub nume, absoluta fata de `.brand`, in marginea de jos a numelui (in afara cutiei taiate la 2 randuri), deci nu consuma randuri si nu lasa un al treilea rand sa se vada.
     Elipsa ramane doar ca ultima plasa la al doilea rand (nume de peste ~60 de caractere; numele intreg e in `title`). Brandul cedeaza primul
     (`flex-shrink` mare), pana la 120 px, inaintea intrarilor din nav. */
  .hw-portal-top .brand { display: flex; align-items: center; gap: 10px; font-family: var(--hw-font-serif); font-size: 17px; line-height: 1.15; font-weight: 600; white-space: normal; position: relative; flex: 0 4 auto; min-width: 120px; max-width: clamp(140px, 22vw, 320px); overflow: hidden; color: #fff; }
  .hw-portal-top .brand > span { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin-bottom: 12px; }
  /* Acelasi logo de tenant, ramura cu imagine a lui `.brand`: `.brand` e marginit (`max-width:34%`) si
     `overflow:hidden`, deci surplusul nu mai impinge bara — dar fara `max-width` pe imagine el e TAIAT
     (logo trunchiat la jumatate, regula 4), nu scalat. `max-width:100%` il face sa incapa in buget. */
  .hw-portal-top .brand img { max-height: 30px; max-width: 100%; width: auto; }
  .hw-portal-top .brand small { position: absolute; left: 0; bottom: 0; display: block; line-height: 1.2; font-family: var(--hw-font-sans); font-size: 8.5px; letter-spacing: 3px; color: var(--hw-accent); }
  /* TIR G06: cu recrutarea de soferi pornita bara poate avea 11 intrari (5 + Cereri, Candidati propusi, Comenzile mele, Utilizatori, Imigratie,
     Ajutor); la 900-1200px ar fi trecut peste `.end` (limba / utilizator / Iesire). Nav-ul se deruleaza in el insusi, `.end` nu se comprima. */
  /* Testare Cornel T-052 (01.11.2026): nav-ul NU se mai deruleaza (bara de derulare sub meniu + „Mes” taiat la zoom). Intrarile care nu incap la
     latimea curenta stau in „Mai mult” (prioritatile `hw-pt-*` de mai jos); daca totusi nu incap (limba DE, nume foarte lungi), nav-ul trece pe
     al doilea rand (bara creste, `min-height`), niciodata o intrare taiata. `min-width:min-content` = nu se strange sub cea mai lata intrare. */
  .hw-portal-top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 0 1 auto; min-width: min-content; overflow: visible; }
  /* Reparatii 17.10 #39: la 1366px bara portalului cu toate intrarile nu incapea (ultima iesea taiata „Comenzile m…”, fara „Mai mult”).
     Nav-ul are doar intrarile principale; restul stau in „Mai mult” (`details`, fara JS), pus IN AFARA nav-ului: nav-ul se deruleaza
     (`overflow-x:auto` taie si pe verticala), deci un meniu absolut din el ar fi fost taiat la inaltimea barei (si la candidat). */
  .hw-portal-more { position: relative; flex-shrink: 0; }
  .hw-portal-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  .hw-portal-more > summary::-webkit-details-marker { display: none; }
  .hw-portal-more > summary:hover, .hw-portal-more[open] > summary { color: #fff; }
  .hw-portal-more > summary.active { color: #fff; background: rgba(255,255,255,.10); border-bottom: 2px solid var(--hw-accent); border-radius: 8px 8px 0 0; }
  .hw-portal-more .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; max-width: min(320px, 90vw); background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: 10px; padding: 6px 0; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
  .hw-portal-more .menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--hw-text); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
  .hw-portal-more .menu a:hover { background: var(--hw-bg); }
  .hw-portal-more .menu a.active { color: var(--hw-primary); box-shadow: inset 3px 0 0 var(--hw-accent); }
  .hw-portal-top nav a { color: rgba(255,255,255,.72); padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  .hw-portal-top nav a:hover { color: #fff; }
  .hw-portal-top nav a.active { color: #fff; background: rgba(255,255,255,.10); border-bottom: 2px solid var(--hw-accent); border-radius: 8px 8px 0 0; }
  .hw-portal-top .end { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
  .hw-portal-top .end .who { font-size: 12.5px; line-height: 1.2; color: rgba(255,255,255,.75); max-width: 150px; overflow-wrap: anywhere; }
  .hw-portal .hw-content { max-width: 980px; margin: 0 auto; padding: 28px; overflow-y: auto; }
  /* Testare Cornel T-052 (01.11.2026) — prioritatile barei portalului client (`layouts/portal`, fara JS): sub 1080 px (latime CSS — si
     1366 px la zoom 125-150 %) in bara raman Acasa / Lucrari / Facturi, numele utilizatorului trece in capul meniului „Mai mult”; 1080-1359 px
     + Mesaje; de la 1360 px + Media si „Contractul meu”. Intrarea care nu e in bara e in „Mai mult” (`hw-pt-m*`), iar „Mai mult” se marcheaza
     activ cand pagina curenta e acolo (`hw-pt-act*`). */
  .hw-portal-top nav a.hw-pt-p2, .hw-portal-top nav a.hw-pt-p3 { display: none; }
  .hw-portal-top .end .who.hw-pt-whobar { display: none; }
  .hw-portal-more .menu .hw-pt-who { display: block; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--hw-sec); overflow-wrap: anywhere; border-bottom: 1px solid var(--hw-line); margin-bottom: 4px; }
  .hw-portal-more > summary.hw-pt-act2, .hw-portal-more > summary.hw-pt-act3 { color: #fff; background: rgba(255,255,255,.10); border-bottom: 2px solid var(--hw-accent); border-radius: 8px 8px 0 0; }
}
@media (min-width: 1080px) {
  .hw-portal-top nav a.hw-pt-p2 { display: block; }
  .hw-portal-more .menu a.hw-pt-m2 { display: none; }
  .hw-portal-top .end .who.hw-pt-whobar { display: block; }
  .hw-portal-more .menu .hw-pt-who { display: none; }
  .hw-portal-more > summary.hw-pt-act2 { background: transparent; border-bottom: 0; border-radius: 8px; }
  .hw-portal-more:not([open]) > summary.hw-pt-act2:not(:hover) { color: rgba(255,255,255,.72); }
}
@media (min-width: 1360px) {
  .hw-portal-top nav a.hw-pt-p3 { display: block; }
  .hw-portal-more .menu a.hw-pt-m3 { display: none; }
  .hw-portal-more > summary.hw-pt-act3 { background: transparent; border-bottom: 0; border-radius: 8px; }
  .hw-portal-more:not([open]) > summary.hw-pt-act3:not(:hover) { color: rgba(255,255,255,.72); }
}

/* fir de mesaje (POR-08) — bule client/staff, camp de intrare lat */
.hw-thread { display: flex; flex-direction: column; gap: 10px; }
.hw-bubble { max-width: 82%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.hw-bubble .who { font-size: 11px; font-weight: 700; color: var(--hw-ter); margin-bottom: 3px; }
.hw-bubble--them { align-self: flex-start; background: var(--hw-card); border: 1px solid var(--hw-line); border-bottom-left-radius: 4px; }
.hw-bubble--me { align-self: flex-end; background: var(--hw-prim-bg); border: 1px solid color-mix(in oklab, var(--hw-primary) 22%, #fff); border-bottom-right-radius: 4px; }
.hw-composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.hw-composer .hw-textarea { min-height: 48px; flex: 1; }

/* control de scor stele (POR-15) */
.hw-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.hw-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hw-stars label { font-size: 26px; line-height: 1; color: var(--hw-line); cursor: pointer; }
.hw-stars input:checked ~ label, .hw-stars label:hover, .hw-stars label:hover ~ label { color: var(--hw-accent); }
.hw-stars input:focus-visible + label { outline: 2px solid var(--hw-primary); outline-offset: 2px; border-radius: 4px; }
/* Regula 1 (tinte de atingere >= 44px pe mobil), POR-15 „Evaluare muncitor": `.hw-stars input` e ascuns 1x1px (vezi
   linia de mai sus), deci LABEL-ul (steaua) E intreaga suprafata tapabila. La `font-size:26px; line-height:1` ramanea
   ~26px pe AMBELE axe — sub minim, exact clasa de defect deja corectata pentru `.hw-chips-choice label`. Podeaua se
   pune si pe inaltime si pe LATIME, cu centrare, ca steaua sa stea optic in mijlocul tintei. Trebuie sa vina DUPA
   definitia de baza (media query-ul nu adauga specificitate); desktop-ul ramane compact (26px). */
@media (max-width: 899px) {
  .hw-stars label { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* timeline imigratie TCN (POR-17) */
.hw-timeline { list-style: none; margin: 0; padding: 0; }
.hw-timeline li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hw-line); }
.hw-timeline li:first-child { border-top: 0; }
.hw-timeline .st { flex: 1; }

/* ── sectiuni colapsabile (`<details class="hw-section">`) ───────────────
   Spec CLI-01/CLI-06 (Zona 11): „sectiuni colapsabile pe mobil, 2 coloane pe desktop". Cardurile de sectiune
   sunt `<details open>` ⇒ deschise implicit (nimic ascuns la incarcare), dar pliabile la atingere pe mobil,
   unde fisa clientului stivuieste ~10 carduri intr-un scroll foarte lung. `<summary>` foloseste tokenul
   `.hw-summary` (44px) si primeste un chevron propriu, fiindca marcatorul nativ e ascuns. */
.hw-section > .hw-summary { justify-content: space-between; }
.hw-section > .hw-summary::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto; margin-left: 8px;
  border-right: 2px solid var(--hw-ter); border-bottom: 2px solid var(--hw-ter);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.hw-section[open] > .hw-summary::after { transform: rotate(-135deg) translateY(0); }
/* Testare Cornel T-008: `<summary>` care deschide un formular in afara sectiunilor („Editeaza sediul”) arata ca un link — culoarea
   actiunilor tertiare + sageata ▸/▾ (marcatorul nativ e ascuns de `.hw-summary`); inainte era text gri, fara indiciu ca se apasa. */
.hw-summary--link { color: var(--hw-primary); font-weight: 600; width: fit-content; }
.hw-summary--link:hover { text-decoration: underline; }
.hw-summary--link::after { content: '▸'; font-size: 11px; }
details[open] > .hw-summary--link::after { content: '▾'; }
/* Testare Cornel T-008: butonul de stergere = „✕ Sterge” in culoarea erorii (actiune distructiva), aceeasi tinta de 44px. */
.hw-btn--del { color: var(--hw-err); white-space: nowrap; flex: 0 0 auto; }
/* Testare Cornel T-020: bloc de formular pliat („Recrutare soferi (TIR)”) — titlul de sectiune devine randul care il deschide. */
.hw-fold { margin: 20px 0 10px; border-top: 1px solid var(--hw-line); }
.hw-fold > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--hw-primary); }
.hw-fold > summary::-webkit-details-marker { display: none; }
.hw-fold > summary::after { content: '▸'; font-size: 11px; margin-left: auto; }
.hw-fold[open] > summary::after { content: '▾'; }
.hw-fold > summary .hw-cap { color: var(--hw-primary); }
.hw-fold-note { font-size: 12px; min-width: 0; }

/* ── paginare (`.hw-pager`) ──────────────────────────────────────────────
   Laravel randeaza implicit `pagination::tailwind` — dar proiectul NU are Tailwind (singurul stylesheet e
   acesta) si nici director `lang/`. Rezultat pe orice lista cu >1 pagina: SVG-uri `w-5 h-5` fara `width`/
   `height` (deci ~150px, regula 2), blocul mobil SI cel desktop randate simultan (`hidden`/`sm:hidden` inerte,
   regula 5), link-uri de ~16px (regula 1) si etichete brute „pagination.previous" (regula 4). Vederea
   `vendor/pagination/hw.blade.php` + inregistrarea din AppServiceProvider inlocuiesc complet acel markup. */
.hw-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hw-pager__info { font-size: 12px; color: var(--hw-ter); }
.hw-pager__links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hw-pager__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--hw-line); border-radius: 8px;
  background: var(--hw-card); color: var(--hw-navy);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.hw-pager__link[aria-current="page"] { background: var(--hw-navy); color: #fff; border-color: var(--hw-navy); }
.hw-pager__link[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.hw-pager__dots { padding: 0 4px; color: var(--hw-ter); font-size: 13px; }

/* `<select>` intr-un rand flex: min-content-ul lui = cea mai lunga `<option>` (ex. eticheta de 60 car.),
   deci fara `min-width:0` iese din card la 380px si e taiat de `html{overflow-x:hidden}` (regula 2). */
.hw-select { min-width: 0; }

/* SYS-11 (L3 f2) — densitate „compact" aleasa de companie in hub-ul de setari (clasa pe <body>, din
   `general_params_json.density`). Strange DOAR spatiile verticale ale listelor/cardurilor; tinta de atingere a
   randului ramane >= 44px (WCAG 2.5.5 / regula de design a portalului), iar textul nu se micsoreaza. */
.hw-density-compact .hw-list-row { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.hw-density-compact .hw-card--pad { padding: 12px; }
.hw-density-compact .hw-stack > * + * { margin-top: 8px; }

/* ── Help & EN 12.10 — butonul „i” din capul ecranului + panoul lateral de help (pe telefon: ecran intreg) ──
   Butonul: tinta >= 44x44 (regula de design 1), cercul „i” de 26px in culoarea contextului (auriu pe navy, navy pe fundal
   deschis). Panoul: `role=dialog`, deasupra shell-ului (z-index peste tab bar / FAB / toast), cu fundal care inchide la click;
   fara JS se deschide prin `:target` (#hw-help). Textul se rupe pe cuvinte lungi, fara scroll orizontal la 380px. */
.hw-help-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; }
.hw-help-btn > span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; border: 2px solid currentColor; font-family: var(--hw-font-serif); font-style: italic; font-weight: 700; font-size: 15px; line-height: 1; }
.hw-mobheader .hw-help-btn, .hw-portal-top .hw-help-btn { color: var(--hw-accent); }
.hw-topbar .hw-help-btn, .hw-help-btn--light { color: var(--hw-navy); }
.hw-help-btn:focus-visible, .hw-help-close:focus-visible { outline: 2px solid var(--hw-accent); outline-offset: 2px; border-radius: 999px; }
.hw-help-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1200; }
.hw-help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); max-width: 100%; background: var(--hw-card); color: var(--hw-text); box-shadow: var(--hw-shadow-lift); z-index: 1201; display: none; flex-direction: column; overflow: hidden; }
.hw-help-panel:target, .hw-help-panel.is-open { display: flex; }
.hw-help-panel:focus { outline: none; }
.hw-help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 12px 12px 20px; background: var(--hw-navy); color: #fff; }
.hw-help-head .hw-cap { color: var(--hw-accent); }
.hw-help-title { font-family: var(--hw-font-serif); font-size: 20px; font-weight: 600; line-height: 1.25; margin: 2px 0 0; overflow-wrap: anywhere; }
.hw-help-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #fff; font-size: 20px; text-decoration: none; }
.hw-help-body { flex: 1; overflow-y: auto; padding: 4px 20px 24px; -webkit-overflow-scrolling: touch; overflow-wrap: anywhere; }
.hw-help-sec { padding: 14px 0; border-bottom: 1px solid var(--hw-line); }
.hw-help-sec:last-child { border-bottom: 0; }
.hw-help-sec-title { font-family: var(--hw-font-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--hw-sec); margin: 0 0 8px; }
.hw-help-sec p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.hw-help-sec p:last-child { margin-bottom: 0; }
.hw-help-steps, .hw-help-links { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.55; }
.hw-help-steps li, .hw-help-links li { margin-bottom: 6px; }
.hw-help-ref { color: var(--hw-primary); font-weight: 600; text-decoration: underline; }
.hw-help-ref--off { color: inherit; text-decoration: none; }
.hw-help-sec--warning { margin-top: 12px; padding: 12px 14px; background: var(--hw-warn-bg); border-left: 4px solid var(--hw-warn); border-radius: 6px; border-bottom: 0; }
.hw-help-sec--warning .hw-help-sec-title { color: var(--hw-warn-ink); }
.hw-help-page .hw-help-sec:first-child { padding-top: 0; }
html.hw-help-lock { overflow: hidden; }
@media (max-width: 600px) { .hw-help-panel { left: 0; width: 100%; } }

/* ── Marcajul TIR din meniul lateral (18.10.2026, comutator HW_MENU_TIR_MARK, OPRIT implicit) ──
   Patrat rosu cu T alb dupa randurile si grupurile „comun” (lista: config/menu_tir_mark.php), in sidebar si in „Mai mult”
   (meniul lateral pe telefon). Elementul e GOL si aria-hidden: litera vine din `::after`, deci textul linkului si numele lui
   accesibil raman identice. Alb pe --hw-err (#B54040) = 5.6:1 (AA). Pe navy, inelul deschis tine marginea patratului vizibila.
   Nu impinge textul pe doua randuri: in sidebar ocupa 6px + 14px, recuperati din padding-ul din dreapta al randului marcat. */
.hw-tir-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 14px; height: 14px; margin-left: 6px; border-radius: 3px; vertical-align: middle;
  background: var(--hw-err); color: #fff; cursor: help;
  font-family: var(--hw-font-sans); font-size: 10px; font-weight: 700; font-style: normal;
  line-height: 1; letter-spacing: 0; text-transform: none;
}
.hw-tir-mark::after { content: "T"; }
.hw-sidebar .hw-tir-mark { box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
/* Proba in browser (copia locala, Windows): bara de derulare clasica a meniului (15px) lasa randului 213px, iar „Pachete de documente”
   (140px de text) trecea pe doua randuri. Cu marcaj: bara subtire, 4px intre text si marcaj, 13px marcajul, padding-ul din dreapta
   coborat la 4px si randul pe o singura linie ⇒ cel mai lung rand marcat incape cu >= 7px pana la margine. */
.hw-sidebar .nav:has(.hw-tir-mark) { scrollbar-width: thin; }
.hw-sidebar a.item .hw-tir-mark { margin-left: -7px; width: 13px; height: 13px; font-size: 9.5px; }   /* gap-ul randului e 11px ⇒ 4px */
.hw-sidebar a.item:has(.hw-tir-mark) { padding-right: 4px; white-space: nowrap; }
.hw-more-mobile nav a .hw-tir-mark { margin-left: -4px; }       /* gap-ul randului e 10px ⇒ 6px */
.hw-sidebar .group .hw-tir-mark,
.hw-more-mobile .grp .hw-tir-mark { width: 12px; height: 12px; font-size: 8.5px; position: relative; top: -1px; }

/* ── Testare Cornel T-060 (01.11.2026): meniul „Echipa” al Sefului de echipa in cadrul de muncitor (`layouts/worker`) ──
   IN-FLOW deasupra continutului (nu overlay, nu acopera bara de jos); randuri >= 44 px; etichetele se rup pe randuri (fara scroll
   orizontal la 380 px). Pe desktop (>= 900 px) aceeasi latime ca `.hw-portal .hw-content` si intrarile pe 3 coloane. */
.hw-team-menu { margin: 12px 16px 0; border: 1px solid var(--hw-line); border-radius: 10px; background: var(--hw-card); min-width: 0; }
.hw-team-menu > summary { padding: 0 14px; font-size: 13.5px; font-weight: 700; color: var(--hw-primary); flex-wrap: wrap; column-gap: 8px; }
.hw-team-menu > summary .cur { font-weight: 600; color: var(--hw-sec); min-width: 0; overflow-wrap: anywhere; }
.hw-team-menu > summary::after { content: '▾'; margin-left: auto; font-size: 12px; color: var(--hw-sec); }
.hw-team-menu[open] > summary::after { content: '▴'; }
.hw-team-menu nav { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hw-line); padding: 6px 0 8px; }
.hw-team-menu nav a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px;
  font-size: 13.5px; color: var(--hw-text); text-decoration: none; overflow-wrap: anywhere; min-width: 0;
}
.hw-team-menu nav a svg { color: var(--hw-primary); }
.hw-team-menu nav a.active { background: var(--hw-prim-bg); color: var(--hw-primary); font-weight: 700; }
@media (min-width: 900px) {
  .hw-team-menu { width: calc(100% - 56px); max-width: 924px; margin: 16px auto 0; }
  .hw-team-menu nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* COPILOT AI (etapa 2) — tabul „Intreaba” din panoul de ajutor (ghidul AI). Pe telefon panoul e ecran intreg; totul pe o coloana, butoane de 44px. */
.hw-help-tabs { flex-shrink: 0; padding: 0 20px; gap: 20px; background: var(--hw-card); }
.hw-help-tabs a:not(.hw-btn) { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; text-decoration: none; }
.hw-assist { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.hw-assist-intro { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--hw-text); }
.hw-assist-note { margin: 0; padding: 10px 12px; border-left: 4px solid var(--hw-warn); border-radius: 6px; background: var(--hw-warn-bg); color: var(--hw-warn-ink); font-size: 13px; line-height: 1.45; }
.hw-assist-log { display: flex; flex-direction: column; gap: 10px; }
.hw-assist-msg { max-width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.hw-assist-msg--me { align-self: flex-end; max-width: 92%; background: var(--hw-prim-bg); color: var(--hw-text); }
.hw-assist-msg--ai { background: color-mix(in oklab, var(--hw-text) 5%, var(--hw-card)); color: var(--hw-text); }
.hw-assist-who { margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--hw-sec); }
.hw-assist-text p { margin: 0 0 8px; }
.hw-assist-text p:last-child { margin-bottom: 0; }
.hw-assist-text .hw-help-steps { margin: 6px 0 8px; }
.hw-assist-path { color: var(--hw-sec); font-size: 13px; }
.hw-assist-form { display: flex; flex-direction: column; gap: 8px; }
.hw-assist-form .hw-textarea { width: 100%; max-width: 100%; min-height: 88px; }
.hw-assist-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-assist-actions .hw-btn { min-height: 44px; }
.hw-assist-off { margin: 0; padding: 10px 12px; border-radius: 6px; background: color-mix(in oklab, var(--hw-text) 6%, var(--hw-card)); color: var(--hw-text); font-size: 14px; }
/* COPILOT AI (etapa 3) — cardul de confirmare al copilotului; confirmarea grea („G!”) = caseta galbena + bifa. */
.hw-assist-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--hw-line-strong); border-left: 4px solid var(--hw-primary); border-radius: 10px; background: var(--hw-card); }
.hw-assist-card-title { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--hw-sec); }
.hw-assist-card-summary { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--hw-text); }
.hw-assist-card-hint { margin: 0; font-size: 12.5px; color: var(--hw-sec); }
.hw-assist-warn { padding: 10px 12px; border-left: 4px solid var(--hw-warn); border-radius: 6px; background: var(--hw-warn-bg); color: var(--hw-warn-ink); font-size: 14px; line-height: 1.5; }
.hw-assist-warn p { margin: 0 0 8px; }
.hw-assist-ack { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.hw-assist-ack input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; }

/* ── Testare Cornel T-094 (07.11.2026): numarul plicurilor de semnat pe „Documente” in meniul portalului (portocaliu + text inchis, 7,0:1). ── */
.hw-pt-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--hw-nav-group-bg); color: var(--hw-nav-group-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }

/* ── Testare Cornel T-100 (07.11.2026): bara drumului de imigrare pe cele 17 ecrane TCN ale muncitorului. Pasii in ordine, cu numar; pasul curent =
   butonul plin (navy, text alb) + „pasul curent”; pasul facut = verde (#2B7455 pe #E9F3EE = 4,96:1) cu bifa; ecranul deschis = contur auriu inchis
   (5,45:1 pe card). Telefon: butoanele se aseaza pe randuri (text pe mai multe linii, fara derulare orizontala), tinte de 44px. ── */
.hw-journey { margin: 0 0 14px; min-width: 0; }
.hw-journey__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hw-journey__steps > li { display: flex; min-width: 0; max-width: 100%; }
.hw-journey__step { min-height: 44px; height: auto; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; gap: 6px; }
.hw-journey__step.is-done { background: var(--hw-ok-bg); color: var(--hw-ok); border-color: var(--hw-ok); }
.hw-journey__step.is-here { outline: 2px solid var(--hw-accent-dark); outline-offset: 2px; }
.hw-journey__n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 20px; height: 20px; border-radius: 999px; border: 1px solid currentColor; font-size: 11px; font-weight: 700; line-height: 1; }
.hw-journey__now { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--hw-card); color: var(--hw-navy); font-size: 11px; font-weight: 700; white-space: nowrap; }
.hw-journey__more { margin-top: 6px; }
.hw-journey__more-list { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
/* T-101: „Verifica documentul” din checklist-ul de imigrare = buton, cu starea randului langa el; tot randul (44px) deschide formularul. */
.hw-tcn-verify > summary { flex-wrap: wrap; gap: 8px; width: fit-content; max-width: 100%; }
.hw-tcn-verify > summary .hw-btn { min-height: 44px; }
.hw-tcn-verify > summary .hw-btn::after { content: '▸'; font-size: 11px; opacity: .8; }
.hw-tcn-verify[open] > summary .hw-btn::after { content: '▾'; }
/* T-099: filtrul „Verificari la emitent” — strans sub „Filtre” pe telefon, deschis pe calculator. */
.hw-tcn-filter > summary { justify-content: flex-start; gap: 8px; }