@charset "UTF-8";

/* ==========================================================================
   COMPONENTĂ — NAVBAR GLOBAL  (.ps-navbar)
   --------------------------------------------------------------------------
   Sursă:  docs/design/spec-navbar.md          (varianta LOGAT,   nod 1380:45224)
           docs/design/spec-navbar-nelogat.md  (varianta NELOGAT, nod 2140:7752)
           docs/design/DESIGN-SYSTEM.md §10.14
   Randat de: ViewComponents/NavbarViewComponent.cs
              Views/Shared/Components/Navbar/Default.cshtml (+ cele două parțiale)

   Se încarcă DUPĂ design-tokens.css și layout.css. Exclusiv tokeni --ps-*.

   PRINCIPII DIN SPEC
     · grilă cu coloane laterale egale, NU flex + space-between: zona centrală trebuie să
       rămână centrată pe viewport (960 = 1920/2), iar zonele laterale au
       lățimi diferite (201px vs 293/459px);
     · bara NU are `border-bottom` — separarea se face doar prin umbră;
     · stările persistente se exprimă prin ARIA ([aria-current], [aria-expanded]).

   MARCAJE
     [FIGMA]   valoare extrasă din machetă
     [PROPUS]  stare/valoare derivată (machetele nu conțin stări)
   ========================================================================== */


/* ==========================================================================
   1. BARA
   ========================================================================== */

.ps-navbar {
  /* tokeni locali ai componentei — derivați, nu culori noi */
  --ps-navbar-pad-x: var(--ps-space-50);          /* [FIGMA] 50px de margine   */
  --ps-navbar-actions-gap: var(--ps-space-40);    /* [FIGMA] varianta nelogat  */
  --ps-navbar-brand-w: 201px;                     /* [FIGMA] 200,52 → 201      */
  --ps-navbar-brand-h: 55px;                      /* [FIGMA] 55,23  → 55       */

  position: sticky;
  inset-block-start: 0;
  z-index: var(--ps-z-sticky);

  display: grid;
  /* coloanele laterale nu coboară sub conținut: paginile rămân centrate cât timp e loc,
     apoi se deplasează, dar nu se suprapun cu acțiunile */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: var(--ps-space-20);

  block-size: var(--ps-navbar-h);
  padding-inline: var(--ps-navbar-pad-x);
  border-block-end: 1px solid var(--ps-border-soft);
  background: var(--ps-glass-bg);                 /* sticlă lipită sus */
  -webkit-backdrop-filter: var(--ps-glass-blur);
  backdrop-filter: var(--ps-glass-blur);
  font-family: var(--ps-font-sans);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ps-navbar { background: var(--ps-surface-alt); }
}

/* Navbar-ul devine mai opac și capătă umbră pe măsură ce pagina coboară (fără JS). Doar
   proprietăți de pictare: o animație pe înălțime ar recalcula layout-ul la fiecare cadru. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .ps-navbar {
      animation: ps-navbar-compact linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140px;
    }
  }
}
@keyframes ps-navbar-compact {
  to {
    background-color: rgba(250, 249, 245, .92);
    box-shadow: 0 1px 0 rgb(var(--ps-rgb-umbra) / .06), 0 12px 32px -20px rgb(var(--ps-rgb-umbra) / .22);
  }
}

/* varianta logat: clusterul din dreapta se oprește la 30px de margine  [FIGMA] */
.ps-navbar--logat {
  --ps-navbar-pad-x: var(--ps-space-30);
  --ps-navbar-actions-gap: var(--ps-space-20);
}

/* logo-ul rămâne la 50px de marginea ferestrei și în varianta logat
   (30px padding + 20px offset)  [FIGMA] */
.ps-navbar--logat .ps-navbar__brand { margin-inline-start: var(--ps-space-20); }

/* umbră ușor mai pronunțată după derularea paginii — pus de navbar.js  [PROPUS] */
.ps-navbar[data-ps-scrolled] { box-shadow: var(--ps-shadow-bar); }


/* ==========================================================================
   2. BRAND
   ========================================================================== */

.ps-navbar__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-10);
  block-size: var(--ps-navbar-brand-h);
  border-radius: var(--ps-radius-4);
  color: var(--ps-text);
  text-decoration: none;
  transition: opacity var(--ps-duration) var(--ps-ease);
}
.ps-navbar__brand:hover { opacity: .85; }          /* [PROPUS] */
.ps-navbar__brand:focus-visible { outline-offset: var(--ps-space-3); }

/* Marca (mărul cu „PS”, img/logo-ps.png) și textul „piața stomatologică” (SVG cu gradientul de
   brand), aceleași ca în header-ul aplicației vechi; împreună dau lockup-ul din Figma. */
.ps-navbar__logo {
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  object-fit: contain;
}
.ps-navbar__wordmark-img {
  inline-size: 151px;
  block-size: 36px;
  flex: none;
  margin-inline-start: calc(var(--ps-space-10) * -0.4);
}

/* --------------------------------------------------------------------------
   Lockup de rezervă, folosit doar dacă fișierele de mai sus lipsesc.
   -------------------------------------------------------------------------- */
.ps-navbar__monogram {
  display: grid;
  place-items: center;
  inline-size: 42px;                               /* [FIGMA] marca = 41,95px */
  block-size: 42px;
  flex: none;
  border-radius: var(--ps-radius-10);
  background-image: var(--ps-gradient-logo);       /* [FIGMA] var(--ps-c-green-800) → var(--ps-c-green-450) */
  color: var(--ps-text-inverse);
  /* [FIGMA] Montserrat 400 / 18px. Registrul literelor („pS") vine din resursă,
     nu din CSS — este parte din marcă, nu o transformare de stil. */
  font: var(--ps-fw-regular) var(--ps-fs-18) / var(--ps-lh-flat) var(--ps-font-sans);
  letter-spacing: var(--ps-ls-none);
}

.ps-navbar__wordmark {
  font: var(--ps-fw-semibold) var(--ps-fs-22) / var(--ps-lh-tight) var(--ps-font-sans);
  white-space: nowrap;
  background-image: var(--ps-gradient-logo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-ps-platforma="pm"] .ps-navbar__wordmark { background-image: var(--ps-gradient-logo-pm); }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ps-navbar__wordmark { color: var(--ps-green-dark); background-image: none; }
}


/* ==========================================================================
   3. NAVIGAȚIA CENTRALĂ
   --------------------------------------------------------------------------
   Cele 5 pagini au iconiță și etichetă dedesubt. Sub 1280px se ascund, iar
   paginile ajung în sertarul butonului hamburger (§3.1, §12).
   ========================================================================== */

.ps-navbar__nav { justify-self: center; }

.ps-nav {
  display: flex;
  align-items: center;
  gap: var(--ps-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-2);
  min-inline-size: var(--ps-nav-item-w);
  block-size: var(--ps-nav-item-h);
  padding: var(--ps-space-3) var(--ps-space-10);
  border: var(--ps-border-width) solid transparent;
  border-radius: 14px;
  color: var(--ps-icon-nav);                       /* [FIGMA] #515151 */
  text-decoration: none;
  transition: var(--ps-transition-color), transform var(--ps-duration) var(--ps-ease-spring);
}

.ps-nav__icon { font-size: var(--ps-icon-24); }

.ps-nav__eticheta {
  font: var(--ps-fw-medium) 12.5px/1.2 var(--ps-font-sans);
  white-space: nowrap;
}

/* varianta nelogat desenează iconurile la 50% opacitate; se folosește varianta
   conformă AA (DESIGN-SYSTEM §11.3), nu rgba(81,81,81,.5) */
.ps-navbar--nelogat .ps-nav__item { color: var(--ps-text-disabled-aa); }

.ps-nav__item:hover {
  background: var(--ps-primary-soft);
  color: var(--ps-green-link);
  transform: translateY(-1px);
}
.ps-nav__item:active { background: var(--ps-primary-soft-hover); }

/* pagina curentă: pastilă cu tenta platformei */
.ps-nav__item[aria-current="page"] {
  background: var(--ps-surface-tint);
  border-color: transparent;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(var(--ps-rgb-green-500) / .16);
  color: var(--ps-green-link);
}

.ps-nav__item[aria-disabled="true"] {
  color: var(--ps-text-disabled);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   3.1 Butonul hamburger — apare sub 1280px (§9)
   -------------------------------------------------------------------------- */

/* tenta verde a platformei, ca pagina curentă din navigație */
.ps-navbar__meniu {
  display: none;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--ps-primary-soft);
  box-shadow: inset 0 0 0 1px rgb(var(--ps-rgb-green-500) / .18), var(--ps-shadow-xs);
  color: var(--ps-green-link);
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-navbar__meniu:hover {
  background: var(--ps-primary-soft-hover);
  color: var(--ps-green-dark);
}

.ps-navbar__meniu-icon { font-size: 26px; }


/* ==========================================================================
   4. ZONA DE ACȚIUNI (dreapta)
   ========================================================================== */

.ps-navbar__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--ps-navbar-actions-gap);
  min-inline-size: 0;
}


/* ==========================================================================
   5. „ADAUGĂ ANUNȚ"
   --------------------------------------------------------------------------
   Raza de 30px este pregătită pentru o viitoare variantă „pill plin"; în
   starea implicită nu se vede, pentru că nu există fundal.  [FIGMA]
   ========================================================================== */

.ps-btn-adauga {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-10);                         /* [FIGMA] */
  block-size: var(--ps-nav-item-h);                /* [FIGMA] 50px */
  padding-block: var(--ps-space-10);               /* [FIGMA] 10px 0 */
  border: 0;
  border-radius: var(--ps-radius-pill);            /* [FIGMA] 30px */
  background: transparent;
  color: var(--ps-green-link);                     /* [FIGMA] var(--ps-c-green-600) */
  font: var(--ps-type-nav);                        /* [FIGMA] Montserrat 500 / 16 */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-btn-adauga:hover  { color: var(--ps-green-dark); }        /* [PROPUS] */
.ps-btn-adauga:active { color: var(--ps-c-green-1000); }      /* [PROPUS] */
.ps-btn-adauga[aria-disabled="true"] {
  color: var(--ps-primary-disabled);
  pointer-events: none;
}

.ps-btn-adauga__icon { flex: none; }


/* ==========================================================================
   6. CLOPOȚELUL DE NOTIFICĂRI
   --------------------------------------------------------------------------
   Macheta folosește #949494 (≈2,8:1 pe #FAFAFA). Se urcă la varianta conformă
   AA din tokeni (#767676), conform DESIGN-SYSTEM §11.3.
   ========================================================================== */

.ps-notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 35px;                               /* [FIGMA] */
  block-size: 35px;                                /* [FIGMA] */
  border: 0;
  background: transparent;
  color: var(--ps-icon-ui-aa);
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-notif:hover { color: var(--ps-text-ui); }                       /* [PROPUS] */
.ps-notif[aria-expanded="true"] { color: var(--ps-green-link); }    /* [PROPUS] */

.ps-notif__badge {
  position: absolute;
  inset-block-start: calc(var(--ps-space-2) * -1);
  inset-inline-end: calc(var(--ps-space-2) * -1);
  display: grid;
  place-items: center;
  min-inline-size: var(--ps-icon-16);
  block-size: var(--ps-icon-16);
  padding-inline: var(--ps-space-3);
  border-radius: var(--ps-radius-full);
  background: var(--ps-green-link);
  color: var(--ps-primary-contrast);
  font: var(--ps-type-micro);
}


/* ==========================================================================
   7. CONTUL
   ========================================================================== */

/* --- varianta LOGAT: avatar + nume + chevron  [FIGMA] 227 × 40 ------------ */
.ps-account {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-10);                         /* [FIGMA] */
  block-size: 40px;
  border: 0;
  border-radius: var(--ps-radius-20);
  background: transparent;
  cursor: pointer;
}

.ps-account__avatar {
  display: grid;
  place-items: center;
  inline-size: 40px;                               /* [FIGMA] */
  block-size: 40px;
  flex: none;
  overflow: hidden;
  border-radius: var(--ps-radius-full);
  background: var(--ps-c-grey-200);
  color: var(--ps-text-ui);
}
.ps-account__avatar-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.ps-account__initials {
  font: var(--ps-type-body-medium);
  text-transform: uppercase;
  line-height: 1;
}

.ps-account__name {
  max-inline-size: 137px;                          /* [FIGMA] */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--ps-type-nav);                        /* [FIGMA] 500 / 16 */
  color: var(--ps-text-ui);                        /* [FIGMA] #515151 */
  transition: var(--ps-transition-color);
}

.ps-account__chevron {
  flex: none;
  color: var(--ps-icon-nav);
  transition: transform var(--ps-duration-slow) var(--ps-ease);
}

/* De la 768px avatarul e link spre /Dashboard, lângă butonul meniului (nume + săgeată); pe telefon
   (§9) rămâne avatarul din buton, care deschide meniul. */
.ps-dropdown--cont {
  display: flex;
  align-items: center;
  gap: var(--ps-space-10);
}
.ps-account__avatar--link {
  text-decoration: none;
  transition: box-shadow var(--ps-duration-fast) var(--ps-ease);
}
.ps-account__avatar--link:hover { box-shadow: 0 0 0 2px var(--ps-surface), 0 0 0 3px var(--ps-green-link); }
.ps-account > .ps-account__avatar { display: none; }

.ps-account:hover .ps-account__name,
.ps-account[aria-expanded="true"] .ps-account__name { color: var(--ps-green-link); }  /* [PROPUS] */
.ps-account[aria-expanded="true"] .ps-account__chevron { transform: rotate(180deg); }

/* --- varianta NELOGAT: „Contul meu"  [FIGMA] 96 × 35 ---------------------- */
.ps-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-5);
  block-size: 35px;                                /* [FIGMA] */
  padding-block: var(--ps-space-5);                /* [FIGMA] */
  border-radius: var(--ps-radius-8);               /* [FIGMA] */
  background: transparent;
  color: var(--ps-text-ui);                        /* [FIGMA] #515151 */
  font: var(--ps-type-nav);
  white-space: nowrap;
  text-decoration: none;
  transition: var(--ps-transition-color);
}
.ps-account-link:hover  { color: var(--ps-text); }          /* [PROPUS] */
.ps-account-link:active { color: var(--ps-text-strong); }   /* [PROPUS] */

/* iconița apare doar când eticheta dispare (sub md) — vezi §9 */
.ps-account-link__icon { display: none; }


/* ==========================================================================
   8. DROPDOWN — stil de bază pentru componenta din js/components/dropdown.js
   --------------------------------------------------------------------------
   Machetele nu conțin panoul deschis (DESIGN-SYSTEM §12): valorile sunt
   [PROPUS], derivate din cardurile existente (rază 10px, umbră de flotare).
   NOTĂ: dacă apare un wwwroot/css/components/dropdown.css propriu, secțiunea
   aceasta se mută acolo ca atare — clasele sunt deja cele din contractul JS.
   ========================================================================== */

.ps-dropdown { position: relative; }

.ps-dropdown__declansator {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ps-dropdown__panou {
  position: absolute;
  inset-block-start: calc(100% + var(--ps-space-10));
  z-index: var(--ps-z-dropdown);
  min-inline-size: 260px;
  max-inline-size: min(360px, calc(100vw - var(--ps-space-20) * 2));
  max-block-size: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ps-space-10);
  background: var(--ps-surface);
  border: var(--ps-border-width) solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  box-shadow: var(--ps-shadow-float);
}

/* panoul apare cu o intrare animată (@starting-style) */
@supports (transition-behavior: allow-discrete) {
  .ps-dropdown__panou {
    transition: opacity .18s var(--ps-ease), transform .22s var(--ps-ease-out),
                display .22s allow-discrete, overlay .22s allow-discrete;
  }
  @starting-style {
    .ps-dropdown__panou { opacity: 0; transform: translateY(-6px) scale(.98); }
  }
}

/* poziționarea rezolvată de dropdown.js este expusă prin atribute */
.ps-dropdown__panou[data-ps-placement-align="start"] { inset-inline-start: 0; }
.ps-dropdown__panou[data-ps-placement-align="end"]   { inset-inline-end: 0; }
.ps-dropdown__panou[data-ps-placement-side="top"] {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--ps-space-10));
}

.ps-dropdown__panou--notificari { min-inline-size: min(320px, calc(100vw - 24px)); }

.ps-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--ps-space-10);
  inline-size: 100%;
  padding: var(--ps-space-10);
  border: 0;
  border-radius: var(--ps-radius-5);
  background: transparent;
  color: var(--ps-text-ui);
  font: var(--ps-type-body-medium);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-dropdown__item:hover,
.ps-dropdown__item:focus-visible {
  background: var(--ps-primary-soft);
  color: var(--ps-green-dark);
}
.ps-dropdown__item[aria-current="page"] { color: var(--ps-green-link); }

/* separator între grupurile de acțiuni */
.ps-dropdown__item--grup {
  margin-block-start: var(--ps-space-5);
  padding-block-start: var(--ps-space-15);
  border-block-start: var(--ps-border-width) solid var(--ps-border);
  border-radius: 0 0 var(--ps-radius-5) var(--ps-radius-5);
}

.ps-dropdown__form { margin: 0; }

.ps-dropdown__gol {
  padding: var(--ps-space-20) var(--ps-space-10);
  font: var(--ps-type-body);
  color: var(--ps-text-faint-aa);
  text-align: center;
}


/* ==========================================================================
   9. RESPONSIVE  [PROPUS — machetele există doar la 1920px]
   --------------------------------------------------------------------------
   xxl ≥1440  layout complet
   xl  ≥1280  numele contului dispare: paginile cu etichetă nu mai încap lângă el
   lg  <1280  paginile se ascund; butonul hamburger din dreapta deschide sertarul
              cu tot conținutul barei (§12); gutter redus
   md  <1024  „Adaugă anunț" devine iconiță, numele contului dispare
   xs  <768   bara de 60px: marca întreagă, apoi clopoțelul (doar logat), iconița
              contului și butonul hamburger; restul acțiunilor rămân în sertar
   ========================================================================== */

@media (min-width: 1280px) and (max-width: 1439.98px) {
  .ps-account__name { display: none; }
  .ps-account,
  .ps-dropdown--cont { gap: var(--ps-space-5); }
}

@media (max-width: 1279.98px) {
  .ps-navbar,
  .ps-navbar--logat { --ps-navbar-pad-x: var(--ps-gutter); }
  .ps-navbar--logat .ps-navbar__brand { margin-inline-start: 0; }
}

@media (max-width: 1023.98px) {
  .ps-navbar { --ps-navbar-actions-gap: var(--ps-space-20); }

  /* butonul verde rămâne doar iconiță, dar păstrează numele accesibil */
  .ps-btn-adauga {
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    gap: 0;
  }
  .ps-btn-adauga__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ps-account__name { display: none; }
  .ps-account,
  .ps-dropdown--cont { gap: var(--ps-space-5); }
}

@media (max-width: 767.98px) {
  :root { --ps-navbar-h: 60px; }

  .ps-navbar {
    --ps-navbar-pad-x: var(--ps-space-15);
    --ps-navbar-actions-gap: var(--ps-space-10);
    column-gap: var(--ps-space-10);
  }

  /* „Contul meu" devine silueta plină, ca pe istoma.ro (varianta nelogat); din contul logat
     rămâne avatarul */
  .ps-account-link {
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border-radius: 12px;
    color: var(--ps-green-link);
  }
  .ps-account-link:hover {
    background: var(--ps-primary-soft);
    color: var(--ps-green-dark);
  }
  .ps-account-link__icon {
    display: inline-block;
    font-size: 28px;
  }
  .ps-account-link__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ps-account__chevron { display: none; }

  /* pe telefon avatarul deschide meniul (butonul), nu duce direct în cont */
  .ps-account__avatar--link { display: none; }
  .ps-account > .ps-account__avatar { display: grid; }

  /* aceeași margine în ambele părți: și peste alinierea la stânga/dreapta de pe desktop */
  .ps-dropdown__panou,
  .ps-dropdown__panou[data-ps-placement-align] {
    position: fixed;
    inset-block-start: var(--ps-navbar-h);
    inset-inline: var(--ps-space-10);
    min-inline-size: 0;
    max-inline-size: none;
  }
  .ps-dropdown__panou[data-ps-placement-side="top"] {
    inset-block-start: var(--ps-navbar-h);
    inset-block-end: auto;
  }

  /* X-ul meniului contului stă în colț, pe rândul primului item, și rămâne sus la derulare */
  .ps-dropdown__panou--cont { display: flex; flex-direction: column; }
  .ps-dropdown__inchide {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    order: -1;
    align-self: flex-end;
    margin-block: var(--ps-space-2) calc(-36px - var(--ps-space-2));
  }
}

/* sub 360px marca se micșorează, ca să încapă lângă cont și hamburger */
@media (max-width: 359.98px) {
  .ps-navbar {
    --ps-navbar-pad-x: var(--ps-space-10);
    --ps-navbar-actions-gap: var(--ps-space-5);
    column-gap: var(--ps-space-5);
  }
  .ps-navbar__logo {
    inline-size: 40px;
    block-size: 40px;
  }
  .ps-navbar__wordmark-img {
    inline-size: 126px;
    block-size: 30px;
  }
}

/* logat, clopoțelul stă și el în bară, deci marca se micșorează mai devreme */
@media (max-width: 389.98px) {
  .ps-navbar--logat .ps-navbar__brand > .ps-navbar__logo {
    inline-size: 40px;
    block-size: 40px;
  }
  .ps-navbar--logat .ps-navbar__brand > .ps-navbar__wordmark-img {
    inline-size: 126px;
    block-size: 30px;
  }
}
@media (max-width: 359.98px) {
  .ps-navbar--logat .ps-navbar__brand > .ps-navbar__wordmark-img {
    inline-size: 117px;
    block-size: 28px;
  }
}

/* --- butonul hamburger, în browserele cu popover */
@supports selector(:popover-open) {
  @media (max-width: 1279.98px) {
    .ps-navbar { grid-template-columns: minmax(0, 1fr) auto auto; }
    .ps-navbar__nav { display: none; }
    .ps-navbar__meniu { display: inline-grid; }
  }

  @media (max-width: 767.98px) {
    .ps-navbar__actions > .ps-btn-adauga,
    .ps-navbar__actions > .ps-lang { display: none; }
  }
}

/* --- browserele fără popover: paginile stau pe al doilea rând al barei, doar cu iconițe */
@supports not selector(:popover-open) {
  @media (max-width: 1279.98px) {
    :root { --ps-navbar-h: 116px; }

    .ps-navbar {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) 48px;
    }
    .ps-navbar__nav {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: stretch;
      border-block-start: var(--ps-border-width) solid var(--ps-border-soft);
    }
    .ps-nav { justify-content: space-evenly; }
    .ps-nav__item { block-size: 44px; }
    .ps-nav__eticheta {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* toate acțiunile rămân în bară, deci din logo rămâne doar marca */
  @media (max-width: 767.98px) {
    :root { --ps-navbar-h: 108px; }
    .ps-navbar__wordmark,
    .ps-navbar__wordmark-img { display: none; }
  }
}


/* ==========================================================================
   10. TIPĂRIRE
   ========================================================================== */

@media print {
  .ps-navbar { position: static; box-shadow: none; }
  .ps-navbar__meniu,
  .ps-navbar__nav,
  .ps-navbar__actions { display: none; }
}


/* ==========================================================================
   11. NOTIFICĂRILE CONTULUI ȘI CONTOARELE DIN MENIU
   --------------------------------------------------------------------------
   Panoul clopoțelului (Navbar/_NotificariCont.cshtml), ca panoul din
   Cont.Master / ControlHeaderMasterNou: titlu, text și acțiunea în verde.
   ========================================================================== */

.ps-notificari__antet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-10);
  padding-block-end: var(--ps-space-5);
}

.ps-notificari__titlu {
  margin: 0;
  padding: var(--ps-space-5) var(--ps-space-10);
  font: var(--ps-type-label);
  color: var(--ps-text);
}

/* primele 3 se văd, restul se derulează: înălțimea o pune navbar.js la deschidere */
.ps-notificari {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.ps-notificare {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-3);
  padding: var(--ps-space-10);
  border-radius: var(--ps-radius-5);
  color: var(--ps-text-ui);
  text-decoration: none;
}
.ps-notificare:hover,
.ps-notificare:focus-visible { background: var(--ps-primary-soft); }

.ps-notificare__titlu {
  overflow: hidden;
  font: var(--ps-type-body-medium);
  color: var(--ps-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-notificare__text { font: var(--ps-type-caption); }

.ps-notificare__actiune {
  font: var(--ps-type-caption);
  font-weight: 600;
  color: var(--ps-green-dark);
}

/* mesaje / candidați noi pe itemul din meniul contului */
.ps-dropdown__badge {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--ps-icon-16);
  block-size: var(--ps-icon-16);
  margin-inline-start: auto;
  padding-inline: var(--ps-space-3);
  border-radius: var(--ps-radius-full);
  background: var(--ps-green-link);
  color: var(--ps-primary-contrast);
  font: var(--ps-type-micro);
}


/* ==========================================================================
   12. SERTARUL MENIULUI  (Navbar/_SertarMeniu.cshtml)
   --------------------------------------------------------------------------
   Popover nativ care glisează din stânga, ca meniul de pe istoma.ro: 300px,
   fundal alb, pagina din spate întunecată. Închis, ca și în browserele fără
   popover, nu se afișează.
   ========================================================================== */

.ps-sertar { display: none; }

@supports selector(:popover-open) {
  .ps-sertar {
    position: fixed;
    inset: 0 auto 0 0;
    inline-size: min(300px, calc(100vw - 60px));
    block-size: auto;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--ps-surface);
    box-shadow: 0 10px 40px rgb(var(--ps-rgb-umbra) / .2);
    color: var(--ps-text);
    transform: translateX(-100%);
    transition: transform .25s var(--ps-ease-out),
                display .25s allow-discrete, overlay .25s allow-discrete;
  }
  .ps-sertar:popover-open {
    display: flex;
    transform: none;
  }
  @starting-style {
    .ps-sertar:popover-open { transform: translateX(-100%); }
  }

  .ps-sertar::backdrop {
    background: rgb(var(--ps-rgb-umbra) / 0);
    transition: background-color .25s var(--ps-ease),
                display .25s allow-discrete, overlay .25s allow-discrete;
  }
  .ps-sertar:popover-open::backdrop { background: rgb(var(--ps-rgb-umbra) / .4); }
  @starting-style {
    .ps-sertar:popover-open::backdrop { background: rgb(var(--ps-rgb-umbra) / 0); }
  }
}

.ps-sertar__antet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-10);
  padding: var(--ps-space-20) var(--ps-space-20) var(--ps-space-10);
}

/* conectat: în locul mărcii, contul (_IdentitateCont), cu X-ul sus în dreapta; linia de sub cont
   trece și pe sub X, pe toată lățimea conținutului */
.ps-sertar__antet--cont {
  position: relative;
  align-items: flex-start;
  padding-block-end: 0;
}
.ps-sertar__antet--cont::after {
  content: "";
  position: absolute;
  inset-inline: var(--ps-space-20);
  inset-block-end: 0;
  border-block-end: var(--ps-border-width) solid var(--ps-border-soft);
}
.ps-sertar__antet--cont .ps-identitate-cont { border-block-end: 0; }
.ps-sertar__antet--cont + .ps-sertar__continut { padding-block-start: var(--ps-space-20); }

.ps-sertar__identitate {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-10);
}

.ps-sertar__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-10);
  min-inline-size: 0;
  border-radius: var(--ps-radius-4);
  text-decoration: none;
}
.ps-sertar__marca .ps-navbar__logo {
  inline-size: 40px;
  block-size: 40px;
}
.ps-sertar__marca .ps-navbar__wordmark-img {
  inline-size: 126px;
  block-size: 30px;
}

.ps-sertar__inchide,
.ps-notificari__inchide,
.ps-dropdown__inchide {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: var(--ps-border-width) solid var(--ps-border-soft);
  border-radius: var(--ps-radius-full);
  background: var(--ps-surface);
  color: var(--ps-text-faint-aa);
  font-size: 22px;
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-sertar__inchide:hover,
.ps-notificari__inchide:hover,
.ps-dropdown__inchide:hover {
  border-color: transparent;
  background: var(--ps-primary-soft);
  color: var(--ps-green-link);
}
@media (min-width: 768px) {
  .ps-dropdown__inchide { display: none; }
}

.ps-sertar__continut {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-20);
  padding: var(--ps-space-10) var(--ps-space-20) var(--ps-space-20);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ps-green-action) 45%, transparent) transparent;
}

.ps-sertar__grup {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
}

.ps-sertar__titlu {
  margin: 0;
  padding: var(--ps-space-5) 0;
  color: var(--ps-text-faint-aa);
  font: var(--ps-fw-semibold) 12px/16px var(--ps-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ps-sertar__lista {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-2);
}

.ps-sertar__separator {
  margin-block-start: var(--ps-space-5);
  padding-block-start: var(--ps-space-5);
  border-block-start: var(--ps-border-width) solid var(--ps-border-soft);
}

.ps-sertar__item {
  display: flex;
  align-items: center;
  gap: var(--ps-space-13);
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--ps-space-10) var(--ps-space-15);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ps-text-ui);
  font: var(--ps-fw-medium) 15px/1.3 var(--ps-font-sans);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-sertar__item:hover {
  background: var(--ps-primary-soft);
  color: var(--ps-green-dark);
}
.ps-sertar__item[aria-current="page"] {
  background: var(--ps-surface-tint);
  box-shadow: inset 0 0 0 1px rgb(var(--ps-rgb-green-500) / .16);
  color: var(--ps-green-link);
}

.ps-sertar__icon {
  flex: none;
  color: var(--ps-text-faint-aa);
  font-size: var(--ps-icon-24);
}
.ps-sertar__item:hover .ps-sertar__icon,
.ps-sertar__item[aria-current="page"] .ps-sertar__icon { color: inherit; }

.ps-sertar__subsol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-space-10);
  padding: var(--ps-space-10) var(--ps-space-20) calc(var(--ps-space-10) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--ps-border-width) solid var(--ps-border-soft);
}
.ps-sertar__cont {
  flex: 1 1 auto;
  inline-size: auto;
}
.ps-sertar__subsol .ps-lang { margin-inline-start: auto; }