/* ArhivaID — foaia de temelie: jetoane, reset, așezarea ecranului, primitivele de obște.
   Foaia fiecărui modul stă în `app/modules/<nume>/<nume>.css` și se injectează la intrarea în modul.

   ⚠️⚠️ CASCADA ÎNTRE FOI (lecție plătită în ContID): foaia unui modul se injectează DUPĂ aceasta, deci îi
   bate regulile la specificitate egală — dar NU ajunge în alt modul. Un stil cerut de DOUĂ module urcă
   AICI; lăsat în foaia unuia, al doilea ecran rămâne fără el, și pâlpâie (arată bine doar dacă omul a
   trecut întâi prin celălalt modul).

   ⚠️ Jetoanele sunt cele din ContID, cu contrastele lor deja măsurate. Albastrul viu din logo rămâne al
   logo-ului; dacă vrei să devină culoarea aplicației, se schimbă `--culoare-primara` și merge tot cu ea. */

:root {
  /* Culori */
  --culoare-primara: #333777;
  --culoare-primara-hover: #2b2f65;
  --culoare-text: #22557a;
  --culoare-text-secundar: #666e7c;
  --culoare-text-slab: #9ca3af;
  --culoare-fundal: #f8fafc;
  --culoare-suprafata: #ffffff;
  --culoare-bordura: #e5e7eb;
  --culoare-succes: #16a34a;
  --culoare-eroare: #dc2626;
  --culoare-atentie: #d97706;

  /* Nuanțele palide, socotite din culoarea aplicației (nu scrise de mână).
     ⚠️ Legate de jeton, urmează orice culoare s-ar alege. Scrise de mână, ar fi rămas dintr-o paletă
        veche — exact defectul găsit în ContID, unde în vitrină trăiau două albastruri. */
  --culoare-primara-stins: #eef0f7;
  --culoare-atins: #f1f5f9;
  --culoare-pe-plin: #ffffff;

  /* Măsuri */
  --spatiu-mic: 8px;
  --spatiu-mediu: 16px;
  --spatiu-mare: 24px;
  --raza: 8px;
  --umbra-card: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --bara-lat: 230px;
  --antet-h: 56px;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root {
    --culoare-primara-stins: color-mix(in srgb, var(--culoare-primara) 8%, var(--culoare-suprafata));
    --culoare-atins: color-mix(in srgb, var(--culoare-primara) 5%, var(--culoare-suprafata));
    --culoare-primara-hover: color-mix(in srgb, var(--culoare-primara) 85%, #000);
  }
}

/* ⚠️⚠️ TEMA ÎNTUNECATĂ declară DOAR ce se schimbă. Tot ce nu scrie aici rămâne de sus — altfel un jeton
   nou adăugat mâine ar trebui ținut minte în două locuri, iar al doilea se uită. */
:root[data-tema="intunecat"] {
  --culoare-primara: #8f97e8;
  --culoare-text: #e2e8f0;
  --culoare-text-secundar: #a0aec0;
  --culoare-text-slab: #718096;
  --culoare-fundal: #0f172a;
  --culoare-suprafata: #1e293b;
  --culoare-bordura: #334155;
  --umbra-card: 0 1px 3px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--culoare-text); background: var(--culoare-fundal);
}
[hidden] { display: none !important; }   /* ⚠️ altfel un `display: flex` ar bate atributul */

/* ═══════════ LOGAREA ═══════════
   ⚠️⚠️ E un ECRAN, nu o pagină aparte: aplicația e o SPA, iar o pagină separată ar fi însemnat o a doua
   încărcare și un al doilea loc de întreținut. Cât timp nu ești logat, aici ești; când intri, se stinge. */
.logare {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--spatiu-mare);
}
.logare__card {
  width: 100%; max-width: 380px; background: var(--culoare-suprafata);
  border: 1px solid var(--culoare-bordura); border-radius: var(--raza);
  box-shadow: var(--umbra-card); padding: var(--spatiu-mare);
}
.logare__logo { display: block; margin: 0 auto var(--spatiu-mediu); max-width: 210px; height: auto; }
.logare__nota { margin: 0 0 var(--spatiu-mediu); color: var(--culoare-text-secundar); font-size: .875rem; text-align: center; }
/* ⚠️ Locul mesajului de eroare stă REZERVAT, chiar gol: altfel cardul ar sălta când apare vorba, iar
   butonul s-ar muta de sub degetul omului exact când vrea să apese din nou. */
.logare__eroare { min-height: 20px; margin: 0 0 var(--spatiu-mic); color: var(--culoare-eroare); font-size: .875rem; }

/* ═══════════ CÂMPURI ȘI BUTOANE ═══════════ */
.camp { display: block; margin-bottom: var(--spatiu-mediu); }
.camp > label { display: block; margin-bottom: 4px; font-size: .8125rem; font-weight: 600; color: var(--culoare-text-secundar); }
.camp input, .camp select, .camp textarea {
  width: 100%; padding: 9px 12px; font: inherit; color: var(--culoare-text);
  background: var(--culoare-suprafata);
  border: 1px solid var(--culoare-bordura); border-radius: var(--raza);
}
.camp input:focus, .camp select:focus, .camp textarea:focus {
  outline: 2px solid var(--culoare-primara); outline-offset: -1px; border-color: var(--culoare-primara);
}
.camp input::placeholder { color: var(--culoare-text-slab); }

/* ═══════════ OCHIUL DE PE CÂMPUL DE PAROLĂ ═══════════
   ⚠️⚠️ Butonul stă AȘEZAT PESTE câmp, într-un înveliș care are exact înălțimea lui. Fără înveliș ar
   trebui ghicită înălțimea câmpului — iar ea se schimbă cu litera, cu spațiul dinăuntru și cu tema. */
.camp__ochi-zona { position: relative; display: flex; }
/* ⚠️ Loc pentru buton, ca o parolă lungă să nu treacă pe sub el. */
.camp__ochi-zona > input { flex: 1 1 auto; min-width: 0; padding-right: 40px; }
.camp__ochi {
  position: absolute; top: 0; bottom: 0; right: 0; width: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--culoare-text-secundar);
}
.camp__ochi:hover { color: var(--culoare-primara); }
/* ⚠️ Butonul e sărit de Tab (`tabindex="-1"`): drumul cu tastatura merge din câmp în câmp. Dar cine
   ajunge la el cu mouse-ul trebuie să-l vadă apăsat, deci starea „arată parola" se însemnează. */
.camp__ochi[aria-pressed="true"] { color: var(--culoare-primara); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--raza);
  background: var(--culoare-primara); color: var(--culoare-pe-plin);
}
.btn:hover { background: var(--culoare-primara-hover); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--larg { width: 100%; }
.btn--gol { background: transparent; color: var(--culoare-primara); border-color: var(--culoare-primara); }
.btn--gol:hover { background: var(--culoare-primara-stins); }
.btn--sters { background: transparent; color: var(--culoare-text-secundar); border-color: var(--culoare-bordura); }
.btn--sters:hover { background: var(--culoare-atins); }
/* ⚠️ Inelul de focalizare NU se stinge nicăieri: cine umblă cu tastatura n-are alt semn unde se află. */
.btn:focus-visible { outline: 2px solid var(--culoare-primara); outline-offset: 2px; }

/* ═══════════ AȘEZAREA APLICAȚIEI ═══════════ */
.app { display: grid; grid-template-rows: var(--antet-h) 1fr; min-height: 100vh; }

.antet {
  display: flex; align-items: center; gap: var(--spatiu-mediu);
  padding: 0 var(--spatiu-mediu);
  background: var(--culoare-suprafata); border-bottom: 1px solid var(--culoare-bordura);
}
.antet__logo { height: 26px; width: auto; }
/* ⚠️⚠️ SELECTORUL DE FIRME stă în ANTET, nu în bara laterală: el hotărăște ce se vede în TOATE modulele,
   deci trebuie să fie deasupra lor, nu unul dintre ele. */
.antet__firma { margin-left: auto; display: flex; align-items: center; gap: var(--spatiu-mic); }
.antet__firma select {
  padding: 6px 10px; font: inherit; color: var(--culoare-text);
  background: var(--culoare-suprafata);
  border: 1px solid var(--culoare-bordura); border-radius: var(--raza); max-width: 340px;
}
.antet__om { display: flex; align-items: center; gap: var(--spatiu-mic); font-size: .875rem; color: var(--culoare-text-secundar); }

.corp { display: grid; grid-template-columns: var(--bara-lat) 1fr; min-height: 0; }

.bara {
  background: var(--culoare-suprafata); border-right: 1px solid var(--culoare-bordura);
  padding: var(--spatiu-mediu) var(--spatiu-mic);
}
.bara__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: var(--raza);
  color: var(--culoare-text); text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.bara__item:hover { background: var(--culoare-atins); }
.bara__item.e-ales { background: var(--culoare-primara-stins); color: var(--culoare-primara); }
.bara__item svg { flex: none; }

.continut { padding: var(--spatiu-mare); min-width: 0; }

/* ═══════════ CARDURI ═══════════ */
.card {
  background: var(--culoare-suprafata); border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza); box-shadow: var(--umbra-card);
  padding: var(--spatiu-mediu); margin-bottom: var(--spatiu-mediu);
}
.card__cap { display: flex; align-items: center; gap: var(--spatiu-mic); margin-bottom: var(--spatiu-mediu); }
.card__titlu { margin: 0; font-size: 1rem; font-weight: 700; color: var(--culoare-primara); }
.card__nota { margin: 0; font-size: .8125rem; color: var(--culoare-text-secundar); }

/* ═══════════ BANDA PAROLEI INIȚIALE ═══════════
   ⚠️⚠️ Cât timp parola e cea din `.env`, ea stă scrisă într-un fișier. Banda nu e un moft: fără ea,
   parola inițială poate rămâne ani, iar nimeni nu-și amintește s-o schimbe. */
.banda-parola {
  display: flex; align-items: center; gap: var(--spatiu-mic); flex-wrap: wrap;
  padding: 10px var(--spatiu-mediu);
  background: var(--culoare-eroare); color: #fff; font-weight: 600; font-size: .875rem;
}
.banda-parola .btn { background: #fff; color: var(--culoare-eroare); border-color: #fff; }
.banda-parola .btn:hover { background: #f1f5f9; }

/* ═══════════ VORBA SCURTĂ (toast) ═══════════ */
.toasts { position: fixed; right: var(--spatiu-mediu); bottom: var(--spatiu-mediu); z-index: 60; display: grid; gap: var(--spatiu-mic); }
.toast {
  padding: 10px 14px; border-radius: var(--raza); box-shadow: var(--umbra-card);
  background: var(--culoare-suprafata); border: 1px solid var(--culoare-bordura);
  color: var(--culoare-text); font-size: .875rem; max-width: 340px;
  opacity: 0; transform: translateY(6px); transition: opacity .16s, transform .16s;
}
.toast.e-vizibil { opacity: 1; transform: none; }
.toast--succes { border-color: var(--culoare-succes); color: var(--culoare-succes); }
.toast--eroare { border-color: var(--culoare-eroare); color: var(--culoare-eroare); }

/* ═══════════ FEREASTRA (dialog) ═══════════
   ⚠️ `z-index` mai mare decât al vorbelor scurte (60): o vorbă apărută peste butonul „Salvează" ar sta
   tocmai unde omul vrea să apese. */
.fereastra-fundal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: var(--spatiu-mediu);
  background: rgba(15, 23, 42, .45);
}
.fereastra {
  width: 100%; max-height: 90vh; overflow: auto;
  padding: var(--spatiu-mare);
  background: var(--culoare-suprafata); border-radius: var(--raza);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.fereastra--mica { max-width: 420px; }
.fereastra--medie { max-width: 620px; }
.fereastra--mare { max-width: 900px; }
.fereastra__titlu { margin: 0 0 var(--spatiu-mediu); font-size: 1.0625rem; color: var(--culoare-primara); }
.fereastra__vorba { margin: 0 0 var(--spatiu-mic); color: var(--culoare-text); }
.fereastra__eroare {
  margin: 0 0 var(--spatiu-mic); padding: 8px 12px; border-radius: var(--raza);
  background: #fef2f2; color: var(--culoare-eroare); font-size: .875rem;
  border: 1px solid var(--culoare-eroare);
}
.fereastra__butoane { display: flex; justify-content: flex-end; gap: var(--spatiu-mic); margin-top: var(--spatiu-mediu); }
/* ⚠️ Câmpurile ferestrei stau pe două coloane, dar cele lungi (adresa, observațiile) țin un rând întreg. */
.fereastra__randuri { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--spatiu-mediu); }
.fereastra__randuri .camp--lat { grid-column: 1 / -1; }
.btn--primejdie { background: var(--culoare-eroare); border-color: var(--culoare-eroare); }
.btn--primejdie:hover { background: #b91c1c; border-color: #b91c1c; }

/* ═══════════ SELECTORUL ÎN CARE POȚI ADĂUGA PE LOC (combobox) ═══════════
   ⚠️ `position: relative` pe înveliș + `absolute` pe listă: altfel lista ar împinge în jos tot ce e sub
   ea, iar formularul ar sălta la fiecare literă tastată. */
.selector { position: relative; }
.selector__camp {
  width: 100%; padding: 9px 12px; border: 1px solid var(--culoare-bordura); border-radius: var(--raza);
  background: var(--culoare-suprafata); color: var(--culoare-text); font: inherit;
}
.selector__camp:focus { outline: none; border-color: var(--culoare-primara); }
.selector__lista {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30;
  max-height: 240px; overflow-y: auto;
  background: var(--culoare-suprafata); border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza); box-shadow: var(--umbra-card);
}
.selector__rand {
  display: block; width: 100%; padding: 8px 12px; text-align: left;
  background: transparent; border: 0; color: var(--culoare-text); font: inherit; cursor: pointer;
}
.selector__rand:hover { background: var(--culoare-atins); }
.selector__rand.e-ales { background: var(--culoare-primara-stins); color: var(--culoare-primara); font-weight: 600; }
/* ⚠️ Rândul „＋ Adaugă" se vede ALTFEL: el SCRIE ceva în bază, spre deosebire de celelalte, care doar aleg. */
.selector__rand--nou {
  color: var(--culoare-primara); font-weight: 600;
  border-top: 1px solid var(--culoare-bordura);
}
.selector__gol { margin: 0; padding: 12px; color: var(--culoare-text-secundar); font-size: .8125rem; }

/* ═══════════ TABELE ═══════════
   ⚠️ Stau la temelie, nu în modul: aceeași listă se desenează în Firme, în Registre și în Import. Trei
   copii ar fi însemnat trei feluri de a arăta un rând — și al patrulea modul ar fi ales pe ghicite. */
.tabel-zona { overflow-x: auto; }              /* ⚠️ pe telefon tabelul se trage, nu strivește pagina */
.tabel { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabel th, .tabel td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--culoare-bordura); }
.tabel th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--culoare-text-secundar); font-weight: 700; white-space: nowrap;
}
.tabel tbody tr:hover { background: var(--culoare-atins); }
.tabel td.e-la-dreapta, .tabel th.e-la-dreapta { text-align: right; }
.tabel__gol { padding: var(--spatiu-mare); text-align: center; color: var(--culoare-text-secundar); }
.tabel__slab { color: var(--culoare-text-slab); }

/* Butoanele de pe rând (îndreaptă / șterge). ⚠️ Se văd stins până la trecerea cu mouse-ul peste rând:
   altfel un tabel de 50 de rânduri arată ca 100 de butoane. */
.rand-fapte { display: flex; gap: 4px; justify-content: flex-end; }
.fapta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--raza);
  color: var(--culoare-text-secundar); cursor: pointer; opacity: .55; transition: opacity .12s;
}
tr:hover .fapta, .fapta:focus-visible { opacity: 1; }
.fapta:hover { background: var(--culoare-atins); color: var(--culoare-primara); }
.fapta--sterge:hover { background: #fef2f2; color: var(--culoare-eroare); }
.fapta:focus-visible { outline: 2px solid var(--culoare-primara); outline-offset: 1px; }

/* ⚠️ Antet de coloană care există pentru cititorul de ecran, dar n-are ce arăta ochiului (coloana cu
   butoanele). `display: none` l-ar fi ascuns și de el — adică o coloană fără nume pentru cine nu vede. */
.vizual-ascuns {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══════════ ETICHETA EXPLICATIVĂ (`data-tooltip`) ═══════════
   ⚠️⚠️ NU se folosește `title`: browserul îl arată după o secundă și jumătate, cu litera lui, fără să-l
   putem potrivi cu tema — iar pe atingere nu-l arată deloc. Aceeași hotărâre ca în ContID. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 6px; z-index: 20;
  background: var(--culoare-text); color: #fff; font-size: .75rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; }

/* Pastila cu o cifră lângă un titlu („12 firme"). */
.pastila {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--culoare-primara-stins); color: var(--culoare-primara);
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}

/* Bara de deasupra unei liste: căutare la stânga, butoane la dreapta. */
.unelte { display: flex; align-items: center; gap: var(--spatiu-mic); flex-wrap: wrap; margin-bottom: var(--spatiu-mediu); }
.unelte__cauta { flex: 1 1 240px; min-width: 0; }
.unelte__cauta input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--culoare-bordura); border-radius: var(--raza);
  background: var(--culoare-suprafata); color: var(--culoare-text); font: inherit;
}
.unelte__cauta input:focus { outline: none; border-color: var(--culoare-primara); }

/* ═══════════ TELEFON ═══════════
   ⚠️ Bara laterală trece SUS, pe un rând care se derulează: la 700px, 230px din lățime însemnau o treime
   din ecran pentru un meniu de patru rânduri. */
@media (max-width: 800px) {
  .corp { grid-template-columns: 1fr; }
  .bara { border-right: 0; border-bottom: 1px solid var(--culoare-bordura); display: flex; gap: 4px; overflow-x: auto; }
  .bara__item { white-space: nowrap; margin: 0; }
  .continut { padding: var(--spatiu-mediu); }
  .antet__firma select { max-width: 180px; }
  /* ⚠️ Pe telefon, două coloane de câmpuri înseamnă câmpuri de 120px. Se trece pe unul singur. */
  .fereastra__randuri { grid-template-columns: 1fr; }
  .fereastra { padding: var(--spatiu-mediu); }
  /* ⚠️ Fără mouse nu există „trecere peste rând", deci butoanele n-ar apărea niciodată. */
  .fapta { opacity: 1; }
}