/* =========================================================================
   Cabinet — ce e în plus față de admin-ui/app.css
   =========================================================================

   Cabinetul folosește aceeași foaie de stil ca back office-ul: același shell,
   aceleași carduri, aceleași tabele, aceleași pastile de status. Fișierul ăsta
   se încarcă DUPĂ ea și conține numai ce nu există acolo — selectorul de
   companie, bara de completare a profilului, pagina de modul indisponibil.

   Regula pe care o respectă: nicio redefinire a unei reguli din admin. Dacă un
   element de aici arată altfel decât în admin, e pentru că e un element nou, nu
   pentru că i s-a schimbat înfățișarea. Variabilele (--paper, --line, --copy,
   --muted, --indigo, --radius-*) vin toate din foaia comună.

   ========================================================================= */

/* --- Bara laterală, pe culorile mărcii ----------------------------------- */

/* Violetul mărcii (`--indigo`, #635bff — același cu cel de pe site-ul public),
   nu navy-ul adminului.

   Sub-intrările foloseau deja violetul (`.dashboard-nav-child.is-active`), doar
   intrarea activă de nivel unu rămăsese pe navy cu icon cyan: în aceeași bară
   erau două accente diferite pentru aceeași stare.

   Regulile atârnă de `.cabinet-sidebar`, pusă în componenta de bară a
   cabinetului. Fără cârligul ăla ar fi prins și adminul, care își păstrează
   deliberat navy-ul — vezi decizia de a nu-l muta pe designul nou.

   Ordinea contează: `:hover` înaintea lui `.is-active`, exact ca în foaia
   adminului. Invers, trecerea cu mausul peste intrarea curentă i-ar fi șters
   fundalul plin. */
.cabinet-sidebar .dashboard-nav-link:hover {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.cabinet-sidebar .dashboard-nav-link:hover .dashboard-nav-icon {
  color: var(--indigo);
}

/* Violet spălăcit pe fundal, violet plin pe text — aceeași pereche ca la hover.
   Un fundal plin pe toată lățimea barei era prea tare pentru un meniu care stă
   permanent pe ecran; accentul trebuie să spună unde ești, nu să domine pagina.

   E și perechea pe care o foloseau deja sub-intrările
   (`.dashboard-nav-child.is-active`), deci bara ajunge să vorbească într-un
   singur registru pe ambele niveluri. */
.cabinet-sidebar .dashboard-nav-link.is-active {
  background: var(--indigo-soft);
  color: var(--indigo);
}

/* Ce deosebește intrarea activă de una peste care doar treci cu mausul rămâne
   grosimea textului — `font-weight: 600`, moștenit din regula de bază a
   adminului. Ar fi trebuit altfel o a doua nuanță de violet, iar două violete
   apropiate se citesc ca o eroare, nu ca o distincție. */
.cabinet-sidebar .dashboard-nav-link.is-active .dashboard-nav-icon {
  color: var(--indigo);
}

/* Capul unui grup care conține pagina curentă. */
.cabinet-sidebar .dashboard-nav-link.is-current,
.cabinet-sidebar .dashboard-nav-link.is-current .dashboard-nav-icon {
  color: var(--indigo);
}

.cabinet-sidebar .dashboard-nav-child:hover {
  background: var(--indigo-soft);
  color: var(--indigo);
}

/* --- Selectorul de companie din topbar ---------------------------------- */

/* Compania activă e contextul întregului ecran, deci stă în topbar și nu într-un
   meniu care se deschide. Cu o singură firmă devine text — mecanismul e același,
   doar că n-are ce alege. */
.cabinet-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Colțuri de câmp, nu de pastilă: în rest antetul n-are nicio formă complet
     rotunjită, iar pastila trăgea ochiul mai tare decât titlul paginii. */
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--soft);
}

/*
 * Semnul firmei. Deocamdată inițialele; când compania va avea logo încărcat,
 * în locul textului intră un <img> și nu se schimbă nimic altceva — de-asta
 * regulile de imagine sunt deja scrise.
 */
.cabinet-switcher-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cabinet-switcher-mark img {
  width: 100%;
  height: 100%;
  /* `contain`, nu `cover`: o siglă lată se încadrează, nu se decupează. */
  object-fit: contain;
}

/* Un logo pe fundal violet deschis pierde din contrast, mai ales dacă are
   transparență. Când semnul ține o imagine, fundalul devine hârtie. */
.cabinet-switcher-mark:has(img) {
  border: 1px solid var(--line);
  background: var(--paper);
}

/* Aceeași pastilă și când e doar afișaj (o singură firmă), și când e
   declanșator de meniu — starea contului nu schimbă forma antetului. */
.cabinet-menu-toggle.cabinet-switcher:hover {
  border-color: var(--indigo);
  background: var(--paper);
}

.cabinet-menu-toggle.cabinet-switcher:hover .cabinet-switcher-current {
  color: var(--indigo);
}

.cabinet-switcher-current {
  min-width: 0;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--copy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  /* Sub lățimea asta, antetul are deja titlul și butonul de meniu. Numele se
     scurtează; semnul firmei rămâne, fiindcă el o identifică dintr-o privire. */
  .cabinet-switcher-current {
    max-width: 140px;
  }
}

/* --- Bara de completare a profilului ------------------------------------ */

/* Stă într-un `.dashboard-alert.is-warning`, deci culorile vin de acolo. Aici e
   doar aranjarea: textul într-o coloană, bara sub el pe toată lățimea. */
.cabinet-completion {
  display: grid;
  gap: 10px;
}

.cabinet-completion-copy {
  display: grid;
  gap: 2px;
}

.cabinet-completion-copy span {
  font-size: 0.82rem;
  line-height: 1.55;
  opacity: 0.85;
}

.cabinet-completion-bar {
  overflow: hidden;
  height: 6px;
  border-radius: var(--radius-pill);
  /* Fundalul alertei e deja colorat; o umbră internă se citește pe orice
     variantă, unde o culoare fixă ar bate cu una dintre ele. */
  background: rgba(15, 23, 42, 0.12);
}

.cabinet-completion-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width 0.3s var(--ease);
}

/* --- Lista modulelor active --------------------------------------------- */

/* Nu se refolosește `.dashboard-health-list`: acela e un rând etichetă–valoare,
   întins cu `space-between`, iar aici e o iconiță lângă un titlu cu descriere
   sub el. Împrumutată, descrierea ar ieși din card pe orizontală. */
.cabinet-module-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabinet-module-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--paper);
}

.cabinet-module-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-field);
  background: var(--soft);
  color: var(--indigo);
}

.cabinet-module-icon svg {
  width: 16px;
  height: 16px;
}

.cabinet-module-copy {
  display: grid;
  gap: 2px;
  /* Fără asta, un titlu lung ar întinde flex-item-ul peste lățimea cardului în
     loc să se rupă pe rânduri. */
  min-width: 0;
}

.cabinet-module-copy strong {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--copy);
}

.cabinet-module-copy span {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Pagina „modul indisponibil” ---------------------------------------- */

/* Nu e un ecran de eroare: stă în layout-ul normal, cu bara laterală și
   selectorul de companie la locul lor. Utilizatorul n-a greșit nimic, doar n-are
   încă modulul — deci nu e scos din aplicație. */
.cabinet-locked {
  display: grid;
  justify-items: start;
  gap: 16px;
  max-width: 620px;
}

.cabinet-locked-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-field);
  background: var(--soft);
  color: var(--muted);
}

.cabinet-locked-mark svg {
  width: 20px;
  height: 20px;
}

.cabinet-locked-copy {
  display: grid;
  gap: 8px;
}

.cabinet-locked-copy h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--copy);
}

.cabinet-locked-copy p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--muted);
}

/* --- Comutatoare de stare din tabelele de admin -------------------------- */

/* Un buton care e și indicator: „Da / Nu”, „Activ / Inactiv”. Aprins, spune
   starea curentă; stins, arată ca orice altă acțiune de rând.

   Clasă nouă, nu `.is-solid`: aceea e roșie prin definiție, fiindcă e stilul
   butonului distructiv din dialogul de confirmare. Un „Activează” roșu ar fi
   promis contrariul a ce face. */
.dashboard-row-action.is-on {
  border-color: transparent;
  background: var(--navy);
  color: var(--white);
}

.dashboard-row-action.is-on:hover {
  border-color: transparent;
  background: var(--navy);
  filter: brightness(1.12);
}

/* --- Termenul de abonament din tabul de module (admin) ------------------- */

.cabinet-expiry {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cabinet-expiry .dashboard-input {
  width: auto;
  min-width: 150px;
}

/* --- Istoricul modulelor (admin) ---------------------------------------- */

.cabinet-log {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.cabinet-log-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabinet-log-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.cabinet-log-list strong {
  font-weight: 600;
  color: var(--copy);
}

/* --- Bifa din formularele de autentificare ------------------------------ */

/* `.dashboard-field` e o grilă cu eticheta deasupra câmpului; o bifă are nevoie
   de exact contrariul, casetă lângă text. De aici clasa proprie. */
.cabinet-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--copy);
  cursor: pointer;
}

.cabinet-checkbox input[type='checkbox'] {
  flex: none;
  /* Aliniat cu prima linie de text, nu cu blocul: la două rânduri, o casetă
     centrată pe verticală ar pluti la mijlocul frazei. */
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--indigo);
  cursor: pointer;
}

.cabinet-checkbox a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Text în cardul de autentificare ------------------------------------ */

.dashboard-auth-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--copy);
}

.dashboard-auth-text.is-muted {
  font-size: 0.82rem;
  color: var(--muted);
}

.dashboard-auth-footnote {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}

.dashboard-auth-footnote a {
  color: var(--indigo);
  font-weight: 600;
}

/* Butonul secundar din cardul de autentificare ocupă toată lățimea, ca să nu
   pară pierdut sub cel principal. */
.dashboard-row-action.is-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* --- Rândul companiei selectate ----------------------------------------- */

/* În lista de companii, firma pe care se lucrează acum e marcată discret: un
   fundal, nu un chenar, ca înălțimea rândurilor să rămână egală. */
.dashboard-table tr.is-current > td {
  background: var(--soft);
}

/* --- Ritmul vertical al ecranelor ---------------------------------------- */

/*
   Ecranele cabinetului sunt componente Livewire full-page, iar Livewire cere un
   singur element rădăcină: tot conținutul paginii stă într-un `<div>`.
   `.dashboard-container` distanțează doar copiii lui direcți — adică exact acel
   div, nu cardurile dinăuntru. Fără regula asta, două carduri puse unul sub
   altul se ating, muchie în muchie.

   Aceeași distanță ca a containerului, ca pagina să aibă un singur ritm.
*/
.dashboard-container > div {
  display: grid;
  gap: 24px;
  align-content: start;
}

/* --- Setările contului --------------------------------------------------- */

/* Două carduri egale pe același rând — datele contului și parola. Sunt două
   formulare scurte despre același lucru, iar unul sub altul împingeau parola
   sub marginea ecranului. Sub 1000px se întorc unul sub altul: la lățimea aia,
   două coloane ar lăsa câmpurile mai înguste decât textul din ele.

   Aceeași distanță ca între rânduri: pe verticală și pe orizontală, un singur
   spațiu. */
.dashboard-card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1000px) {
  .dashboard-card-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Setările contului: rândul cu poza de profil ------------------------- */

.cabinet-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

/* Cerc, ca oriunde altundeva apare contul. Fără poză, ține inițialele. */
.cabinet-avatar-preview {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 80px;
  height: 80px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 600;
}

/* Logoul nu se taie rotund ca o poză de profil: e o siglă, iar un cerc i-ar
   mânca colțurile. `contain`, nu `cover`, din același motiv — o siglă lată nu
   se decupează, se încadrează. */
.cabinet-avatar-preview.is-logo {
  border-radius: var(--radius-panel);
}

.cabinet-avatar-preview.is-logo img {
  object-fit: contain;
}

.cabinet-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cabinet-avatar-row .dashboard-form-stack {
  flex: 1;
  min-width: 240px;
}

/* --- Identitatea din topbar, cu poză ------------------------------------- */

/* Poza umple cercul care ținea inițialele. `object-fit: cover` ca o fotografie
   dreptunghiulară să nu se turtească — se taie marginile, nu se deformează
   fața. */
.dashboard-topbar-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}


/* =========================================================================
   Liste de înregistrări și grile de oferte
   =========================================================================

   Tiparele luate din back office-ul Hey Roger, îmbrăcate în marca noastră:
   culorile, colțurile și tipografia rămân cele din foaia adminului, se schimbă
   doar felul în care sunt așezate lucrurile.

   Ce aduc:

    Rândul cu două niveluri și detaliu care se desface. Un tabel de cinci
    coloane, dintre care două cu pastile de status, se rupe pe telefon și cere
    o pagină separată pentru restul câmpurilor. Rândul de aici pune sus ce
    identifică înregistrarea, dedesubt ce o descrie, iar tot restul îl arată la
    cerere, sub el.

    Grila de oferte cu acțiunea lipită jos. Cardurile cu liste de lungimi
    diferite își aliniau butoanele la trei înălțimi.

   Toate clasele sunt noi. Nicio regulă din admin nu e redefinită — vezi
   antetul fișierului.
   ========================================================================= */

.cabinet-record-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Linia dintre rânduri, nu chenar în jurul fiecăruia: rândurile sunt o listă,
   nu o grămadă de carduri. */
.cabinet-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.cabinet-record:first-child {
  border-top: 0;
}

.cabinet-record:hover {
  background: var(--body-soft);
}

.cabinet-record-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 260px;
}

/* Numele deschide detaliul. Buton, nu link: nu duce nicăieri, desface ceva pe
   loc. */
.cabinet-record-title {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--copy);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  transition: color 0.16s var(--ease);
}

.cabinet-record-title:hover {
  color: var(--indigo);
}

.cabinet-record-meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* `flex: 1 1 auto` plus `min-width: 0`, nu `0 0 auto`: pe telefon pastilele și
   butoanele nu încap pe un rând, iar o cutie care nu se strânge le ține pe toate
   pe o linie și le scoate din card în loc să le treacă pe rândul următor. */
.cabinet-record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

/* --- Grila de oferte ------------------------------------------------------ */

.cabinet-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.cabinet-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--paper);
}

/* Pachetul curent iese în față din chenar, nu din dimensiune: o grilă în care
   un card e mai mare se aliniază prost pe orice lățime. */
.cabinet-plan.is-current {
  border-color: var(--indigo);
  background: var(--panel-soft);
}

.cabinet-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cabinet-plan-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--copy);
}

.cabinet-plan-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.cabinet-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.cabinet-plan-price strong {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--copy);
  letter-spacing: -0.02em;
}

.cabinet-plan-price span {
  color: var(--muted);
  font-size: 0.84rem;
}

.cabinet-plan-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cabinet-plan-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cabinet-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--copy);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Bifa e desenată din CSS, nu adusă ca iconiță: e un semn de listă, nu un
   element de interfață. */
.cabinet-plan-features li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 10px;
  margin-top: 4px;
  border: solid var(--indigo);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* `margin-top: auto` lipește acțiunea de baza cardului, oricât de lungă e
   lista de deasupra. */
.cabinet-plan-action {
  margin-top: auto;
  padding-top: 4px;
}

.cabinet-plan-action .dashboard-primary-button,
.cabinet-plan-action .dashboard-row-action {
  width: 100%;
  justify-content: center;
}


/* --- Fapte despre o înregistrare ------------------------------------------

   Perechi etichetă/valoare, fără casetă în jurul fiecăreia.

   Grila boxată din admin (`dashboard-info-grid`) e făcută pentru patru câmpuri
   pe un ecran de detaliu. La opt, cardul devine un zid de cutii identice, în
   care ochiul nu mai are de ce să se agațe — plus că pastilele de status se
   întindeau cât toată caseta, fiindcă acolo valoarea e un bloc.

   Aici rămâne doar ce deosebește: eticheta mică, valoarea sub ea, coloane care
   se așază singure. Aceleași culori și aceeași scară de text ca peste tot. */

.cabinet-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 24px;
}

/* Ce nu încape pe o coloană — o adresă, o listă de fondatori — ocupă rândul. */
.cabinet-fact.is-wide {
  grid-column: 1 / -1;
}

.cabinet-fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.cabinet-fact dt,
.cabinet-fact > span:first-child {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cabinet-fact dd,
.cabinet-fact > strong {
  margin: 0;
  color: var(--copy);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Pastila rămâne cât textul din ea: `align-items: flex-start` de pe rând o
   ține, dar `.dashboard-status` e `display: block` în unele contexte. */
.cabinet-fact .dashboard-status {
  display: inline-flex;
}

/* Descrierea unui modul, două rânduri. Textul întreg e un argument de vânzare —
   locul lui e pe pagina de pachete și pe cea de modul indisponibil, unde omul
   citește ca să aleagă. Aici e o listă cu ce ai deja, iar o descriere de zece
   rânduri împinge restul modulelor sub marginea cardului. */
.cabinet-module-copy span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Aceeași listă de module, dar ca rânduri într-un card, nu ca fișe.
   Într-o coloană îngustă — panoul — chenarul fiecărui modul îl ține laolaltă;
   pe toată lățimea ecranului, patru cutii cu chenar una sub alta arată a cutii
   goale. Aici rămâne linia care le desparte. */
.cabinet-module-list.is-flush {
  gap: 0;
}

.cabinet-module-list.is-flush .cabinet-module-item {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 20px;
  background: transparent;
}

.cabinet-module-list.is-flush .cabinet-module-item:first-child {
  border-top: 0;
}

.cabinet-module-list.is-flush .cabinet-module-item:hover {
  background: var(--body-soft);
}

/* --- Tabelul de companii, cu rând care se desface ------------------------

   Forma din back office-ul Hey Roger: coloane, un rând pe firmă, iar restul
   fișei sub el, la un clic pe rând.

   Rândul întreg e acționabil, nu doar butonul: nimeni nu țintește un buton de
   60px când tot rândul înseamnă același lucru. Butonul rămâne fiindcă un `<tr>`
   nu e nativ acționabil — el poartă `aria-expanded` și e ce găsește tastatura.
   Aceeași grijă ca la rândurile de scanări din admin. */

/* Deschiderea o face mecanismul din admin — `.dashboard-row-expandable` plus
   `.dashboard-row-history`, cu animația și grija lui pentru `prefers-reduced-
   motion`.

   Ce se schimbă aici e bara verticală din stânga. În admin ea leagă rândurile de
   istoric de domeniul lor, într-un tabel unde un grup are multe rânduri-copil și
   fără ea nu s-ar mai vedea unde începe grupul următor. La companii, detaliul e
   un singur rând lipit sub al lui, pe fundal stins — legătura se vede oricum,
   iar bara rămâne doar ca o dungă colorată care nu explică nimic.

   Compania activă se recunoaște din pastila „Selectată” de pe rând; n-are nevoie
   de un al doilea semn. */
.dashboard-table tbody tr.cabinet-detail-row > td:first-child {
  box-shadow: none;
  /* 34px vin din regula adminului, ca textul să nu treacă peste bară. Fără bară,
     detaliul se aliniază cu restul celulelor. */
  padding-left: 20px;
}

.cabinet-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* --- Meniurile din antet -------------------------------------------------- */

/*
 * Un singur set de reguli pentru toate meniurile din antet — contul și
 * selectorul de companie.
 *
 * Selectorul a fost un `<select>` nativ: se deschidea cu fontul și chenarul
 * sistemului de operare, la un centimetru de meniul contului desenat de noi.
 * Două liste vecine în același rând de ecran nu pot arăta ca luate din două
 * aplicații diferite.
 *
 * Reguli comune, nu două seturi paralele: altfel o corectură de contrast se
 * face de două ori și se uită o dată.
 */
.cabinet-menu {
  position: relative;
  min-width: 0;
}

/* Triunghiul implicit al lui `<summary>` se scoate în ambele dialecte: WebKit
   îl desenează cu un pseudo-element, restul prin `display: list-item`. */
.cabinet-menu-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.16s var(--ease);
}

.cabinet-menu-toggle::-webkit-details-marker {
  display: none;
}

.cabinet-menu-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.28);
}

.cabinet-menu-caret {
  display: inline-flex;
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ink-400);
  transition: transform 0.18s var(--ease);
}

.cabinet-menu[open] .cabinet-menu-caret {
  transform: rotate(180deg);
}

/*
 * Ancorat la dreapta, unde stau majoritatea declanșatoarelor; `is-start` mută
 * ancora pentru cele din stânga antetului. Fără asta, panoul iese din ecran.
 *
 * Înălțimea e plafonată: un cont cu douăzeci de firme ar întinde meniul
 * dincolo de marginea de jos, iar ultimele n-ar mai putea fi alese.
 */
.cabinet-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(360px, 60vh);
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.cabinet-menu-panel.is-start {
  right: auto;
  left: 0;
}

.cabinet-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--copy);
  font-size: 0.86rem;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.cabinet-menu-item:hover,
.cabinet-menu-item:focus-visible {
  outline: 0;
  background: var(--indigo-soft);
  color: var(--indigo);
}

.cabinet-menu-item:disabled {
  opacity: 0.6;
  cursor: progress;
}

.cabinet-menu-item-icon {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-400);
}

.cabinet-menu-item:hover .cabinet-menu-item-icon,
.cabinet-menu-item:focus-visible .cabinet-menu-item-icon {
  color: currentColor;
}

/* Numele unei firme poate fi lung; se taie aici, nu lățește panoul. */
.cabinet-menu-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alegerea curentă se vede și fără culoare: bifa e informația, fundalul doar o
   întărește. */
.cabinet-menu-item .cabinet-switcher-mark {
  width: 24px;
  height: 24px;
  font-size: 0.66rem;
}

.cabinet-menu-item[aria-checked='true'] {
  background: var(--soft);
  font-weight: 600;
}

.cabinet-menu-check {
  display: inline-flex;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--indigo);
}

/* Ultima grupă se desparte de restul. */
.cabinet-menu-group {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

/* Ieșirea e singura intrare roșie: nu e o navigare, e sfârșitul sesiunii. */
.cabinet-menu-exit {
  color: var(--danger-text);
}

.cabinet-menu-exit:hover,
.cabinet-menu-exit:focus-visible {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.cabinet-menu-exit .cabinet-menu-item-icon {
  color: currentColor;
}

/* --- Declanșatorul contului ---------------------------------------------- */

.cabinet-account-toggle {
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-button);
}

.cabinet-account-toggle:hover {
  background: var(--soft);
}

.cabinet-account-toggle:hover .dashboard-topbar-identity strong {
  color: var(--indigo);
}

@media (max-width: 720px) {
  /* Pe îngust rămâne doar cercul: numele și adresa sunt deja în bara laterală. */
  .cabinet-account-toggle .dashboard-topbar-identity {
    display: none;
  }
}

/*
 * Ultima linie a tabelului de companii.
 *
 * Foaia adminului scoate marginea de jos de pe `tbody tr:last-child`, iar asta
 * ajunge cât timp un rând e un rând. Aici, fiecare companie are și un rând de
 * detaliu după ea, ascuns până la clic — iar `hidden` scoate rândul din pagină,
 * nu și din numărătoarea CSS. `:last-child` cade astfel pe detaliul ascuns, iar
 * rândul companiei — ultimul *vizibil* — își păstrează linia, care rămâne
 * atârnată deasupra colțului rotunjit al cardului.
 *
 * De aici `nth-last-child(2)`: penultimul rând din tabel e ultima companie.
 * Când detaliul ei e deschis, el devine ultimul și își pierde linia prin regula
 * adminului, deci ambele cazuri ies curat.
 */
.cabinet-table tbody tr:nth-last-child(2) > td {
  border-bottom: 0;
}

/* ==========================================================================
   Inbox-ul de recenzii
   ========================================================================== */

/*
 * Cifra de pe tab și de pe butonul de filtre.
 *
 * Un inbox fără numere pe taburi te obligă să le deschizi pe rând ca să afli
 * dacă ai ceva de făcut. Cifra e mică și palidă: ea însoțește eticheta, n-o
 * concurează.
 */
.reviews-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dashboard-tab.is-active .reviews-tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

/*
 * De ce e sus în listă. Regula generală a tabelului dă `display: block` doar
 * span-urilor fără clasă, iar astea au una — deci și-o poartă singure.
 */
.reviews-why,
.reviews-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.reviews-meta {
  margin-top: 4px;
  font-size: 0.73rem;
}

/* Stelele stau lângă nume, nu sub el: „Ion Popescu ★★☆☆☆” se citește ca un
   singur lucru, iar nota e prima întrebare la o recenzie. */
.reviews-stars {
  margin-left: 6px;
  color: #e8a33d;
  font-size: 0.8rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Coloana de bifat se strânge la conținutul ei, ca cea de acțiuni. */
.reviews-check {
  width: 1%;
  white-space: nowrap;
}

.reviews-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--indigo);
  cursor: pointer;
}

/* Filtrele fine: o grilă care se rearanjează, nu un rând care se rupe. */
.dashboard-card-body.is-flush > .reviews-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  gap: 12px 16px;
  background: var(--body-soft);
}

.reviews-filters .dashboard-field span {
  font-size: 0.76rem;
}

/* Intervalul e un singur filtru cu două capete, deci ocupă două coloane. */
.reviews-filters-range {
  grid-column: span 2;
}

.reviews-range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Butonul de golire se aliniază cu câmpurile, nu cu etichetele lor. */
.reviews-filters-reset {
  justify-content: end;
}

.reviews-toolbar {
  min-height: 52px;
}

/*
 * Bara de acțiuni în masă. Stă în dreapta, pe rândul în care erau chipsurile
 * de sortare — acolo se uită cine tocmai a bifat ceva.
 */
.reviews-bulk {
  margin-left: auto;
}

.reviews-bulk strong {
  font-size: 0.82rem;
  color: var(--copy);
}

/*
 * Cât se schimbă lista, tabelul se stinge.
 *
 * Fără asta, o căutare pe un cont cu multe recenzii lasă ecranul neschimbat
 * câteva sute de milisecunde, iar omul apasă a doua oară crezând că n-a mers.
 */
.reviews-table {
  transition: opacity 0.15s var(--ease);
}

.reviews-table.is-busy {
  opacity: 0.45;
  pointer-events: none;
}

/* ==========================================================================
   Panoul de detaliu al unei recenzii
   ========================================================================== */

/*
 * Panou lateral, nu pagină.
 *
 * Cine lucrează un inbox rezolvă zece recenzii la rând; o pagină separată l-ar
 * plimba înainte și înapoi, pierzând de fiecare dată filtrul și poziția în
 * listă. De aceea panoul stă peste listă, iar lista rămâne dedesubt, neatinsă.
 */
.reviews-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 36, 63, 0.32);
}

.reviews-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.reviews-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

/* Doar mijlocul derulează: antetul, cu numele și legătura spre sursă, rămâne
   vizibil oricât de lung ar fi textul recenziei. */
.reviews-drawer-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 20px;
}

.reviews-drawer-section {
  display: grid;
  gap: 12px;
}

.reviews-drawer-section + .reviews-drawer-section {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.reviews-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--copy);
}

.reviews-score {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Textul clientului, pus în ghilimele vizuale: în panou sunt și texte scrise de
   noi, iar cele două nu trebuie confundate. */
.reviews-quote {
  padding: 14px 16px;
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
  background: var(--soft);
  color: var(--copy);
  font-size: 0.88rem;
  line-height: 1.6;
}

.reviews-quote strong {
  display: block;
  margin-bottom: 6px;
}

.reviews-quote p {
  margin: 0;
  white-space: pre-line;
}

/* Explicația scorului: motivul la stânga, punctele la dreapta, ca să se poată
   aduna din ochi. */
.reviews-reasons {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews-reasons li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-button);
  background: var(--soft);
  font-size: 0.82rem;
  color: var(--text-soft);
}

.reviews-reasons strong {
  color: var(--copy);
  font-variant-numeric: tabular-nums;
}

.reviews-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.reviews-categories label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--copy);
  cursor: pointer;
}

.reviews-categories input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--indigo);
}

/* Șablonul și butonul care îl aplică stau pe același rând: sunt un singur gest. */
.reviews-template-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
}

/* Istoricul versiunilor. Compact: se citește rar, dar când se citește contează
   cine a scris și ce s-a schimbat. */
.reviews-history {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.reviews-history li {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  font-size: 0.82rem;
  color: var(--text-soft);
}

.reviews-history-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.76rem;
}

.reviews-history-head strong {
  color: var(--copy);
}

.reviews-history-error {
  color: var(--danger-text);
}

/*
 * Numele autorului deschide panoul. Buton, nu link: nu duce nicăieri, iar un
 * link fals ar promite o adresă care se poate deschide în tab nou.
 */
.reviews-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.reviews-open:hover {
  color: var(--indigo);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .reviews-drawer {
    width: 100%;
    border-left: 0;
  }
}

/* ==========================================================================
   Statisticile de recenzii
   ========================================================================== */

/*
 * Graficul de trend.
 *
 * SVG scris de mână, nu o librărie: proiectul n-are pipeline de build, iar un
 * grafic cu o linie și câteva puncte nu justifică nici 200 KB de JavaScript de
 * pe un CDN, nici un bundler adus pentru un singur ecran. Coordonatele vin din
 * App\Support\Reviews\Statistics\TrendLine, unde se pot și testa.
 */
.reviews-chart svg {
  display: block;
  width: 100%;
  height: 180px;
  overflow: visible;
}

.reviews-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  /* `preserveAspectRatio: none` întinde desenul; fără asta, liniile de reper ar
     ieși mai groase pe ecran lat decât pe unul îngust. */
  vector-effect: non-scaling-stroke;
}

.reviews-chart-line {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.reviews-chart-area {
  fill: var(--indigo-soft);
  opacity: 0.7;
}

.reviews-chart-dot {
  fill: var(--paper);
  stroke: var(--indigo);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Etichetele sub grafic, nu în el: în SVG s-ar fi întins odată cu desenul și ar
   fi ieșit turtite pe ecran lat. */
.reviews-chart-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
}

.reviews-chart-labels span {
  display: grid;
  gap: 1px;
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.reviews-chart-labels strong {
  color: var(--copy);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/*
 * Barele. Etichetă, bară, cifră — trei coloane care se aliniază pe verticală
 * între rânduri, ca ochiul să compare lungimile, nu să le caute.
 */
.reviews-bars {
  display: grid;
  gap: 10px;
}

.reviews-bar {
  display: grid;
  grid-template-columns: 96px 1fr 40px;
  align-items: center;
  gap: 12px;
}

.reviews-bar-label {
  font-size: 0.82rem;
  color: var(--copy);
}

.reviews-bar-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  overflow: hidden;
}

.reviews-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--indigo);
  /* Zero rămâne vizibil ca linie subțire: o bară dispărută cu totul se citește
     ca „lipsește măsurătoarea”, nu ca „zero”. */
  min-width: 2px;
}

.reviews-bar-fill.is-success { background: var(--success-text); }
.reviews-bar-fill.is-danger { background: var(--danger-text); }
.reviews-bar-fill.is-warning { background: var(--warning-text); }
.reviews-bar-fill.is-info { background: var(--indigo); }
.reviews-bar-fill.is-muted { background: var(--ink-400); }

.reviews-bar-value {
  text-align: right;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Integrările prin webhook
   ========================================================================== */

.reviews-webhooks {
  display: grid;
  gap: 12px;
}

.reviews-webhook {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel-soft);
}

.reviews-webhook-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Adresa și antetele se copiază cu mâna, deci se aleg cu ochiul: monospațiat,
   pe rândul lui, cu spargere oriunde — un token de 40 de litere n-are unde. */
.reviews-webhook .dashboard-code,
.dashboard-alert .dashboard-code {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/*
 * Ecranul surselor: butoanele de pe rând se pot rupe, la nevoie.
 *
 * Regula generală le ține pe un singur rând, ceea ce e bine cât sunt două-trei.
 * Confirmarea ștergerii poartă însă o întrebare întreagă — „Șterge sursa și
 * cele 82 de recenzii?” —, iar ea, ținută pe un rând, ar fi împins tabelul
 * dincolo de marginea ecranului, după o bară de derulare pe care n-o vede
 * nimeni tocmai când e pe cale să șteargă ceva.
 */
.reviews-sources-table td:has(> .dashboard-table-actions) {
  white-space: normal;
}

.reviews-sources-table .dashboard-table-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ==========================================================================
   Conectarea unei surse
   ========================================================================== */

/*
 * Blocul cu care începe modulul: un inbox gol îl arată în locul unui mesaj
 * despre faptul că e gol.
 *
 * O singură ofertă mare și una mică dedesubt, nu două alături. Google e ce vrea
 * aproape oricine — recenziile de acolo apar în căutare, lângă numele firmei —,
 * iar fișierul e ieșirea de siguranță. Puse pe același rând, ar fi cerut o
 * alegere între o conectare care merge singură și o corvoadă lunară.
 */
.reviews-connect {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}

/* Când blocul stă într-un card fără padding — ecranul surselor, care își
   păstrează tabelul pe toată lățimea. */
.dashboard-card-body.is-flush > .reviews-connect {
  padding: 20px;
}

.reviews-connect-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--copy);
}

.reviews-connect-copy {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Butonul își ia lățimea din text: plină, ar arăta ca un banner, nu ca ceva de
   apăsat — vezi regula de la `.dashboard-form-actions` din admin-ui. */
.reviews-connect .dashboard-primary-button {
  width: auto;
}

/* Ce cerem de la contul Google. Stă sub buton, dar nu lipit de el: e o
   lămurire, nu eticheta lui. */
.reviews-connect .dashboard-field-note {
  margin-top: 10px;
}

/* Alternativa: sub o linie, cu litere mici. E acolo pentru cine are nevoie de
   ea, nu pentru cine trebuie să aleagă. */
.reviews-connect-alt {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.reviews-connect-alt a {
  color: var(--indigo);
  font-weight: 600;
}

/*
 * Locațiile contului conectat.
 *
 * Fiecare e un buton întreg, nu un rând cu o săgeată: alegerea asta se face o
 * singură dată, iar adresa de sub nume e cea care lămurește care magazin e care
 * la o firmă cu trei fișe numite aproape la fel.
 */
.reviews-locations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.reviews-location {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reviews-location:hover {
  border-color: var(--indigo);
  box-shadow: var(--shadow-sm);
}

.reviews-location strong {
  display: block;
  color: var(--copy);
  font-size: 0.9rem;
}

.reviews-location span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

/*
 * Legăturile din interiorul unui anunț.
 *
 * Anunțul își pune propria culoare pe tot ce e în el, iar un link moștenea
 * culoarea aia și devenea text obișnuit: „pune cheile în Setări recenzii” arăta
 * ca o instrucțiune, nu ca un drum, iar clientul rămânea pe loc întrebând unde
 * anume. Subliniat și îngroșat, se vede că se poate apăsa, fără să spargă
 * culoarea anunțului.
 */
.dashboard-alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dashboard-alert a:hover {
  text-decoration-thickness: 2px;
}

/* Rândul de sub parolă: „ține-mă conectat” la stânga, „ai uitat parola?” la
   dreapta. Pe ecrane înguste trec unul sub altul, ca linkul să nu ajungă lipit
   de casetă. */
.cabinet-auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cabinet-auth-row a {
  font-size: 0.82rem;
  color: var(--indigo);
  text-decoration: none;
}

.cabinet-auth-row a:hover {
  text-decoration: underline;
}