/* ═══ FIȘIER PARTAJAT (afood-shared/css/components.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */
/* „Pastel Motion": plat (zero umbre), rotunjit (24 card · 32 dialog · 16 meniu/toast/tile · pastile
   rotunde), pastel (un singur ton bg → fg pe element), apăsat (ierarhia din grosime). Culoarea se
   schimbă animat (--dur-3 emphasized), raza cu spring (--dur-4); intrările decel, ieșirile accel.
   Apăsarea (scale + rază la 55 %) e a lui motion.js — NICIUN `transform` pe :active aici. */

/* ══ Animații (§6.3) ══
   Keyframe-urile animă proprietățile individuale `translate` / `scale`, NU `transform`:
   se compun cu transformarea proprie a elementului (popover-ul centrat cu translateX(-50%)
   nu mai sare lateral cât intră). */
@keyframes afd-fade-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes afd-fade-out  { from { opacity: 1 } to { opacity: 0 } }
@keyframes afd-pop-in    { from { opacity: 0; translate: 0 -4px; scale: .97 } to { opacity: 1; translate: none; scale: none } }
@keyframes afd-pop-out   { from { opacity: 1 } to { opacity: 0; translate: 0 -4px; scale: .97 } }
@keyframes afd-modal-in  { from { opacity: 0; translate: 0 18px; scale: .97 } to { opacity: 1; translate: none; scale: none } }
@keyframes afd-modal-out { from { opacity: 1 } to { opacity: 0; translate: 0 8px; scale: .98 } }
@keyframes afd-sheet-in  { from { translate: 0 100% } to { translate: none } }
@keyframes afd-sheet-out { from { translate: none } to { translate: 0 100% } }
@keyframes afd-toast-in  { from { opacity: 0; translate: 0 24px; scale: .97 } to { opacity: 1; translate: none; scale: none } }
@keyframes afd-toast-out { from { opacity: 1 } to { opacity: 0; translate: 0 8px } }

/* ══ §10.12 Badge-uri și pastile de status ══
   Pastilă pastel 13 / 700, rotundă (`--corner: round`, altfel superelipsa o face pătrățoasă).
   Fără variantă = chipul implicit (--tertiary); tonurile semantice sunt perechile soft / ink. */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); --corner: round; corner-shape: round;
  font: var(--fw-label) var(--fs-13)/18px var(--font-ui); white-space: nowrap;
  background: var(--tertiary); color: var(--on-tertiary);
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph);
}
.badge .material-icons { font-size: var(--icon-16) }
.badge:has(> .material-icons:first-child) { padding-left: var(--sp-2) }
.badge-primary { background: var(--accent-soft);  color: var(--accent-onsoft) }
.badge-success { background: var(--success-soft);  color: var(--success-ink) }
.badge-warning { background: var(--warning-soft);  color: var(--warning-ink) }
.badge-danger  { background: var(--danger-soft);   color: var(--danger-ink) }
.badge-info    { background: var(--info-soft);     color: var(--info-ink) }
.badge-neutral { background: var(--neutral-soft);  color: var(--neutral-ink) }
.badge-purple  { background: var(--purple-soft);   color: var(--purple-ink) }
/* Variantă cu punct — stări de ciclu de viață (Activ, Online, Plătită); punctul = fg-ul tonului */
.badge-dot { padding-left: var(--sp-2) }
.badge-dot::before {
  content: ''; flex: 0 0 auto; width: var(--sp-2); height: var(--sp-2);
  border-radius: var(--r-full); corner-shape: round; background: currentColor;
}
/* Badge de cod — plăcuțe, numere de factură */
.badge.code { font: var(--fw-strong) var(--fs-13)/18px var(--font-mono) }

/* Punct de status independent (liste fără loc de text) */
.status-dot {
  display: inline-block; flex: 0 0 auto; width: var(--sp-2); height: var(--sp-2);
  border-radius: var(--r-full); --corner: round; corner-shape: round; background: var(--neutral);
  transition: background-color var(--dur-3) var(--ease-emph);
}
.status-dot.is-success { background: var(--success) }
.status-dot.is-warning { background: var(--warning) }
.status-dot.is-danger  { background: var(--danger) }
.status-dot.is-info    { background: var(--info) }
.status-dot.is-neutral { background: var(--neutral) }

/* ══ §10.13 Card-uri ══
   Alb pe canvasul cald, raza 24, fără umbră și fără contur. Un card care stă pe alb
   (în alt card sau într-un dialog) primește conturul fin --line-2. */
.card {
  background: var(--surface); border: 0; border-radius: var(--r-3);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  position: relative;   /* ancoră pentru .loading-overlay (Page.loading) */
  transition: background-color var(--dur-3) var(--ease-emph);
}
.card .card, .modal .card { border: var(--border-fine) solid var(--line-2) }
/* Antetul nu are linie: titlul (15 / 900) și spațiul îl separă de corp. Corpul de imediat
   după antet nu-și mai repetă padding-ul de sus — distanța titlu → conținut = cea de jos a antetului. */
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-3) var(--sp-5); border-bottom: 0;
}
.card-header + .card-body { padding-top: 0 }
.card-header-left { display: flex; flex-direction: column; gap: var(--sp-half); min-width: 0 }
.card-header-title {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0;
  margin: 0; font: var(--fw-title) var(--fs-14)/20px var(--font-ui); letter-spacing: var(--ls-title); color: var(--ink-1);
}
.card-header-title .material-icons { font-size: var(--icon-20); color: var(--ink-2) }
.card-header-subtitle { margin: 0; font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3) }
.card-header-right,
.card-header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto }
/* Singurul loc unde rândul de presetări e --ctl-sm (40) cu chip 36 */
.card-header-right .filter-presets,
.card-header-actions .filter-presets { height: var(--ctl-sm); padding: 0 }
.card-body { padding: var(--sp-5); flex: 1; min-width: 0 }
.card-body--flush,
.card-body.no-pad { padding: 0 }
/* Subsolul (wizard, „Vezi tot") — linie fină, fără fundal propriu */
.card-footer {
  padding: var(--sp-3) var(--sp-5); border-top: var(--border-fine) solid var(--line-2); background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-2);
}
/* Grup de setări: header doar cu titlu, corp cu .list-row */
.card--section .card-body { padding: 0 }
.card.is-clickable { cursor: pointer; text-decoration: none; color: inherit }

/* Grile de card-uri (bază = tabletă) */
.grid-2, .grid-3, .grid-auto { display: grid; gap: var(--sp-4); min-width: 0 }
.grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }

/* ══ §10.14 KPI ══ */
.kpi-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)) }
.kpi-grid--3, .kpi-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.kpi {
  background: var(--surface); border: 0; border-radius: var(--r-3);
  padding: var(--sp-5); min-width: 0;
  /* Pictograma stă pe RÂNDUL ETICHETEI, nu în colț: valoarea primește toată lățimea
     dalei, deci „359.382,78 RON" nu se mai rupe pe două rânduri într-o grilă de 4.
     Înălțimea NU e fixată: dala e exact cât conținutul ei (20 + 40 + 4 + 36 [+ 4 + 26]
     + 20), iar egalizarea o face rândul de grilă. Așa o dală fără variație nu mai are
     gol dedesubt, iar padding-ul de sus rămâne egal cu cel de jos. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label icon" "value value" "meta meta";
  column-gap: var(--sp-3); row-gap: var(--sp-1); align-content: start;
  transition: background-color var(--dur-3) var(--ease-emph);
}
/* Pătrat pastel raza 16; implicit --tertiary, altfel tonul semantic al dalei */
.kpi-icon {
  grid-area: icon; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-2);
  background: var(--tertiary); color: var(--on-tertiary);
}
.kpi-icon .material-icons { font-size: var(--icon-20) }
.kpi[data-tone="success"] .kpi-icon { background: var(--success-soft); color: var(--success-ink) }
.kpi[data-tone="warning"] .kpi-icon { background: var(--warning-soft); color: var(--warning-ink) }
.kpi[data-tone="danger"]  .kpi-icon { background: var(--danger-soft);  color: var(--danger-ink) }
.kpi[data-tone="info"]    .kpi-icon { background: var(--info-soft);    color: var(--info-ink) }
.kpi[data-tone="purple"]  .kpi-icon { background: var(--purple-soft);  color: var(--purple-ink) }
.kpi[data-tone="neutral"] .kpi-icon { background: var(--neutral-soft); color: var(--neutral-ink) }
.kpi-label {
  grid-area: label; align-self: center; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-width: 0; font: var(--fw-strong) var(--fs-13)/18px var(--font-ui); color: var(--ink-3);
}
.kpi-label .info-tip { margin-left: 0 }
.kpi-value {
  grid-area: value; min-width: 0; font: var(--fw-title) var(--fs-26)/32px var(--font-ui);
  letter-spacing: var(--ls-title); color: var(--ink-1);
}
.kpi-value small { margin-left: var(--sp-1); font: var(--fw-strong) var(--fs-14)/1 var(--font-ui); letter-spacing: 0; color: var(--ink-3) }
.kpi-value.is-negative { color: var(--danger-ink) }
.kpi-meta {
  grid-area: meta; display: flex; align-items: center; gap: var(--sp-2); min-height: 26px;
  font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3);
}
.kpi-meta:empty { display: none }
/* Variația e o pastilă tonală, nu text colorat liber: într-o grilă de 8 dale se
   citește direcția dintr-o privire, iar culoarea rămâne cea semantică (§10.14):
   mint = bine, rose = rău, neutru = plat. */
.kpi-delta {
  display: inline-flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border-radius: var(--r-full); --corner: round; corner-shape: round;
  background: var(--neutral-soft); color: var(--neutral-ink); font: var(--fw-label) var(--fs-13)/18px var(--font-ui);
}
.kpi-delta .material-icons { font-size: var(--icon-16) }
.kpi-delta.is-up   { background: var(--success-soft); color: var(--success-ink) }
.kpi-delta.is-down { background: var(--danger-soft);  color: var(--danger-ink) }
.kpi-delta.is-flat { background: var(--neutral-soft); color: var(--neutral-ink) }
/* `delta.tone` separă culoarea (bine / rău) de săgeată (sus / jos): „Timp mediu de
   livrare ↑" e o creștere REA. Vin după .is-up/.is-down, deci câștigă. */
.kpi-delta.is-positive { background: var(--success-soft); color: var(--success-ink) }
.kpi-delta.is-negative { background: var(--danger-soft);  color: var(--danger-ink) }
.kpi-delta.is-neutral  { background: var(--neutral-soft); color: var(--neutral-ink) }
.kpi-sub { font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3); min-width: 0 }
.kpi.is-loading .kpi-value .skeleton { width: 112px; height: 32px }
.kpi.is-clickable { cursor: pointer; text-decoration: none; color: inherit }

/* ══ §10.11 Tab-uri (o singură variantă: pastile) ══
   Fără linie dedesubt: tab-ul activ e o pastilă --accent-soft / --accent-onsoft (800);
   restul 15 / 700 --ink-2 pe transparent. */
.tabs { position: relative; display: flex; gap: var(--sp-1); border-bottom: 0; overflow-x: auto; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tab-item {
  position: relative; height: var(--ctl-sm); padding: 0 var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto;
  border: 0; background: transparent; font: var(--fw-label) var(--fs-14)/1 var(--font-ui); color: var(--ink-2);
  border-radius: var(--r-2); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph),
              border-radius var(--dur-4) var(--ease-spring);
}
.tab-item, .tab-item:hover { text-decoration: none }
.tab-item .material-icons { font-size: var(--icon-20) }
.tab-item:focus-visible { outline: none; box-shadow: var(--ring-inset) }
.tab-item.active { background: var(--accent-soft); color: var(--accent-onsoft); font-weight: var(--fw-strong) }
/* Contorul din tab: pastilă compactă */
.tab-item .badge { padding: 0 var(--sp-2) }

/* ══ §10.18/§10.19/§8.6 Mânerul de sheet — buton de expand/collapse, fără tragere ══
   Un mâner real (buton), desenat ca dungă de 40 × 5 în --line-3 pe `::before`.
   Un singur tap comută: foile „dismiss" (modale, meniuri) se închid, foaia hărții
   (`snap`) se extinde / strânge. Starea rămâne în `aria-expanded` (sincronizat de
   sheet-drag.js); chevronul vechi nu se mai desenează — dunga e semnul. */
.sheet-grabber {
  display: none; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 100%; height: var(--sp-8); padding: 0; border: 0; background: none;
  border-radius: var(--r-4) var(--r-4) 0 0; color: var(--ink-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet-grabber::before {
  content: ''; flex: 0 0 auto; width: var(--sp-10); height: 5px;
  border-radius: var(--r-full); corner-shape: round; background: var(--line-3);
  transition: background-color var(--dur-3) var(--ease-emph);
}
.sheet-grabber-icon { display: none; transition: transform var(--dur-3) var(--ease-emph); }
.sheet-grabber[aria-expanded="false"] .sheet-grabber-icon { transform: rotate(180deg); }
@media (hover: hover) { .sheet-grabber:hover::before { background: var(--ink-4); } }
.sheet-grabber:focus-visible { outline: none; box-shadow: var(--ring-inset) }

/* ══ §10.18 Modal ══
   Raza 32, plat, fără linii: antetul (titlu 20 / 900), corpul și subsolul se despart prin
   spațiu. Padding vizual simetric 24 (20 pe telefon) — butonul de închidere are deja 12 px
   de aer în jurul iconiței, deci antetul îi lasă 16 în dreapta și sus. */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
  animation: afd-fade-in var(--dur-3) var(--ease-decel);
}
.modal-backdrop + .modal-backdrop { z-index: calc(var(--z-modal) + 1) }
.modal-backdrop.is-closing { animation: afd-fade-out var(--dur-2) var(--ease-accel) forwards }
/* Lățimi: implicit 600 (formulare), sm = 410 (confirmări), lg / xl păstrează lățimile funcționale */
.modal {
  --modal-w: var(--dialog-w-wide);
  width: 100%; max-width: min(var(--modal-w), 100vw - 48px); max-height: calc(100dvh - 48px);
  background: var(--surface); border-radius: var(--r-4);
  display: flex; flex-direction: column; overflow: hidden;
  animation: afd-modal-in var(--dur-5) var(--ease-decel);
}
.modal-sm { --modal-w: var(--dialog-w) }
.modal-lg { --modal-w: 760px }
.modal-xl { --modal-w: 1040px }
.modal-backdrop.is-closing .modal,
.modal.is-closing { animation: afd-modal-out var(--dur-2) var(--ease-accel) forwards }
.modal-header {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--sp-3); row-gap: var(--sp-half);
  min-height: 72px; padding: var(--sp-4) var(--sp-4) var(--sp-2) var(--sp-6); border-bottom: 0;
  /* Antetul și subsolul nu cedează niciodată înălțime unui corp lung: corpul e
     scrollerul. Altfel antetul se strângea la min-height și subtitlul ieșea afară. */
  flex-shrink: 0;
}
.modal-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-2);
  background: var(--tertiary); color: var(--on-tertiary);
}
.modal-icon .material-icons { font-size: var(--icon-20) }
.modal-icon[data-tone="danger"]  { background: var(--danger-soft);  color: var(--danger-ink) }
.modal-icon[data-tone="warning"] { background: var(--warning-soft); color: var(--warning-ink) }
.modal-icon[data-tone="success"] { background: var(--success-soft); color: var(--success-ink) }
.modal-icon[data-tone="info"]    { background: var(--info-soft);    color: var(--info-ink) }
.modal-title {
  flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden;
  /* Două rânduri, apoi „…": un nume lung de partener sau o întrebare de confirmare
     („Generezi cheltuiala „Factură Vo…"") nu mai ascunde ce se confirmă. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere;
  font: var(--fw-title) var(--fs-18)/24px var(--font-ui); letter-spacing: var(--ls-title); color: var(--ink-1);
}
.modal--confirm .modal-title { -webkit-line-clamp: 3 }
.modal-subtitle { flex: 1 0 100%; order: 1; margin: 0; font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3) }
.modal-close { flex: 0 0 auto }
.modal-body { position: relative; padding: var(--sp-3) var(--sp-6); overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain }
/* Fără subsol, corpul închide dialogul cu padding-ul plin de jos */
.modal-body:last-child, .modal-body:has(+ .modal-footer[hidden]) { padding-bottom: var(--sp-6) }
.modal-body .summary-row { padding-inline: 0 }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-shrink: 0;
  padding: var(--sp-4) var(--sp-6) var(--sp-6); border-top: 0; background: transparent;
}
.modal-footer-left { margin-right: auto }
.modal--confirm .modal-body { font: var(--fw-body) var(--fs-14)/20px var(--font-ui); color: var(--ink-2) }
body.is-modal-open { overflow: hidden }

/* Vizualizator de document / bon (§10.37): `Modal.open({ size: 'viewer' })`.
   Desktop: aproape tot ecranul (1200 × înălțimea utilă) — un PDF A4 într-o casetă
   de 600 × 300 nu se poate citi. Telefon: ecran complet (blocul ≤ 639).
   `.modal--document` (MC) și `.modal--receipt` (Fleet) sunt vizualizatoarele
   existente și primesc aceeași casetă. Corpul e caseta media: fără padding, pe
   `--sunken`, coloană flex — conținutul (iframe / img / canvas) îl umple cu `flex: 1`. */
.modal-viewer, .modal--document, .modal--receipt { --modal-w: 1200px; height: calc(100dvh - 48px) }
.modal-viewer > .modal-body, .modal--document > .modal-body, .modal--receipt > .modal-body {
  display: flex; flex-direction: column; padding: 0; background: var(--sunken);
}

/* ══ §10.19 Meniu dropdown ══
   Suprafață albă, raza 16, contur fin --line-2 (fără umbră — conturul îl separă);
   itemi raza 12 (concentrici cu cei 4 px de padding), 15 / 700. */
.dropdown { position: relative; display: inline-flex }
.dropdown-menu {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0;
  min-width: 200px; max-width: min(320px, calc(100vw - 32px)); padding: var(--sp-1);
  background: var(--surface); border: var(--border-fine) solid var(--line-2); border-radius: var(--r-2);
  z-index: var(--z-dropdown); transform-origin: top right;
  animation: afd-pop-in var(--dur-3) var(--ease-decel);
}
.dropdown-menu--left { left: 0; right: auto; transform-origin: top left }
.dropdown-menu.is-closing { animation: afd-pop-out var(--dur-2) var(--ease-accel) forwards }
.dropdown-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-width: 0;
  height: var(--ctl-md); padding: 0 var(--sp-3); border: 0; background: none; border-radius: var(--r-1);
  font: var(--fw-label) var(--fs-14)/1 var(--font-ui); color: var(--ink-1); text-align: left; cursor: pointer;
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph);
}
.dropdown-item .material-icons { font-size: var(--icon-20); color: var(--ink-3); transition: color var(--dur-3) var(--ease-emph) }
.dropdown-item:focus-visible { outline: none; background: var(--subtle) }
.dropdown-item.danger,
.dropdown-item.is-danger { color: var(--danger-ink) }
.dropdown-item.danger .material-icons,
.dropdown-item.is-danger .material-icons { color: var(--danger-ink) }
.dropdown-item.is-selected { font-weight: var(--fw-strong) }
.dropdown-item.is-selected::after {
  content: 'check'; margin-left: auto; font-family: 'Material Symbols Rounded';
  font-size: var(--icon-20); font-weight: 500; line-height: 1; color: var(--accent-onsoft);
}
.dropdown-item.is-disabled { opacity: .5; pointer-events: none }
.dropdown-divider { height: 1px; background: var(--line-1); margin: var(--sp-1) var(--sp-2) }
.dropdown-heading { padding: var(--sp-2) var(--sp-3) var(--sp-1); font: var(--fw-strong) var(--fs-13)/18px var(--font-ui); color: var(--ink-3) }

/* Ancorare la viewport — `Page.anchor` (§10.19). `position: fixed` scoate meniul
   de sub orice `overflow` de strămoș (.card, .table-wrap, .toolbar, .modal-body),
   iar JS îi scrie doar proprietăți custom: poziția răsturnată + limitată la 8 px
   de margini și înălțimea maximă rămasă. */
.dropdown-menu.is-anchored {
  position: fixed; top: var(--menu-top, 0px); left: var(--menu-left, 0px); right: auto; bottom: auto;
  max-height: var(--menu-max-h, none); overflow-y: auto; overscroll-behavior: contain;
}
/* Sonda pentru env(safe-area-inset-bottom) — inserată și scoasă instant de JS. */
.safe-area-probe {
  position: fixed; left: 0; bottom: 0; width: 0; height: env(safe-area-inset-bottom, 0px);
  visibility: hidden; pointer-events: none;
}

/* ══ §10.20 Toast ══
   Snackbar plutitor: --inverse-surface / --inverse-ink, raza 16, 15 / 700, plat.
   Iconița de stare stă într-un pătrat pastel (--x-soft / --x-ink, raza 12): perechea
   își păstrează contrastul în ambele teme, pe când --on-dark-* (deschise) ar dispărea
   pe suprafața inversă DESCHISĂ a temei întunecate. */
.toast-stack { position: fixed; right: var(--sp-6); bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: var(--z-toast) }
.toast {
  display: flex; align-items: center; gap: var(--sp-3); width: 380px; padding: var(--sp-3);
  background: var(--inverse-surface); color: var(--inverse-ink); border-radius: var(--r-2);
  font: var(--fw-label) var(--fs-14)/20px var(--font-ui);
  animation: afd-toast-in var(--dur-5) var(--ease-decel);
}
.toast.is-closing { animation: afd-toast-out var(--dur-2) var(--ease-accel) forwards }
.toast-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-1);
  font-size: var(--icon-20); background: var(--tertiary); color: var(--on-tertiary);
}
.toast.is-success .toast-icon { background: var(--success-soft); color: var(--success-ink) }
.toast.is-warning .toast-icon { background: var(--warning-soft); color: var(--warning-ink) }
.toast.is-danger  .toast-icon { background: var(--danger-soft);  color: var(--danger-ink) }
.toast.is-info    .toast-icon { background: var(--info-soft);    color: var(--info-ink) }
.toast-title { font-weight: var(--fw-strong) }
.toast-text { flex: 1 1 auto; min-width: 0; margin: 0 }
.toast-close {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--sp-8); height: var(--sp-8); margin-left: auto; padding: 0;
  color: inherit; opacity: .7; background: none; border: 0; border-radius: var(--r-1); cursor: pointer;
  transition: opacity var(--dur-3) var(--ease-emph);
}
/* Acțiune în toast („Anulează" după o marcare): buton tonal pe accent — perechea
   soft / onsoft se citește pe suprafața inversă în ambele teme. */
.toast-action {
  flex: 0 0 auto; align-self: center; margin: 0 0 0 auto; padding: 0 var(--sp-3); height: var(--ctl-xs);
  border: 0; border-radius: var(--r-1); background: var(--accent-soft); color: var(--accent-onsoft);
  font: var(--fw-strong) var(--fs-14)/1 var(--font-ui); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-3) var(--ease-emph), border-radius var(--dur-4) var(--ease-spring);
}
.toast-action + .toast-close { margin-left: 0 }
.toast-action:focus-visible { outline: none; box-shadow: var(--ring) }
.toast-close .material-icons { font-size: var(--icon-20) }

/* ══ §10.21 Bandă de notificare ══
   Pastel după severitate, raza 16, fără contur (nici bordură groasă în stânga). */
.alert-banner {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl-md); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-2); border: 0;
  font: var(--fw-body) var(--fs-14)/20px var(--font-ui);
  background: var(--surface); color: var(--ink-2);
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph);
}
.alert-banner .material-icons { font-size: var(--icon-20) }
/* Textul benzii cedează lățime: un token lung fără spații (nume de fișier) nu mai
   lărgește pagina pe telefon. */
.alert-banner > span:not(.material-icons):not(.alert-banner-action),
.alert-banner > p { min-width: 0; overflow-wrap: anywhere }
.alert-banner.is-info    { background: var(--info-soft);    color: var(--info-ink) }
.alert-banner.is-success { background: var(--success-soft); color: var(--success-ink) }
.alert-banner.is-warning { background: var(--warning-soft); color: var(--warning-ink) }
.alert-banner.is-danger  { background: var(--danger-soft);  color: var(--danger-ink) }
/* Neutrul stă pe canvas: alb, ca un card. Într-un card / dialog (alb pe alb) trece pe --subtle. */
.alert-banner.is-neutral { background: var(--surface);      color: var(--ink-2) }
.card .alert-banner:not(.is-info):not(.is-success):not(.is-warning):not(.is-danger),
.modal .alert-banner:not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) { background: var(--subtle) }
.alert-banner-action { margin-left: auto; flex: 0 0 auto }
.alert-banner.is-multiline { align-items: flex-start }
/* Stiva de text a unei benzi multi-linie: titlu / explicație / ce e de făcut.
   Culoarea captionului vine din tonul benzii (fg-ul tonului pe pastelul lui),
   nu din --ink-3, care ar fi o pată gri într-o bandă colorată. */
.alert-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-half) }
.alert-banner-text > .caption { color: inherit }
/* Mai multe benzi una sub alta (panoul „Stare sistem") */
.alert-banner-stack { display: flex; flex-direction: column; gap: var(--sp-3) }

/* ══ §10.23 Info-tip (tooltip) ══ */
.info-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--icon-18); height: var(--icon-18); margin-left: var(--sp-1); color: var(--ink-4); cursor: help;
  transition: color var(--dur-3) var(--ease-emph);
}
.info-tip .material-icons { font-size: var(--icon-18) }
.info-tip-popover {
  position: absolute; left: 50%; bottom: calc(100% + var(--sp-2)); transform: translateX(-50%);
  width: max-content; max-width: 280px; padding: var(--sp-2) var(--sp-3);
  background: var(--inverse-surface); color: var(--inverse-ink); font: var(--fw-label) var(--fs-13)/18px var(--font-ui);
  border-radius: var(--r-1); z-index: var(--z-tooltip);
  opacity: 0; visibility: hidden;
}
/* Implicit deasupra (.placement-top); se răstoarnă dedesubt când nu e loc */
.info-tip-popover.placement-top { top: auto; bottom: calc(100% + var(--sp-2)) }
.info-tip-popover.placement-bottom { bottom: auto; top: calc(100% + var(--sp-2)) }
.info-tip-popover.is-visible { opacity: 1; visibility: visible; animation: afd-pop-in var(--dur-3) var(--ease-decel) }
/* Săgeata: 6 px, urmează plasarea */
.info-tip-popover::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--inverse-surface);
}
.info-tip-popover.placement-top::after { top: 100%; bottom: auto; border-top-color: var(--inverse-surface); border-bottom-color: transparent }
.info-tip-popover.placement-bottom::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--inverse-surface) }
/* Ancorat la viewport (`Page.anchor`, centrat): săgeata urmărește centrul ancorei. */
.info-tip-popover.is-anchored {
  position: fixed; top: var(--menu-top, 0px); left: var(--menu-left, 0px); right: auto; bottom: auto;
  transform: none; max-height: var(--menu-max-h, none); overflow-y: auto;
}
.info-tip-popover.is-anchored::after { left: var(--menu-arrow, 50%) }

/* ══ §10.24 Avatar ══ cerc pastel (--tertiary), inițiale 900 */
.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--r-full); --corner: round; corner-shape: round;
  background: var(--tertiary); color: var(--on-tertiary);
  font: var(--fw-title) var(--fs-13)/1 var(--font-ui);
}
img.avatar { object-fit: cover }
.avatar-xs { width: 24px; height: 24px; font-size: var(--fs-12) }
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-12) }
.avatar-md { width: 32px; height: 32px; font-size: var(--fs-13) }
.avatar-lg { width: 44px; height: 44px; font-size: var(--fs-14) }
.avatar-primary { background: var(--accent); color: var(--on-accent) }
.avatar .status-dot { position: absolute; right: 0; bottom: 0; outline: 2px solid var(--surface) }

/* ══ §10.28 Grilă de detalii ══ cheie 13 / 700 --ink-3 deasupra, valoare 15 / 700 --ink-1 */
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6) }
.detail-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.detail-item { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0 }
.detail-item--full { grid-column: 1 / -1 }
.detail-label { font: var(--fw-label) var(--fs-13)/18px var(--font-ui); color: var(--ink-3) }
.detail-value { font: var(--fw-label) var(--fs-14)/20px var(--font-ui); color: var(--ink-1); overflow-wrap: anywhere }
/* `.code` (base.css) pierdea în fața shorthand-ului `font` de mai sus: CUI, IBAN,
   Reg. Com. apăreau în fontul de interfață. */
.detail-value.code, .detail-value-text.code { font: var(--fw-strong) var(--fs-14)/20px var(--font-mono); font-variant-numeric: tabular-nums }
/* Valoare + buton „Copiază" (Page.detailGrid `copy`) — butonul nu crește rândul. */
.detail-value--copy { display: flex; align-items: center; gap: var(--sp-1); min-width: 0 }
.detail-value-text { min-width: 0; overflow-wrap: anywhere }
.detail-copy { flex: 0 0 auto; margin-block: calc((22px - var(--ctl-sm)) / 2) }
.detail-copy .material-icons { font-size: var(--icon-18) }
.summary-value:has(> .detail-copy) { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-1) }
.detail-value:empty::before { content: '—'; color: var(--ink-3) }
.detail-value.is-empty { color: var(--ink-3) }
.detail-section-title {
  grid-column: 1 / -1; margin-top: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: var(--border-fine) solid var(--line-1);
  font: var(--fw-strong) var(--fs-14)/20px var(--font-ui); letter-spacing: var(--ls-sub); color: var(--ink-1);
}

/* ══ §10.29 Rând de listă (list tile) ══
   Dală cu raza 16, retrasă 8 px de la marginile cardului: textul rămâne la 20 px de
   margine (8 + 12), iar fundalul de hover / selecție are colțuri proprii, nu se lipește
   de marginea cardului. Separatorul e o linie fină desenată în interiorul dalei
   (`::before`, inset 12), care dispare lângă dala evidențiată. */
.list-row {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
  min-height: 56px; margin: 0 var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-bottom: 0; border-radius: var(--r-2);
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph),
              border-radius var(--dur-4) var(--ease-spring);
}
.list-row + .list-row::before {
  content: ''; position: absolute; top: 0; left: var(--sp-3); right: var(--sp-3); height: 1px;
  background: var(--line-2); pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-emph);
}
.list-row:last-child { border-bottom: 0 }
.list-row.is-selected::before, .list-row.is-selected + .list-row::before { opacity: 0 }
.list-row-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--r-2); background: var(--neutral-soft); color: var(--neutral-ink);
}
.list-row-icon .material-icons { font-size: var(--icon-20) }
.list-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-half); font: var(--fw-label) var(--fs-14)/20px var(--font-ui); color: var(--ink-1) }
.list-row-sub { font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3) }
.list-row-value { flex: 0 0 auto; font: var(--fw-strong) var(--fs-14)/20px var(--font-ui); color: var(--ink-1); font-variant-numeric: tabular-nums }
.list-row.is-clickable { cursor: pointer; text-decoration: none; color: inherit }

/* ══ §10.30 Timeline / activitate ══ */
.timeline { display: flex; flex-direction: column }
.timeline-item {
  display: grid; grid-template-columns: var(--sp-8) 1fr auto; align-items: center; gap: 0 var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: var(--border-fine) solid var(--line-2);
}
.timeline-item:last-child { border-bottom: 0 }
.card-body--flush .timeline { padding: var(--sp-1) var(--sp-5) }
.timeline-marker {
  grid-column: 1; grid-row: 1 / -1; display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-full); --corner: round; corner-shape: round;
  background: var(--neutral-soft); color: var(--neutral-ink);
}
.timeline-marker .material-icons { font-size: var(--icon-18) }
.timeline-marker.is-success { background: var(--success-soft); color: var(--success-ink) }
.timeline-marker.is-warning { background: var(--warning-soft); color: var(--warning-ink) }
.timeline-marker.is-danger  { background: var(--danger-soft);  color: var(--danger-ink) }
.timeline-marker.is-info    { background: var(--info-soft);    color: var(--info-ink) }
.timeline-title { grid-column: 2; display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; font: var(--fw-label) var(--fs-14)/20px var(--font-ui); color: var(--ink-1) }
.timeline-meta { grid-column: 2; font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3) }
.timeline-time { grid-column: 3; grid-row: 1; font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3); white-space: nowrap }

/* ══ §10.31 Bară de progres ══ pistă --tertiary, umplere --accent, ambele rotunde */
.progress {
  height: var(--sp-2); border-radius: var(--r-full); --corner: round; corner-shape: round;
  background: var(--tertiary); overflow: hidden;
}
.progress-bar {
  width: var(--w, 0); height: 100%; border-radius: var(--r-full); corner-shape: round; background: var(--accent);
  transition: width var(--dur-4) var(--ease-emph), background-color var(--dur-3) var(--ease-emph);
}
.progress-bar.is-success { background: var(--success) }
.progress-bar.is-warning { background: var(--warning) }
.progress-bar.is-danger  { background: var(--danger) }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); font: var(--fw-label) var(--fs-13)/18px var(--font-ui); color: var(--ink-2) }

/* ══ §10.35 Listă de sumar (rânduri valoare/etichetă) ══ */
.summary-list { display: flex; flex-direction: column }
.summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 44px; padding: 0 var(--sp-5); font: var(--fw-body) var(--fs-14)/20px var(--font-ui);
}
.summary-row > * { min-width: 0 }
.summary-row > :first-child, .summary-label { color: var(--ink-2) }
.summary-row > :last-child, .summary-value { color: var(--ink-1); font-weight: var(--fw-strong); text-align: right; font-variant-numeric: tabular-nums }
.summary-op { margin-right: var(--sp-1); font-size: var(--fs-13); color: var(--ink-3) }
.summary-row.is-negative > :last-child,
.summary-row.is-negative .summary-value,
.summary-value.is-negative { color: var(--danger-ink) }
.summary-row.is-total {
  border-top: var(--border-fine) solid var(--line-1); margin-top: var(--sp-1); min-height: 52px;
  font-weight: var(--fw-title); letter-spacing: var(--ls-sub); background: var(--subtle);
}
.summary-row.is-total > :first-child, .summary-row.is-total .summary-label { color: var(--ink-1) }
.summary-row.is-total > :last-child, .summary-row.is-total .summary-value { font-weight: var(--fw-title) }

/* ══ §10.36 Pași (wizard) ══ pastile; cercul numărului rotund, activ = accent */
.steps { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none }
.steps::-webkit-scrollbar { display: none }
.step {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto;
  height: var(--ctl-sm); padding: 0 var(--sp-4) 0 var(--sp-1); border-radius: var(--r-full); --corner: round; corner-shape: round;
  font: var(--fw-label) var(--fs-14)/1 var(--font-ui); color: var(--ink-3); white-space: nowrap;
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph);
}
.step + .step::before {
  content: ''; flex: 0 0 auto; width: var(--sp-4); height: 2px; margin-right: var(--sp-2);
  border-radius: var(--r-full); background: var(--line-1);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-full); corner-shape: round;
  background: var(--neutral-soft); color: var(--neutral-ink); font: var(--fw-strong) var(--fs-13)/1 var(--font-ui);
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph);
}
.step.is-active { color: var(--accent-onsoft); background: var(--accent-soft); font-weight: var(--fw-strong) }
.step.is-active .step-num { background: var(--accent); color: var(--on-accent) }
.step.is-done .step-num { background: var(--success-soft); color: var(--success-ink) }
.step.is-done .step-num .material-icons { font-size: var(--icon-18) }

/* ══ §10.39 Rând de chip-uri ══ */
.chip-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0 }

/* ══ Tonuri pastel pentru categorii fără semantică ══
   `Format.tone(key)` → 'mint' | 'peach' | 'lavender' | 'butter' | 'sky' | 'rose'; clasa se
   combină cu `.badge` (sau cu orice slot de iconiță: `.kpi-icon`, `.list-row-icon`,
   `.timeline-marker`, `.avatar`). Stau după componente, deci câștigă la aceeași specificitate. */
.tone-mint     { background: var(--mint-bg);     color: var(--mint-fg) }
.tone-peach    { background: var(--peach-bg);    color: var(--peach-fg) }
.tone-lavender { background: var(--lavender-bg); color: var(--lavender-fg) }
.tone-butter   { background: var(--butter-bg);   color: var(--butter-fg) }
.tone-sky      { background: var(--sky-bg);      color: var(--sky-fg) }
.tone-rose     { background: var(--rose-bg);     color: var(--rose-fg) }

/* ══ Hover (§10 convenție: doar pe dispozitive cu mouse) ══
   Cardurile clickabile se „adâncesc" cu 4 % de cerneală: --subtle ar fi exact culoarea
   canvasului (cardul ar dispărea în fundal). Tab-urile transparente stau pe canvas, deci
   hover-ul lor e --sunken. */
@media (hover: hover) {
  .card.is-clickable:hover { background: color-mix(in srgb, var(--surface), var(--ink-1) 4%) }
  .kpi.is-clickable:hover  { background: color-mix(in srgb, var(--surface), var(--ink-1) 4%) }
  .tab-item:not(.active):hover { color: var(--ink-1); background: var(--sunken) }
  .tab-item.active:hover { background: color-mix(in srgb, var(--accent-soft), var(--accent) 12%) }
  .dropdown-item:hover { background: var(--subtle) }
  .dropdown-item:hover .material-icons { color: var(--ink-2) }
  .dropdown-item.danger:hover,
  .dropdown-item.is-danger:hover { background: var(--danger-soft) }
  .dropdown-item.danger:hover .material-icons,
  .dropdown-item.is-danger:hover .material-icons { color: var(--danger-ink) }
  .toast-close:hover { opacity: 1 }
  .toast-action:hover { background: color-mix(in srgb, var(--accent-soft), var(--accent) 16%) }
  .info-tip:hover { color: var(--ink-2) }
  .list-row.is-clickable:hover { background: var(--subtle) }
  .list-row.is-clickable:hover::before,
  .list-row.is-clickable:hover + .list-row::before { opacity: 0 }
}

/* ══ Extensie zonă de atingere (§5.2) ══ */
@media (pointer: coarse) {
  .info-tip, .toast-close { position: relative }
  .info-tip::after,
  .toast-close::after { content: ''; position: absolute; inset: calc((100% - var(--touch)) / 2) }
}

/* ══ Desktop ≥ 1024 ══ */
@media (min-width: 1024px) {
  .grid-2, .grid-3, .grid-auto { gap: var(--sp-5) }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .kpi-grid { gap: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .kpi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .kpi-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
}

/* ══ Mobil ≤ 639 ══ */
@media (max-width: 639px) {
  /* Card-uri: padding simetric 16 */
  .card-header { min-height: 56px; padding: var(--sp-2) var(--sp-4) }
  .card-footer { padding: var(--sp-3) var(--sp-4) }
  .card-body { padding: var(--sp-4) }
  .card-header + .card-body { padding-top: 0 }
  .card-body--flush, .card-body.no-pad, .card--section .card-body { padding: 0 }
  .grid-2, .grid-3, .grid-auto { gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) }

  /* KPI: o coloană de dale-rând */
  .kpi-grid, .kpi-grid--2, .kpi-grid--3, .kpi-grid--6 { gap: var(--sp-2); grid-template-columns: minmax(0, 1fr) }
  /* Coloana 3 e minmax(0,auto): suma niciodată nu se rupe pe două rânduri,
     iar metaul cedează lățime și își trunchiază subtitlul (§4.3, §10.14). */
  .kpi {
    grid-template-columns: var(--ctl-sm) 1fr minmax(0, auto);
    grid-template-areas: "icon label meta" "icon value meta";
    align-items: center; padding: var(--sp-4); min-height: 72px; row-gap: var(--sp-half);
  }
  .kpi-icon { align-self: center }
  /* Suma își ține lățimea întreagă (min-width: max-content): metaul (coloana
     minmax(0,auto)) cedează și își trunchiază subtitlul, nu suma desenată peste el. */
  .kpi-value { font-size: var(--fs-22); line-height: 28px; white-space: nowrap; min-width: max-content }
  .kpi-meta { text-align: right; flex-direction: column; align-items: flex-end; gap: var(--sp-half); min-width: 0 }
  .kpi-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

  /* Tab-uri: derulare de la margine la margine; când mai e conținut la dreapta, marginea
     se estompează printr-o MASCĂ (nu o pată de culoare): merge pe orice fundal, în ambele teme. */
  .tabs { margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4) }
  .tabs.has-overflow-right {
    -webkit-mask-image: linear-gradient(90deg, var(--ink-1) calc(100% - var(--sp-8)), transparent);
    mask-image: linear-gradient(90deg, var(--ink-1) calc(100% - var(--sp-8)), transparent);
  }

  /* Modal = bottom sheet: raza 32 doar sus, mânerul deasupra antetului */
  .modal-backdrop { align-items: flex-end; padding: 0 }
  .modal {
    max-width: none; max-height: min(92dvh, var(--sheet-max, 92dvh));
    border-radius: var(--r-4) var(--r-4) 0 0;
    animation: afd-sheet-in var(--dur-5) var(--ease-decel);
  }
  .modal > .sheet-grabber { display: flex }
  .modal-backdrop.is-closing .modal,
  .modal.is-closing { animation: afd-sheet-out var(--dur-2) var(--ease-accel) forwards }
  .modal-header { min-height: 56px; padding: 0 var(--sp-3) var(--sp-2) var(--sp-5) }
  .modal-body { padding: var(--sp-3) var(--sp-5) }
  .modal-body:last-child, .modal-body:has(+ .modal-footer[hidden]) { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)) }
  .modal-footer { flex-wrap: wrap; padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)) }
  .modal-footer .btn { flex: 1 1 0; height: var(--ctl-lg); padding: 0 var(--sp-5); font-size: var(--fs-14) }
  .modal-footer-left { flex: 1 0 100%; order: -1; margin-right: 0 }
  .modal-footer-left .btn { width: 100% }
  /* -lg / -xl și vizualizatorul de document devin ecran complet, fără mâner */
  .modal-lg, .modal-xl, .modal-viewer, .modal--document, .modal--receipt { height: 100dvh; max-height: 100dvh; border-radius: 0 }
  .modal-lg > .sheet-grabber, .modal-xl > .sheet-grabber,
  .modal-viewer > .sheet-grabber, .modal--document > .sheet-grabber, .modal--receipt > .sheet-grabber { display: none }
  .modal-lg > .modal-header, .modal-xl > .modal-header,
  .modal-viewer > .modal-header, .modal--document > .modal-header, .modal--receipt > .modal-header { padding-top: var(--sp-2) }

  /* Dropdown */
  .dropdown-menu { max-width: calc(100vw - 32px) }
  .dropdown-menu.is-sheet {
    position: fixed; inset: auto 0 0 0; min-width: 0; max-width: none;
    padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
    border-width: var(--border-fine) 0 0; border-radius: var(--r-4) var(--r-4) 0 0; z-index: var(--z-modal);
    animation: afd-sheet-in var(--dur-5) var(--ease-decel);
  }
  .dropdown-menu.is-sheet.is-closing { animation: afd-sheet-out var(--dur-2) var(--ease-accel) forwards }
  .dropdown-menu.is-sheet .dropdown-item { height: var(--ctl-md) }
  .dropdown-menu.is-sheet, .ms > .dropdown-menu.is-sheet { max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain }
  /* Mâner real și pentru foile de meniu (cont, overflow, multi-select) — rămâne
     vizibil deasupra listei derulabile, deci e lipicios. */
  .dropdown-menu.is-sheet > .sheet-grabber {
    display: flex; position: sticky; top: calc(var(--sp-2) * -1); z-index: 1;
    background: var(--surface);
  }

  /* Toast */
  .toast-stack { left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)) }
  .toast { width: auto }
  /* Cât e deschis un sheet, toast-ul stă chiar DEASUPRA subsolului lui (--toast-lift =
     înălțimea măsurată de toast.js): jos ar acoperi „Salvează" / „Anulează", sus ar
     acoperi titlul și „Închide" ale sheet-ului pe ecran complet. Fără subsol: jos. */
  body.is-modal-open .toast-stack { bottom: calc(var(--toast-lift, var(--sp-2) + env(safe-area-inset-bottom)) + var(--sp-2)) }

  /* Liste, detalii, pași, chip-uri */
  .detail-grid, .detail-grid--3 { grid-template-columns: 1fr; gap: var(--sp-4) }
  .list-row { padding: var(--sp-2) }
  .list-row + .list-row::before { left: var(--sp-2); right: var(--sp-2) }
  .card-body--flush .timeline { padding: var(--sp-1) var(--sp-4) }
  .summary-row { padding: 0 var(--sp-4) }
  .step:not(.is-active) { padding-right: 0; gap: 0 }
  .step:not(.is-active) .step-label { display: none }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4) }
  .chip-row::-webkit-scrollbar { display: none }
}