/*
 * Stiluri specifice paginii /excel-in-efactura (Faza 14B.4/14B.9 - vezi
 * public/pages/excel-in-efactura.php). Tokenii de
 * culoare/spatiere/tipografie sunt definiti o singura data in
 * public/assets/site.css, incarcat inaintea acestui fisier - nu se
 * redefinesc aici. Componentele reutilizate (.drop-zone, .status-text,
 * .link-button, .xlex-eyebrow-echivalent) sunt duplicate intentionat aici
 * cu prefix propriu `exi-`, exact ca fiecare pagina-unealta existenta
 * (viewer.css/xml-in-excel.css) - nu exista un fisier CSS global comun
 * pentru ele.
 */

.exi-hero {
  padding: var(--space-5) 0 var(--space-4);
}

.exi-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.exi-hero h1 {
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

.exi-hero-lead {
  color: var(--color-text-secondary);
  max-width: 70ch;
  margin: 0 0 var(--space-4);
}

/* Faza 4B.1.1: separare vizuala de randul de CTA-uri (margin-top) - inainte,
 * banner-ul verde se lipea direct de butoane (0 spatiu), parand un
 * dreptunghi cazut acolo, nu un mesaj de incredere asociat lor. Latime
 * redusa (70ch -> 42rem) pentru un aspect de "callout" compact, nu de
 * bloc lat de text - textul ramane STRICT neschimbat (§30). */
.exi-hero .state-banner {
  margin: var(--space-4) 0 0;
  max-width: 42rem;
}

/* ---- Faza 4B.1: hero split (copie + ilustratie decorativa) ----
 * Adaptat dupa `.hero-inner` (public/assets/home.css) - grid 2 coloane pe
 * desktop, o coloana pe ecrane inguste (copia deasupra ilustratiei, ordine
 * naturala din DOM, fara `order`). Prag de 1100px (nu 900px ca pe
 * homepage) ales dupa precedentul deja documentat in xml-in-excel.css
 * (Faza 27, `.xlex-transform-visual`): o ilustratie cu mai multe "cutii"
 * alaturate are nevoie de mai mult spatiu per coloana decat un mockup
 * simplu inainte sa devina lizibila pe doua coloane.
 */

/* Faza 4B.1.1: gap redus de la --space-8 (64px) la --space-6 (32px) - la
 * 64px, cele doua coloane se citeau ca doua blocuri separate, nu ca o
 * singura compozitie (§4/§7). */
.exi-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-6);
  align-items: center;
}

.exi-hero-copy {
  min-width: 0;
}

.exi-hero-visual-wrap {
  min-width: 0;
  display: flex;
  justify-content: center;
}

@media (max-width: 1100px) {
  .exi-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .exi-hero-visual-wrap {
    margin-top: var(--space-2);
  }
}

/* ---- Ilustratie hero: Excel -> mapare -> facturi grupate -> XML ----
 * Adaptata dupa familia `.xlex-transform-*` (xml-in-excel.css) - ACEEASI
 * gramatica vizuala (activare sursa/destinatie, cip-uri, nod cu puls,
 * conector cu flux), dar in sens invers. Stare de repaus (fara JS/
 * animatie): toate cele 3 etape sunt deja vizibile simultan - intelegerea
 * nu depinde de miscare. Pur decorativa (`aria-hidden` in PHP), date
 * STRICT fictive (aceleasi deja folosite mai jos, in sectiunea "Mai multe
 * facturi dintr-un singur Excel").
 */

/* Faza 4B.1.1: max-width crescut de la 30rem la 34rem - ilustratia parea
 * mica/detasata fata de coloana de text (§6); coloana dreapta a grid-ului
 * are oricum spatiu suficient dupa reducerea gap-ului de mai sus. */
.exi-hero-visual {
  width: 100%;
  max-width: 34rem;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.exi-hero-stage {
  flex: 1 1 0;
  min-width: 0;
}

.exi-hero-stage-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  text-align: center;
}

/* Cutia "Excel" (sursa) - bordura usor albastruie, acelasi ton ca
   `.xlex-xml-mock` (sursa XML pe xml-in-excel.css), ca "sursa" sa insemne
   vizual acelasi lucru pe ambele pagini-surori. */
/* Faza 4B.1.1: dimensiuni usor crescute (padding/font) fata de Faza 4B.1 -
 * coloana dreapta avea spatiu neutilizat in jurul unei ilustratii care parea
 * mica (§6); crestere moderata, NU etichete mai mici - opusul. */
.exi-hero-rows {
  --exi-hero-rest-border: rgba(59, 130, 246, 0.32);
  --exi-hero-activate-border: rgba(96, 165, 250, 0.85);
  --exi-hero-activate-glow: rgba(59, 130, 246, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--exi-hero-rest-border);
  border-radius: var(--radius-md);
}

.exi-hero-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: 3px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
}

.exi-hero-row-badge {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.66rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.exi-hero-row-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cutia "e-Factura" (destinatie) - bordura usor verzuie, acelasi ton ca
   `.xlex-excel-mock` (destinatia Excel pe xml-in-excel.css). */
.exi-hero-invoices {
  --exi-hero-rest-border: rgba(74, 222, 128, 0.3);
  --exi-hero-activate-border: rgba(74, 222, 128, 0.85);
  --exi-hero-activate-glow: rgba(74, 222, 128, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--exi-hero-rest-border);
  border-radius: var(--radius-md);
}

.exi-hero-invoice-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: 0.78rem;
  font-weight: 600;
}

.exi-hero-invoice-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-accent);
}

.exi-hero-invoice-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exi-hero-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: var(--space-2) 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-success);
}

.exi-hero-done svg {
  flex-shrink: 0;
}

/* Activarea celor doua "cutii" (sursa/destinatie) - reutilizeaza STRICT
   tiparul `xlex-mock-activate` (xml-in-excel.css), redenumit `exi-` pentru
   ca traieste intr-un alt fisier CSS. */
@media (prefers-reduced-motion: no-preference) {
  .exi-hero-rows,
  .exi-hero-invoices {
    animation: exi-hero-mock-activate 800ms ease-out backwards;
  }
  .exi-hero-rows {
    animation-delay: 0ms;
  }
  .exi-hero-invoices {
    animation-delay: 1250ms;
  }
}

@keyframes exi-hero-mock-activate {
  0%, 100% {
    border-color: var(--exi-hero-rest-border);
    box-shadow: 0 0 0 0 transparent;
  }
  45% {
    border-color: var(--exi-hero-activate-border);
    box-shadow: 0 0 0 4px var(--exi-hero-activate-glow);
  }
}

/* "Recunoasterea coloanelor" (randurile Excel se evidentiaza pe rand),
   apoi randurile "consumate" de gruparea in factura se estompeaza chiar
   inainte ca respectivul card de factura sa apara (highlight -> collapse/
   fade -> invoice cards appear). Comunica explicit DOAR ca ACESTE randuri
   au fost asociate, nu ca orice antet e recunoscut automat - nuanta
   completa ramane in text/FAQ. Delay-urile de colaps (1250ms/1550ms) sunt
   distincte per grup, nu per rand individual - cele doua randuri ale
   facturii 1001 dispar impreuna, exact cand apare cardul ei. */
@media (prefers-reduced-motion: no-preference) {
  .exi-hero-row:nth-child(1) {
    animation: exi-hero-line-flash 700ms ease-out 250ms backwards,
               exi-hero-row-collapse 500ms ease-in 1250ms forwards;
  }
  .exi-hero-row:nth-child(2) {
    animation: exi-hero-line-flash 700ms ease-out 450ms backwards,
               exi-hero-row-collapse 500ms ease-in 1250ms forwards;
  }
  .exi-hero-row:nth-child(3) {
    animation: exi-hero-line-flash 700ms ease-out 650ms backwards,
               exi-hero-row-collapse 500ms ease-in 1550ms forwards;
  }
}

@keyframes exi-hero-line-flash {
  0%, 100% { background: transparent; }
  35% { background: var(--color-accent-soft); }
}

@keyframes exi-hero-row-collapse {
  to { opacity: 0.35; }
}

/* Zona centrala: nod + cipuri, identica structural cu
   `.xlex-transform-middle`/`.xlex-transform-chips` (xml-in-excel.css). */
.exi-hero-middle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.exi-hero-middle::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.exi-hero-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.exi-hero-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 1;
}

.exi-hero-chip--blue {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.exi-hero-chip--violet {
  background: rgba(139, 92, 246, 0.16);
  color: #8b5cf6;
}

/* Cipurile de mapare + cardurile de factura + linia finala "Gata pentru
   descarcare" reutilizeaza STRICT acelasi keyframe de aparitie
   (`exi-hero-chip-in`) - un singur tipar vizual de "aparitie" pe toata
   ilustratia (§47 din specificatia Fazei 4B.1). */
@media (prefers-reduced-motion: no-preference) {
  .exi-hero-chip {
    opacity: 0;
    transform: translateY(4px);
    animation: exi-hero-chip-in 450ms ease-out forwards;
  }
  .exi-hero-chip:nth-child(1) { animation-delay: 400ms; }
  .exi-hero-chip:nth-child(2) { animation-delay: 600ms; }
  .exi-hero-chip:nth-child(3) { animation-delay: 800ms; }
  .exi-hero-chip:nth-child(4) { animation-delay: 1000ms; }

  .exi-hero-invoice-card {
    opacity: 0;
    transform: translateY(4px);
    animation: exi-hero-chip-in 450ms ease-out forwards;
  }
  .exi-hero-invoice-card[data-group="1"] { animation-delay: 1450ms; }
  .exi-hero-invoice-card[data-group="2"] { animation-delay: 1750ms; }

  .exi-hero-done {
    opacity: 0;
    transform: translateY(4px);
    animation: exi-hero-chip-in 450ms ease-out 2300ms forwards;
  }
}

@keyframes exi-hero-chip-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Conector + nod - identic tiparul `.xlex-transform-connector`/
   `.xlex-transform-node`/`.xlex-transform-pulse` (xml-in-excel.css):
   `transform`-only (fara `left`, cost de randare mai mic), variabile
   pentru traseul pulsului ca sa difere intre desktop si mobil fara sa
   duplice keyframe-ul. Singurele doua animatii continue/infinite ale
   ilustratiei (puls nod + flux conector), explicit permise dupa secventa
   initiala (§15 din specificatia Fazei 4B.1). */
.exi-hero-connector {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 2.6rem;
}

.exi-hero-connector::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-border);
  transform: translateY(-50%);
}

.exi-hero-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent);
}

.exi-hero-node svg {
  width: 1.3rem;
  height: 1.3rem;
}

@media (prefers-reduced-motion: no-preference) {
  .exi-hero-node {
    animation: exi-hero-node-pulse 2.8s ease-in-out infinite;
  }
}

@keyframes exi-hero-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-soft); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.exi-hero-pulse {
  --exi-hero-flow-start: 0.3rem;
  --exi-hero-flow-end: 2.4rem;
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transform: translate(var(--exi-hero-flow-start), -50%);
}

@media (prefers-reduced-motion: no-preference) {
  .exi-hero-pulse {
    animation: exi-hero-flow 3.2s ease-in-out infinite;
  }
}

@keyframes exi-hero-flow {
  0%, 100% { opacity: 0; transform: translate(var(--exi-hero-flow-start), -50%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  95% { opacity: 0; transform: translate(var(--exi-hero-flow-end), -50%); }
}

@media (max-width: 640px) {
  .exi-hero-visual {
    flex-direction: column;
    align-items: stretch;
  }
  .exi-hero-connector {
    width: 2.2rem;
    height: 2.6rem;
    align-self: center;
    transform: rotate(90deg);
  }
  .exi-hero-pulse {
    --exi-hero-flow-start: 0.3rem;
    --exi-hero-flow-end: 1.6rem;
  }
}

/* ---- Zona de upload (identica structural cu viewer.css/xml-in-excel.css) ---- */

/* Faza 4B.1.1: fara margin-bottom propriu - spatierea fata de urmatorul
 * copil vine STRICT din `gap`-ul parintelui (`.exi-workspace-shell`), nu
 * din amandoua (bug real gasit la audit: cele doua se adunau, dublând
 * spatiul vizibil sub zona de upload). */
.upload-section {
  margin: 0;
}

.drop-zone {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--color-surface);
  transition: border-color var(--motion-base) ease, background-color var(--motion-base) ease;
}

.drop-zone--active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.drop-zone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.drop-zone-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.drop-zone-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.drop-zone-or {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}

label[for="file-input"] {
  margin: 0 auto;
}

.drop-zone-hint {
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin: var(--space-3) 0 0;
}

.drop-zone-privacy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: 500;
  margin: var(--space-2) 0 0;
}

.drop-zone-sample {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  margin: var(--space-3) 0 0;
}

.status-text {
  font-size: var(--text-sm);
  color: var(--color-muted);
  min-height: 1.2em;
  margin-top: var(--space-2);
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
  color: var(--color-accent-hover);
}

/* ---- Structura generala ---- */

/* Faza 4B.1.1 (polish desktop): gap redus de la --space-5 la --space-4 -
 * combinat cu eliminarea marginii redundante de pe `.upload-section` (mai
 * jos), care se aduna STRICT peste acest gap (gap-ul flex nu absoarbe
 * marginile copiilor) - inainte de fix, spatiul real dintre zona de upload
 * si starea goala era gap+margine (--space-5 + --space-5 = 48px), nu
 * --space-5 (24px) cum ar parea din citirea unei singure reguli. */
.exi-workspace-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

/* Faza 4B.1.1: `.ds-empty-state` (site.css) foloseste padding generos
 * (--space-7 --space-5 = 48px/24px), gandit pentru starea goala a altor
 * unelte - pe /excel-in-efactura, insotit de zona de upload deja mare
 * deasupra, acest padding facea ca textul-ajutator sa para "plutitor",
 * intr-un gol vizual mare (§10). Override STRICT pe ID-ul paginii, NU pe
 * clasa - `.ds-empty-state` ramane neschimbata pentru viewer.php/
 * xml-in-excel.php, care nu au raportat aceeasi problema. */
#exi-empty-state {
  padding: var(--space-5) var(--space-4);
}

/* Faza 14B.9 (Phase 1, §50, gasit prin revizuirea capturii de ecran): identic
 * tiparul deja documentat in site.css (`.button[hidden]`/`.ds-empty-state[hidden]`/
 * `.state-banner[hidden]`) - `display: flex` de mai sus castiga in fata
 * `[hidden] { display: none }` (origine browser) la specificitate egala,
 * prin ordinea de sursa - fara aceasta regula, `#exi-mapping-section`/
 * `#exi-preview-section` ramaneau vizibile chiar cand `.hidden` era setat
 * true de render() (bug real, confirmat vizual, nu doar teoretic - butonul
 * "Previzualizează facturile" aparea inainte de incarcarea vreunui fisier). */
.exi-section[hidden] {
  display: none;
}

.exi-section h2 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.exi-table-note {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

/* ---- Tabele (previzualizare brută, mapare, linii de factură) ---- */

.exi-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.exi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.exi-table th,
.exi-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.exi-table tbody tr:last-child td {
  border-bottom: none;
}

.exi-table thead th {
  background: var(--color-surface-alt);
  font-weight: 600;
  position: sticky;
  top: 0;
}

.exi-table--preview td {
  color: var(--color-text-secondary);
}

.exi-table--mapping td {
  white-space: normal;
}

.exi-source-header {
  font-weight: 500;
}

.exi-table--mapping select {
  min-width: 14rem;
  max-width: 100%;
}

/* Faza 14B.9, Phase 1.1 §8: prioritizare vizuala a randurilor care necesita
 * atentie - NU doar culoare (pastila de status ramane text real, vezi §24) -
 * ordinea randurilor NU se schimba, doar accentul vizual. */
.exi-mapping-row--attention {
  background: var(--color-warning-bg);
}

.exi-mapping-row--attention select {
  border-color: var(--color-warning-border);
}

/* ---- Mapare - disclosure progresiv (Faza 14B.9, Phase 1.1) ----
 * Banner de stare COMPACT (§15 - "evita cutii mari de succes"), separat de
 * <details> (nativ, tastatura/focus/aria-expanded implicite din HTML - §7).
 * Textul banner-ului se actualizeaza live (updateMappingStatusDisplay()) -
 * `details.open` insusi NU e niciodata atins programatic dupa randarea
 * initiala (§9) - doar clasa --ok/--warning si textul se schimba.
 */

.exi-mapping-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 0 0 var(--space-3);
}

.exi-mapping-status--ok {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.exi-mapping-status--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.exi-mapping-status-headline {
  margin: 0;
  font-weight: 600;
}

.exi-mapping-status-detail {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* <details> nativ - stilizat sa arate intentionat, nu ca un element brut
 * de browser (identic conventia deja folosita pentru `.faq-item summary`). */
.exi-mapping-details > summary,
.exi-defaults-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-accent);
  padding: var(--space-2) 0;
  list-style: revert;
}

.exi-mapping-details > summary:hover,
.exi-defaults-details > summary:hover,
.exi-mapping-details > summary:focus-visible,
.exi-defaults-details > summary:focus-visible {
  color: var(--color-accent-hover);
}

.exi-mapping-details[open] > summary,
.exi-defaults-details[open] > summary {
  margin-bottom: var(--space-2);
}

/* ---- Mapare - transformare responsive (Faza 14B.9, Phase 1.1 §12) ----
 * ACEEASI structura semantica de tabel (niciun randor secundar de mapare -
 * §12: "Reuse the same DOM/state... prefer CSS responsive transformation") -
 * doar restructurata vizual ca un card per rand sub 640px, identic tehnica
 * consacrata "table -> block" (fara `content: attr()` generat prin CSS -
 * fiecare `<td>` are deja text real, vizibil, in DOM: antetul sursa e deja
 * `.exi-source-header`, deci nu e nevoie de o eticheta suplimentara).
 */
@media (max-width: 640px) {
  .exi-table--mapping,
  .exi-table--mapping tbody,
  .exi-table--mapping tr,
  .exi-table--mapping td {
    display: block;
    width: 100%;
  }

  .exi-table--mapping thead {
    display: none;
  }

  .exi-table--mapping tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: 0 0 var(--space-3);
  }

  .exi-table--mapping tr:last-child {
    margin-bottom: 0;
  }

  .exi-table--mapping td {
    border-bottom: none;
    padding: var(--space-1) 0;
  }

  .exi-source-header {
    display: block;
    font-size: var(--text-base);
    margin: 0 0 var(--space-2);
  }

  .exi-table--mapping select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .exi-table--mapping td[data-cell="status"] {
    padding-top: var(--space-2);
  }
}

/* ---- Selecție foaie ---- */

.exi-sheet-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.exi-sheet-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Valori implicite ---- */

.exi-defaults-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.exi-default-row-hint {
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin: var(--space-1) 0 0;
  min-height: 1em;
}

.exi-default-row--disabled label {
  color: var(--color-muted);
}

/* ---- Statistici previzualizare ---- */

.exi-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0 0 var(--space-4);
}

.exi-stat dt {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0 0 var(--space-1);
}

.exi-stat dd {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* ---- Listă facturi (pregătite / blocate) ---- */

.exi-invoice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.exi-invoice {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}

.exi-invoice--blocked {
  border-color: var(--color-danger-border, var(--color-border));
}

.exi-invoice summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: 600;
}

.exi-invoice-meta {
  font-weight: 400;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.exi-invoice-body {
  margin-top: var(--space-3);
}

.exi-invoice-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.exi-invoice-fields dt {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0 0 var(--space-1);
}

.exi-invoice-fields dd {
  margin: 0;
  font-size: var(--text-sm);
}

/* ---- Panou de probleme ---- */

.exi-issue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
}

.exi-issue-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.exi-issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.exi-issue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.exi-issue-message {
  flex: 1 1 20rem;
}

.exi-issue-location {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.exi-closing-message {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}

/* ---- Generare (Faza 14B.6) ---- */

.exi-generate-section h2 {
  margin: 0 0 var(--space-2);
}

.exi-generate-section .button-row {
  margin: var(--space-3) 0;
}

.exi-generate-section .state-banner {
  align-items: center;
}

/* ---- Centrul de acțiuni post-generare (Faza 2B) ----
 * Înlocuiește fosta listă plată de rezultat + secțiunea separată de
 * Validare (Faza 14B.7): o factură generată cu succes devine un card cu
 * ierarhie de acțiuni (primară/secundară/terțiară, §8 din specificație),
 * nu cinci butoane egale.
 */

.exi-action-center h2 {
  margin: 0 0 var(--space-3);
}

.exi-action-batch-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.exi-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.exi-action-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}

.exi-action-card--blocked {
  border-color: var(--color-danger-border, var(--color-border));
}

.exi-action-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.exi-action-card-header .exi-invoice-number {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.exi-action-validation-status {
  margin-bottom: var(--space-3);
}

.exi-action-validation {
  margin-top: var(--space-2);
}

.exi-action-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.exi-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.exi-action-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.exi-more-actions {
  position: relative;
}

.exi-more-actions > summary {
  cursor: pointer;
  color: var(--color-accent);
  list-style: revert;
  padding: var(--space-2) 0;
}

.exi-more-actions-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Sub 640px (identic pragul deja stabilit de mapare, Phase 1.1): acțiunile
 * secundare devin o grilă de 2 coloane doar dacă etichetele românești
 * încap confortabil - verificat real în browser la 360/390/768/1440px
 * (Faza 2B §26); sub 380px, se stivuiesc complet pentru a evita text tăiat. */
@media (max-width: 640px) {
  .exi-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .exi-action-row > .exi-action-primary {
    width: 100%;
  }

  .exi-action-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .exi-action-secondary .button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .exi-action-secondary {
    display: flex;
    flex-direction: column;
  }

  .exi-action-secondary .button {
    width: 100%;
  }
}

/* ---- Vizualizare in-page (Faza 2B §11/§12) - reutilizează STRICT
 * dialogul `.invoice-detail-dialog` deja stilizat în `viewer.css` (încărcat
 * pe această pagină - vezi excel-in-efactura.php) - niciun stil nou aici. */

/* ---- Continut de lansare publica (Faza 14B.9) ----
 * Duplicat intentionat, cu prefix propriu `exi-`, din blocurile
 * `.xlex-privacy*`/`.xlex-cross-sell*`/`.xlex-faq-grid` (xml-in-excel.css) -
 * identic conventia deja documentata la inceputul acestui fisier, nu exista
 * un CSS global comun pentru aceste componente reutilizate.
 */

.exi-privacy {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.exi-privacy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.exi-privacy-icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

.exi-privacy p {
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}

.exi-privacy p.exi-privacy-link {
  margin-top: var(--space-4);
}

@media (max-width: 620px) {
  .exi-privacy {
    padding: var(--space-6) var(--space-4);
  }
}

/* ---- Faza 4B.1: vizual de confidentialitate (grid text + ilustratie) ----
 * `.exi-privacy` a trecut de la card centrat pe o coloana la grid text+
 * ilustratie, adaptat conceptual dupa `.vef-privacy-grid`/`.vef-privacy-flow`
 * (validator-efactura.css) - simplificat la doua randuri de cipuri (LOCAL /
 * ACTIUNE EXPLICITA), fara ramificatie grafica. Cele 3 categorii reale
 * raman distincte vizual: LOCAL (cipuri albastre), ACTIUNE EXPLICITA
 * SERVER (cipuri galbene, ton avertisment - nu e o eroare, doar "cere
 * atentie"), si autorizarea de generare (nota separata, cu bordura
 * punctata, NU amestecata cu cipurile de mai sus - ar sugera gresit ca
 * autorizarea trimite continut de factura).
 */

.exi-privacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-6);
  align-items: stretch;
}

.exi-privacy-grid .exi-privacy {
  max-width: none;
  margin: 0;
  text-align: left;
}

.exi-privacy-grid .exi-privacy p,
.exi-privacy-grid .exi-privacy p.exi-privacy-link {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.exi-privacy-flow {
  min-width: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}

.exi-privacy-flow-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.exi-privacy-flow-label--server {
  margin-top: var(--space-4);
}

.exi-privacy-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.exi-privacy-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  white-space: nowrap;
  opacity: 1;
}

.exi-privacy-chip--server {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.exi-privacy-flow-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* Aparitie usoara, pur decorativa (chip-urile sunt oricum vizibile
   permanent - starea de baza nu are `opacity: 0`) - reutilizeaza STRICT
   `exi-hero-chip-in`, deja definit mai sus. */
@media (prefers-reduced-motion: no-preference) {
  .exi-privacy-chip {
    opacity: 0;
    transform: translateY(4px);
    animation: exi-hero-chip-in 400ms ease-out forwards;
  }
  .exi-privacy-flow-chips .exi-privacy-chip:nth-child(1) { animation-delay: 100ms; }
  .exi-privacy-flow-chips .exi-privacy-chip:nth-child(2) { animation-delay: 180ms; }
  .exi-privacy-flow-chips .exi-privacy-chip:nth-child(3) { animation-delay: 260ms; }
  .exi-privacy-flow-chips .exi-privacy-chip:nth-child(4) { animation-delay: 340ms; }
  .exi-privacy-flow-chips .exi-privacy-chip:nth-child(5) { animation-delay: 420ms; }
  .exi-privacy-flow-chips .exi-privacy-chip:nth-child(6) { animation-delay: 500ms; }
  .exi-privacy-flow-chips--server .exi-privacy-chip:nth-child(1) { animation-delay: 580ms; }
  .exi-privacy-flow-chips--server .exi-privacy-chip:nth-child(2) { animation-delay: 660ms; }
}

@media (max-width: 900px) {
  .exi-privacy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.exi-cross-sell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.exi-cross-sell .icon-chip {
  margin-bottom: 0;
  flex-shrink: 0;
}

.exi-cross-sell-copy {
  min-width: 0;
  flex: 1 1 320px;
}

.exi-cross-sell-copy .section-title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.exi-cross-sell-copy p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  max-width: 60ch;
}

@media (max-width: 560px) {
  .exi-cross-sell {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: var(--space-5) var(--space-4);
  }
}

@media (min-width: 720px) {
  .exi-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-8);
  }
}

/* ---- Phase 1 (Faza 14B.9): trust strip, structura Excel, factori multipli,
 * generare/validare/ANAF, mapare - duplicat intentionat din `.xlex-trust-strip`
 * (xml-in-excel.css), identic conventia deja folosita mai sus in acest
 * fisier pentru `.exi-privacy*`/`.exi-cross-sell*`.
 */

/* Faza 4B.1.1: margine inferioara redusa de la --space-6 (32px) la
 * --space-5 (24px) - fasia de incredere sedea izolata, cu prea mult aer in
 * jur (§8); text/semantica neschimbate. */
.exi-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.exi-trust-strip span:not(.exi-trust-sep) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.exi-trust-strip svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-success);
  flex-shrink: 0;
}

.exi-trust-sep {
  color: var(--color-border-strong);
}

@media (max-width: 560px) {
  .exi-trust-strip {
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* ---- Mapare - rezumat de acoperire (Faza 14B.9) ---- */

.exi-mapping-coverage {
  margin: 0 0 var(--space-3);
}

/* ---- Structura Excel - tabel ilustrativ ---- */

.exi-format-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
}

.exi-format-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.exi-format-table th,
.exi-format-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.exi-format-table thead th {
  background: var(--color-surface-alt);
  font-weight: 600;
}

.exi-format-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Facturi multiple - exemplu vizual (Faza 14B.9) ---- */

.exi-grouping-example {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

/* Faza 4B.1: stagiul de intrare (randuri Excel brute), adaugat inaintea
   cardurilor deja existente - reutilizeaza STRICT `exi-hero-line-flash`/
   `exi-hero-row-collapse`/`exi-hero-chip-in` (definite mai sus, pentru
   ilustratia din hero) - aceeasi gramatica de "evidentiere -> colaps ->
   aparitie", niciun keyframe nou pentru acelasi efect. */
.exi-grouping-source {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.exi-grouping-stage-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.exi-grouping-raw-row {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* nth-child(2/3/4) pentru ca primul copil al `.exi-grouping-source` e
   eticheta "Rânduri Excel" - randurile 2-3 (factura 1001) colapseaza
   impreuna la 1150ms, randul 4 (factura 1002) la 1450ms, chiar inainte ca
   respectivul card de factura sa apara mai la dreapta. */
@media (prefers-reduced-motion: no-preference) {
  .exi-grouping-raw-row:nth-child(2) {
    animation: exi-hero-line-flash 700ms ease-out 250ms backwards,
               exi-hero-row-collapse 500ms ease-in 1150ms forwards;
  }
  .exi-grouping-raw-row:nth-child(3) {
    animation: exi-hero-line-flash 700ms ease-out 450ms backwards,
               exi-hero-row-collapse 500ms ease-in 1150ms forwards;
  }
  .exi-grouping-raw-row:nth-child(4) {
    animation: exi-hero-line-flash 700ms ease-out 650ms backwards,
               exi-hero-row-collapse 500ms ease-in 1450ms forwards;
  }

  .exi-grouping-invoice,
  .exi-grouping-file {
    opacity: 0;
    transform: translateY(4px);
    animation: exi-hero-chip-in 450ms ease-out forwards;
  }
  .exi-grouping-invoice[data-group="1"] { animation-delay: 1350ms; }
  .exi-grouping-invoice[data-group="2"] { animation-delay: 1650ms; }
  .exi-grouping-file[data-group="1"] { animation-delay: 2000ms; }
  .exi-grouping-file[data-group="2"] { animation-delay: 2300ms; }
}

.exi-grouping-rows,
.exi-grouping-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.exi-grouping-invoice {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}

.exi-grouping-invoice-title {
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.exi-grouping-invoice ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.exi-grouping-arrow {
  font-size: var(--text-xl);
  color: var(--color-muted);
  text-align: center;
}

.exi-grouping-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .exi-grouping-example {
    grid-template-columns: 1fr;
  }
  .exi-grouping-arrow {
    transform: rotate(90deg);
  }
}