/* ===========================================================================
   AdventureNET — Stratul premium, comun întregii platforme
   ---------------------------------------------------------------------------
   Aceeași materie ca pe cardurile din ecranul porții: noapte adâncă, muchie
   ridicată, ramă aurie, umbră proprie. Se încarcă DUPĂ `components.css`,
   `header.css` și `footer.css`, pe toate paginile — cu o singură excepție:
   pagina cărții (`/platforma/login/`), care rămâne exact cum era.

   DE UNDE VIN CULORILE
   Nu sunt scrise aici. Vin din tema activă (`theme/theme-tokens.css`), prin
   `--color-primary`, `--color-surface` și celelalte jetoane. De aceea fiecare
   panou are identitatea lui — turcoaz, verde, violet — dar toate pe același
   fond de noapte, cu aceeași ramă aurie. Dacă cineva schimbă tema din setări,
   stratul acesta o urmează, nu se bate cu ea.

   AURUL este singura culoare fixă: este semnătura platformei, nu accentul
   panoului. Trece prin `--aur*`, definit mai jos.
   =========================================================================== */

:root {
  --aur:        #dcb45f;
  --aur-clar:   #fbeec2;
  --aur-stins:  #a8842f;
  --aur-rgb:    220, 180, 95;

  /* Reteta de relief, într-un singur loc. Cine vrea suprafața premium scrie
     `box-shadow: var(--relief)` și gata. */
  --relief:
    0 0 0 1px rgba(var(--aur-rgb), .26),
    0 1px 0 rgba(251, 238, 194, .18) inset,
    0 -12px 26px rgba(0, 0, 0, .38) inset,
    0 14px 26px rgba(4, 8, 18, .44);

  --relief-ridicat:
    0 0 0 1px rgba(var(--aur-rgb), .5),
    0 1px 0 rgba(251, 238, 194, .3) inset,
    0 -12px 26px rgba(0, 0, 0, .36) inset,
    0 26px 44px rgba(4, 8, 18, .56);

  --fata-premium:
    linear-gradient(168deg, rgba(46, 60, 104, .42), rgba(10, 16, 36, .9) 64%);
}

/* --------------------------------------------------------------------- */
/*  1. Identitatea fiecărui panou                                         */
/*                                                                        */
/*  Culorile sunt exact cele de pe cardurile din ecranul porții: apeși un  */
/*  card turcoaz și se deschide un panou turcoaz. Legătura dintre ecrane   */
/*  se face prin culoare, nu prin explicații.                              */
/* --------------------------------------------------------------------- */

body.user-dashboard {
  --color-primary: #22d3ee;
  --color-primary-rgb: 34, 211, 238;
  --color-primary-hover: #0ea5e9;
  --color-accent: #7dd3fc;
}

body.host-dashboard {
  --color-primary: #34d399;
  --color-primary-rgb: 52, 211, 153;
  --color-primary-hover: #0d9488;
  --color-accent: #6ee7b7;
}

body.admin-body {
  --color-primary: #a78bfa;
  --color-primary-rgb: 167, 139, 250;
  --color-primary-hover: #8b5cf6;
  --color-accent: #f472b6;
}

body.user-dashboard,
body.host-dashboard,
body.admin-body,
body.page-home,
body[data-page] {
  background: var(--color-bg);
  color: var(--color-text);
}

/* --------------------------------------------------------------------- */
/*  2. Cardurile                                                          */
/* --------------------------------------------------------------------- */

.card,
.card-sm,
.card-glass,
.glass-card,
.glass-card-3d,
.stat-card,
.kpi-card,
.dashboard-card,
.panel-card,
.widget-card {
  position: relative;
  border: 0;
  border-radius: var(--radius-card, 18px);
  background: var(--fata-premium);
  box-shadow: var(--relief);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              box-shadow .22s cubic-bezier(.22, 1, .36, 1);
}

/* Dâra din capul cardului: aur la mijloc, culoarea panoului la capete. */
.card::before,
.glass-card-3d::before,
.stat-card::before,
.kpi-card::before,
.dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1.5px;
  pointer-events: none;
  background: linear-gradient(90deg,
              transparent,
              var(--color-primary, #dcb45f) 22%,
              var(--aur-clar) 50%,
              var(--color-primary, #dcb45f) 78%,
              transparent);
  opacity: .72;
}

.card:hover,
.glass-card-3d:hover,
.stat-card:hover,
.kpi-card:hover,
.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--relief-ridicat);
}

/* --------------------------------------------------------------------- */
/*  3. Butoanele                                                          */
/* --------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-button, 12px);
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

/* Butonul principal: aur masiv, ca „Accept toate" din bannerul de cookies
   și ca „Autentificare" din poartă. Este același gest peste tot. */
.btn-primary,
.btn.btn-primary {
  border: 0;
  color: #241a06;
  background: linear-gradient(178deg, #fbeec2, #dcb45f 52%, #b8933f);
  box-shadow:
    0 7px 18px rgba(var(--aur-rgb), .32),
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 -2px 0 rgba(120, 88, 20, .55) inset;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(178deg, #fff5da, #e6c476 52%, #c49f47);
  box-shadow:
    0 12px 28px rgba(var(--aur-rgb), .44),
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 -2px 0 rgba(120, 88, 20, .55) inset;
}

/* Butonul secundar: aceeași piele întunecată ca a cardurilor. */
.btn-secondary,
.btn-ghost,
.btn-outline {
  border: 0;
  color: var(--color-text);
  background: linear-gradient(172deg, rgba(46, 60, 104, .5), rgba(10, 16, 36, .9) 66%);
  box-shadow:
    0 0 0 1px rgba(var(--aur-rgb), .24),
    0 1px 0 rgba(251, 238, 194, .16) inset,
    0 6px 14px rgba(4, 8, 18, .38);
}

.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(var(--aur-rgb), .46),
    0 1px 0 rgba(251, 238, 194, .26) inset,
    0 12px 24px rgba(4, 8, 18, .48);
}

.btn:focus-visible {
  outline: 3px solid rgba(var(--aur-rgb), .55);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------- */
/*  4. Câmpurile de formular                                              */
/* --------------------------------------------------------------------- */

.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  border: 0;
  border-radius: var(--radius-button, 12px);
  color: var(--color-text);
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12) inset;
  transition: box-shadow .2s ease, background .2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, .075);
  box-shadow:
    0 0 0 1.5px var(--aur) inset,
    0 0 0 3px rgba(var(--aur-rgb), .18);
}

::placeholder { color: #6f7a91; }

/* --------------------------------------------------------------------- */
/*  5. Antetul public                                                     */
/* --------------------------------------------------------------------- */

.main-header {
  border-bottom: 1px solid rgba(var(--aur-rgb), .2);
  background: linear-gradient(180deg, rgba(16, 26, 54, .96), rgba(10, 16, 36, .92));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(4, 8, 18, .4);
}

/* Linia aurie de sub antet, în locul celei colorate */
.header-glow-line {
  background: linear-gradient(90deg,
              transparent, rgba(var(--aur-rgb), .5) 30%,
              var(--aur-clar) 50%, rgba(var(--aur-rgb), .5) 70%, transparent);
  opacity: .75;
}

.nav-link {
  color: rgba(233, 237, 246, .82);
  border-radius: 999px;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--aur-clar);
  background: rgba(var(--aur-rgb), .1);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .3) inset;
}

.nav-link .nav-icon { stroke: currentColor; }

/* --------------------------------------------------------------------- */
/*  6. Subsolul                                                           */
/* --------------------------------------------------------------------- */

.main-footer {
  border-top: 1px solid rgba(var(--aur-rgb), .2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(23, 38, 78, .7), transparent 60%),
    linear-gradient(180deg, #0c1226 0%, #070c1c 100%);
  color: var(--color-text);
}

.footer-col-title { color: var(--aur-clar); }

.main-footer a { color: rgba(233, 237, 246, .74); }
.main-footer a:hover { color: var(--aur); }

/* --------------------------------------------------------------------- */
/*  7. Barele laterale ale panourilor                                     */
/* --------------------------------------------------------------------- */

.sidebar,
.admin-sidebar,
.dashboard-sidebar {
  border-right: 1px solid rgba(var(--aur-rgb), .18);
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(23, 38, 78, .8), transparent 58%),
    linear-gradient(180deg, #101a36 0%, #0a1024 100%);
}

/*
 * NUMELE PLATFORMEI DISPARE DIN BARA LATERALĂ, RĂMÂNE DOAR EMBLEMA.
 *
 * În panou știi deja unde ești; numele scris încă o dată, lângă emblemă,
 * ocupa jumătate din lățimea barei fără să adauge nimic. Emblema rămâne —
 * este și butonul de întoarcere la pagina principală.
 *
 * Textul nu se șterge din HTML: rămâne pentru cititoarele de ecran, ascuns
 * vizual. Așa emblema își păstrează numele accesibil.
 */
.sidebar-logo .logo-navbar-nume,
.sidebar-logo-mini .logo-navbar-nume,
.sidebar-brand .brand-text strong {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sidebar-logo,
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.1rem .75rem;
}

/* Emblema, în medalion cu ramă aurie — aceeași de peste tot */
.sidebar-logo .logo-navbar-invelis,
.sidebar-brand .brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .14) inset;
}

.sidebar-logo .logo-navbar-invelis::before,
.sidebar-brand .brand-mark::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f);
  opacity: .85;
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.2px));
}

.sidebar-logo .logo-navbar-wow {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6));
}

.sidebar-brand .brand-mark svg { width: 26px; height: 26px; stroke: var(--aur-clar); }

/* Eticheta panoului („Administrare") rămâne: spune în ce panou ești. */
.sidebar-brand .brand-text small {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Elementele de meniu */
.sidebar-link,
.nav-item,
.sidebar-nav a {
  border-radius: 12px;
  color: rgba(233, 237, 246, .78);
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sidebar-link:hover,
.nav-item:hover,
.sidebar-nav a:hover {
  color: var(--aur-clar);
  background: rgba(var(--aur-rgb), .08);
}

.sidebar-link.active,
.nav-item.active,
.sidebar-nav a.active {
  color: #fff;
  background: linear-gradient(172deg,
              rgba(var(--color-primary-rgb), .28),
              rgba(var(--color-primary-rgb), .12));
  box-shadow:
    0 0 0 1px rgba(var(--color-primary-rgb), .45) inset,
    0 6px 16px rgba(var(--color-primary-rgb), .2);
}

/* --------------------------------------------------------------------- */
/*  8. Insigne și pastile                                                 */
/* --------------------------------------------------------------------- */

.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
}

.badge-success { color: var(--color-success); background: rgba(var(--color-success-rgb), .13); box-shadow: 0 0 0 1px rgba(var(--color-success-rgb), .32) inset; }
.badge-warning { color: var(--color-warning); background: rgba(var(--color-warning-rgb), .13); box-shadow: 0 0 0 1px rgba(var(--color-warning-rgb), .32) inset; }
.badge-danger  { color: var(--color-danger);  background: rgba(var(--color-danger-rgb), .13);  box-shadow: 0 0 0 1px rgba(var(--color-danger-rgb), .32) inset; }
.badge-info    { color: var(--color-info);    background: rgba(var(--color-info-rgb), .13);    box-shadow: 0 0 0 1px rgba(var(--color-info-rgb), .32) inset; }

/* --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .card, .glass-card-3d, .stat-card, .kpi-card, .dashboard-card,
  .btn, .nav-link, .sidebar-link, .nav-item { transition: none; }
  .card:hover, .glass-card-3d:hover, .stat-card:hover,
  .kpi-card:hover, .dashboard-card:hover,
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

/* ===========================================================================
   9. Pictogramele din panouri — un singur limbaj, nu un curcubeu
   ---------------------------------------------------------------------------
   Fiecare element din bara laterală avea propria culoare de fundal: albastru
   la Acasă, verde la Rezervări, portocaliu la Notificări, roz la Favorite,
   violet la Profil. Șapte culori care nu însemnau nimic — nu codificau o
   stare, nu grupau nimic, doar existau. Alături de plăcile aurii ale
   platformei arătau ca două aplicații lipite.

   Acum toate sunt același medalion întunecat cu ramă aurie, iar culoarea
   panoului apare o singură dată: în pictograma elementului activ. Așa ochiul
   găsește imediat unde se află, în loc să caute printre șapte culori egale.

   Selectorii poartă `body` în față pentru a depăși `.sidebar-icon-3d.icon-x`
   din foile fiecărui panou, fără `!important`.
   =========================================================================== */

body .sidebar-icon-3d[class*="icon-"],
body .nav-icon-3d[class*="icon-"],
body .kpi-icon[class*="kpi-icon--"],
body .stat-icon,
body .quick-action-icon {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .12) inset;
}

/* Rama aurie, tăiată la centru ca să rămână doar inelul */
body .sidebar-icon-3d[class*="icon-"]::before,
body .nav-icon-3d[class*="icon-"]::before,
body .kpi-icon[class*="kpi-icon--"]::before,
body .stat-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f);
  opacity: .55;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.3px));
  transition: opacity .2s ease;
}

body .sidebar-icon-3d svg,
body .nav-icon-3d svg,
body .kpi-icon svg,
body .stat-icon svg {
  position: relative;
  stroke: var(--aur-clar);
  color: var(--aur-clar);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
}

/* Elementul activ: aici — și numai aici — apare culoarea panoului. */
body .nav-item.active .sidebar-icon-3d,
body .nav-item.active .nav-icon-3d,
body .sidebar-link.active .sidebar-icon-3d {
  background: radial-gradient(circle at 32% 26%,
              rgba(var(--color-primary-rgb), .85),
              rgba(var(--color-primary-rgb), .45) 58%,
              #0a1020);
  box-shadow:
    0 6px 16px rgba(var(--color-primary-rgb), .35),
    0 1px 0 rgba(255, 255, 255, .2) inset;
}

body .nav-item.active .sidebar-icon-3d::before,
body .nav-item.active .nav-icon-3d::before { opacity: 1; }

body .nav-item.active .sidebar-icon-3d svg,
body .nav-item.active .nav-icon-3d svg { stroke: #fff; color: #fff; }

/* Rândul activ din bara laterală */
body .nav-item.active,
body .sidebar .nav-item.active,
body .sidebar-nav a.active {
  color: #fff;
  border: 0;
  background: linear-gradient(172deg,
              rgba(var(--color-primary-rgb), .26),
              rgba(var(--color-primary-rgb), .08));
  box-shadow:
    0 0 0 1px rgba(var(--color-primary-rgb), .42) inset,
    0 8px 18px rgba(4, 8, 18, .35);
}

/* Ieșirea din cont rămâne roșie la atingere — este singura acțiune din bară
   care nu se poate anula printr-un clic înapoi. */
body .nav-logout:hover .sidebar-icon-3d {
  background: radial-gradient(circle at 32% 26%, rgba(243, 139, 127, .8), #3a1310 62%, #0a1020);
}
body .nav-logout:hover { color: #ffd9d2; }

/* --------------------------------------------------------------------- */
/*  10. Plăcile de indicatori (KPI)                                        */
/* --------------------------------------------------------------------- */

body .kpi-card,
body .stat-card {
  background: var(--fata-premium);
  box-shadow: var(--relief);
}

/* Dâra colorată din capul fiecărei plăci era altă culoare la fiecare.
   Rămâne una singură, în aur, cu accentul panoului la capete. */
body .kpi-card::before,
body .stat-card::before {
  background: linear-gradient(90deg,
              transparent,
              rgba(var(--color-primary-rgb), .8) 24%,
              var(--aur-clar) 50%,
              rgba(var(--color-primary-rgb), .8) 76%,
              transparent);
  opacity: .8;
}

body .kpi-value,
body .stat-value,
body .kpi-card .valoare { color: var(--aur-clar); }

body .kpi-label,
body .stat-label { color: var(--color-text-muted); }

/* --------------------------------------------------------------------- */
/*  11. Avatarul                                                           */
/* --------------------------------------------------------------------- */

/*
 * Rama aurie face avatarul să arate intenționat chiar și când imaginea
 * lipsește: în baza de date sunt fișiere de 70 de octeți, rămase de la
 * încărcări vechi, care nu se pot decoda. Fără ramă, se vedea un cerc gol.
 */
body .user-avatar,
body .sidebar-user-avatar,
body .avatar,
body .topbar-avatar {
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 0 0 2px rgba(var(--aur-rgb), .45),
    0 6px 14px rgba(0, 0, 0, .5);
  object-fit: cover;
}

/* ===========================================================================
   12. Dungile colorate din capul plăcilor KPI
   ---------------------------------------------------------------------------
   Fiecare placă avea dunga ei: verde, cyan, violet, portocaliu. Selectorii
   care le dau culoarea sunt `.kpi-card.glass-card.stripe-verde::before`, adică
   trei clase — o regulă pe două clase, oricât de corectă, pierde în fața lor.
   De aceea le rescriem cu aceeași greutate plus `body` în față.
   =========================================================================== */

body .kpi-card.glass-card::before,
body .kpi-card.glass-card[class*="stripe-"]::before,
body .kpi-card.glass-card[class*="stripe-"]:hover::before {
  background: linear-gradient(90deg,
              transparent,
              rgba(var(--color-primary-rgb), .85) 24%,
              var(--aur-clar) 50%,
              rgba(var(--color-primary-rgb), .85) 76%,
              transparent);
  opacity: .85;
}

/* Aureola difuză din spatele plăcii urmează tot accentul panoului. */
body .kpi-card.glass-card::after {
  background: radial-gradient(circle at 50% 0%,
              rgba(var(--color-primary-rgb), .12), transparent 62%);
}

/* --------------------------------------------------------------------- */
/*  13. Avatarele                                                          */
/* --------------------------------------------------------------------- */

body .topbar-avatar,
body .home-avatar-img,
body .home-profile-avatar,
body .profile-avatar,
body .chat-avatar,
body .user-avatar,
body .avatar {
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 0 0 2px rgba(var(--aur-rgb), .5),
    0 6px 14px rgba(0, 0, 0, .5);
  object-fit: cover;
}

/* Bulina de „online" se aliniază cu rama, nu cu marginea imaginii. */
body .avatar-status,
body .status-dot-online { box-shadow: 0 0 0 2px #0a1024; }

/* --------------------------------------------------------------------- */
/*  14. Legăturile „Vezi toate" și accentele de listă                       */
/* --------------------------------------------------------------------- */

body .card-link,
body .see-all,
body .view-all,
body .section-link {
  color: var(--color-primary);
  font-weight: 600;
}

body .card-link:hover,
body .see-all:hover,
body .view-all:hover { color: var(--aur-clar); }

/* ===========================================================================
   15. Pictogramele KPI — toate variantele de denumire
   ---------------------------------------------------------------------------
   Fiecare panou și-a botezat altfel plăcuțele: `kpi-icon--rezervari` la
   utilizator, `kpi-icon-revenue` la gazdă (o singură liniuță), iar profilul
   public al gazdei folosește `stat-card-icon green|blue|purple|yellow`.
   Un selector cu două liniuțe prindea doar prima familie — de aceea plăcuțele
   gazdei rămăseseră verzi, portocalii și violet.

   `[class]` din selector nu filtrează nimic; este acolo doar ca să ridice
   specificitatea peste regulile de culoare din foile fiecărui panou, fără
   `!important`.
   =========================================================================== */

body .kpi-icon[class],
body .stat-card-icon[class],
body .metric-icon[class],
body .card-icon[class],
body .action-icon[class] {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .12) inset;
}

body .kpi-icon[class]::before,
body .stat-card-icon[class]::before,
body .metric-icon[class]::before,
body .card-icon[class]::before,
body .action-icon[class]::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f);
  opacity: .6;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.3px));
}

body .kpi-icon[class] svg,
body .kpi-icon[class] i,
body .stat-card-icon[class] svg,
body .stat-card-icon[class] i,
body .metric-icon[class] svg,
body .card-icon[class] svg,
body .action-icon[class] svg {
  position: relative;
  stroke: var(--aur-clar);
  color: var(--aur-clar);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
}

/* ===========================================================================
   16. Bara laterală a panoului de administrare
   ---------------------------------------------------------------------------
   Aici pictogramele nu au înveliș propriu: culoarea se pune direct pe `<svg>`,
   una pentru fiecare secțiune —
   `.nav-item[data-sectiune="utilizatori"] svg { background: ... }`.
   Șapte pătrate colorate, alt limbaj decât restul platformei.

   Le facem discuri întunecate cu inel auriu, ca peste tot. Un `<svg>` nu
   poate avea `::before`, deci inelul se desenează cu un al doilea strat de
   fundal peste primul: cercul de aur dedesubt, discul întunecat deasupra,
   micșorat cu 2px prin `background-size`.

   Selectorul poartă `body` în față ca să treacă de specificitatea
   `[data-sectiune]` fără `!important`.
   =========================================================================== */

body .admin-sidebar .nav-item svg,
body .sidebar-nav .nav-item svg,
body .nav-item[data-sectiune] svg {
  box-sizing: content-box;
  padding: 7px;
  border-radius: 50%;
  color: var(--aur-clar);
  background:
    radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020) content-box padding-box,
    conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f) border-box;
  border: 2px solid transparent;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
}

body .nav-item.is-active svg,
body .nav-item.active svg {
  color: #fff;
  background:
    radial-gradient(circle at 32% 26%,
      rgba(var(--color-primary-rgb), .9),
      rgba(var(--color-primary-rgb), .45) 58%, #0a1020) content-box padding-box,
    conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f) border-box;
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), .35);
}

body .admin-sidebar .nav-item.is-active,
body .sidebar-nav .nav-item.is-active {
  color: #fff;
  background: linear-gradient(172deg,
              rgba(var(--color-primary-rgb), .24),
              rgba(var(--color-primary-rgb), .07));
  box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb), .4) inset;
}

body .nav-group-title {
  color: rgba(var(--aur-rgb), .7);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body .nav-count {
  border-radius: 999px;
  font-style: normal;
  color: var(--aur-clar);
  background: rgba(var(--aur-rgb), .14);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .3) inset;
}

/* Un contor roșu înseamnă ceva netratat — acolo culoarea chiar spune ceva. */
body .nav-badge.badge-danger,
body .nav-badge[data-urgent="1"] {
  color: #ffd9d2;
  background: rgba(243, 139, 127, .2);
  box-shadow: 0 0 0 1px rgba(243, 139, 127, .45) inset;
}

/* ---- Subsolul barei laterale ---- */

body .sidebar-footer,
body .admin-sidebar .sidebar-actions {
  margin-top: auto;
  padding: .8rem .7rem 1rem;
  border-top: 1px solid rgba(var(--aur-rgb), .14);
}

/* ===========================================================================
   18. BARA DE SUS A PANOURILOR — același desen peste tot
   ---------------------------------------------------------------------------
   Aceeași înălțime, aceeași pastilă de căutare, aceleași butoane rotunde,
   același avatar cu inel auriu. Diferă doar ce scrie în ele.
   =========================================================================== */

body .topbar,
body .dashboard-topbar,
body .admin-topbar,
body .panel-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
  padding: 0 1.35rem;
  border-bottom: 1px solid rgba(var(--aur-rgb), .16);
  background: linear-gradient(180deg, rgba(17, 28, 58, .94), rgba(11, 17, 40, .88));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(4, 8, 18, .32);
}

/* Căutarea: o pastilă lungă, la fel în toate panourile */
body .topbar-search,
body .search-box,
body .admin-search {
  flex: 1 1 auto;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 42px;
  padding: 0 .9rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset;
  transition: box-shadow .2s ease, background .2s ease;
}

body .topbar-search:focus-within,
body .search-box:focus-within,
body .admin-search:focus-within {
  background: rgba(255, 255, 255, .08);
  box-shadow:
    0 0 0 1px var(--aur) inset,
    0 0 0 3px rgba(var(--aur-rgb), .16);
}

body .topbar-search input,
body .search-box input,
body .admin-search input {
  flex: 1;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text);
  font-size: .92rem;
}

body .topbar-search input:focus,
body .search-box input:focus,
body .admin-search input:focus {
  box-shadow: none;
  background: none;
}

body .topbar-search svg,
body .search-box svg,
body .admin-search svg { stroke: rgba(var(--aur-rgb), .75); }

/* Scurtătura de tastatură din capătul căutării */
body .search-shortcut,
body .kbd,
body kbd {
  padding: .16rem .45rem;
  border-radius: 6px;
  font-size: .7rem;
  font-family: inherit;
  color: rgba(233, 237, 246, .7);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset;
}

/* Butoanele rotunde din dreapta: aceleași medalioane ca peste tot */
body .topbar-actions .btn-icon,
body .topbar-btn,
body .admin-topbar .btn-icon,
body .topbar .btn-icon {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--aur-clar);
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 0 0 1px rgba(var(--aur-rgb), .3),
    0 6px 14px rgba(4, 8, 18, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}

body .topbar-actions .btn-icon:hover,
body .topbar-btn:hover,
body .topbar .btn-icon:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(var(--aur-rgb), .58),
    0 12px 22px rgba(4, 8, 18, .5);
}

body .topbar-actions .btn-icon svg,
body .topbar-btn svg,
body .topbar .btn-icon svg { stroke: currentColor; }

/* Bulina de notificări */
body .topbar-badge,
body .btn-icon .badge,
body .notification-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #241a06;
  background: linear-gradient(178deg, #fbeec2, #dcb45f);
  box-shadow: 0 0 0 2px #0b1128;
}

/* Identitatea din colțul din dreapta */
body .topbar-user,
body .admin-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .6rem .3rem .3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .2) inset;
}

body .topbar-user strong,
body .admin-user strong { font-size: .88rem; color: var(--color-text); }
body .topbar-user small,
body .admin-user small { font-size: .74rem; color: var(--color-text-muted); }

/* ===========================================================================
   19. Titlurile de secțiune din panouri
   =========================================================================== */

body .page-title,
body .section-title,
body .dashboard-title,
body .panel-title {
  color: var(--aur-clar);
  letter-spacing: .01em;
}

body .page-subtitle,
body .section-subtitle,
body .dashboard-subtitle { color: var(--color-text-muted); }

/* Tabelele din panouri */
body table thead th {
  color: rgba(var(--aur-rgb), .78);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(var(--aur-rgb), .2);
}

body table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, .06); }
body table tbody tr:hover { background: rgba(var(--aur-rgb), .05); }

/* ===========================================================================
   20. Ecrane mici
   =========================================================================== */

@media (max-width: 1024px) {
  body .sidebar,
  body .admin-sidebar { --rail: 240px; }
  body .sidebar-logo-img { width: 140px; }
}

@media (max-width: 720px) {
  body .topbar,
  body .admin-topbar { min-height: 60px; padding: 0 .9rem; }
  body .topbar-search,
  body .admin-search { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  body .sidebar-logo-img,
  body .sidebar .nav-item,
  body .topbar-btn,
  body .topbar .btn-icon { transition: none; }
  body .sidebar-logo:hover .sidebar-logo-img,
  body .topbar-btn:hover,
  body .topbar .btn-icon:hover { transform: none; }
}

/* ===========================================================================
   21. PLĂCUȚA DE IDENTITATE — aceeași în toate cele trei bare laterale
   ---------------------------------------------------------------------------
   Logo-ul stă pe o placă aurie, potrivită exact pe lățimea antetului. Rama de
   aur o lasă imaginea să respire, iar chenarul propriu al logo-ului (fundal
   deschis, colțuri rotunjite) se așază înăuntru ca o filă într-un paspartu.

   Eticheta text de sub logo („Utilizator", „Gazdă", „Administrare") a fost
   scoasă: numele panoului se citește oricum din culoarea accentului și din
   meniul de dedesubt, iar acolo lua din spațiul logo-ului.

   Când bara se restrânge, plăcuța dispare și rămâne emblema animată — la fel
   în toate trei.
   =========================================================================== */

body .sidebar-header,
body .sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem .85rem;
  border-bottom: 1px solid rgba(var(--aur-rgb), .16);
}

/* ---- Placa aurie ---- */

body .sidebar-logo {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 7px;
  border-radius: 15px;
  text-decoration: none;
  line-height: 0;

  /* Aur periat: două treceri de lumină peste un fond cald. */
  background:
    linear-gradient(158deg, #fbeec2 0%, #dcb45f 42%, #b8933f 78%, #eed597 100%);

  box-shadow:
    0 0 0 1px rgba(120, 88, 20, .55),
    0 1px 0 rgba(255, 255, 255, .75) inset,
    0 -2px 4px rgba(120, 88, 20, .35) inset,
    0 10px 22px rgba(4, 8, 18, .5);

  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              box-shadow .25s ease;
}

body .sidebar-logo:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(120, 88, 20, .6),
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 -2px 4px rgba(120, 88, 20, .35) inset,
    0 16px 30px rgba(4, 8, 18, .55),
    0 0 34px rgba(var(--aur-rgb), .35);
}

body .sidebar-logo:focus-visible {
  outline: 3px solid var(--aur-clar);
  outline-offset: 3px;
}

/* ---- Logo-ul, cât de mare încape ---- */

/* `max-width: 140px` si `height: 32px` din foaia panoului de utilizator
   tineau imaginea mult mai mica decat placuta, iar aurul se vedea ca o rama
   groasa in jurul unui logo mic. Aici o lasam sa umple placuta. */
body .sidebar-logo .sidebar-logo-img,
body .sidebar-logo img.sidebar-logo-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 9px;
  filter: none;
}

/* ---- Butonul de restrângere ---- */

body .sidebar-collapse-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--aur-clar);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .26) inset;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

body .sidebar-collapse-btn:hover {
  background: rgba(var(--aur-rgb), .14);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .5) inset;
}

body .sidebar-collapse-btn svg { width: 17px; height: 17px; stroke: currentColor; }

/* Săgeata se întoarce când bara este strânsă. */
body .sidebar.collapsed .sidebar-collapse-btn .collapse-icon,
body .admin-sidebar.collapsed .sidebar-collapse-btn .collapse-icon {
  transform: rotate(180deg);
}

/* Butonul de închidere pentru ecrane mici (există doar în administrare). */
body .sidebar-inchide {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--aur-clar);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .26) inset;
}

body .sidebar-inchide svg { width: 17px; height: 17px; }

@media (max-width: 1024px) {
  body .sidebar-inchide { display: grid; }
  body .sidebar-collapse-btn { display: none; }
}

/* ---- Emblema din bara restrânsă ---- */

body .sidebar-logo-mini { display: none; }

body .sidebar.collapsed .sidebar-logo,
body .admin-sidebar.collapsed .sidebar-logo { display: none; }

body .sidebar.collapsed .sidebar-logo-mini,
body .admin-sidebar.collapsed .sidebar-logo-mini {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .14) inset;
}

/* Inelul auriu care se rotește în jurul emblemei restrânse */
body .sidebar.collapsed .sidebar-logo-mini::before,
body .admin-sidebar.collapsed .sidebar-logo-mini::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.2px));
  animation: bara-inel 12s linear infinite;
}

@keyframes bara-inel { to { transform: rotate(360deg); } }

body .sidebar.collapsed .sidebar-logo-mini img,
body .admin-sidebar.collapsed .sidebar-logo-mini img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 50%;
}

/* Bara strânsă: doar pictogramele, centrate. */
body .sidebar.collapsed,
body .admin-sidebar.collapsed { --rail: 82px; }

body .sidebar.collapsed .nav-item,
body .admin-sidebar.collapsed .nav-item,
body .sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: .62rem;
}

body .sidebar.collapsed .nav-item > span:not([class*="icon"]):not(.nav-badge),
body .admin-sidebar.collapsed .nav-item > span:not([class*="icon"]):not(.nav-badge),
body .sidebar.collapsed .nav-count,
body .admin-sidebar.collapsed .nav-count,
body .sidebar.collapsed .sidebar-section-title,
body .admin-sidebar.collapsed .nav-group-title,
body .sidebar.collapsed .sidebar-group-title { display: none; }

body .sidebar.collapsed .sidebar-header,
body .admin-sidebar.collapsed .sidebar-brand { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  body .sidebar-logo,
  body .sidebar-collapse-btn { transition: none; }
  body .sidebar-logo:hover { transform: none; }
  body .sidebar.collapsed .sidebar-logo-mini::before,
  body .admin-sidebar.collapsed .sidebar-logo-mini::before { animation: none; }
}

/* ===========================================================================
   22. ANTETUL PUBLIC — aceeași identitate ca în panouri
   ---------------------------------------------------------------------------
   În antet stătea emblema rotundă plus numele scris cu litere într-un degrade
   albastru-portocaliu, adică al treilea fel de a arăta marca, după panouri și
   după subsol. Acum este exact placa aurie din barele laterale, cu același
   logo.

   Schimbarea se face din CSS, nu din cele 37 de pagini: imaginea veche se
   ascunde, iar învelișul primește logo-ul ca fundal. Markup-ul rămâne întreg,
   deci nu se rupe nimic din ce se leagă de el.
   =========================================================================== */

body .main-header .logo .logo-navbar-wow,
body .main-header .logo .logo-navbar-nume,
body .main-header .logo .logo-glow,
body .main-header .logo .logo-relief-bg { display: none; }

body .main-header .logo .logo-navbar-invelis {
  display: block;
  width: clamp(150px, 14vw, 196px);
  padding: 6px;
  border-radius: 13px;
  line-height: 0;

  background: linear-gradient(158deg, #fbeec2 0%, #dcb45f 42%, #b8933f 78%, #eed597 100%);
  box-shadow:
    0 0 0 1px rgba(120, 88, 20, .55),
    0 1px 0 rgba(255, 255, 255, .75) inset,
    0 -2px 4px rgba(120, 88, 20, .35) inset,
    0 8px 18px rgba(4, 8, 18, .45);

  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}

body .main-header .logo:hover .logo-navbar-invelis {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(120, 88, 20, .6),
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 -2px 4px rgba(120, 88, 20, .35) inset,
    0 14px 26px rgba(4, 8, 18, .5),
    0 0 30px rgba(var(--aur-rgb), .32);
}

body .main-header .logo .logo-navbar-invelis::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 818 / 300;          /* proporția fișierului footer-logo.png */
  border-radius: 9px;
  background: url("../img/footer-logo.png") center / contain no-repeat;
}

/* Fără aspect-ratio (browsere mai vechi) păstrăm o înălțime rezonabilă. */
@supports not (aspect-ratio: 1) {
  body .main-header .logo .logo-navbar-invelis::after { height: 56px; }
}

body .main-header .logo:focus-visible .logo-navbar-invelis {
  outline: 3px solid var(--aur-clar);
  outline-offset: 3px;
}

/* Linkul scos în evidență din meniu era mov-roz, singura urmă din paleta
   veche rămasă în antet. Trece în aur, ca restul. */
body .nav-link-highlight,
body .nav-link.nav-link-highlight {
  color: var(--aur-clar);
  background: rgba(var(--aur-rgb), .1);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .4) inset;
}

body .nav-link-highlight:hover {
  background: rgba(var(--aur-rgb), .18);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .62) inset;
}

/* Butonul de autentificare din antet */
body .btn-auth {
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  color: #241a06;
  background: linear-gradient(178deg, #fbeec2, #dcb45f 52%, #b8933f);
  box-shadow:
    0 6px 16px rgba(var(--aur-rgb), .32),
    0 1px 0 rgba(255, 255, 255, .6) inset;
}

body .btn-auth:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 26px rgba(var(--aur-rgb), .44),
    0 1px 0 rgba(255, 255, 255, .7) inset;
}

/* Subsolul folosește deja acest logo; îi dăm aceeași placă, ca perechea să
   se vadă de la un capăt la altul al paginii. */
body .main-footer .footer-logo-v2 {
  display: inline-block;
  padding: 6px;
  border-radius: 13px;
  line-height: 0;
  background: linear-gradient(158deg, #fbeec2 0%, #dcb45f 42%, #b8933f 78%, #eed597 100%);
  box-shadow:
    0 0 0 1px rgba(120, 88, 20, .55),
    0 1px 0 rgba(255, 255, 255, .75) inset,
    0 8px 18px rgba(4, 8, 18, .45);
}

body .main-footer .footer-logo-v2 .logo-relief-bg { display: none; }
body .main-footer .footer-logo-v2 .logo-img { display: block; border-radius: 9px; }

@media (prefers-reduced-motion: reduce) {
  body .main-header .logo .logo-navbar-invelis,
  body .btn-auth { transition: none; }
  body .main-header .logo:hover .logo-navbar-invelis,
  body .btn-auth:hover { transform: none; }
}

/* ===========================================================================
   23. CORECTĂRI — restrângerea barei, bara de derulare, logo-ul din antet
   ---------------------------------------------------------------------------
   Ce nu mergea, verificat pe fiecare panou:

   · GAZDA nu avea NICIO regulă `.sidebar.collapsed` în foaia ei, deci bara
     rămânea la lățime întreagă: pictogramele se centrau, textul dispărea, dar
     coloana rămânea de 280px. Doar utilizatorul avea `--sidebar-collapsed-width`.
   · Titlurile de grup („PRINCIPAL", „MANAGEMENT") le ascundeam numai în
     administrare; în celelalte două rămâneau pe ecran în bara strânsă.
   · Elementele de meniu aveau `width: calc(100% - 1.4rem)` PLUS margini
     laterale, iar `box-sizing` moștenit le adăuga și bordura — suma depășea
     coloana și apărea o bară de derulare orizontală în josul barei.
   · Butonul de deconectare nu se centra ca celelalte când bara era strânsă.
   · În antet, logo-ul se desena într-un `::after` cu `aspect-ratio`. Foile
     paginilor pun `display:flex` pe același element, iar pseudo-elementul
     ajungea element flex fără înălțime: se vedea doar plăcuța aurie, goală.
     Acum imaginea este chiar fundalul plăcuței, cu `background-origin:
     content-box` — adică lipită exact de marginea interioară, fără să
     plutească.
   =========================================================================== */

/* ---- Lățimea barei, prin variabilele pe care le folosesc deja panourile ---- */

body .sidebar,
body .admin-sidebar,
body .dashboard-sidebar {
  --sidebar-width: 268px;
  --sidebar-collapsed-width: 84px;
  width: var(--sidebar-width);
  overflow-x: hidden;              /* fără derulare pe orizontală, niciodată */
}

body .sidebar.collapsed,
body .admin-sidebar.collapsed,
body .dashboard-sidebar.collapsed {
  --sidebar-width: 84px;
  --rail: 84px;
  width: 84px;
  min-width: 84px;
}

/* ---- Elementele de meniu: lățime fără scăpări ---- */

body .sidebar .nav-item,
body .admin-sidebar .nav-item,
body .sidebar-nav .nav-item,
body .sidebar-link {
  box-sizing: border-box;
  width: auto;                     /* lățimea o dau marginile, nu un calcul */
  margin-left: .7rem;
  margin-right: .7rem;
  max-width: calc(100% - 1.4rem);
}

/* ---- Bara strânsă: numai pictograme, totul centrat ---- */

body .sidebar.collapsed .nav-group-title,
body .sidebar.collapsed .sidebar-section-title,
body .sidebar.collapsed .sidebar-group-title,
body .sidebar.collapsed .section-title,
body .admin-sidebar.collapsed .nav-group-title,
body .admin-sidebar.collapsed .sidebar-section-title,
body .dashboard-sidebar.collapsed .nav-group-title {
  display: none;
}

body .sidebar.collapsed .nav-item,
body .admin-sidebar.collapsed .nav-item,
body .sidebar.collapsed .sidebar-link,
body .sidebar.collapsed .nav-logout,
body .admin-sidebar.collapsed .nav-logout {
  justify-content: center;
  gap: 0;
  margin-left: .5rem;
  margin-right: .5rem;
  padding: .62rem 0;
  max-width: calc(100% - 1rem);
}

/* Textul dispare, pictograma rămâne — inclusiv la deconectare, care până
   acum rămânea lipită de marginea din stânga. */
body .sidebar.collapsed .nav-item > span:not([class*="icon"]),
body .admin-sidebar.collapsed .nav-item > span:not([class*="icon"]),
body .sidebar.collapsed .nav-logout > span:not([class*="icon"]),
body .sidebar.collapsed .nav-count,
body .admin-sidebar.collapsed .nav-count {
  display: none;
}

/* Contorul devine o bulină în colț, ca să nu se piardă informația. */
body .sidebar.collapsed .nav-badge,
body .admin-sidebar.collapsed .nav-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  font-size: .64rem;
  line-height: 17px;
}

/* Indicatorul auriu al elementului curent se mută pe margine. */
body .sidebar.collapsed .nav-item.active::after,
body .admin-sidebar.collapsed .nav-item.is-active::after {
  left: -.5rem;
}

/* ---- Bara de derulare verticală: subțire, aurie, discretă ---- */

body .sidebar,
body .admin-sidebar,
body .sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 180, 95, .35) transparent;
}

body .sidebar::-webkit-scrollbar,
body .admin-sidebar::-webkit-scrollbar,
body .sidebar-nav::-webkit-scrollbar { width: 6px; height: 0; }

body .sidebar::-webkit-scrollbar-track,
body .admin-sidebar::-webkit-scrollbar-track,
body .sidebar-nav::-webkit-scrollbar-track { background: transparent; }

body .sidebar::-webkit-scrollbar-thumb,
body .admin-sidebar::-webkit-scrollbar-thumb,
body .sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(220, 180, 95, .5), rgba(168, 132, 47, .4));
}

body .sidebar::-webkit-scrollbar-thumb:hover,
body .admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(220, 180, 95, .7); }

/* ---- Antetul barei în stare strânsă ---- */

body .sidebar.collapsed .sidebar-header,
body .admin-sidebar.collapsed .sidebar-brand {
  flex-direction: column;
  gap: .5rem;
  padding: .8rem .4rem;
}

body .sidebar.collapsed .sidebar-collapse-btn,
body .admin-sidebar.collapsed .sidebar-collapse-btn { margin: 0 auto; }

/* ===========================================================================
   24. LOGO-UL DIN ANTET — lipit de plăcuță, nu plutind pe ea
   =========================================================================== */

body .main-header .logo .logo-navbar-invelis::after { content: none; }

body .main-header .logo .logo-navbar-invelis {
  display: block;
  box-sizing: border-box;
  /* Plăcuța era prea înaltă (58–72px) și domina antetul; la cererea
     proprietarului este mai mică și mai „dreptunghiulară": înălțime redusă
     cu ~25%, lățime ușor mai mică. Emblema rămâne centrată prin `contain`. */
  width: clamp(140px, 11.5vw, 164px);
  height: clamp(44px, 3.8vw, 54px);
  padding: 4px 6px;
  border-radius: 11px;
  line-height: 0;

  /* Două straturi: logo-ul așezat în interiorul marginii, placa aurie sub el.
     `content-box` este cheia — fără el imaginea s-ar centra peste toată placa
     și ar părea că plutește. */
  background:
    url("../img/footer-logo.png") no-repeat center / contain content-box,
    linear-gradient(158deg, #fbeec2 0%, #dcb45f 42%, #b8933f 78%, #eed597 100%) border-box;
}

/* ===========================================================================
   25. LOGO-UL DIN SUBSOL — aceeași plăcuță, aceeași aliniere
   =========================================================================== */

body .main-footer .footer-logo-v2 {
  display: inline-block;
  box-sizing: border-box;
  /* Aceeași plăcuță ca în antet, la aceeași scară redusă: lățime fixă,
     înălțimea rezultă din proporția fișierului (818×300). */
  width: fit-content;
  padding: 4px 6px;
  border-radius: 11px;
  line-height: 0;
  font-size: 0;
}

body .main-footer .footer-logo-v2 .logo-img,
body .main-footer .footer-logo-v2 img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 9px;
  margin: 0;
}

/* ---- Plăcuța din bara laterală: aceeași potrivire exactă ---- */

body .sidebar-logo {
  box-sizing: border-box;
  font-size: 0;
}

body .sidebar-logo .sidebar-logo-img,
body .sidebar-logo img.sidebar-logo-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  border-radius: 9px;
}

/* ===========================================================================
   26. Cartonașul de profil din bara strânsă
   ---------------------------------------------------------------------------
   În bara strânsă rămâneau numele, rolul și bulina de cont verificat: textul
   se ascundea, dar elementele stăteau în continuare la x=94 într-o coloană de
   84px. De acolo venea bara de derulare orizontală din josul barei — nu din
   elementele de meniu, cum părea la prima vedere.

   Măsurat în browser: `.profile-info`, `.profile-name`, `.profile-role` și
   `.profile-verified` ieșeau cu 10 pixeli în afara coloanei.
   =========================================================================== */

body .sidebar.collapsed .profile-info,
body .sidebar.collapsed .profile-name,
body .sidebar.collapsed .profile-role,
body .sidebar.collapsed .profile-verified,
body .admin-sidebar.collapsed .profile-info,
body .admin-sidebar.collapsed .profile-name,
body .admin-sidebar.collapsed .profile-role,
body .admin-sidebar.collapsed .profile-verified {
  display: none;
}

body .sidebar.collapsed .sidebar-profile,
body .admin-sidebar.collapsed .sidebar-profile {
  justify-content: center;
  gap: 0;
  padding: .6rem .4rem;
  margin-left: .5rem;
  margin-right: .5rem;
  max-width: calc(100% - 1rem);
  overflow: hidden;
}

body .sidebar.collapsed .profile-avatar-wrap,
body .admin-sidebar.collapsed .profile-avatar-wrap { margin: 0 auto; }

/*
 * ATENȚIE — aici a fost o regulă `body .sidebar.collapsed * { max-width:100% }`.
 *
 * Rezolva depășirea, dar strivea și medalioanele: `max-width` pe fiecare
 * descendent tăia lățimea discurilor, înălțimea rămânea, iar inelul auriu
 * ieșea ovaal. În bara strânsă se vedeau niște elipse aurii în loc de
 * pictograme. O regulă cu `*` atinge lucruri la care nu te gândeai.
 *
 * Depășirea era, de fapt, doar de la blocul de profil, iar acela este ascuns
 * explicit mai sus. Coloana are oricum `overflow-x: hidden`.
 */

/* Butonul de deconectare: aceeași aliniere ca restul, în ambele stări. */
body .sidebar .nav-logout,
body .admin-sidebar .nav-logout,
body .sidebar-footer .nav-logout {
  box-sizing: border-box;
  margin-left: .7rem;
  margin-right: .7rem;
  max-width: calc(100% - 1.4rem);
}

body .sidebar.collapsed .nav-logout,
body .admin-sidebar.collapsed .nav-logout,
body .sidebar.collapsed .sidebar-footer .nav-logout {
  justify-content: center;
  gap: 0;
  margin-left: .5rem;
  margin-right: .5rem;
  padding: .62rem 0;
  max-width: calc(100% - 1rem);
}

/* ===========================================================================
   27. Antetul barei strânse — butonul care ieșea din coloană
   ---------------------------------------------------------------------------
   Regula din foaia panoului de utilizator este
   `.sidebar.collapsed .sidebar-header.glass-header` — patru clase. Varianta
   mea, cu trei clase plus `body`, pierdea la specificitate, deci antetul
   rămânea pe rând, iar butonul de restrângere ajungea la x=66..98 într-o
   coloană de 82px: se vedea tăiat pe margine.

   Aceeași clasă în plus la mine și problema dispare, fără `!important`.
   =========================================================================== */

body .sidebar.collapsed .sidebar-header,
body .sidebar.collapsed .sidebar-header.glass-header,
body .admin-sidebar.collapsed .sidebar-brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem .3rem;
}

body .sidebar.collapsed .sidebar-header.glass-header .sidebar-collapse-btn,
body .sidebar.collapsed .sidebar-collapse-btn,
body .admin-sidebar.collapsed .sidebar-collapse-btn {
  position: static;
  margin: 0 auto;
  flex: 0 0 auto;
}

/* Subsolul barei de administrare folosește `.sidebar-link`, nu `.nav-logout`. */
body .sidebar-foot .sidebar-link,
body .admin-sidebar .sidebar-foot .sidebar-link {
  box-sizing: border-box;
  margin-left: .7rem;
  margin-right: .7rem;
  max-width: calc(100% - 1.4rem);
}

body .admin-sidebar.collapsed .sidebar-foot .sidebar-link {
  justify-content: center;
  gap: 0;
  margin-left: .5rem;
  margin-right: .5rem;
  padding: .62rem 0;
  max-width: calc(100% - 1rem);
}

body .admin-sidebar.collapsed .sidebar-foot .sidebar-link span,
body .admin-sidebar.collapsed .sidebar-foot .sidebar-link > *:not(svg):not([class*="icon"]) {
  display: none;
}

body .admin-sidebar.collapsed .sidebar-foot .sidebar-link svg { display: block; }

/* ===========================================================================
   28. Medalioanele își păstrează forma, orice s-ar întâmpla în jur
   ---------------------------------------------------------------------------
   Discurile trebuie să rămână cercuri perfecte în ambele stări ale barei.
   `flex: 0 0 auto` le scoate de sub compresia flexbox, iar `aspect-ratio`
   le ține pătrate chiar dacă o regulă din altă parte le atinge lățimea.
   =========================================================================== */

body .sidebar-icon-3d,
body .nav-icon-3d,
body .kpi-icon,
body .stat-card-icon,
body .metric-icon,
body .card-icon,
body .action-icon,
body .stat-icon {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

body .sidebar-icon-3d,
body .nav-icon-3d {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

body .sidebar-icon-3d svg,
body .nav-icon-3d svg {
  width: 18px;
  height: 18px;
  max-width: none;
}

/* ===========================================================================
   29. Ultimele două acțiuni din bară primesc aceleași medalioane
   ---------------------------------------------------------------------------
   „Înapoi la site" și „Ieși din cont" aveau doar o săgeată subțire lângă
   text, fără învelișul pe care îl are orice altă pictogramă din bară. Acum
   arată la fel cu restul, iar ieșirea din cont capătă tentă caldă la hover —
   este singura acțiune de acolo care nu se poate anula.
   =========================================================================== */

body .sidebar-foot .sidebar-link > svg,
body .sidebar-footer .nav-item > svg,
body .sidebar-foot .sidebar-link > i {
  box-sizing: content-box;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 10px;
  border-radius: 50%;
  color: var(--aur-clar);
  background:
    radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020) content-box padding-box,
    conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f) border-box;
  border: 2px solid transparent;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
}

body .sidebar-foot .sidebar-link:hover > svg,
body .sidebar-footer .nav-item:hover > svg { color: #fff; }

/* Ieșirea din cont: aceeași formă, altă temperatură. */
body .sidebar-foot .sidebar-link[href*="logout"] > svg,
body .sidebar-foot #btnLogout > svg,
body .nav-logout > svg {
  color: #ffd9d2;
}

body .sidebar-foot .sidebar-link[href*="logout"]:hover > svg,
body .sidebar-foot #btnLogout:hover > svg,
body .nav-logout:hover > svg {
  background:
    radial-gradient(circle at 32% 26%, rgba(243, 139, 127, .75), #3a1310 62%, #0a1020) content-box padding-box,
    conic-gradient(from 0deg, #dcb45f, #fbeec2 25%, #93691f 55%, #eed597 80%, #dcb45f) border-box;
}

/* Aliniere identică pentru cele două rânduri de la baza barei. */
body .sidebar-foot .sidebar-link,
body .sidebar-footer .nav-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .5rem .8rem;
  border-radius: 13px;
  font-size: .92rem;
  color: rgba(233, 237, 246, .8);
  text-decoration: none;
}

body .sidebar-foot .sidebar-link:hover,
body .sidebar-footer .nav-item:hover {
  color: var(--aur-clar);
  background: rgba(255, 255, 255, .045);
}

/* ===========================================================================
   30. NAVIGAREA MOBILĂ — bara de jos și sertarul „Mai multe"
   ---------------------------------------------------------------------------
   Erau ultima insulă rămasă din paleta veche: plăcuțe portocalii, roșii,
   verzi și violet, câte una pentru fiecare intrare. Acum sunt aceleași
   medalioane cu inel auriu ca peste tot, iar elementul curent poartă culoarea
   secțiunii.

   Funcționarea nu se atinge: deschiderea, închiderea, gestul de tragere în
   jos și tastele rămân ale lui `mobile-nav-public.js`.
   =========================================================================== */

body .mobile-nav-public,
body .mobile-nav-bar {
  border-top: 1px solid rgba(var(--aur-rgb), .2);
  background: linear-gradient(180deg, rgba(17, 28, 58, .96), rgba(9, 14, 32, .98));
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 -10px 30px rgba(4, 8, 18, .45);
}

body .mobile-nav-item-public,
body .nav-item-public {
  color: rgba(233, 237, 246, .72);
  background: none;
}

body .mobile-nav-item-public.active,
body .nav-item-public.active { color: var(--aur-clar); }

/* Plăcuța pictogramei din bara de jos */
body .mobile-nav-item-public [class*="icon"],
body .nav-item-public [class*="icon"] {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: var(--aur-clar);
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(var(--aur-rgb), .34) inset;
}

body .mobile-nav-item-public.active [class*="icon"],
body .nav-item-public.active [class*="icon"] {
  color: #fff;
  background: radial-gradient(circle at 32% 26%,
              rgba(var(--color-primary-rgb), .85),
              rgba(var(--color-primary-rgb), .4) 58%, #0a1020);
  box-shadow:
    0 6px 16px rgba(var(--color-primary-rgb), .35),
    0 0 0 1px rgba(var(--aur-rgb), .6) inset;
}

body .mobile-nav-item-public svg,
body .nav-item-public svg { width: 19px; height: 19px; stroke: currentColor; }

/* ---- Sertarul „Mai multe" ---- */

body .mobile-drawer,
body .mobile-drawer.glass-drawer {
  border: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(20, 32, 66, .98), rgba(10, 16, 36, .99));
  box-shadow:
    0 -1px 0 rgba(var(--aur-rgb), .3),
    0 -24px 60px rgba(0, 0, 0, .6);
}

body .mobile-drawer-overlay,
body .drawer-overlay { background: rgba(6, 11, 24, .68); }

body .mobile-drawer-header {
  border-bottom: 1px solid rgba(var(--aur-rgb), .16);
}

body .mobile-drawer-header h3 { color: var(--aur-clar); }

body .mobile-drawer-close,
body .drawer-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--aur-clar);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .3) inset;
}

body .mobile-drawer-close:hover,
body .drawer-close:hover { background: rgba(var(--aur-rgb), .16); }

/* Mânerul de tragere din capul sertarului */
body .mobile-drawer-handle,
body .drawer-handle {
  background: linear-gradient(90deg, rgba(220, 180, 95, .4), #dcb45f, rgba(220, 180, 95, .4));
  border-radius: 999px;
}

body .mobile-drawer-item,
body .drawer-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 0;
  border-radius: 14px;
  color: rgba(233, 237, 246, .88);
  background: linear-gradient(168deg, rgba(46, 60, 104, .34), rgba(10, 16, 36, .74) 66%);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .18) inset;
  text-decoration: none;
}

body .mobile-drawer-item:hover,
body .drawer-item:hover {
  color: var(--aur-clar);
  box-shadow: 0 0 0 1px rgba(var(--aur-rgb), .45) inset;
}

body .mobile-drawer-icon,
body .drawer-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: var(--aur-clar);
  background: radial-gradient(circle at 32% 26%, #263457, #141c33 62%, #0a1020);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(var(--aur-rgb), .36) inset;
}

body .mobile-drawer-icon svg,
body .drawer-icon svg { width: 19px; height: 19px; stroke: currentColor; }

/* Ieșirea din cont din sertar rămâne caldă, ca în bara laterală. */
body .drawer-logout .drawer-icon,
body .mobile-drawer-item.is-logout .mobile-drawer-icon {
  color: #ffd9d2;
  background: radial-gradient(circle at 32% 26%, rgba(243, 139, 127, .6), #3a1310 62%, #0a1020);
}

/* ===========================================================================
   31. ALINIEREA — un singur sistem, nu margini presărate
   ---------------------------------------------------------------------------
   Măsurat în browser, elementele porneau din trei locuri diferite în aceeași
   bară:

     utilizator  37px (în `.nav-group-items`) si 28px (deconectarea, direct
                 în `.sidebar-nav`, care are 16px padding)
     gazda       37px, 12px
     administrare 23px, cu latimi 219 si 221 (padding-right de 2px pe container)

   Cauza: fiecare element isi punea propria margine laterala, iar containerele
   aveau padding-uri diferite si imbricari diferite. Suma nu avea cum sa iasa
   la fel.

   Soluția: marginea o dă UN SINGUR loc — containerul de nivel întâi. Toate
   învelișurile dinăuntru trec pe zero, iar elementele umplu lățimea. Așa
   alinierea nu mai depinde de cât de adânc este așezat un buton.
   =========================================================================== */

/* Containerele care dau marginea */
body .sidebar-nav,
body .sidebar-footer,
body .sidebar-foot,
body .admin-sidebar .sidebar-nav {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

/* Învelișurile dinăuntru nu mai adaugă nimic */
body .nav-group,
body .nav-group-items,
body .nav-section,
body .sidebar-section,
body .sidebar-nav > div,
body .sidebar-nav > ul {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  list-style: none;
}

/* Elementele umplu containerul, fără margini proprii */
body .sidebar .nav-item,
body .admin-sidebar .nav-item,
body .sidebar-nav .nav-item,
body .sidebar-link,
body .sidebar-foot .sidebar-link,
body .sidebar-footer .nav-item,
body .sidebar .nav-logout,
body .admin-sidebar .nav-logout,
body .sidebar-profile {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Titlurile de grup se aliniază cu textul elementelor, nu cu marginea. */
body .nav-group-title,
body .sidebar-section-title,
body .sidebar-group-title {
  padding-left: 4px;
  padding-right: 4px;
  margin-left: 0;
  margin-right: 0;
}

/* Indicatorul auriu al elementului curent se lipește de marginea coloanei. */
body .sidebar .nav-item.active::after,
body .sidebar .nav-item.is-active::after,
body .admin-sidebar .nav-item.is-active::after,
body .sidebar-nav .nav-item.is-active::after,
body .sidebar-link.active::after {
  left: -12px;
}

/* În bara strânsă marginea scade, dar rămâne una singură. */
body .sidebar.collapsed .sidebar-nav,
body .sidebar.collapsed .sidebar-footer,
body .admin-sidebar.collapsed .sidebar-nav,
body .admin-sidebar.collapsed .sidebar-foot {
  padding-left: 10px;
  padding-right: 10px;
}

body .sidebar.collapsed .nav-item,
body .admin-sidebar.collapsed .nav-item,
body .sidebar.collapsed .nav-logout,
body .admin-sidebar.collapsed .sidebar-foot .sidebar-link,
body .sidebar.collapsed .sidebar-profile {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}

body .sidebar.collapsed .nav-item.active::after,
body .admin-sidebar.collapsed .nav-item.is-active::after {
  left: -10px;
}

/* ===========================================================================
   32. ALINIEREA, punctele exacte care o stricau
   ---------------------------------------------------------------------------
   Lanțul de containere, măsurat element cu element:

     UTILIZATOR / GAZDĂ
       .nav-item          padL 12
       .nav-group-items   padL 0
       .nav-group         padL 8  + bordură stânga 1   <-- +9px
       .sidebar-nav       padL 12
     iar deconectarea stă DIRECT în `.sidebar-nav`, fără grup: de aici 22 vs 13.

     ADMINISTRARE
       .admin-sidebar     padL 12   <-- padding pe rail
       .sidebar-nav       padL 12   <-- încă 12, se adună
       .sidebar-foot .sidebar-link  margL 11.2  <-- margine rămasă

   Deci: grupul nu mai adaugă nimic pe orizontală, rail-ul nu mai are padding
   propriu (îl dau listele), iar marginile rămase se duc la zero. Toate
   elementele pornesc atunci din același punct, în toate cele trei panouri.
   =========================================================================== */

/* Grupul rămâne un panou vizual, dar nu mai împinge conținutul lateral. */
body .nav-group,
body .nav-group.glass-group {
  padding-left: 0;
  padding-right: 0;
  border-left: 0;
  border-right: 0;
}

/* Rail-ul nu mai are padding propriu: marginea o dau listele dinăuntru. */
body .admin-sidebar,
body .sidebar,
body .dashboard-sidebar {
  padding-left: 0;
  padding-right: 0;
}

/* Ultimele margini rămase, indiferent unde stau elementele. */
body .sidebar-foot .sidebar-link,
body .sidebar-footer .nav-item,
body .sidebar-nav .nav-item,
body .nav-group-items .nav-item,
body .sidebar .nav-logout {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Aceeași margine interioară în toate elementele, ca textul să se alinieze
   la fel de la un panou la altul. */
body .sidebar .nav-item,
body .admin-sidebar .nav-item,
body .sidebar-nav .nav-item,
body .sidebar-link,
body .sidebar-foot .sidebar-link,
body .sidebar-footer .nav-item,
body .sidebar .nav-logout {
  padding-left: 12px;
  padding-right: 12px;
  border-left: 0;
  border-right: 0;
}

/* În bara strânsă totul este centrat, deci marginea interioară dispare. */
body .sidebar.collapsed .nav-item,
body .admin-sidebar.collapsed .nav-item,
body .sidebar.collapsed .nav-logout,
body .admin-sidebar.collapsed .sidebar-foot .sidebar-link,
body .sidebar.collapsed .sidebar-foot .sidebar-link {
  padding-left: 0;
  padding-right: 0;
}

/* ===========================================================================
   33. Ultimii doi pixeli
   ---------------------------------------------------------------------------
   · Barele de la utilizator si gazda au bordura de 1px pe muchia din stanga,
     administrarea nu — de aceea primele porneau la 13px, iar a treia la 12.
     Bordura din stanga nu se vede oricum (bara este lipita de marginea
     ferestrei), deci o scoatem peste tot. Cea din dreapta ramane, ea
     desparte bara de continut.
   · In subsolul barei de administrare, `.sidebar-link` isi pastra marginea de
     11px printr-un selector mai specific decat al meu. Il depasim adaugand
     `.admin-sidebar` in fata.
   =========================================================================== */

body .sidebar,
body .admin-sidebar,
body .dashboard-sidebar {
  border-left: 0;
}

body .admin-sidebar .sidebar-foot .sidebar-link,
body .admin-sidebar .sidebar-foot > .sidebar-link,
body .admin-sidebar .sidebar-footer .nav-item {
  margin: .18rem 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* ===========================================================================
   34. Butonul de deconectare în bara strânsă
   ---------------------------------------------------------------------------
   Măsurat: elementul pornea la 10px cu lățimea 47px într-o coloană de 84 —
   adică centrul lui cădea la 34, nu la 42. `width: 100%` era scris, dar
   containerul este flex pe coloană cu `align-items: center`, iar în acest caz
   elementul se strânge la conținut înainte să apuce lățimea cerută.

   `align-self: stretch` rezolvă direct: pe axa transversală elementul umple
   containerul, indiferent ce spune `align-items` pe părinte. Este și motivul
   pentru care merge la toate cele trei panouri deodată, deși fiecare are alt
   fel de a-și aranja bara.
   =========================================================================== */

body .sidebar .nav-item,
body .admin-sidebar .nav-item,
body .sidebar-nav .nav-item,
body .sidebar-foot .sidebar-link,
body .sidebar-footer .nav-item,
body .sidebar .nav-logout,
body .sidebar-profile {
  align-self: stretch;
}

body .sidebar.collapsed .nav-item,
body .admin-sidebar.collapsed .nav-item,
body .sidebar.collapsed .nav-logout,
body .admin-sidebar.collapsed .sidebar-foot .sidebar-link,
body .sidebar.collapsed .sidebar-foot .sidebar-link,
body .sidebar.collapsed .sidebar-profile {
  align-self: stretch;
  width: auto;
}

/* ===========================================================================
   35. Centrarea în bara strânsă, fără luptă de specificitate
   ---------------------------------------------------------------------------
   Măsurat: în stare strânsă foile panourilor pun o LĂȚIME explicită pe
   element (38px la gazdă, 47px la administrare) plus
   `max-width: calc(100% - 16px)`. Orice `width: 100%` de-al meu ar fi trebuit
   scris cu un selector și mai lung, iar asta doar mută cearta cu o rundă mai
   încolo.

   Nu contează însă cât de lat este elementul — contează să stea la mijloc.
   `margin-inline: auto` centrează orice element de lățime dată, indiferent
   cine i-a dat-o. Scopul era centrarea, nu întinderea.
   =========================================================================== */

body .sidebar.collapsed .nav-item,
body .sidebar.collapsed .nav-logout,
body .sidebar.collapsed .sidebar-link,
body .sidebar.collapsed .sidebar-profile,
body .admin-sidebar.collapsed .nav-item,
body .admin-sidebar.collapsed .sidebar-link,
body .admin-sidebar.collapsed .sidebar-foot .sidebar-link,
body .dashboard-sidebar.collapsed .nav-item {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Link „Sari la conținut"
   Fără el, cine navighează cu tastatura trebuie să treacă prin tot meniul pe
   fiecare pagină înainte să ajungă la conținut (WCAG 2.4.1 — Bypass Blocks).
   Este scos din pagină până primește focus, deci designul rămâne neschimbat
   pentru cine folosește mouse-ul; la Tab devine vizibil în colțul din stânga sus.
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 18px;
  background: #0f172a;
  color: #fff;
  border: 2px solid #dcb45f;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid #fbeec2;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Ferestrele modale trebuie sa fie deasupra bannerelor care plutesc peste pagina.

   Masurat pe pagina de proprietate: modalul de rezervare are z-index 500, iar
   banda de cookies 99999 si fundalul popupului de newsletter 99998. Pentru un
   vizitator nou, care inca nu a raspuns la banda de cookies, elementul aflat
   in varf exact peste butonul „Confirmă rezervarea" era
   utton#ccDoarNecesare — adica un clic pe confirmare apasa de fapt butonul
   bannerului, si rezervarea nu se putea finaliza deloc.

   Cat timp un modal este deschis (ody.modal-open), aceste doua straturi
   coboara sub el si nu mai pot intercepta clicuri. Nu se pierde nimic:
   consimtamantul ramane necerut si banda reapare intacta la inchiderea
   modalului.
   --------------------------------------------------------------------------- */
body.modal-open .cc-banner,
body.modal-open .cc-reia,
body.modal-open .nl-fundal {
  z-index: 400 !important;
  pointer-events: none !important;
}