/* ============================================================================
   "Signal" — limbajul vizual al Car Market Monitor
   ============================================================================

   Concept: aplicatia e un INSTRUMENT de citit o piata, nu un catalog de masini.
   De aici deriva toate deciziile: densitate mare, cifre monospatiate si
   tabulare, suprafete inchise care lasa datele sa fie singurul lucru luminos.

   REGULA CENTRALA DE CULOARE: accentul de brand este indigo (--brand). Gama
   semantica verde -> ambru -> rosu este REZERVATA pentru calitatea ofertei.
   Daca brandul ar fi verde, fiecare buton primar ar arata ca un semnal de
   "chilipir" si culoarea nu ar mai insemna nimic acolo unde conteaza.

   Toate valorile sunt tokenuri. Nu scrie hex direct in componente: o culoare
   definita local nu se schimba la trecerea pe tema deschisa si rezulta text
   negru pe fundal negru.
   ============================================================================ */

/* --- Tema deschisa este definitia de baza pe :root gol -------------------- */
:root {
  /* Suprafete, de la fundal spre elemente ridicate */
  --bg:            #F5F7FB;
  --surface:       #FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-sunken:#EDF1F7;
  --line:          #DFE5EE;
  --line-strong:   #C6D0DF;

  /* Text */
  --fg:            #101828;
  --fg-muted:      #5A6A85;
  --fg-dim:        #8494AB;
  --fg-inverse:    #FFFFFF;

  /* Brand — indigo electric. Deliberat NU verde: vezi regula de mai sus. */
  --brand:         #5B4BE8;
  --brand-hover:   #4A3AD4;
  --brand-soft:    #EEEBFE;
  --brand-ring:    rgba(91, 75, 232, 0.28);
  --on-brand:      #FFFFFF;

  /* Gama semantica de calitate a ofertei. Ordinea conteaza: e o rampa. */
  --signal-strong: #067A55;   /* chilipir clar */
  --signal-good:   #4C8C1F;
  --signal-fair:   #A66A00;
  --signal-weak:   #C2551A;
  --signal-avoid:  #C0362C;   /* pret peste piata */

  /* Fundaluri palide pentru aceleasi semnale, la badge-uri */
  --signal-strong-bg: #DCFAF0;
  --signal-good-bg:   #EAF7D9;
  --signal-fair-bg:   #FDF3D7;
  --signal-weak-bg:   #FDEBDD;
  --signal-avoid-bg:  #FCE4E2;

  /* Informativ / neutru, pentru pilule de metadate */
  --info:          #1A6FBF;
  --info-bg:       #E4F0FB;

  /* Umbre. Doua nivele sunt suficiente; mai multe devin zgomot. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.14);

  /* Geometrie */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Ritm vertical pe o scara de 4px */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  /* Tipografie. Numerele folosesc fontul monospatiat cu cifre tabulare:
     intr-o coloana de preturi, cifrele proportionale nu se aliniaza si ochiul
     nu mai poate compara 12.400 cu 9.900 dintr-o privire. */
  --font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem;
  --fs-lg: 1.125rem; --fs-xl: 1.5rem;   --fs-2xl: 2rem; --fs-3xl: 2.75rem;

  --header-h: 60px;
}

/* --- Tema inchisa: doar tokenurile se schimba, nicio componenta ----------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #070A0F;
    --surface:       #0D121B;
    --surface-raised:#141B26;
    --surface-sunken:#0A0E15;
    --line:          #1E2733;
    --line-strong:   #2C3846;

    --fg:            #E7EEF8;
    --fg-muted:      #94A3B8;
    --fg-dim:        #64748B;
    --fg-inverse:    #070A0F;

    --brand:         #8B7CFF;
    --brand-hover:   #A093FF;
    --brand-soft:    #1B1836;
    --brand-ring:    rgba(139, 124, 255, 0.32);
    --on-brand:      #0B0716;

    --signal-strong: #34D399;
    --signal-good:   #A3E635;
    --signal-fair:   #FBBF24;
    --signal-weak:   #FB923C;
    --signal-avoid:  #F87171;

    --signal-strong-bg: rgba(52, 211, 153, 0.14);
    --signal-good-bg:   rgba(163, 230, 53, 0.14);
    --signal-fair-bg:   rgba(251, 191, 36, 0.14);
    --signal-weak-bg:   rgba(251, 146, 60, 0.14);
    --signal-avoid-bg:  rgba(248, 113, 113, 0.14);

    --info:          #7DD3FC;
    --info-bg:       rgba(125, 211, 252, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65);
  }
}

/* Comutatorul manual trebuie sa invinga preferinta sistemului in AMBELE
   directii, de aceea tema inchisa e redeclarata si pe selector explicit. */
:root[data-theme="dark"] {
  --bg:            #070A0F;
  --surface:       #0D121B;
  --surface-raised:#141B26;
  --surface-sunken:#0A0E15;
  --line:          #1E2733;
  --line-strong:   #2C3846;
  --fg:            #E7EEF8;
  --fg-muted:      #94A3B8;
  --fg-dim:        #64748B;
  --fg-inverse:    #070A0F;
  --brand:         #8B7CFF;
  --brand-hover:   #A093FF;
  --brand-soft:    #1B1836;
  --brand-ring:    rgba(139, 124, 255, 0.32);
  --on-brand:      #0B0716;
  --signal-strong: #34D399;
  --signal-good:   #A3E635;
  --signal-fair:   #FBBF24;
  --signal-weak:   #FB923C;
  --signal-avoid:  #F87171;
  --signal-strong-bg: rgba(52, 211, 153, 0.14);
  --signal-good-bg:   rgba(163, 230, 53, 0.14);
  --signal-fair-bg:   rgba(251, 191, 36, 0.14);
  --signal-weak-bg:   rgba(251, 146, 60, 0.14);
  --signal-avoid-bg:  rgba(248, 113, 113, 0.14);
  --info:          #7DD3FC;
  --info-bg:       rgba(125, 211, 252, 0.13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  /* Un singur cuvant lung (un URL, un nume de model) nu are voie sa lateasca
     pagina pe telefon. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Cifrele tabulare sunt esentiale intr-o interfata de comparat preturi. */
.num, .price, td.num, .metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus vizibil, mereu. Fara el, navigarea cu tastatura devine imposibila,
   iar asta blocheaza si accesibilitatea si orice audit de achizitie enterprise. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respectam preferinta de reducere a animatiilor. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Layout -------------------------------------------------------------- */
.shell { max-width: 1440px; margin: 0 auto; padding: var(--s-5) var(--s-4); }
.shell-narrow { max-width: 460px; margin: 0 auto; padding: var(--s-6) var(--s-4); }
.shell-mid { max-width: 1080px; margin: 0 auto; padding: var(--s-6) var(--s-4); }

.legal-page { max-width: 720px; }
.legal-page section { margin-block: var(--s-6); }
.legal-page h2 { margin-bottom: var(--s-2); }

.app-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-4);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.app-header .spacer { flex: 1; }

.brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--fs-md); color: var(--fg);
  letter-spacing: -0.01em;
}
/* Marca: un indicator de semnal, nu o emoji de masina. Comunica "instrument
   de masura", care e exact poziționarea produsului. */
.brand-mark {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #22D3EE));
  color: var(--on-brand); font-weight: 800; font-size: 12px;
}

.nav-links { display: flex; align-items: center; gap: var(--s-1); }
.nav-links a {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none;
}
.nav-links a:hover { background: var(--surface-sunken); color: var(--fg); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }

/* --- Butoane ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }

.btn-secondary { background: var(--surface-raised); color: var(--fg); border-color: var(--line-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }

.btn-ghost { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--fg); }

.btn-danger { background: transparent; color: var(--signal-avoid); border-color: var(--signal-avoid); }
.btn-danger:hover:not(:disabled) { background: var(--signal-avoid-bg); }

.btn-lg { padding: 0.7rem 1.4rem; font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* --- Carduri si suprafete ------------------------------------------------ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.panel-tight { padding: var(--s-4); }
.panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.panel-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; }
.panel-sub { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 2px; }

/* --- Formulare ---------------------------------------------------------- */
.field { margin-bottom: var(--s-4); }
.field label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--fg);
}
.field .hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--fg-dim); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-family: inherit; font-size: var(--fs-md);
  color: var(--fg);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.input::placeholder { color: var(--fg-dim); }

/* Eroarea trebuie legata de camp prin aria-describedby in HTML, nu doar
   colorata: un cititor de ecran nu percepe rosul. */
.field-error { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--signal-avoid); }
.input[aria-invalid="true"] { border-color: var(--signal-avoid); }

.alert {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  font-size: var(--fs-sm); margin-bottom: var(--s-4);
  border: 1px solid transparent;
}
.alert-error   { background: var(--signal-avoid-bg);  color: var(--signal-avoid);  border-color: var(--signal-avoid); }
.alert-success { background: var(--signal-strong-bg); color: var(--signal-strong); border-color: var(--signal-strong); }
.alert-info    { background: var(--info-bg);          color: var(--info);          border-color: var(--info); }

/* --- Pilule si badge-uri ------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-sunken); color: var(--fg-muted);
  border: 1px solid var(--line);
}
.pill-brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.pill-info  { background: var(--info-bg);    color: var(--info);  border-color: transparent; }

.signal-strong { background: var(--signal-strong-bg); color: var(--signal-strong); border-color: transparent; }
.signal-good   { background: var(--signal-good-bg);   color: var(--signal-good);   border-color: transparent; }
.signal-fair   { background: var(--signal-fair-bg);   color: var(--signal-fair);   border-color: transparent; }
.signal-weak   { background: var(--signal-weak-bg);   color: var(--signal-weak);   border-color: transparent; }
.signal-avoid  { background: var(--signal-avoid-bg);  color: var(--signal-avoid);  border-color: transparent; }

/* --- Metrici (KPI) ------------------------------------------------------ */
.metric-row {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.metric {
  padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.metric-label {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-dim);
}
.metric-value {
  margin-top: var(--s-2);
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em;
}
.metric-delta { font-size: var(--fs-xs); font-weight: 600; margin-top: var(--s-1); }
.metric-delta.up   { color: var(--signal-strong); }
.metric-delta.down { color: var(--signal-avoid); }

/* --- Pagina de preturi -------------------------------------------------- */
.pricing-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start;
}
.plan-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* Planul recomandat e ridicat vizual prin contur si umbra, nu prin scale():
   un card scalat devine neclar pe ecrane non-retina si sare la hover. */
.plan-card.is-highlight {
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--brand);
}
.plan-badge {
  position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-5);
  padding: 0.15rem 0.6rem; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-xs); font-weight: 700;
}
.plan-name { font-size: var(--fs-lg); font-weight: 700; }
.plan-tagline { color: var(--fg-muted); font-size: var(--fs-sm); min-height: 2.6em; margin-top: var(--s-1); }
.plan-price {
  display: flex; align-items: baseline; gap: 0.25rem;
  margin: var(--s-4) 0 var(--s-1);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.plan-price .amount { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.03em; }
.plan-price .period { color: var(--fg-dim); font-size: var(--fs-sm); font-family: var(--font-ui); }
.plan-equiv { font-size: var(--fs-xs); color: var(--fg-dim); font-family: var(--font-mono); }
.plan-save {
  display: inline-block; margin-top: var(--s-2);
  padding: 0.1rem 0.45rem; border-radius: var(--r-pill);
  background: var(--signal-strong-bg); color: var(--signal-strong);
  font-size: var(--fs-xs); font-weight: 700;
}
.plan-features { list-style: none; margin: var(--s-4) 0; flex: 1; }
.plan-features li {
  position: relative; padding-left: 1.3rem; margin-bottom: var(--s-2);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}

/* --- Tabele ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th {
  text-align: left; padding: var(--s-3);
  background: var(--surface-sunken); color: var(--fg-dim);
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: var(--s-3); border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-sunken); }

/* --- Stari goale -------------------------------------------------------- */
.empty-state { padding: var(--s-7) var(--s-4); text-align: center; color: var(--fg-muted); }
.empty-state h3 { color: var(--fg); font-size: var(--fs-lg); margin-bottom: var(--s-2); }

/* --- Zid de plata (paywall) -------------------------------------------- */
.paywall {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-6); text-align: center;
  background: var(--surface); border: 1px dashed var(--brand);
  border-radius: var(--r-lg);
}
.paywall .lock { font-size: 1.5rem; }

/* --- Utilitare --------------------------------------------------------- */
.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.bold { font-weight: 700; }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.between { justify-content: space-between; }
.center { justify-content: center; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-4 { margin-bottom: var(--s-4); }
.text-center { text-align: center; }

/* Ascuns vizual, dar citit de cititoarele de ecran. Pentru etichete pe care
   designul le lasa implicite dar tehnologia asistiva are nevoie de ele. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Mobil ------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --fs-3xl: 2rem; --fs-2xl: 1.6rem; }
  .shell { padding: var(--s-4) var(--s-3); }
  .app-header { padding: 0 var(--s-3); gap: var(--s-2); }
  .nav-links a { padding: var(--s-2); }
  .panel { padding: var(--s-4); border-radius: var(--r-md); }
}