/* ═══════════════════════════════════════════════════════════════════════════════
   CONTABO DESIGN SYSTEM — componente reutilizabile ale aplicației autentificate.

   `erp.css` descrie shell-ul și navigația. Acest fișier este sursa unică pentru
   suprafețe, controale, butoane, ajutor contextual, fluxuri de formular și
   dialoguri. Toate componentele consumă aceleași tokenuri și funcționează în
   aceeași ierarhie pe desktop și mobil.
   ═══════════════════════════════════════════════════════════════════════════════ */

body.erp {
  --ds-control-h: 40px;
  --ds-control-min-h: 36px;
  --ds-control-compact-h: 30px;
  --ds-touch-target: 44px;
  --ds-control-font: 14px;
  --ds-control-compact-font: 12px;
  --ds-radius-control: 9px;
  --ds-radius-card: 16px;
  --ds-space-card: 22px;
  --ds-focus: 3px solid color-mix(in srgb, var(--app-clay) 28%, transparent);
  --ds-shadow-card: 0 1px 2px rgba(42,36,27,.035), 0 8px 26px rgba(42,36,27,.055);
  --ds-status-info: #2f6fa3;
  --ds-status-warning: #8a6200;
  --ds-status-danger: var(--danger);
  --ds-status-success: var(--good);
}
body.dark.erp {
  --ds-status-info: #8fc4ea;
  --ds-status-warning: #e6c66b;
  --ds-status-danger: #ff918a;
  --ds-status-success: #6ed6a0;
}

/* Cât timp furnizorul nu este identificat formal, avertismentul despre datele de test este o
   condiție de utilizare, nu un toast care dispare. Același component apare înainte de înscriere,
   persistent în aplicație și lângă formularele care cer documente/CNP/salarii. */
.test-stage-warning,
body.erp .test-stage-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  background: color-mix(in srgb, #d89b18 13%, var(--card));
  border: 1px solid color-mix(in srgb, #a96f00 38%, var(--line));
  border-radius: 11px;
}
.test-stage-warning { margin: 0 0 16px; padding: 11px 13px; font-size: 13px; }
.test-stage-warning.compact { margin: 10px 0 13px; padding: 9px 11px; }
.test-stage-warning .test-stage-icon,
body.erp .test-stage-banner .test-stage-icon { flex: 0 0 auto; line-height: 1.4; }
.test-stage-warning p,
body.erp .test-stage-banner p { min-width: 0; margin: 0; color: inherit; line-height: 1.45; overflow-wrap: anywhere; }
.test-stage-warning p > span { display: block; }
.test-stage-warning a,
body.erp .test-stage-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
body.erp .test-stage-banner {
  justify-content: center;
  width: 100%;
  padding: 9px 18px;
  background: color-mix(in srgb, #d89b18 17%, var(--card));
  border-width: 0 0 1px;
  border-radius: 0;
  font-size: 13.5px;
}
body.erp .test-stage-banner p > span { margin-left: 5px; }

@media (max-width: 700px) {
  body.erp .test-stage-banner { justify-content: flex-start; padding: 9px 12px; font-size: 12.5px; }
  body.erp .test-stage-banner p > span { display: block; margin: 2px 0 0; }
}

/* Pictogramă de componentă — aceeași geometrie pentru navigație, carduri și ajutor. */
body.erp .app-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: currentColor;
}
/* Dimensiunea contextului aparține shell-ului (`erp.css`: 40px). Aici păstrăm
   doar geometria comună; dacă i-am impune 20px, paddingul de 9px ar strivi SVG-ul
   la un punct — exact defectul care se vedea în capturile de produs. */
body.erp .app-context-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
body.erp .app-icon svg,
body.erp .app-context-icon svg { display: block; width: 100%; height: 100%; }
/* Controalele flex (`.btn`, navigația, `summary`) au deja `gap`. Aceste
   excepții sunt controale inline vechi; fără spațiere, SVG-ul s-ar lipi de text. */
body.erp a[data-ui-icon="1"]:not(.btn):not(.navlink):not([data-go]),
body.erp button.link[data-ui-icon="1"],
body.erp .linkbtn[data-ui-icon="1"],
body.erp .imper-banner button[data-ui-icon="1"],
body.erp .more-grid button[data-ui-icon="1"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Suprafețe și containere de date. */
body.erp .card {
  padding: var(--ds-space-card);
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
body.erp .card > h2,
body.erp .card > .card-head > h2 { margin-bottom: 13px; font-size: 20px; }
body.erp .card h2 > .app-icon,
body.erp .card h3 > .app-icon { margin-right: 8px; vertical-align: -4px; }

body.erp input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body.erp select,
body.erp textarea {
  min-height: var(--ds-control-h);
  padding: 8px 11px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-control);
  font: inherit;
  font-size: 14px;
}
body.erp textarea { min-height: 88px; line-height: 1.45; }
body.erp input:focus-visible,
body.erp select:focus-visible,
body.erp textarea:focus-visible,
body.erp button:focus-visible,
body.erp a:focus-visible,
body.erp summary:focus-visible {
  outline: var(--ds-focus);
  outline-offset: 2px;
  border-color: var(--app-clay);
}
body.erp label { font-size: 14px; line-height: 1.4; }

body.erp .btn,
body.erp button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--ds-control-h);
  padding: 8px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}
body.erp .btn.small { min-height: var(--ds-control-min-h); padding: 7px 11px; font-size: var(--ds-control-font); }
body.erp:not(.dark) .btn.primary { color: #fff; background: var(--app-clay); border-color: var(--app-clay); }
body.erp:not(.dark) .btn.primary:hover { background: var(--app-clay-dark); border-color: var(--app-clay-dark); }

body.erp table { font-size: 14px; line-height: 1.35; }
body.erp th, body.erp td { height: 40px; padding: 8px 10px; border-color: var(--line); }
body.erp th { font-size: 12px; letter-spacing: .025em; text-transform: uppercase; }
body.erp .tablewrap { border: 1px solid var(--line); border-radius: 11px; }

/* Registre expert: selecția și acțiunile de lot rămân lipite de marginea vizibilă chiar dacă
   tabelul este mai lat decât cardul. Erorile parțiale rămân pe rând, nu dispar într-un toast. */
body.erp .entry-batchbar {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: min(720px, 100%);
  padding: 9px 10px;
  background: color-mix(in srgb, var(--soft) 75%, var(--card));
  border-bottom: 1px solid var(--line);
}
body.erp .entry-batch-selection { display: grid; min-width: 90px; line-height: 1.2; }
body.erp .entry-batch-selection .muted { font-size: 11.5px; }
body.erp .entry-batch-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.erp .entry-batch-status { margin-left: auto; white-space: nowrap; }
body.erp .entry-select-cell { width: 46px; min-width: 46px; padding: 2px 5px; text-align: center; }
body.erp .entry-select-label {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  margin: 0;
  cursor: pointer;
}
body.erp .entry-select-label input { width: 18px; height: 18px; margin: 0; accent-color: var(--app-clay); cursor: pointer; }
body.erp tr.entry-batch-error td {
  opacity: 1;
  background: color-mix(in srgb, var(--ds-status-danger) 8%, var(--card));
  border-bottom-color: color-mix(in srgb, var(--ds-status-danger) 36%, var(--line));
}
body.erp tr.entry-batch-error td:first-child { box-shadow: inset 4px 0 0 var(--ds-status-danger); }
body.erp tr.entry-batch-error-current td,
body.erp tr.entry-batch-error:focus td { box-shadow: inset 0 2px 0 var(--ds-status-danger), inset 0 -2px 0 var(--ds-status-danger); }
body.erp tr.entry-batch-error-current td:first-child,
body.erp tr.entry-batch-error:focus td:first-child { box-shadow: inset 4px 0 0 var(--ds-status-danger), inset 0 2px 0 var(--ds-status-danger), inset 0 -2px 0 var(--ds-status-danger); }
body.erp .entry-batch-error-message {
  display: block;
  max-width: 280px;
  margin-top: 5px;
  color: var(--ds-status-danger);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}
body.erp .expert-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12px;
}
body.erp .expert-shortcuts span { display: inline-flex; align-items: center; gap: 4px; }
body.erp .expert-shortcuts kbd {
  min-width: 22px;
  padding: 1px 5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font: 650 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}

@media (max-width: 700px) {
  body.erp .entry-batchbar { align-items: flex-start; flex-wrap: wrap; }
  body.erp .entry-batch-actions { order: 3; width: 100%; }
  body.erp .entry-batch-actions .btn { flex: 1 1 145px; }
  body.erp .entry-batch-status { margin-left: auto; }
}

/* Feedback semantic: aceeași familie pentru dashboard, stări de proces și tabele.
   Culoarea nu este singurul purtător de sens — textul și clasele rămân explicite. */
body.erp .alert {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 11px;
  min-width: 260px;
  padding: 13px 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ds-status-info);
  border-radius: 11px;
  box-shadow: var(--ds-shadow-card);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: default;
  transition: box-shadow .15s, transform .06s, border-color .15s, background .15s;
}
body.erp .alert[data-go],
body.erp .alert[data-notif] { cursor: pointer; }
body.erp .alert[data-go]:hover,
body.erp .alert[data-notif]:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
body.erp .alert .al-ic { flex: 0 0 auto; font-size: 21px; line-height: 1; }
body.erp .alert .al-tx { flex: 1; min-width: 0; }
body.erp .alert .al-cta {
  flex: 0 0 auto;
  color: var(--app-clay);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
body.erp .alert.info,
body.erp .alert.start {
  background: color-mix(in srgb, var(--ds-status-info) 5%, var(--card));
  border-left-color: var(--ds-status-info);
}
body.erp .alert.warn {
  background: color-mix(in srgb, var(--ds-status-warning) 6%, var(--card));
  border-left-color: var(--ds-status-warning);
}
body.erp .alert.bad {
  background: color-mix(in srgb, var(--ds-status-danger) 5%, var(--card));
  border-left-color: var(--ds-status-danger);
}
body.erp .alert.ok {
  background: color-mix(in srgb, var(--ds-status-success) 5%, var(--card));
  border-left-color: var(--ds-status-success);
}
body.erp .alert.start,
body.erp .alert.ok { cursor: default; }

body.erp .badge,
body.erp .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
}
body.erp .badge {
  color: var(--muted);
  background: var(--soft);
  border-color: var(--line);
}
body.erp .pill {
  margin-left: 6px;
  color: var(--ds-status-success);
  background: color-mix(in srgb, var(--ds-status-success) 11%, transparent);
}
body.erp .pill.ok {
  color: var(--ds-status-success);
  background: color-mix(in srgb, var(--ds-status-success) 11%, transparent);
}
body.erp .pill.warn {
  color: var(--ds-status-warning);
  background: color-mix(in srgb, var(--ds-status-warning) 13%, transparent);
}
body.erp .pill.err {
  color: var(--ds-status-danger);
  background: color-mix(in srgb, var(--ds-status-danger) 11%, transparent);
}
body.erp .pill.muted {
  color: var(--muted);
  background: var(--soft);
}
body.erp .pill.rol-patron {
  color: var(--ds-status-success);
  background: color-mix(in srgb, var(--ds-status-success) 13%, transparent);
}
body.erp .pill.rol-contabil {
  color: var(--ds-status-info);
  background: color-mix(in srgb, var(--ds-status-info) 13%, transparent);
}

/* Mesaj contextual persistent. Același schelet acoperă informarea, succesul,
   avertizarea și eroarea; numele vechi pe ecrane diferite nu mai dictează culori. */
body.erp .notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  margin-bottom: 14px;
  padding: 12px 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ds-status-info) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ds-status-info) 25%, var(--line));
  border-left: 4px solid var(--ds-status-info);
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.5;
}
body.erp .notice.info {
  background: color-mix(in srgb, var(--ds-status-info) 6%, var(--card));
  border-color: color-mix(in srgb, var(--ds-status-info) 25%, var(--line));
  border-left-color: var(--ds-status-info);
}
body.erp .notice.success {
  background: color-mix(in srgb, var(--ds-status-success) 7%, var(--card));
  border-color: color-mix(in srgb, var(--ds-status-success) 25%, var(--line));
  border-left-color: var(--ds-status-success);
}
body.erp .notice.warning {
  background: color-mix(in srgb, var(--ds-status-warning) 8%, var(--card));
  border-color: color-mix(in srgb, var(--ds-status-warning) 28%, var(--line));
  border-left-color: var(--ds-status-warning);
}
body.erp .notice.danger {
  background: color-mix(in srgb, var(--ds-status-danger) 7%, var(--card));
  border-color: color-mix(in srgb, var(--ds-status-danger) 25%, var(--line));
  border-left-color: var(--ds-status-danger);
}
body.erp .notice > .notice-icon { margin-top: 1px; }
body.erp .notice > div { flex: 1; min-width: 0; }
body.erp .notice > div > :first-child { margin-top: 0; }
body.erp .notice > div > :last-child { margin-bottom: 0; }
body.erp .notice.info b { color: var(--ds-status-info); }
body.erp .notice.success b { color: var(--ds-status-success); }
body.erp .notice.warning b { color: var(--ds-status-warning); }
body.erp .notice.danger b { color: var(--ds-status-danger); }
body.erp .notice.hidden { display: none; }

/* Impersonarea este o avertizare compactă în navigație, nu o a patra familie de
   banner. Extensia păstrează geometria laterală și aceleași controale de 40 px. */
body.erp .imper-banner {
  flex-direction: column;
  gap: 9px;
  margin: 4px 2px 7px;
  padding: 11px 12px;
}
body.erp .imper-banner .imper-copy { display: flex; align-items: flex-start; gap: 8px; }
body.erp .imper-banner .imper-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
body.erp .imper-banner .btn { width: 100%; }

/* Feedback după acțiuni și stări de proces. Mesajele inline păstrează spațiul
   rezervat ca formularul să nu sară, iar toastul este același pe toate ecranele. */
body.erp .status {
  min-height: 20px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
body.erp .status.ok { color: var(--ds-status-success); }
body.erp .status.warn { color: var(--ds-status-warning); }
body.erp .status.err { color: var(--ds-status-danger); }
body.erp .status.ok,
body.erp .status.warn,
body.erp .status.err { font-weight: 650; }

body.erp .toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, calc(12px + env(safe-area-inset-bottom)));
  z-index: 240;
  display: flex;
  align-items: flex-start;
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  min-height: 44px;
  padding: 11px 16px;
  color: #fff;
  background: #292722;
  border: 1px solid rgba(255,255,255,.16);
  border-left: 4px solid var(--ds-status-success);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(21,18,14,.28);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(28px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  /* Cât timp este ascuns prin opacitate, nu are voie să înghită acțiunile din
     partea de jos a ecranului, în special pe telefon. */
  pointer-events: none;
}
body.erp .toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
body.erp .toast.is-success {
  background: color-mix(in srgb, var(--ds-status-success) 14%, #292722);
  border-left-color: var(--ds-status-success);
}
body.erp .toast.is-error {
  background: color-mix(in srgb, var(--ds-status-danger) 20%, #292722);
  border-left-color: var(--ds-status-danger);
}

/* Degradare grațioasă — aplicația nu scrie date contabile offline, dar explică
   limpede starea și păstrează formularul local până revine conexiunea. */
body.erp .offline-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  color: #fff;
  background: color-mix(in srgb, var(--ds-status-warning) 88%, #292722);
  box-shadow: 0 2px 10px rgba(0,0,0,.24);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}
body.erp .offline-banner.hidden { display: none; }

/* Indicatorul global rămâne discret, dar folosește paleta produsului și respectă
   preferința de mișcare redusă. */
body.erp #loadbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  width: 100%;
  height: 3px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
body.erp #loadbar.on { opacity: 1; }
body.erp #loadbar::after {
  position: absolute;
  top: 0;
  width: 32%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--app-clay), var(--ds-status-warning));
  border-radius: 0 3px 3px 0;
  content: "";
  animation: ds-load-slide 1.1s ease-in-out infinite;
}
@keyframes ds-load-slide {
  0% { left: -32%; }
  50% { left: 50%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.erp #loadbar::after { left: 0; width: 100%; opacity: .65; animation: none; }
  body.erp .toast { transition: none; }
}

/* Compact înseamnă densitate de date, nu controale mai greu de folosit. */
body.erp.compact .card { padding: var(--ds-space-card); margin-bottom: 18px; border-radius: var(--ds-radius-card); }
body.erp.compact input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body.erp.compact select,
body.erp.compact textarea { min-height: var(--ds-control-h); padding: 8px 11px; font-size: 14px; }
body.erp.compact .btn,
body.erp.compact .btn.small { min-height: var(--ds-control-h); padding: 8px 14px; font-size: 14px; }
body.erp.compact table { font-size: 12.5px; }
body.erp.compact th,
body.erp.compact td { height: 30px; padding: 4px 7px; }

/* Ajutor contextual extensibil. */
body.erp .context-help {
  margin: 0 0 16px;
  background: color-mix(in srgb, var(--card) 76%, var(--bg));
  border: 1px solid var(--line);
  border-radius: 11px;
}
body.erp .context-help:has(.explain.hidden) { display: none; }
body.erp .context-help > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ds-control-h);
  padding: 8px 12px;
  color: var(--muted);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
body.erp .context-help > summary::-webkit-details-marker,
body.erp .form-step > summary::-webkit-details-marker { display: none; }
body.erp .context-help > summary::after {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform .15s ease;
}
body.erp .context-help[open] > summary { color: var(--app-clay); border-bottom: 1px solid var(--line); }
body.erp .context-help[open] > summary::after { transform: rotate(225deg); }
body.erp .context-help-body .explain {
  margin: 0;
  padding: 13px 15px;
  background: transparent;
  border: 0;
  border-radius: 0 0 10px 10px;
}
body.erp .context-help-body .explain > .ei { display: none; }

/* Flux de formular: progres, pași și autosave local. */
body.erp .form-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 14px;
  align-items: center;
  margin-bottom: 6px;
  padding: 12px 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}
body.erp .form-progress strong { font-size: 14px; }
body.erp .form-progress-status { color: var(--muted); font-size: 12.5px; }
body.erp .form-progress-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
body.erp .form-draft-discard { min-height: var(--ds-control-min-h); padding: 6px 10px; font-size: var(--ds-control-font); }
body.erp .form-draft-discard[hidden] { display: none; }
body.erp .form-progress-track {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 999px;
}
body.erp .form-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--app-clay);
  border-radius: inherit;
  transition: width .2s ease;
}
/* Primul contact cu „Firma mea” rămâne în limbaj de business: CUI, confirmarea identității și
   două alegeri pe care antreprenorul le poate citi din vectorul fiscal. Configurația rară începe
   abia în pasul următor al aceluiași formular, fără să dublăm câmpurile sau salvarea. */
body.erp .company-quick-intro {
  padding: 13px 15px;
  color: var(--ink);
  background: color-mix(in srgb, var(--good) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--good) 22%, var(--line));
  border-radius: 11px;
}
body.erp .company-quick-intro p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
body.erp .company-quick-step {
  padding: 15px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
body.erp .company-quick-heading { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 8px; }
body.erp .company-quick-heading > span {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  background: var(--app-clay);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}
body.erp .company-quick-heading h3 { margin: 1px 0 2px; color: var(--ink); font-size: 15px; }
body.erp .company-quick-heading p { margin: 0; color: var(--muted); font-size: 12.5px; }
body.erp .company-quick-fields { gap: 6px 14px; }
body.erp .company-basic-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
}
/* Pasul de bază se încheie aici. Configurația contabilă rămâne accesibilă din sumarul pasului 2,
   nu printr-un al doilea CTA „Continuă” care ar împinge începătorul exact în zona evitată. */
body.erp #companyForm > .form-step[data-step-index="0"] .form-step-actions { display: none; }
body.erp .form-step {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
body.erp .form-step > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}
body.erp .form-step-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--app-clay);
  background: #f7e8df;
  border-radius: 50%;
  font-size: 12px;
}
body.erp .form-step-title { min-width: 0; }
body.erp .form-step-state {
  margin-left: auto;
  padding: 3px 7px;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}
body.erp .form-step-state:empty { display: none; }
body.erp .form-step-state.is-error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
body.erp .form-step.is-complete:not([open]) .form-step-number { color: #fff; background: var(--good); }
body.erp .form-step.has-error { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
body.erp .form-step.has-error > summary { color: var(--danger); }
body.dark.erp .form-step-number { color: #eea589; background: rgba(194,97,60,.18); }
body.erp .form-step[open] > summary { color: var(--app-clay); border-bottom: 1px solid var(--line); }
body.erp .form-step-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 16px;
  padding: 17px;
}
body.erp .form-step-body > .full,
body.erp .form-step-body > button[type="submit"] { grid-column: 1 / -1; }
body.erp .form-step-actions,
body.erp .form-final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 9px;
}
body.erp .draft-state { display: inline-flex; align-items: center; gap: 6px; }
body.erp .draft-state::before { color: var(--good); font-weight: 800; content: "✓"; }

/* Dialoguri proprii pentru acțiuni cu context și validare. */
body.erp .app-dialog {
  width: min(520px, calc(100vw - 28px));
  max-width: 520px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}
body.erp .app-dialog::backdrop { background: rgba(23,22,19,.58); backdrop-filter: blur(3px); }
body.erp .app-dialog-card {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 24px 70px rgba(20,18,14,.28);
}
body.erp .app-dialog-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 12px; }
body.erp .app-dialog-head h2 { margin: 0; font-size: 21px; }
body.erp .app-dialog-mark {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: var(--app-clay);
  background: #f7e8df;
  border-radius: 50%;
  font-weight: 800;
}
body.erp .app-dialog.is-danger .app-dialog-mark { color: #a32828; background: #fbe7e5; }
body.erp .app-dialog-body { padding: 0 22px 18px; }
body.erp .app-dialog-message { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
body.erp .app-dialog-detail { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
body.erp .app-dialog-label { display: grid; gap: 6px; margin-top: 16px; color: var(--ink); font-weight: 700; }
body.erp .app-dialog-label input,
body.erp .app-dialog-label textarea { width: 100%; }
body.erp .app-dialog-error { margin: 9px 0 0; color: var(--danger); font-size: 13px; font-weight: 650; }
body.erp .app-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 22px; background: var(--soft); border-top: 1px solid var(--line); }
body.erp .app-dialog .btn.danger { color: #fff; background: #b63b35; border-color: #b63b35; }
body.erp .app-dialog .btn.danger:hover { background: #962d29; border-color: #962d29; }
body.dark.erp .app-dialog-mark { background: rgba(194,97,60,.18); }
body.dark.erp .app-dialog.is-danger .app-dialog-mark { color: #ff918a; background: rgba(182,59,53,.18); }

/* Contractul de densitate pentru controalele moștenite. Formularele noi consumă
   deja `.btn` și tokenurile de mai sus; această plasă aduce la aceeași dimensiune
   butoanele, linkurile-buton și acordeoanele vechi din paginile autentificate. */
body.erp .tab button,
body.erp .tab a.btn,
body.erp .tab summary {
  min-height: var(--ds-control-min-h);
  font-size: var(--ds-control-font);
}
body.erp .tab summary {
  display: flex;
  align-items: center;
}

/* Compact este permis numai în containere de date. Acțiunile rămân suficient de
   mari pentru pointer/touch, dar nu măresc inutil fiecare rând al tabelului. */
body.erp .tab table button,
body.erp .tab table .linkbtn,
body.erp .tab .tablewrap button,
body.erp .tab .tablewrap .linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-control-compact-h);
  padding: 4px 7px;
  font-size: var(--ds-control-compact-font);
  line-height: 1.2;
}

/* Acțiunile unei bule sunt controale normale, nu celule compacte. Rezervăm
   spațiul ocupat de ele; pe touch rămân vizibile, iar cu mouse apar la hover. */
body.erp .msg-del,
body.erp .msg-edit {
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: var(--ds-control-min-h);
  height: var(--ds-control-min-h);
  min-height: var(--ds-control-min-h);
  padding: 0;
  font-size: var(--ds-control-font);
  opacity: .72;
}
body.erp .msg-del + .msg-edit { right: 44px; }
body.erp .msg-b:has(.msg-del),
body.erp .msg-b:has(.msg-edit) { padding-right: 48px; }
body.erp .msg-b:has(.msg-del + .msg-edit) { padding-right: 88px; }
body.erp .msg-del:focus-visible,
body.erp .msg-edit:focus-visible { opacity: 1; }
@media (hover: hover) {
  body.erp .msg-del,
  body.erp .msg-edit { opacity: 0; }
  body.erp .msg-b:hover .msg-del,
  body.erp .msg-b:hover .msg-edit { opacity: .85; }
}

@media (max-width: 700px) {
  body.erp { --ds-space-card: 16px; --ds-radius-card: 13px; }
  body.erp .card > h2,
  body.erp .card > .card-head > h2 { font-size: 19px; }
  body.erp .form-progress { grid-template-columns: 1fr; }
  body.erp .form-progress-actions { justify-content: space-between; }
  body.erp .form-progress-track { grid-column: 1; }
  body.erp .form-step-body { grid-template-columns: 1fr; padding: 14px; }
  body.erp .form-step-body > * { grid-column: 1 !important; min-width: 0; }
  body.erp .company-quick-step { padding: 13px; }
  body.erp .company-basic-actions { align-items: stretch; }
  body.erp .company-basic-actions .btn { width: 100%; }
  body.erp .alert { flex-wrap: wrap; }
  body.erp .toast {
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    transform: translateY(28px);
  }
  body.erp .toast.show { transform: translateY(0); }
  body.erp .offline-banner { align-items: flex-start; }
}

@media (max-width: 360px) {
  /* Alerta devine două coloane: pictogramă + conținut. Acțiunea coboară sub
     mesaj, astfel textul nu mai rămâne într-o fâșie între icon și CTA. */
  body.erp .alert {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    gap: 7px 10px;
    width: 100%;
    min-width: 0;
  }
  body.erp .alert > .al-ic { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }
  body.erp .alert > .al-tx { grid-column: 2; }
  body.erp .alert > .al-cta { grid-column: 2; justify-self: start; white-space: normal; }
}

/* ── Cuprinsul ghidului: bară de grupuri cu liste derulante ──────────────────
   Familia `.em-*` a fost a barei de meniu din carcasă. De când carcasa are o
   singură navigație (arborele lateral), ghidul e SINGURUL ei consumator — deci
   componenta trăiește aici, nu în `erp.css`, care descrie shell-ul.
   Regula esențială e `.em-pop { display: none }`: fără ea fiecare listă
   derulantă rămâne deschisă, iar cuprinsul se scurge ca un perete de text. */
body.erp .ghid-menu {
  display: flex;
  flex-wrap: wrap; /* 11 grupuri nu incap pe un rand la latimi normale */
  align-items: stretch;
  gap: 4px;
  margin: 0 0 16px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
body.erp .ghid-menu .em-item { position: relative; }
body.erp .ghid-menu .em-item > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--ds-control-min-h);
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-control);
  background: none;
  font: inherit;
  font-size: var(--ds-control-font);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
body.erp .ghid-menu .em-item > button:hover { background: var(--soft); }
body.erp .ghid-menu .em-item > button:focus-visible { outline: var(--ds-focus); outline-offset: 1px; }
body.erp .ghid-menu .em-item.open > button,
body.erp .ghid-menu .em-item.activ > button {
  color: #fff;
  background: var(--app-clay);
  border-color: var(--app-clay-dark);
}
body.erp .ghid-menu .emi { flex: 0 0 auto; font-size: 13px; opacity: .8; }
body.erp .ghid-menu .em-item.open > button .emi,
body.erp .ghid-menu .em-item.activ > button .emi { opacity: 1; }

body.erp .ghid-menu .em-pop {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 80;
  min-width: 264px;
  max-width: min(340px, 86vw);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--ds-shadow-card);
}
body.erp .ghid-menu .em-item.open > .em-pop { display: block; }
body.erp .ghid-menu .em-pop button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--ds-control-min-h);
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: var(--ds-control-font);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
body.erp .ghid-menu .em-pop button:hover { background: var(--soft); }
body.erp .ghid-menu .em-pop button:focus-visible { outline: var(--ds-focus); outline-offset: -2px; }
body.erp .ghid-menu .em-pop .emt { min-width: 0; }
body.erp .ghid-menu .em-pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 3px; }

/* Pe telefon lista derulanta se intinde cat bara, ca sa nu iasa din ecran. */
@media (max-width: 700px) {
  body.erp .ghid-menu .em-item { position: static; }
  body.erp .ghid-menu .em-pop { left: 0; right: 0; width: auto; max-width: none; }
}

/* Pagina de ghid și cuprinsul unui grup: câte o celulă pe submeniu, cu rezumatul lui.
   Aceeași familie pierdută odată cu bara de meniu — vezi nota de mai sus. Starea de
   hover NU mai inversează culorile (varianta veche scria alb pe bleumarin și cerea o
   regulă separată ca descrierea să rămână lizibilă); ridică doar suprafața. */
body.erp .ghid-pagina .toolbar { margin-bottom: 8px; }
body.erp .ghid-pagina > .muted { margin: 0 0 12px; }
body.erp .ghid-grile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px;
}
body.erp .ghid-cel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-control);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.erp .ghid-cel:hover {
  background: var(--soft);
  border-color: var(--app-clay);
}
body.erp .ghid-cel:focus-visible { outline: var(--ds-focus); outline-offset: 1px; }
body.erp .ghid-cel-ic { font-size: 16px; line-height: 1; }
body.erp .ghid-cel-t { font-weight: 700; }
body.erp .ghid-cel-d { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* Data rezolvată de lângă un câmp nativ de dată. Câmpul se randează în locale-ul BROWSERULUI
   (`07/10/2026` pe un sistem în engleză), restul aplicației scrie `zz.ll.aaaa` — perechea
   înlătură ambiguitatea 7 octombrie / 10 iulie pe un termen de depunere. */
body.erp .cl-due-ro {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

/* Indiciu de derulare pe registrele late.
   Tabelele din taburi sunt ele însele containerul de derulare (`styles.css`: `display:block;
   overflow-x:auto`), deci când conținutul nu încape, ultima coloană pare TĂIATĂ, nu derulabilă.
   Umbra stă pe containerul PĂRINTE, care nu derulează, ca să rămână pe loc; clasa o pune
   `marcheazaTabeleDerulabile` din erp.js și dispare când ai ajuns la capătul din dreapta. */
body.erp .tablewrap { position: relative; }
body.erp .tablewrap.are-derulare::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 38px;
  pointer-events: none;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(to left, var(--card), color-mix(in srgb, var(--card) 0%, transparent));
  box-shadow: inset -14px 0 14px -14px color-mix(in srgb, var(--ink) 45%, transparent);
}

/* Alocarea pliată din cockpitul de închidere (responsabil + termen).
   Se pliază doar când nu e nimeni între cine să alegi — vezi `alocareaSePliaza` din
   inchidere.js. Rezumatul păstrează termenul EFECTIV vizibil: se ascunde controlul de
   modificare, nu informația, iar un termen depășit rămâne marcat și pliat. */
body.erp .closealoc { margin-top: 8px; }
/* `.closefields` are `display:flex` in styles.css, iar un `display` explicit pe copilul direct al
   unui `<details>` INCHIS il face vizibil in Chrome — pliat pe hartie, desfasurat pe ecran.
   A cincea recurenta a familiei „display bate ascunderea"; se inchide explicit, cu poarta. */
body.erp .closealoc:not([open]) > .closefields { display: none; }
body.erp .closealoc > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
}
body.erp .closealoc > summary::-webkit-details-marker { display: none; }
body.erp .closealoc > summary:focus-visible { outline: var(--ds-focus); outline-offset: 2px; border-radius: 6px; }
body.erp .closealoc-rez { font-variant-numeric: tabular-nums; }
body.erp .closealoc-rez.is-overdue { color: var(--ds-status-danger); font-weight: 600; }
body.erp .closealoc-act {
  color: var(--app-clay);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.erp .closealoc[open] > summary .closealoc-act { text-decoration: none; }

/* Densitatea de desktop rămâne utilă contabililor care lucrează cu mouse-ul, dar pe un ecran
   tactil toate controalele reale au o țintă de minimum 44px. `any-pointer:coarse` acoperă și
   laptopurile hibride, chiar dacă pointerul principal este mouse-ul; `hover:none` acoperă
   telefoanele și stylusurile declarate imprecis de browser. */
@media (any-pointer: coarse), (hover: none) {
  body.erp {
    --ds-control-h: var(--ds-touch-target);
    --ds-control-min-h: var(--ds-touch-target);
    --ds-control-compact-h: var(--ds-touch-target);
  }
  body.erp button,
  body.erp a.btn,
  body.erp [role="button"],
  body.erp summary,
  body.erp .attach-btn,
  body.erp .linkbtn {
    min-height: var(--ds-touch-target);
  }
  body.erp button[aria-label],
  body.erp .tab table .del,
  body.erp .tab .tablewrap .del {
    min-width: var(--ds-touch-target);
  }
  body.erp .linkbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.erp .tab table button,
  body.erp .tab table .linkbtn,
  body.erp .tab .tablewrap button,
  body.erp .tab .tablewrap .linkbtn {
    padding: 8px 10px;
  }
  body.erp .entry-select-label { width: var(--ds-touch-target); min-height: var(--ds-touch-target); }
  body.erp .msg-del + .msg-edit { right: 52px; }
  body.erp .msg-b:has(.msg-del),
  body.erp .msg-b:has(.msg-edit) { padding-right: 56px; }
  body.erp .msg-b:has(.msg-del + .msg-edit) { padding-right: 108px; }
}

/* Contract global pentru starea ascunsă. Componentele design-system au selectori mai specifici
   (`body.erp .btn`, flex/grid etc.); fără această regulă un buton `.hidden` putea redeveni vizibil,
   cum se întâmpla cu „Înapoi” la primul nivel al selectorului ghidat. */
body.erp .hidden { display: none !important; }