/* ============================================================================
 * ycm.core.css — override-uri YCM generale (non-feature) peste tema cumpărată.
 * Fișier PARALEL (NU patch pe core.css — vezi docs/AI-context.md regula 16).
 * Mirror CSS al `ycm.core.js`. Încărcat NECONDIȚIONAT în _head.html.twig DUPĂ
 * core.css → disponibil în dev/prod/test (în prod, core.css e înlocuit de
 * core.min.css care N-ar avea aceste reguli).
 * ========================================================================== */

/* Footer: partner logos (ANPC SAL/SOL etc.) — înlocuiește inline
   style="height:50px;width:auto" din `_footer.html.twig`. */
.footer-partner-logo {
  height: 50px;
  width: auto;
}

/* ── Bare de stare globale (mentenanță + impersonare) ───────────────────────
   Două semnale permanente, fixe în capul ecranului, prezente pe ORICE pagină prin
   partiale globale incluse în toate cele 6 layout-uri (fiecare layout are `<body>`-ul
   lui, deci un partial `position: fixed` e singura cale să apară peste tot):

     - `_maintenance_bar.html.twig`   — platforma e sub `var/run/maintenance.lock`
     - `_impersonation_bar.html.twig` — sesiunea rulează sub identitate împrumutată

   POT FI ACTIVE SIMULTAN: dreptul de bypass la mentenanță se uită la impersonator, deci
   un YCM care impersonează în timpul mentenanței le vede pe amândouă. De-aia înălțimile
   sunt DOUĂ variabile însumate, nu una singură — aceleași reguli acoperă toate cele 4
   combinații (niciuna / doar una / doar cealaltă / ambele), fără JS.

   Ordinea: mentenanța sus (stare de sistem), impersonarea sub ea (stare de sesiune).
   Ținem tot aici, în CSS-ul propriu — tema cumpărată (core.css) rămâne neatinsă. */

/* Default 0 pe body: variabilele există mereu, deci `calc()`-urile de mai jos sunt
   valide chiar și când nicio bară nu e afișată. `:has()` le ridică la 40px doar când
   bara respectivă chiar e în DOM. Fiind definite pe body, se moștenesc la toți
   descendenții — inclusiv la elementele `position: fixed`. */
body {
  --ycm-mnt-h: 0px;
  --ycm-imp-h: 0px;

  /* Lățimea MINIMĂ comună a butoanelor de acțiune din capul și din rândurile cardurilor
     („Editează", „Adaugă", „Schimbă", „Configurează", „Descarcă", „Șterge cont").

     Valoarea e CALIBRATĂ pe cea mai lungă etichetă din familie — „Configurează", de pe rândul
     TOTP — și se aplică inclusiv ei. Așa coloana de acțiuni a fiecărui card cade pe aceeași
     verticală, indiferent de text. Până la 2026-09-15 era un `115px` copiat inline în 12 locuri:
     etichetele mai lungi îl depășeau (de aceea „Configurează" ieșea vizibil mai lat decât
     „Editează" de sub el), iar o ajustare cerea 12 modificări.

     Un derivat cu etichete mai lungi schimbă DOAR rândul ăsta. */
  --ycm-action-btn-w: 150px;
}

body:has(.ycm-maintenance-bar)   { --ycm-mnt-h: 40px; }
body:has(.ycm-impersonation-bar) { --ycm-imp-h: 40px; }

/* Înălțimea totală ocupată de bare — o singură sursă de adevăr pentru padding-ul
   body-ului ȘI pentru offset-urile chenarului temei (vezi „Anti-suprapunere"). */
body:has(.ycm-maintenance-bar),
body:has(.ycm-impersonation-bar) {
  padding-top: calc(var(--ycm-mnt-h) + var(--ycm-imp-h));
}

/* Scheletul comun al celor două bare — diferă doar culoarea și poziția pe verticală. */
.ycm-maintenance-bar,
.ycm-impersonation-bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1045;                          /* peste header/sidebar sticky, sub modale (1050+) */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.25rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Mentenanța stă prima; impersonarea coboară exact cu înălțimea ei (0px dacă lipsește). */
.ycm-maintenance-bar   { top: 0; }
.ycm-impersonation-bar { top: var(--ycm-mnt-h, 0px); }

/* Portocaliu-cărămiziu pentru mentenanță vs galben pentru impersonare: două stări
   diferite, care pot apărea una peste alta — trebuie deosebite dintr-o privire. */
.ycm-maintenance-bar {
  background: linear-gradient(180deg, #ffe0c2 0%, #ffd0a3 100%);
  color: #7a3e00;
  border-bottom: 1px solid #f0a058;
}

.ycm-impersonation-bar {
  background: linear-gradient(180deg, #fff6d6 0%, #ffefb8 100%);
  color: #6b5104;
  border-bottom: 1px solid #f2c94c;
}

/* Iconiță stânga — echilibrează vizual butonul „Ieși" din dreapta, astfel încât
   textul (flex:1, centrat) să pară cu adevărat centrat. */
.ycm-maintenance-bar__icon,
.ycm-impersonation-bar__icon {
  flex: 0 0 auto;
  display: inline-flex;
  opacity: 0.85;
}

/* Textul ocupă mijlocul; pe ecrane înguste trunchiază elegant (bara nu se sparge
   pe 2 rânduri → înălțimea rămâne fixă, fără suprapuneri). */
.ycm-maintenance-bar__text,
.ycm-impersonation-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Butoanele de acțiune („Dezactivează mentenanța" / „Ieși din impersonare") — pill
   compact, contrast puternic (ton închis pe fundal deschis), `flex: 0 0 auto` ca să
   rămână vizibile chiar și când textul din mijloc e trunchiat. */
.ycm-maintenance-bar__exit,
.ycm-impersonation-bar__exit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.ycm-maintenance-bar__exit {
  background: #7a3e00;
  color: #ffe0c2;
}

.ycm-maintenance-bar__exit:hover,
.ycm-maintenance-bar__exit:focus {
  background: #9c5200;
  color: #fff;
}

.ycm-impersonation-bar__exit {
  background: #6b5104;
  color: #fff6d6;
}

.ycm-impersonation-bar__exit:hover,
.ycm-impersonation-bar__exit:focus {
  background: #856404;
  color: #fff;
}

/* ── Anti-suprapunere ─────────────────────────────────────────────────────────
   Padding-ul de pe body împinge doar conținutul din flow normal; elementele
   `position: fixed`/`sticky` ale temei ancorate la `top: 0` ar rămâne SUB bare.
   Le coborâm cu înălțimea TOTALĂ a barelor (suma celor două variabile — 0px, 40px
   sau 80px, după caz). Acoperă cele 6 layout-uri independente:
     - header non-admin: JS adaugă `.header-fixed` la scroll → `position: fixed; top: 0`
     - header admin: `position: sticky; top: 0`
     - sidebar (aside-sticky / aside-float): `position: fixed; top: 0`
     - meniul mobil (drawer): `.navbar-collapse.show` → `position: fixed; top: 0`
       (pe desktop `.show` NU e fixed → `top` e ignorat, deci regula e inofensivă)

   Selectoarele sunt duplicate pe `:has(.ycm-maintenance-bar)` și
   `:has(.ycm-impersonation-bar)` în loc de o listă `:has(a, b)`: lista în interiorul
   lui `:has()` e forgiving și ar fi mers, dar duplicarea explicită e sigură pe orice
   engine și rămâne lizibilă. Valoarea e aceeași sumă în ambele cazuri. */
body:has(.ycm-maintenance-bar).header-fixed #header,
body:has(.ycm-maintenance-bar) #header.header-fixed,
body:has(.ycm-maintenance-bar).layout-admin.header-sticky #header,
body:has(.ycm-impersonation-bar).header-fixed #header,
body:has(.ycm-impersonation-bar) #header.header-fixed,
body:has(.ycm-impersonation-bar).layout-admin.header-sticky #header {
  top: calc(var(--ycm-mnt-h) + var(--ycm-imp-h)) !important;
}

body:has(.ycm-maintenance-bar).aside-sticky aside,
body:has(.ycm-maintenance-bar).aside-float aside,
body:has(.ycm-maintenance-bar) .navbar-collapse.show,
body:has(.ycm-impersonation-bar).aside-sticky aside,
body:has(.ycm-impersonation-bar).aside-float aside,
body:has(.ycm-impersonation-bar) .navbar-collapse.show {
  top: calc(var(--ycm-mnt-h) + var(--ycm-imp-h)) !important;
}

/* ── Excepție: layout-ul `layout-padded` (panoul YCM) ────────────────────────
   Tema decupează acolo tot layout-ul cu 30px, prin două reguli mai SPECIFICE decât
   cele generice de mai sus (`core.css`, în `@media min-width: 992px`):

     body.layout-admin.layout-padded              { padding: 30px }            (0,2,1)
     body.layout-admin.layout-padded .aside-start { top: 30px !important }     (0,4,1)

   Regulile generice de deasupra sunt (0,1,1) și (0,2,2) → PIERD, deci în panoul YCM
   sidebar-ul rămânea la 30px și intra sub bară. `!important` nu ajută: la egalitate de
   `!important` decide specificitatea, nu ordinea fișierelor.

   Aici le rescriem cu specificitate mai mare, păstrând cei 30px ai temei ca BAZĂ și
   adunând înălțimea barelor peste ei — altfel am fi stricat decupajul layout-ului.
   Scopul e același media query: sub 992px `layout-padded` nu se aplică, iar sidebar-ul
   nici măcar nu e `fixed`. */
@media only screen and (min-width: 992px) {

  /* (0,3,1) > (0,2,1) al temei */
  body.layout-admin.layout-padded:has(.ycm-maintenance-bar),
  body.layout-admin.layout-padded:has(.ycm-impersonation-bar) {
    padding-top: calc(30px + var(--ycm-mnt-h) + var(--ycm-imp-h));
  }

  /* `aside.aside-start` (nu doar `.aside-start`) ca să urcăm la (0,4,2) > (0,4,1) —
     la specificitate EGALĂ ar fi decis ordinea fișierelor, ceea ce e fragil. */
  body.layout-admin.layout-padded:has(.ycm-maintenance-bar) aside.aside-start,
  body.layout-admin.layout-padded:has(.ycm-maintenance-bar) aside.aside-end,
  body.layout-admin.layout-padded:has(.ycm-impersonation-bar) aside.aside-start,
  body.layout-admin.layout-padded:has(.ycm-impersonation-bar) aside.aside-end {
    top: calc(30px + var(--ycm-mnt-h) + var(--ycm-imp-h)) !important;
  }
}

/* ── Banner consimțământ cookie analytics ───────────────────────────────────
   Bară full-width jos. Poziționarea/anchor/z-index/bordura + responsivitatea vin din clasele
   Bootstrap ale temei (`fixed-bottom border-top` pe container + grid `col-md-*` în markup).
   Aici DOAR ce Bootstrap nu oferă: umbra direcțională în sus + dimensiunea logo-ului. */
.ycm-cookie-consent {
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);   /* umbră în SUS — Bootstrap n-are shadow direcțional */
}

.ycm-cookie-consent__logo {
  height: 40px;
  width: auto;
}

/* Dropdown „Contul meu" (stil „Documentation" al temei): iconuri mai mari (26px) +
   culoare închisă (navy), ca în original. `pictureSvg` din MenuProvider e 18px +
   `text-gray-600` (potrivit pt sidebar) — aici, DOAR în dropdown, îl scalăm la 26px
   și `color: inherit` îl face să preia culoarea închisă a item-ului (anulează grayul).
   Sidebar-ul rămâne 18px gri. CSS învinge width/height/color din atributul/clasa SVG. */
.ycm-account-menu .flex-none svg {
  width: 26px;
  height: 26px;
  color: inherit;
}

/* Dropdown „Contul meu" pe MOBIL (navbar colapsat, < lg): tema indentează itemele (25px stânga /
   40px dreapta + marginile meniului static) — pe ecran îngust arăta ca o coloană rătăcită.
   Cerere 2026-09-01: distanța de la marginea stângă până la caseta iconiței = gap-ul iconiță→text
   (`ps-3` = 1rem) = padding-ul din dreapta; spațierea verticală vine din `py-2 py-lg-4` pe item
   (_header.html.twig). Desktopul (≥ lg) rămâne pe valorile temei. Media query aici fiindcă
   valorile temei (25/40px) n-au utilitare Bootstrap echivalente pentru „doar sub lg". */
@media (max-width: 991.98px) {
  .ycm-account-menu.dropdown-menu {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .ycm-account-menu a.dropdown-item {
    /* 0,5 rem: distanța marginea stângă a cardului → caseta SVG, identică și în dreapta
       (cerere 2026-09-01, a doua iterație — înjumătățită față de 1 rem). */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Toast-uri SOW (`$.SOW.core.toast.show`, prin `YcmCore.toast`) pe fundal DESCHIS — info (cyan),
   warning (galben), info-soft („notice"): tema pune `text-white` pe header și body, ilizibil pe
   aceste fundaluri. Fără patch pe core.js (regula YCM) → suprascriem GLOBAL culoarea textului, la
   nivelul întregii teme. Specificitate mai mare decât `.text-white` (ambele `!important`).
   Danger / success / dark rămân cu text alb (contrast bun). */
.js-toast.bg-info,
.js-toast.bg-info .toast-header,
.js-toast.bg-info .toast-body,
.js-toast.bg-info .text-white,
.js-toast.bg-info .close,
.js-toast.bg-warning,
.js-toast.bg-warning .toast-header,
.js-toast.bg-warning .toast-body,
.js-toast.bg-warning .text-white,
.js-toast.bg-warning .close,
.js-toast.bg-info-soft,
.js-toast.bg-info-soft .toast-header,
.js-toast.bg-info-soft .toast-body,
.js-toast.bg-info-soft .text-white,
.js-toast.bg-info-soft .close {
  /* `.text-white` explicit: tema împachetează MESAJUL într-un `<div class="text-white">` în interiorul
     `.toast-body` (core.js ~19838) — culoarea moștenită de la părinte nu ajunge la el. */
  color: #212529 !important;
}

/* Toast-urile „sus, pe mijloc" / „jos, pe mijloc" chiar pe mijloc (2026-10-17, cererea UMFCV). Tema pune
   containerul centrat (`#wrapper_toast_tc` / `_bc`: `max-width: 330px`, `fixed-top mx-auto`), dar toast-ului din el
   îi dă doar `mt-3` / `mb-3`, iar lățimea lui e cea Bootstrap, 300px: stătea lipit în stânga, cu 30px liberi în
   dreapta (pe un telefon de 367px, 20px la stânga și 47px la dreapta). `top-center` e poziția implicită a lui
   `YcmCore.toast`, deci și a mesajelor flash. Lățimea nu se schimbă; colțurile (`_tr`, `_tl`, …) au margini proprii. */
#wrapper_toast_tc .js-toast,
#wrapper_toast_bc .js-toast {
  margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ochiul de „arată parola" rămâne pe centrul INPUTULUI, nu al cutiei.

   Tema poziționează comutatorul cu `top: 50%` față de `.input-group-over`
   (`core.css`: `.input-group-over > a { position:absolute; top:50%; transform:translateY(-50%) }`).
   Mesajul de validare stă însă ÎNĂUNTRUL aceleiași cutii, iar când Bootstrap îl afișează
   cutia crește — deci 50% coboară, și iconița pleacă sub input.

   Scoatem mesajul din fluxul cutiei, păstrându-l unde îl cere selectorul Bootstrap
   (`.was-validated :invalid ~ .invalid-feedback`): poziționat absolut, imediat sub ea.
   Containerul își păstrează înălțimea, ochiul rămâne centrat, mesajul se vede la fel.

   Era un defect LATENT în toate modalele cu parolă — aceeași structură peste tot; se vedea
   doar în momentul în care apărea mesajul. Reparat o dată, aici. 2026-09-15. */
.input-group-over > .form-floating > .invalid-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
}


/* ───────────────────────────────────────────────────────────────────────────
   Butoanele de decizie din footerul modalelor și al formularelor — EGALE pe telefon.

   Pe desktop fiecare buton are lățimea textului lui, ceea ce e corect: ochiul citește o linie
   de butoane de la dreapta la stânga și mărimea diferită nu deranjează. Pe telefon aceeași
   linie ocupă aproape toată lățimea ecranului, iar diferența devine vizibilă ca o greșeală:
   „Aplică" iese scurt lângă „Anulează", „Trimite" lângă „Anulează" la fel. Aici le dăm aceeași
   lățime, lăsându-le să împartă rândul.

   `flex: 1 1 8rem` — nu `width: 50%`: 8rem e lățimea pe care și-o DOREȘTE fiecare buton, nu una
   impusă. Când pe rând mai stau și uneltele pătrate ale filtrului, suma depășește ecranul, iar
   `.modal-footer` (care e `flex-wrap: wrap` din Bootstrap) coboară deciziile pe rândul următor,
   unde îl împart în două părți egale. Fără bază, ele s-ar fi strivit pe același rând cu uneltele.

   Excepții: uneltele pătrate (`.ycm-filter-tool`, lățime = înălțime, vezi `_filter_tools`) și
   închiderea din antet (`.btn-close`), care nu sunt decizii.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* Distanțele le dă UN singur mecanism, `gap`-ul rândului. Bootstrap pune o margine pe fiecare copil
     al footerului, iar tema încă una între două butoane alăturate (`.btn + .btn`): al doilea buton
     pornea cu 8px mai la dreapta și ieșea mai îngust decât primul, iar distanțele dintre unelte și
     decizii nu se potriveau între ele. Aici marginile cad, rămâne doar `gap`. */
  .modal-footer {
    gap: 0.5rem;
  }

  .modal-footer > * {
    margin: 0;
  }

  .modal-footer > .btn + .btn {
    margin-left: 0;
  }

  /* `8rem` ca bază, nu `100%`: „Aplică" rămâne pe rândul uneltelor și ia lățimea rămasă, iar
     „Anulează" coboară sub ele, tot pe toată lățimea. Așa arăta și înainte; ce lipsea era
     distanțarea egală, pe care o dă acum `gap`-ul de mai sus. */
  .modal-footer > .btn:not(.ycm-filter-tool):not(.btn-close) {
    flex: 1 1 8rem;
    min-width: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   `.ycm-form-actions` — rândul de butoane de la finalul unui formular de PAGINĂ.

   Echivalentul lui `.modal-footer` pentru formularele care nu stau într-un modal. Exista deja ca
   intenție, dar scris altfel pe fiecare pagină: undeva `d-flex justify-content-end gap-2`, altundeva
   un simplu `col-12` cu `me-2` între butoane. De aici veneau diferențele — pe telefon unul ieșea
   aliniat la dreapta, altul la stânga, cu distanțe inegale.

   Pe telefon butoanele împart rândul în părți egale, ca în footerul modalelor: acolo degetul alege
   între două ținte, iar două ținte de mărimi diferite se apasă greșit. Pe desktop rămân la lățimea
   textului lor, la dreapta.
   ────────────────────────────────────────────────────────────────────────── */
.ycm-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Distanța dintre butoane o dă `gap`-ul rândului. Tema mai pune și ea una (`core.css`:
   `.btn + .btn { margin-left: .5rem }`), iar pe telefon, unde butoanele se întind pe toată lățimea,
   marginea aceea rămânea agățată în stânga celui de-al doilea și îl făcea mai scurt decât primul. */
.ycm-form-actions > .btn {
  margin: 0;
}

/* Pe telefon: unul sub altul, pe toată lățimea. `100%` ca bază, nu o lățime dorită — altfel, când
   încap doi pe un rând, se așază alături, iar când nu încap sar pe rânduri diferite: același formular
   arăta altfel de la un telefon la altul. Stivuite, sunt mereu la fel și de aceeași mărime. */
@media (max-width: 575.98px) {
  .ycm-form-actions > .btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   `.ycm-check-list` — bife pe un rând pe desktop, una sub alta pe telefon.

   `form-check-inline` le așază în linie, ceea ce pe un ecran larg e corect. Pe telefon rândul se umple
   după una-două, iar următoarea cade dedesubt la jumătate — și, când eticheta poartă și o insignă
   („dezactivat", „suspendat"), ea trece singură pe rândul următor, despărțită de bifa ei. Aici fiecare
   bifă ocupă un rând întreg, deci bifa și eticheta rămân mereu împerecheate și aliniate la stânga.
   ────────────────────────────────────────────────────────────────────────── */
/* Distanța bifă–text o dăm NOI, cu `gap`, nu padding-ul Bootstrap: altfel o bifă `form-check-inline`
   și una obișnuită, alăturate în același formular, au două distanțe diferite și două margini din stânga
   diferite — se vede ca o nealiniere. Așa, toate bifele din listă pornesc din același punct.

   `flex-start` plus marginea mică de sus pe bifă: eticheta poate avea mai multe rânduri (confirmarea de
   broadcast), iar bifa trebuie să stea lângă PRIMUL rând, nu la mijlocul paragrafului. */
.ycm-check-list .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
  margin-bottom: 0.5rem;
}

.ycm-check-list .form-check > .form-check-input {
  flex: 0 0 auto;
  margin: 0.2em 0 0 0;
}

.ycm-check-list .form-check > .form-check-label {
  margin-bottom: 0;
}

/* Pe desktop cele marcate `inline` rămân pe același rând, ca până acum. */
.ycm-check-list .form-check.form-check-inline {
  display: inline-flex;
  margin-right: 1.5rem;
}

@media (max-width: 575.98px) {
  .ycm-check-list .form-check.form-check-inline {
    display: flex;
    width: 100%;
    margin-right: 0;
  }
}