/* ScanExpert backoffice — bara de navigație: sidebarul, rail-ul, grupul de
 * pagini și blocul de profil din josul lui.
 *
 * Desprins din ui.css (plafonul de 600 de linii): shell-ul paginii și
 * navigația evoluează separat, iar navigația era deja două treimi din fișier.
 * Aceleași reguli de autorat ca acolo — numai tokeni canonici din tokens.css,
 * traduși prin design-kit/dialect.json; escape-urile documentate
 * (--ui-shadow-*, --ui-overlay) rămân declarate în `:root`-ul din ui.css, care
 * se încarcă înaintea acestui fișier. */

/* ---- sidebar ---------------------------------------------------------------- */

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--se-color-bg-console);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  /* The 2026-08 polish pass: the collapse eases instead of snapping, and
   * overflow-x is clipped so labels slide out of view rather than wrapping
   * mid-animation. */
  overflow-x: hidden;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed {
  width: 96px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-8);
  padding: 18px 20px 18px 28px;
  transition:
    padding 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    gap 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
}

.sidebar-logo {
  display: block;
  border: none;
  background: none;
  padding: 0;
  line-height: 0;
}

.sidebar-logo:hover {
  background: none;
}

.sidebar-logo img {
  height: 32px;
}

.sidebar-logo .logo-mark {
  display: none;
}

.sidebar.collapsed .sidebar-logo {
  width: 96px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar.collapsed .sidebar-logo .logo-full {
  display: none;
}

.sidebar.collapsed .sidebar-logo .logo-mark {
  display: block;
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--se-radius-md);
  color: var(--se-color-text-title);
}

/* Aceeași pereche ca la navigație: roz 10 la hover, roz 20 la apăsare, pastilă.
 * Griul --se-color-fill-hover a fost scos anume — stătea la trei trepte de
 * fundalul sidebarului, deci starea exista în cod și nu se vedea pe ecran. */
.sidebar-collapse-btn:hover:not(:disabled) {
  background: var(--se-color-secondary-10);
  border: none;
  border-radius: var(--se-radius-pill);
}

.sidebar-collapse-btn:active:not(:disabled) {
  background: var(--se-color-secondary-20);
  border: none;
  border-radius: var(--se-radius-pill);
}

.sidebar-collapse-btn .ph {
  font-size: var(--se-size-icon-functional);
}

.sidebar.collapsed .sidebar-collapse-btn {
  width: 40px;
  height: 40px;
  margin: var(--se-space-8) 0 var(--se-space-24);
}

.sidebar-nav {
  padding: var(--se-space-12);
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
}

.sidebar.collapsed .sidebar-nav {
  padding: 0 28px;
  align-items: center;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--se-space-12);
  padding: var(--se-space-8);
  border: none;
  border-radius: var(--se-radius-md);
  background: none;
  color: var(--se-color-text-title);
  text-decoration: none;
  width: 100%;
  text-align: left;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  font-weight: 400;
  white-space: nowrap;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px;
  gap: 0;
}

.nav-item .ph {
  font-size: var(--se-size-icon-functional);
  flex-shrink: 0;
}

.nav-item:hover {
  background: var(--se-color-secondary-10);
  color: var(--se-color-text-title);
  border-radius: var(--se-radius-pill);
}

.nav-item:active {
  background: var(--se-color-secondary-20);
  color: var(--se-color-text-title);
  border-radius: var(--se-radius-pill);
}

/* Marcat de scriptul din layout după calea curentă — pastila roz a
 * prototipului (.nav-item.active). */
.nav-item[aria-current="page"] {
  background: var(--se-color-secondary-20);
  border-radius: var(--se-radius-pill);
}

/* Pagina curentă rămâne pe roz 20 și sub cursor: un hover care ar duce-o
 * înapoi pe roz 10 ar face pagina deschisă să pară mai puțin selectată decât
 * este. Selectorii poartă și starea (0,3,0) ca să bată `.nav-item:hover` /
 * `.nav-item:active` (0,2,0) pe SPECIFICITATE — la egalitate ar decide ordinea
 * din fișier, iar o rearanjare ar întoarce pe tăcute pastila la roz 10. */
.nav-item[aria-current="page"]:hover,
.nav-item[aria-current="page"]:active {
  background: var(--se-color-secondary-20);
  color: var(--se-color-text-title);
}

/* Focusul se declară DUPĂ starea curentă și o bate pe specificitate: altfel
 * inelul nu se vede tocmai pe elementul la care ajungi cu Tab. `.nav-item` e
 * un <a>, deci regula `button:focus-visible` din ui-forms.css nu-l atinge —
 * fără asta, navigația poartă conturul implicit al browserului. */
.nav-item:focus-visible,
.nav-item[aria-current="page"]:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

/* ---- grupul de pagini din meniu (Inventar → Consumabile / Aparate) ---------
 * Singurul loc în care rail-ul nu e plat: un părinte care deschide și închide, cu
 * două pagini sub el.
 *
 * ATENȚIE, și e chiar capcana pe care o descrie ui-forms.css: părintele e un
 * <button>, spre deosebire de toate celelalte intrări, care sunt <a>. Regula
 * generică `button:hover:not(:disabled)` are specificitatea (0,2,1) și bate
 * `.nav-item:hover` (0,2,0) — fără regulile de mai jos, „Inventar" ar primi fundalul
 * navy al butonului principal la trecerea cu mausul, cu textul rămas pe culoarea
 * stării normale. Fiecare stare de aici scrie deci fundal ȘI culoare, la (0,4,0), pe
 * doctrina navigației: hover → secondary-10, activ → secondary-20, amândouă pastilă. */
.nav-item.nav-parent {
  cursor: pointer;
}

.nav-item.nav-parent:hover:not(:disabled) {
  background: var(--se-color-secondary-10);
  color: var(--se-color-text-title);
  border-radius: var(--se-radius-pill);
}

.nav-item.nav-parent:active:not(:disabled) {
  background: var(--se-color-secondary-20);
  color: var(--se-color-text-title);
  border-radius: var(--se-radius-pill);
}

/* Același spațiu între rânduri ca în restul meniului (`.sidebar-nav` are gap 8) —
 * fără el, Consumabile și Aparate ar sta lipite între ele și de „Inventar". */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  margin-top: var(--se-space-8);
}

.nav-group.is-closed {
  display: none;
}

/* Paginile din grup n-au iconiță proprie: sunt trase spre dreapta, sub „Inventar",
 * și așa se vede că țin de el. Alinierea e cu textul părintelui plus un pas — nu cu
 * iconița lui. */
.nav-item.nav-child .ph {
  display: none;
}

.nav-item.nav-child .nav-label {
  padding-left: 32px;
}

/* Săgeata arată în ce stare e grupul: în sus când e deschis, în jos când e închis. */
.nav-caret {
  margin-left: auto;
  transition: transform 0.15s ease;
}

.nav-item.nav-parent.is-closed .nav-caret {
  transform: rotate(180deg);
}

/* Bara strânsă n-are loc pentru o dezvăluire: părintele dispare, grupul rămâne
 * deschis, iar copiii devin intrări obișnuite cu iconița lor. Alternativa — să
 * ascunzi doar săgeata — ar lăsa în bara strânsă două rânduri goale, fiindcă un copil
 * n-are iconiță când meniul e desfăcut. */
.sidebar.collapsed .nav-item.nav-parent {
  display: none;
}

.sidebar.collapsed .nav-group,
.sidebar.collapsed .nav-group.is-closed {
  display: flex;
  margin-top: 0;
}

.sidebar.collapsed .nav-item.nav-child .ph {
  display: inline-flex;
}

.sidebar.collapsed .nav-item.nav-child .nav-label {
  padding-left: 0;
}

/* Labels fade and shrink instead of vanishing — display:none cannot animate,
 * which is what made the old collapse feel abrupt. */
.nav-label,
.nav-badge {
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge {
  opacity: 0;
  max-width: 0;
}

.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-badge-red-600);
  color: var(--se-color-text-on-dark);
  font-size: 11px; /* lint-tokens-ignore — badge sizing lands with notifications (BACKOFFICE-08); 11px is below the 12px scale floor and is raised upstream with the mint list */
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-divider {
  height: 1px;
  background: var(--se-color-border-default);
  margin: var(--se-space-4) var(--se-space-8);
}

/* ---- profilul din josul sidebarului ----------------------------------------- */

.sidebar-profile {
  padding: var(--se-space-12);
  position: relative;
}

.profile-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--se-space-12);
  padding: var(--se-space-12) var(--se-space-8);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: var(--se-radius-md);
  color: inherit;
}

/* Sidebarul E --se-color-bg-console, deci un hover pe aceeași valoare nu
 * desena nimic. Rândul de profil ia perechea de navigație. */
.profile-row:hover:not(:disabled) {
  background: var(--se-color-secondary-10);
  border: none;
}

.sidebar.collapsed .profile-row {
  justify-content: center;
  padding: var(--se-space-12) var(--se-space-4);
}

.sidebar.collapsed .profile-meta {
  display: none;
}

.sidebar.collapsed .profile-dropdown {
  left: var(--se-space-8);
  right: auto;
  width: 220px;
}

.avatar-pink {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--se-color-secondary-60);
  color: var(--se-color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-name {
  font-size: var(--se-type-bodyreg-size);
  font-weight: 400;
  color: var(--se-color-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A doua linie a blocului de profil: funcția, cum o desenează prototipul
 * („Administrator" sub „Admin ScanExpert"). Interiorul stă tot aici, după ea, ca
 * să rămână la vedere fără să ceară un al treilea rând. */
.profile-role {
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-description);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-ext {
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-description);
}

.profile-dropdown {
  position: absolute;
  left: var(--se-space-12);
  right: var(--se-space-12);
  bottom: calc(100% + 4px);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  box-shadow: var(--ui-shadow-float);
  padding: var(--se-space-8);
  z-index: 20;
}

.profile-dropdown.hidden {
  display: none;
}

.profile-dropdown form {
  margin: 0;
}

.profile-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--se-space-8);
  border: none;
  background: none;
  padding: 10px var(--se-space-12);
  border-radius: var(--se-radius-md);
  color: var(--se-color-text-title);
  font-size: var(--se-type-bodyreg-size);
  font-weight: 400;
  text-align: left;
}

/* Aici griul RĂMÂNE, spre deosebire de navigație: panoul e alb, deci se vede.
 * Se adaugă doar culoarea, ca starea să nu depindă de ce moștenește. */
.profile-dropdown-item:hover:not(:disabled) {
  background: var(--se-color-bg-console);
  border: none;
  color: var(--se-color-text-title);
}

.profile-dropdown-item .ph {
  font-size: var(--se-size-icon-functional);
  color: var(--se-color-primary-60);
}