/* ═══ FIȘIER PARTAJAT (afood-shared/css/base.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; corner-shape: var(--corner); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; }
hr { height: 0; border: 0; border-top: 1px solid var(--line-1); }

/* ── Tipografie de bază (§4.1) ── */
body {
  font: var(--fw-body) var(--fs-14)/20px var(--font-ui);
  color: var(--ink-1);
  background: var(--canvas);
  font-variant-numeric: tabular-nums;               /* cifre tabulare global (§4.3) */
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Titlurile nu sunt stilizate de tag; stilul vine din clase (§4.3) */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; }
a { color: var(--accent-onsoft); font-weight: var(--fw-strong); text-decoration: none;
    transition: color var(--dur-3) var(--ease-emph); }
@media (hover: hover) { a:hover { text-decoration: underline; } }

/* ── Utilitare de text ── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.caption { font-size: var(--fs-13); line-height: 18px; font-weight: var(--fw-body); color: var(--ink-3); }
.text-sm { font-size: var(--fs-13); line-height: 18px; }
.fw-medium { font-weight: var(--fw-strong); }
.text-right { text-align: right; }
/* Plăcuțe, IBAN, ID-uri, versiuni: tot Nunito, apăsat, cu cifre tabulare (§4.2) */
.code, .plate, .iban, .version {
  font-family: var(--font-mono); font-size: var(--fs-13); line-height: 18px; font-weight: var(--fw-strong);
  font-variant-numeric: tabular-nums;
}
/* Numere: .num = valoare aliniată la dreapta, .tnum = doar cifre tabulare */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.is-negative { color: var(--danger-ink); }
.is-positive { color: var(--success-ink); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hidden, [hidden] { display: none !important; }

/* ── Iconuri (§5.6 + §12) ── */
.material-icons {
  font-family: 'Material Symbols Rounded';
  font-size: var(--icon-20);
  width: 1em; height: 1em; line-height: 1; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; font-style: normal; letter-spacing: normal; white-space: nowrap; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  visibility: hidden;                               /* poartă anti-FOUT; shell.js pune .icons-ready */
}
html.icons-ready .material-icons { visibility: visible; }
.icon-16 { font-size: var(--icon-16); }
.icon-18 { font-size: var(--icon-18); }
.icon-24 { font-size: var(--icon-24); }
/* Plin (FILL 1) doar la stele de rating și la puncte */
.icon-filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
/* Rețeta obligatorie icon + text: o singură linie de centru (§5.6) */
.btn, .nav-item, .tab-item, .dropdown-item, .badge, .card-header-title, .chart-title, .form-label,
.section-title, .alert-banner, .empty-state-title, .kpi-label, .kpi-delta, .list-row, .toast,
.timeline-title, .dt-pagination-info { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }

/* ── Focus (§6.2) ── */
/* Niciun outline de browser, nicăieri: nici pe :focus simplu (click cu mouse-ul, sau
   .focus() din JS după un click — modal, drawer, meniu). Inelul de focus e DOAR --ring
   și apare DOAR la :focus-visible (navigare cu tastatura). */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring); }
/* Fără dreptunghiul albastru de „tap" pe care browserele mobile îl desenează implicit
   peste orice element atins: proprietatea se moștenește, deci un singur loc acoperă tot
   documentul. Feedbackul de apăsare rămâne cel din §6.3 (:active / :hover). */
html { -webkit-tap-highlight-color: transparent; }

/* ── Scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: var(--r-1); }

/* ── Loader (MorphLoader, §10.22) ──
   O singură formă în culoarea primară care trece prin ciclul de forme (stea cu 4 colțuri → 7 →
   triunghi rotunjit → 10 → ovală, 650 ms fiecare, curba emphasized) și se rotește lent.
   Înlocuiește spinner-ul circular; numele clasei rămâne `.spinner`. Formele vin din
   afoodbase/widgets/morph_loader.dart: r(θ) = (1 + a·cos nθ) / (1 + a). */
.spinner {
  display: inline-block; width: var(--icon-24); height: var(--icon-24); flex: 0 0 auto;
  background: var(--accent);
  animation: afd-morph 3250ms var(--ease-emph) infinite, afd-turn 1625ms linear infinite;
}
.spinner-lg { width: var(--sp-10); height: var(--sp-10); }
@keyframes afd-turn { to { rotate: 360deg; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes afd-morph {
  0% { clip-path: polygon(100.0% 50.0%,98.7% 56.4%,95.0% 62.0%,89.8% 66.5%,84.3% 69.8%,79.5% 72.6%,75.6% 75.6%,72.6% 79.5%,69.8% 84.3%,66.5% 89.8%,62.0% 95.0%,56.4% 98.7%,50.0% 100.0%,43.6% 98.7%,38.0% 95.0%,33.5% 89.8%,30.2% 84.3%,27.4% 79.5%,24.4% 75.6%,20.5% 72.6%,15.7% 69.8%,10.2% 66.5%,5.0% 62.0%,1.3% 56.4%,0.0% 50.0%,1.3% 43.6%,5.0% 38.0%,10.2% 33.5%,15.7% 30.2%,20.5% 27.4%,24.4% 24.4%,27.4% 20.5%,30.2% 15.7%,33.5% 10.2%,38.0% 5.0%,43.6% 1.3%,50.0% 0.0%,56.4% 1.3%,62.0% 5.0%,66.5% 10.2%,69.8% 15.7%,72.6% 20.5%,75.6% 24.4%,79.5% 27.4%,84.3% 30.2%,89.8% 33.5%,95.0% 38.0%,98.7% 43.6%); }
  20% { clip-path: polygon(100.0% 50.0%,98.0% 56.3%,93.3% 61.6%,88.9% 66.1%,86.6% 71.1%,86.0% 77.6%,84.5% 84.5%,80.4% 89.6%,74.0% 91.5%,66.9% 90.9%,60.8% 90.5%,55.6% 92.2%,50.0% 95.9%,43.6% 98.7%,37.1% 98.2%,31.8% 93.8%,28.1% 87.9%,24.6% 83.1%,19.6% 80.4%,13.2% 78.3%,7.2% 74.7%,4.1% 69.0%,4.7% 62.1%,7.0% 55.7%,8.3% 50.0%,7.0% 44.3%,4.7% 37.9%,4.1% 31.0%,7.2% 25.3%,13.2% 21.7%,19.6% 19.6%,24.6% 16.9%,28.1% 12.1%,31.8% 6.2%,37.1% 1.8%,43.6% 1.3%,50.0% 4.1%,55.6% 7.8%,60.8% 9.5%,66.9% 9.1%,74.0% 8.5%,80.4% 10.4%,84.5% 15.5%,86.0% 22.4%,86.6% 28.9%,88.9% 33.9%,93.3% 38.4%,98.0% 43.7%); }
  40% { clip-path: polygon(100.0% 50.0%,99.1% 56.5%,96.7% 62.5%,92.9% 67.8%,88.3% 72.1%,83.4% 75.6%,78.4% 78.4%,73.7% 80.9%,69.2% 83.3%,64.9% 86.0%,60.4% 88.8%,55.5% 91.7%,50.0% 94.2%,43.9% 96.1%,37.5% 96.7%,31.0% 95.8%,25.0% 93.3%,19.8% 89.3%,15.8% 84.2%,13.1% 78.3%,11.7% 72.1%,11.2% 66.1%,11.2% 60.4%,11.4% 55.1%,11.5% 50.0%,11.4% 44.9%,11.2% 39.6%,11.2% 33.9%,11.7% 27.9%,13.1% 21.7%,15.8% 15.8%,19.8% 10.7%,25.0% 6.7%,31.0% 4.2%,37.5% 3.3%,43.9% 3.9%,50.0% 5.8%,55.5% 8.3%,60.4% 11.2%,64.9% 14.0%,69.2% 16.7%,73.7% 19.1%,78.4% 21.6%,83.4% 24.4%,88.3% 27.9%,92.9% 32.2%,96.7% 37.5%,99.1% 43.5%); }
  60% { clip-path: polygon(100.0% 50.0%,97.5% 56.3%,93.2% 61.6%,91.7% 67.3%,92.1% 74.3%,89.6% 80.4%,83.4% 83.4%,77.1% 85.3%,72.9% 89.6%,68.8% 95.4%,62.8% 97.9%,56.1% 96.0%,50.0% 94.3%,43.9% 96.0%,37.2% 97.9%,31.2% 95.4%,27.1% 89.6%,22.9% 85.3%,16.6% 83.4%,10.4% 80.4%,7.9% 74.3%,8.3% 67.3%,6.8% 61.6%,2.5% 56.3%,0.0% 50.0%,2.5% 43.7%,6.8% 38.4%,8.3% 32.7%,7.9% 25.7%,10.4% 19.6%,16.6% 16.6%,22.9% 14.7%,27.1% 10.4%,31.2% 4.6%,37.2% 2.1%,43.9% 4.0%,50.0% 5.7%,56.1% 4.0%,62.8% 2.1%,68.8% 4.6%,72.9% 10.4%,77.1% 14.7%,83.4% 16.6%,89.6% 19.6%,92.1% 25.7%,91.7% 32.7%,93.2% 38.4%,97.5% 43.7%); }
  80% { clip-path: polygon(100.0% 50.0%,99.4% 56.5%,97.7% 62.8%,94.9% 68.6%,91.2% 73.8%,86.8% 78.2%,81.9% 81.9%,76.6% 84.7%,71.3% 86.9%,65.9% 88.4%,60.5% 89.4%,55.3% 89.9%,50.0% 90.1%,44.7% 89.9%,39.5% 89.4%,34.1% 88.4%,28.7% 86.9%,23.4% 84.7%,18.1% 81.9%,13.2% 78.2%,8.8% 73.8%,5.1% 68.6%,2.3% 62.8%,0.6% 56.5%,0.0% 50.0%,0.6% 43.5%,2.3% 37.2%,5.1% 31.4%,8.8% 26.2%,13.2% 21.8%,18.1% 18.1%,23.4% 15.3%,28.7% 13.1%,34.1% 11.6%,39.5% 10.6%,44.7% 10.1%,50.0% 9.9%,55.3% 10.1%,60.5% 10.6%,65.9% 11.6%,71.3% 13.1%,76.6% 15.3%,81.9% 18.1%,86.8% 21.8%,91.2% 26.2%,94.9% 31.4%,97.7% 37.2%,99.4% 43.5%); }
  100% { clip-path: polygon(100.0% 50.0%,98.7% 56.4%,95.0% 62.0%,89.8% 66.5%,84.3% 69.8%,79.5% 72.6%,75.6% 75.6%,72.6% 79.5%,69.8% 84.3%,66.5% 89.8%,62.0% 95.0%,56.4% 98.7%,50.0% 100.0%,43.6% 98.7%,38.0% 95.0%,33.5% 89.8%,30.2% 84.3%,27.4% 79.5%,24.4% 75.6%,20.5% 72.6%,15.7% 69.8%,10.2% 66.5%,5.0% 62.0%,1.3% 56.4%,0.0% 50.0%,1.3% 43.6%,5.0% 38.0%,10.2% 33.5%,15.7% 30.2%,20.5% 27.4%,24.4% 24.4%,27.4% 20.5%,30.2% 15.7%,33.5% 10.2%,38.0% 5.0%,43.6% 1.3%,50.0% 0.0%,56.4% 1.3%,62.0% 5.0%,66.5% 10.2%,69.8% 15.7%,72.6% 20.5%,75.6% 24.4%,79.5% 27.4%,84.3% 30.2%,89.8% 33.5%,95.0% 38.0%,98.7% 43.6%); }
}

/* ── Skeleton (§10.22) ── */
.skeleton {
  background: var(--surface-high); border-radius: var(--r-1); height: 14px;
  animation: pulse var(--dur-7) var(--ease-emph) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ── Stări goale / de eroare (§10.22) ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-6); min-height: 240px;
}
.empty-state-icon, .dt-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctl-xl); height: var(--ctl-xl); border-radius: var(--r-3);
  background: var(--tertiary); color: var(--accent-onsoft);
}
/* 40 px = mărimea iconului de empty state (§5.3); nu are token propriu */
.empty-state-icon > .material-icons, .dt-empty-icon > .material-icons { font-size: 40px; }
.empty-state-title { font-size: var(--fs-18); line-height: 24px; font-weight: var(--fw-title); letter-spacing: var(--ls-title); color: var(--ink-1); }
.empty-state-text { font-size: var(--fs-14); line-height: 20px; color: var(--ink-3); max-width: 40ch; }
.empty-state .btn { margin-top: var(--sp-2); }
.empty-state.is-error .empty-state-icon { background: var(--danger-soft); color: var(--danger-ink); }
/* Variantă inline, în corpul unui card: fără cerc */
.empty-state--inline { padding: var(--sp-6); min-height: 120px; }
.empty-state--inline .empty-state-icon { width: auto; height: auto; background: none; border-radius: 0; }
.empty-state--inline .empty-state-icon > .material-icons { font-size: var(--icon-24); }

/* ── Overlay de încărcare (§10.22); se comută cu [hidden], nu cu style.display ── */
.loading-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--overlay-surface); border-radius: inherit; z-index: 5;
}

/* ── Print: rămâne doar conținutul ── */
@media print {
  .rail, .topbar, .toolbar, .dt-pagination, .scrim, .toast-stack, .modal-backdrop { display: none; }
  body { background: var(--surface); }
  .main { margin-left: 0; padding-top: 0; }
  .page { max-width: none; padding: 0; animation: none; }
  .card, .kpi { box-shadow: none; border: 1px solid var(--line-1); break-inside: avoid; }
}

/* ── Mișcare redusă (§6.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}