/* ScanExpert backoffice — vocabularul de componente al prototipului.
 *
 * AUTORAT pe mâna acestui repo, nu copiat: clasele vin din <style>-ul
 * prototipului (designteam-adriana-work/apps/external/scanexpert-backoffice,
 * stamp 056d58d), dar fiecare culoare/rază/spațiere e tradusă pe tokenul
 * canonic din tokens.css folosind design-kit/dialect.json. O culoare brută
 * apare doar ca „escape" documentat în blocul :root de mai jos — nicăieri
 * altundeva.
 *
 * Escape-uri față de sistemul de tokeni, toate adunate aici:
 * - umbrele și overlay-ul au alpha, iar scala de tokeni nu are umbre: valorile
 *   prototipului sunt păstrate ca variabile locale --ui-shadow-* / --ui-overlay. */

:root {
  --ui-shadow-float: 0 16px 40px rgba(20, 24, 31, 0.16);
  --ui-shadow-tab: 0 1px 2px rgba(20, 24, 31, 0.08);
  --ui-overlay: rgba(20, 24, 31, 0.5);
}

/* ---- scheletul aplicației ---------------------------------------------------
 * Sidebar fix la stânga, conținutul derulează singur. Pe paginile de login
 * (HideNav) sidebarul lipsește cu totul, iar .page-bare nu desenează cardul. */

.app-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.main-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--se-space-8) var(--se-space-8) var(--se-space-8) 0;
}

/* Fără sidebar nu există margine de care să te lipești: paginile de login își
 * fac singure așezarea (.auth-shell, în ui-auth.css), cardul alb al paginii nu
 * se desenează. */
.main.main-bare {
  padding: 0;
}

.page-card {
  display: block;
  min-height: 100%;
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-24);
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: var(--se-space-12);
  margin-bottom: var(--se-space-16);
}

.page-title {
  font-size: var(--se-type-h4med-size);
  line-height: var(--se-type-h4med-line);
  font-weight: var(--se-type-h4med-weight);
  color: var(--se-color-text-title);
  margin: 0;
}

.page-sub {
  color: var(--se-color-text-description);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  max-width: 640px;
  margin-top: var(--se-space-4);
}

/* ---- antetul unei pagini cu acțiune principală --------------------------------
 * Titlul și subtitlul la stânga, pastila navy la dreapta — forma pe care designul
 * o dă fiecărei liste (index.html, `.page-title-row.has-action`). Titlul și
 * butonul se aliniază SUS, nu la mijloc: aliniate la centru, butonul ajunge în
 * dreptul perechii titlu+descriere și pare să plutească sub titlu.
 *
 * Gap-ul e 48, nu 12: `space-between` singur nu garantează distanța, fiindcă un
 * `.page-sub` fără max-width se întinde să umple rândul și lasă textul lipit de
 * buton. */
.page-title-row.has-action {
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.page-head-text {
  min-width: 0;
}

/* Subtitlul stă ÎN antet aici, deci marginea de jos e a rândului, nu a lui —
 * altfel titlul și descrierea s-ar despărți cu 16px în plus. */
.page-head-text .page-sub {
  margin-bottom: 0;
}

/* Două acțiuni în antet stau împreună, la dreapta titlului. */
.page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  flex-shrink: 0;
}

/* ---- carduri ----------------------------------------------------------------- */

.card-outer {
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-16);
}

/* Pagina însăși e cardul alb; un .card-outer direct sub ea e inert. */
.page-card > .card-outer {
  background: none;
  border: none;
  padding: 0;
}

.card-inner {
  background: var(--se-color-bg-console);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-16);
}

/* ---- butoanele numite ale prototipului ---------------------------------------- */

.btn-add,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--se-space-8);
  background: var(--se-color-primary-60);
  border: 1px solid var(--se-color-primary-60);
  color: var(--se-color-text-on-dark);
  border-radius: var(--se-radius-pill);
  padding: 10px 20px;
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-add .ph {
  font-size: 18px;
}

/* Stările butoanelor numite, scrise pe față. Fiecare pune fundal ȘI culoare,
 * fiindcă specificitatea unei clase cu :hover (0,3,0) bate regula generică a
 * elementului gol (0,2,1) doar pentru proprietățile pe care le declară — ce
 * lipsește aici cade înapoi pe navy-ul ei. Sensul e cel al designului: mai
 * DESCHIS la hover, mai închis la apăsare. */
.btn-add:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: var(--se-color-primary-50);
  border-color: var(--se-color-primary-50);
  color: var(--se-color-text-on-dark);
}

.btn-add:active:not(:disabled),
.btn-primary:active:not(:disabled) {
  background: var(--se-color-primary-80);
  border-color: var(--se-color-primary-80);
  color: var(--se-color-text-on-dark);
}

.btn-add:disabled,
.btn-primary:disabled {
  background: var(--se-color-border-default);
  border-color: var(--se-color-border-default);
  color: var(--se-color-primary-20);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  color: var(--se-color-text-title);
  border-radius: var(--se-radius-pill);
  padding: 10px 20px;
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
}

/* Textul închis se rescrie aici anume: fără el, hover-ul moștenea culoarea
 * stării normale peste fundalul regulii generice — 1.29:1. */
.btn-secondary:hover:not(:disabled),
.btn-secondary:active:not(:disabled) {
  background: var(--se-color-border-default);
  border-color: var(--se-color-primary-70);
  color: var(--se-color-text-title);
}

.btn-secondary:disabled {
  background: var(--se-color-bg-surface);
  border-color: var(--se-color-border-default);
  color: var(--se-color-primary-20);
  cursor: not-allowed;
}

.btn-danger {
  background: var(--se-color-badge-red-600);
  border: 1px solid var(--se-color-badge-red-600);
  color: var(--se-color-text-on-dark);
  border-radius: var(--se-radius-pill);
  padding: 10px 20px;
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
}

/* Roșul trebuie să supraviețuiască hover-ului: fără regula asta, regula
 * generică a elementului gol îl repicta navy și butonul își pierdea identitatea
 * exact în clipa în care operatorul e pe punctul să șteargă ceva. Treapta e
 * `filter`, ca în prototip — roșul nu are trepte 50/80 în tokeni. */
.btn-danger:hover:not(:disabled) {
  background: var(--se-color-badge-red-600);
  border-color: var(--se-color-badge-red-600);
  color: var(--se-color-text-on-dark);
  filter: brightness(1.08);
}

.btn-danger:active:not(:disabled) {
  background: var(--se-color-badge-red-600);
  border-color: var(--se-color-badge-red-600);
  color: var(--se-color-text-on-dark);
  filter: brightness(0.92);
}

/* Al treilea buton al designului: fără fundal și fără contur până e atins. Îl
 * poartă acțiunile secundare dintr-o bară de unelte — „Export Excel",
 * „Tipărire", „Vezi tot" — unde două butoane conturate lângă căutare și filtre
 * fac bara să pară un rând de butoane, nu un rând de filtre.
 *
 * Perechea fundal+culoare se scrie întreagă pe fiecare stare, la (0,3,0): un
 * `<button>` gol e pictat navy-plin de regula generică din ui-forms.css, al cărei
 * hover e (0,2,1). */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--se-space-8);
  background: none;
  border: 1px solid transparent;
  color: var(--se-color-primary-70);
  border-radius: var(--se-radius-pill);
  padding: 10px 20px;
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-tertiary:hover:not(:disabled) {
  background: var(--se-color-border-default);
  border-color: transparent;
  color: var(--se-color-primary-70);
}

.btn-tertiary:active:not(:disabled) {
  background: var(--se-color-border-default);
  border-color: var(--se-color-primary-70);
  color: var(--se-color-primary-70);
}

.btn-tertiary:disabled {
  background: none;
  border-color: transparent;
  color: var(--se-color-primary-20);
  cursor: not-allowed;
}

.btn-tertiary .ph {
  font-size: 18px;
}

/* Varianta strâmtă păstrează ÎNĂLȚIMEA — se îngustează doar pe orizontală.
 * Designul e explicit: orice buton cu fundal sau contur vizibil stă la 44px, ca
 * inputurile și listele de lângă el, iar un buton de 36px într-o bară de unelte
 * se vede imediat că e mai scund decât căutarea de lângă el. */
.btn-primary.btn-sm,
.btn-add.btn-sm,
.btn-secondary.btn-sm,
.btn-tertiary.btn-sm,
.btn-danger.btn-sm {
  min-height: var(--se-size-hit-target);
  padding: 0 var(--se-space-16);
  gap: 6px;
}

.icon-btn-plain {
  background: none;
  border: none;
  color: var(--se-color-text-description);
  padding: var(--se-space-4);
  display: inline-flex;
}

.icon-btn-plain:hover:not(:disabled) {
  background: none;
  color: var(--se-color-text-title);
}

.view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--se-color-primary-60);
  font-size: var(--se-type-captionmed-size);
  font-weight: var(--se-type-captionmed-weight);
  padding: 0;
}

/* ---- panoul de bun venit --------------------------------------------------
 * Se arată o singură dată per browser, la prima intrare, și se redeschide din
 * „Ghid de bun venit" în meniul de profil. Aceleași componente ca la recepție,
 * ca cele două console să arate la fel la prima intrare.
 *
 * Cardul ia raza celorlalte ferestre ale consolei: designul îi dă 24px, iar
 * scala de raze are 16 și 32 și nu are treaptă între ele — o valoare inventată
 * aici ar fi singura rază din consolă care nu vine din tokeni. */

.welcome-overlay {
  position: fixed;
  inset: 0;
  background: var(--ui-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--se-space-20);
  z-index: 600;
}

.welcome-overlay.hidden {
  display: none;
}

.welcome-card {
  position: relative;
  width: 640px;
  max-width: 100%;
  background: var(--se-color-bg-surface);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-28) var(--se-space-24);
  box-shadow: var(--ui-shadow-float);
  text-align: center;
}

/* Un `<button>` gol e pictat navy-plin de regula generică din ui-forms.css, al
 * cărei hover e (0,2,1): perechea fundal+culoare se scrie aici întreagă. */
.welcome-close {
  position: absolute;
  top: var(--se-space-16);
  right: var(--se-space-16);
  width: var(--se-size-hit-target);
  height: var(--se-size-hit-target);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--se-color-text-description);
}

.welcome-close:hover:not(:disabled) {
  background: var(--se-color-bg-console);
  color: var(--se-color-text-title);
}

.welcome-close .ph {
  font-size: var(--se-size-icon-nav);
}

.welcome-title {
  font-size: var(--se-type-h4sb-size);
  line-height: var(--se-type-h4sb-line);
  font-weight: var(--se-type-h4sb-weight);
  color: var(--se-color-text-title);
  margin: 0 0 var(--se-space-12);
}

.welcome-sub {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-description);
  max-width: 460px;
  margin: 0 auto var(--se-space-28);
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--se-space-8);
  margin-bottom: var(--se-space-28);
}

@media (max-width: 640px) {
  .welcome-grid {
    grid-template-columns: 1fr;
  }
}

.welcome-feature {
  background: var(--se-color-bg-console);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-24) var(--se-space-16);
}

.welcome-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--se-color-secondary-20);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--se-space-16);
}

.welcome-feature-icon .ph {
  /* Designul dă 28px; scala de glife are 20 și 24 și nu are treaptă între ele,
   * așa că semnul ia treapta de navigație. O valoare inventată aici ar fi
   * singura mărime din consolă care nu vine din tokeni. */
  font-size: var(--se-size-icon-nav);
  color: var(--se-color-secondary-60);
}

.welcome-feature h3 {
  font-size: var(--se-type-bodysb-size);
  line-height: var(--se-type-bodysb-line);
  font-weight: var(--se-type-bodysb-weight);
  color: var(--se-color-text-title);
  margin: 0 0 6px;
}

.welcome-feature p {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-description);
  margin: 0;
}

.welcome-note {
  margin-bottom: var(--se-space-28);
}

.welcome-note-title {
  font-size: var(--se-type-bodymed-size);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
  margin: 0 0 var(--se-space-4);
}

.welcome-note-sub {
  font-size: var(--se-type-bodyreg-size);
  color: var(--se-color-text-description);
  margin: 0;
}

.welcome-start {
  padding: var(--se-space-12) var(--se-space-28);
}