/* Design tokens — docs/editorial/business_blueprint/v1.0 §02 + foaia Design_System (DEC-179).
   Pilotul (M6) e prima aplicare reala a acestor tokens, nu un placeholder de revopsit la M7. */
:root {
  /* culoare — valorile exacte din blueprint, cu rolul lor declarat */
  --color-midnight: #0B1220; /* header, footer, titluri, incredere */
  --color-blue: #2563EB;     /* CTA principal, linkuri, stari active */
  --color-teal: #14B8A6;     /* match bun, furnizori, confirmari */
  --color-amber: #F59E0B;    /* oportunitati si atentionari non-critice */
  --color-red: #DC2626;      /* alerte juridice/fiscale critice, erori */
  --color-cloud: #F7FAFC;    /* fundal general */
  --color-white: #FFFFFF;    /* carduri si suprafete */
  --color-slate: #334155;    /* text principal */
  --color-slate-muted: #64748B; /* text secundar, derivat din Slate — nu e valoare din sursa */

  --bg: var(--color-cloud);
  --surface: var(--color-white);
  --ink: var(--color-slate);
  --ink-on-dark: var(--color-cloud);
  --muted: var(--color-slate-muted);
  --line: #E2E8F0;
  --accent: var(--color-blue);
  --accent-hover: #1D4ED8;
  --accent2: var(--color-teal);
  --amber: var(--color-amber);
  --danger: var(--color-red);

  /* tipografie */
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-size-body: 1rem;      /* 16-18px, blueprint §02 */
  --line-height-body: 1.55;
  color-scheme: light;

  /* spatiere — baza 8px (Design_System: Spacing/Base) */
  --space-unit: 8px;

  /* raza — Design_System: Radius/Cards 14-18px, CTA 10-12px */
  --radius-card: 16px;
  --radius-cta: 12px;

  /* umbra — Design_System: Shadow/Card "foarte discreta", fara glassmorphism */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .05);

  /* miscare — Design_System: Motion/Micro 150-250ms, transform/opacity */
  --motion-micro: 180ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.site-header {
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 5vw, 5rem);
  background: var(--color-midnight);
  color: var(--ink-on-dark);
  position: relative;
  z-index: 2;
}

.brand {
  font-weight: 900;
  letter-spacing: -.04em;
  font-size: 1.35rem;
  color: var(--ink-on-dark);
  text-decoration: none;
}
.brand span { color: var(--accent); }

/* Meniu hamburger pe mobil (DEC-324) - ascuns implicit (desktop), afișat
   doar sub 760px. `.site-nav` grupează cele două `<nav>`-uri existente
   într-un singur container, colapsabil pe mobil (js/nav_toggle.js). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--ink-on-dark); border-radius: 1px; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }

nav { display: flex; gap: 1.25rem; }
nav a { color: #B9C2D6; text-decoration: none; }
nav a:hover { color: var(--ink-on-dark); }
/* feedback pilot sesiunea 2: .text-link mostenea culoarea gri deschisa
   gandita pentru header-ul intunecat - pe fundal alb (ex. panoul de start)
   citea ca link dezactivat, nu ca link functional. Stil propriu, pe
   fundal alb: culoarea de actiune + subliniere, ca orice link obisnuit. */
.text-link { color: var(--accent); text-decoration: underline; }
.text-link:hover { color: var(--accent-hover); }

.page-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 0;
  position: relative;
  z-index: 1;
}

.page-heading, .hero-card, .auth-card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
}
.page-heading, .hero-card, .auth-card { padding: clamp(1.5rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.auth-card { max-width: 620px; margin-inline: auto; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 4rem); /* 36-64px, Design_System H1 */
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: .25rem 0 1rem;
  color: var(--color-midnight);
}
h2 { margin-top: 0; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.5fr);
  gap: 1.25rem;
}
.panel { padding: 1.5rem; }
.panel-wide { min-width: 0; }

.stack-form { display: grid; gap: 1rem; }
.stack-form > div { display: grid; gap: .35rem; }
label { font-weight: 700; }

/* feedback pilot sesiunea 2, runda de scriere: campurile obligatorii nu
   aveau niciun marcaj vizibil - Django adauga class="required" pe eticheta
   (label_tag/as_p/as_div) cand Form.required_css_class = "required" e setat,
   fara nicio schimbare de sablon la campurile deja randate manual. */
label.required::after { content: " *"; color: var(--danger); }

input, select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: .8rem 1rem;
  border-radius: .6rem;
  font: inherit;
}
input:focus, select:focus, button:focus, a:focus {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

/* Defect vizual sistematic (verificare CfC onboarding, DEC-202): regula
   `input { width: 100% }` de mai sus se aplica si la checkbox/radio, care
   devin astfel late cat tot randul - textul etichetei e impins pe randul
   urmator, in loc sa stea langa patratel/buline. Fix o singura data pentru
   tot fluxul (pasii 3, 5, 6): checkbox/radio revin la marimea lor naturala,
   iar label-ul care le contine devine un rand flex (control + text aliniate
   pe aceeasi linie de baza). */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
form label:has(> input[type="checkbox"]),
form label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
}

/* Rand-card intreg clicabil, cu stare vizuala clara pe selectat -
   reutilizat identic pe pasul 3 (CAEN) si pasul 5 (preferinte, DEC-204,
   acelasi tratament, cerut explicit la re-verificarea CfC). Doi
   containere posibile: `#id_caen_code_ids` (auto-generat de Django din
   numele campului, contine DOAR optiunile, fara eticheta proprie a
   grupului - de-asta ramane pe ID acolo, in loc sa invaluim tot
   `{{ form.as_p }}`, care ar amesteca grid-ul cu label-ul/erorile
   campului) si `.choice-card-list` (wrapper propriu, scris manual in
   template pentru preferinte, care nu are un id Django echivalent).
   `label:has(> input)` (nu doar `label`) exclude orice eticheta fara
   input direct inauntru - relevant daca vreodata containerul include si
   alt text. */
#id_caen_code_ids, .choice-card-list {
  display: grid;
  gap: .6rem;
}
#id_caen_code_ids label:has(> input),
.choice-card-list label:has(> input) {
  display: flex;
  align-items: center;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  cursor: pointer;
}
#id_caen_code_ids label:has(input:checked),
.choice-card-list label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(37, 99, 235, .06);
}

/* Erorile de formular (Django as_p implicit: <ul class="errorlist">) nu
   aveau nicio culoare distinctă de textul normal - acelasi tipar vizual
   ca .notice-error (verificare CfC, DEC-204). */
.errorlist {
  list-style: none;
  padding: .6rem .9rem;
  margin: 0 0 .5rem;
  border: 1px solid rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .06);
  color: var(--danger);
  border-radius: .5rem;
  font-size: .9rem;
}
.errorlist li { margin: 0; }

.button, button[type="submit"], button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-cta);
  padding: .8rem 1.1rem;
  background: var(--accent);
  color: var(--color-white);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-micro) ease, transform var(--motion-micro) ease;
}
.button:hover, button[type="submit"]:hover, button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.button-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.button-secondary:hover { background: #EFF4FF; }
.button-quiet, .link-button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
/* feedback Dashboard: `button[type="submit"]` (element+atribut, specificitate
   0,1,1) bate `.button-quiet` (o singura clasa, 0,1,0), indiferent de ordinea
   din foaia de stil - Deconectare aparea albastru, la fel de proeminent ca
   actiunile principale, desi avea deja clasa `.button-quiet`. Selector cu
   specificitate garantat mai mare decat regula de baza. */
button[type="submit"].button-quiet {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

/* TOTP - bloc de ghidaj "Nu ai o aplicatie de autentificare?" (colapsabil
   nativ, fara JS nou pentru starea deschis/inchis). */
details summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; }
.totp-help { padding: .5rem 0 1rem; }
.totp-help p { margin: 0 0 .5rem; }
.link-button { padding: .45rem .7rem; border-radius: .6rem; cursor: pointer; }

.action-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.notice {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--color-cloud);
  color: var(--ink);
  margin-bottom: 1rem;
}
.notice-success { border-color: rgba(20, 184, 166, .35); background: rgba(20, 184, 166, .08); color: #0F766E; }
.notice-error { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .06); color: var(--danger); }

code { overflow-wrap: anywhere; color: var(--accent); }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: .8rem; text-transform: uppercase; }

.status {
  display: inline-flex;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #EEF2F8;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
}
.status-accepted { background: rgba(20, 184, 166, .12); color: #0F766E; }
.status-declined, .status-revoked, .status-cancelled { background: rgba(220, 38, 38, .1); color: #B91C1C; }

.card-list { display: grid; gap: 1rem; }
.transfer-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.transfer-card h3 { margin: .5rem 0 .1rem; }
.transfer-card p { color: var(--muted); margin: .2rem 0 1rem; }
.transfer-card form { display: flex; gap: .5rem; align-items: center; }
.transfer-card input { width: 13rem; }

/* rezultate de cautare — cel mai apropiat de "cardul recomandare" existent azi
   in pilot; stiluri consecvente cu standardul de card (M6B_CAEN_RECOMMENDATIONS_DESIGN.md §8) */
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.result-item {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: .3rem;
}
.score-explanation { color: var(--muted); font-size: .9rem; margin: .3rem 0 0; }
/* feedback pilot sesiunea 2: distinct vizual de .score-explanation - altfel
   "de ce" si "sursa/incredere" arata ca aceeasi propozitie repetata. */
.suggestion-meta { color: var(--muted); font-size: .78rem; margin: .15rem 0 0; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* Indicator de progres onboarding (finisaj, verificare CfC DEC-202) */
.step-indicator {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
}

@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  /* Antetul (DEC-324, raport CfC): deficit ~97px la 375px fara meniu
     mobil - brandul se rupea pe doua randuri, "Prețuri" se suprapunea,
     "Invitații" iesea din banda. Randul ramane compact (brand + buton
     hamburger), navigatia colapseaza intr-un panou desfasurabil. */
  .site-header { padding-inline: 1rem; height: auto; min-height: 4.75rem; }
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-midnight);
    padding: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
  }
  .site-nav.is-open { display: flex; }
  .site-nav nav { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .site-nav nav + nav { margin-top: 1rem; }
  .transfer-card form { align-items: stretch; flex-direction: column; }
  .transfer-card input { width: 100%; }
  /* Footer (DEC-320) - coloanele se stivuiesc, banda de jos rămâne
     compactă (fără margin-left:auto pe copyright, care ar lăsa spațiu
     gol pe o singură coloană îngustă). */
  .footer-columns { flex-direction: column; gap: calc(var(--space-unit) * 3); }
  .footer-bottom { gap: calc(var(--space-unit) * 2); }
  .footer-copyright { margin-left: 0; }
}

@media (max-width: 480px) {
  /* Sub 480px, doua sub-coloane de linkuri Juridic ar taia textele mai
     lungi ("De ce apare un contact") - o singura coloana verticala. */
  .footer-col-nav-split { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }

/* Pagini legale — publicate v1.0/24 august 2026 (mandat proprietar,
   DEC-216), validate de avocat. Reutilizeaza tokenii existenti in loc sa
   redeclare font-family/box-sizing (deja globale pe :root/body) sau
   introduca o paleta noua - un singur loc, nu 7 <style> identice repetate
   pe fiecare pagina (asa cum veneau fragmentele originale). */
.legal-page { max-width: 820px; margin: 0 auto; padding: 40px 20px; line-height: 1.65; color: var(--ink); }
.legal-page h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; color: var(--color-midnight); margin: 0 0 8px; }
.legal-page .updated { color: var(--muted); margin-bottom: 32px; }
.legal-page h2 { font-size: 22px; line-height: 1.25; color: var(--color-midnight); margin: 34px 0 10px; }
.legal-page p { margin: 0 0 12px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.legal-page th, .legal-page td { border: 1px solid var(--line); padding: 10px; vertical-align: top; }
.legal-page th { background: var(--color-midnight); color: var(--color-white); text-align: left; }
.legal-page a { color: var(--accent); }

/* Pagina publica de preturi (DEC-303) - 4 planuri, grid responsive, cate
   un card per plan (reutilizeaza .panel, nu redeclara padding/border). */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.pricing-card { display: flex; flex-direction: column; gap: .5rem; }
.pricing-card h2 { margin: 0; font-size: 1.15rem; }
.pricing-card .price { font-size: 1.6rem; font-weight: 700; color: var(--color-midnight); margin: .25rem 0; }
.pricing-card .price small { font-size: .95rem; font-weight: 400; color: var(--muted); }
.pricing-card .price-annual { font-size: .85rem; color: var(--muted); margin: -.25rem 0 .5rem; }
.pricing-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; flex: 1; }
.pricing-card li { padding-left: 1.1rem; position: relative; }
.pricing-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.pricing-note { color: var(--muted); font-size: .9rem; margin-top: 1.5rem; }
.pricing-launch-offer { background: var(--color-cloud); border-left: 4px solid var(--accent); padding: 14px 16px; margin: 18px 0; }
.price-strike { color: var(--muted); font-weight: 400; text-decoration: line-through; font-size: 1.1rem; margin-right: .4rem; }

/* Comutator lunar/anual, doar CSS (fara JS) - `.pricing-toggle` (parintele
   radio-urilor) trebuie sa fie fratele dinaintea `.pricing-grid` in DOM;
   `:has()` leaga starea radio-ului de interiorul containerului cu starea
   `.pricing-grid`-ului de langa el (DEC-306, suport larg in browsere 2026). */
.pricing-toggle { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; }
.pricing-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pricing-toggle label { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: .9rem; }
.pricing-toggle input:checked + label { background: var(--color-midnight); color: var(--color-white); border-color: var(--color-midnight); }
.pricing-toggle .badge { font-size: .75rem; opacity: .85; }
.price-cycle-annual { display: none; }
.pricing-toggle:has(#cycle-annual:checked) ~ .pricing-grid .price-cycle-monthly { display: none; }
.pricing-toggle:has(#cycle-annual:checked) ~ .pricing-grid .price-cycle-annual { display: block; }
.legal-note { background: var(--color-cloud); border-left: 4px solid var(--accent); padding: 14px 16px; margin: 18px 0; }

/* Footer global — link-uri permanente catre paginile legale pe toate
   paginile platformei (mandat proprietar 2026-08-24, DEC-216); pana acum
   erau accesibile doar din formularul de onboarding. */
.site-footer {
  margin-top: clamp(2rem, 6vw, 4rem);
  padding: 1.5rem clamp(1rem, 5vw, 5rem) 2rem;
  background: var(--color-midnight);
  color: var(--ink-on-dark);
}
.site-footer nav { flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer a { color: #B9C2D6; text-decoration: none; font-size: .85rem; }
.site-footer a:hover { color: var(--ink-on-dark); }

/* Reorganizare pe coloane (DEC-320, mandat proprietar - "aglomerat,
   neaerisit") - Platformă / Juridic / Firmă, plus banda de jos separată
   (SAL + Netopia + copyright), pe tokenii casei. */
.footer-columns { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 5); }
.footer-col { flex: 1 1 180px; min-width: 160px; }
.footer-col-legal { flex: 1 1 300px; }
.footer-col h3 {
  margin: 0 0 calc(var(--space-unit) * 1.5);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-on-dark);
  opacity: .65;
}
.footer-col-nav { flex-direction: column; align-items: flex-start; gap: calc(var(--space-unit) * 1); }
/* Coloana Juridic revine la toate cele 10 pagini (proprietarul a revenit
   asupra reducerii la 6, verificare vizuala CfC 2026-09-02) - doua
   sub-coloane pentru aerisire, nu o lista lunga verticala. */
.footer-col-nav-split {
  display: block;
  columns: 2;
  column-gap: calc(var(--space-unit) * 3);
}
.footer-col-nav-split a { display: block; margin-bottom: calc(var(--space-unit) * 1); break-inside: avoid; }
.footer-company { margin: 0; line-height: 1.6; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space-unit) * 3);
  margin-top: calc(var(--space-unit) * 4);
  padding-top: calc(var(--space-unit) * 2.5);
  border-top: 1px solid rgba(247, 250, 252, .12);
}
.footer-sal { display: flex; align-items: center; gap: calc(var(--space-unit) * 1); margin: 0; }
.footer-sal img { height: 32px; width: auto; }
.footer-copyright { margin: 0 0 0 auto; opacity: .6; font-size: .8rem; }
/* Sigla NETOPIA (DEC-313) - varianta alba (np-white-0.svg), aliniata cu
   restul benzii de subsol. */
.footer-netopia-logo { height: 30px; width: auto; vertical-align: middle; }