/* ==========================================================================
   LegalHold — Tipar comun de stări de sistem
   css/system-states.css

   Trei clase standard, conform Manualului de identitate vizuală v1.7:
     .state-loading  — indicator auriu/bleumarin (în curs de încărcare)
     .state-empty    — semn § estompat (niciun rezultat / conținut gol)
     .state-error    — #A5432F pe #FDF0EE, bordură #F0D5CF (eroare/abrogat,
                        valori oficiale — vezi css/legislatie.css --err-*)

   Folosire: injectează markup-ul generat de js/system-states.js
   (LH.States.show / .loading / .empty / .error) într-un container.
   Nu depinde de variabilele CSS ale paginii-gazdă — valorile de brand
   sunt hardcodate aici ca sursă unică de adevăr pentru stări.
   ========================================================================== */

:root {
  --lh-navy: #1A2540;
  --lh-gold: #B08D57;
  --lh-paper: #F7F4EE;
  --lh-ink: #2B2B2B;
  --lh-muted: #6B6B6B;
  --lh-err-bg: #FDF0EE;
  --lh-err-border: #F0D5CF;
  --lh-err-text: #A5432F;
  --lh-sans: Arial, Helvetica, sans-serif;
  --lh-serif: Georgia, 'Times New Roman', serif;
}

.state-box {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  padding: 18px 20px;
  margin: 12px 0;
  border-radius: 4px;
  font-family: var(--lh-sans);
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 44px; /* zonă de atingere, conform manualului §14 */
}

.state-box .state-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--lh-serif);
}

.state-box .state-text {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------
   .state-loading — indicator auriu/bleumarin
   -------------------------------------------------------------------- */
.state-loading {
  background: var(--lh-paper);
  border: 1px solid #E7E0D0;
  color: var(--lh-muted);
}

.state-loading .state-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--lh-gold);
  border-top-color: var(--lh-navy);
  animation: lh-spin 0.8s linear infinite;
}

.state-loading .state-text {
  font-style: italic;
}

@keyframes lh-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .state-loading .state-icon {
    animation: none;
    border-top-color: var(--lh-gold);
    border-right-color: var(--lh-navy);
  }
}

/* --------------------------------------------------------------------
   .state-empty — semn § estompat
   -------------------------------------------------------------------- */
.state-empty {
  background: transparent;
  border: 1px dashed #E7E0D0;
  color: var(--lh-muted);
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 6px;
  padding: 32px 20px;
}

.state-empty .state-icon {
  width: auto;
  height: auto;
  font-size: 28px;
  color: var(--lh-gold);
  opacity: 0.35;
}

.state-empty .state-text {
  flex: none;
}

/* --------------------------------------------------------------------
   .state-error — #A5432F pe #FDF0EE, bordură #F0D5CF (valori oficiale)
   -------------------------------------------------------------------- */
.state-error {
  background: var(--lh-err-bg);
  border: 1px solid var(--lh-err-border);
  color: var(--lh-err-text);
}

.state-error .state-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lh-err-text);
  color: var(--lh-err-bg);
  font-family: var(--lh-sans);
  font-weight: 700;
  font-size: 13px;
}

.state-error .state-text {
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Accesibilitate — regiune anunțată la schimbare de stare
   -------------------------------------------------------------------- */
.state-box[role="status"],
.state-box[role="alert"] {
  scroll-margin-top: 20px;
}

/* --------------------------------------------------------------------
   Responsive — sub ~600px, indicatorul trece deasupra textului
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
  .state-box {
    padding: 14px 16px;
  }
  .state-empty {
    padding: 24px 16px;
  }
}