/* ============================================================================
   TRUCKPLAN.APP — design system.
   Scris de mână, fără build (DECISIONS.md D18).

   De ce nu Tailwind: clasele utilitare se repetă pe fiecare rând al fiecărui
   tabel, la fiecare cerere. CSS-ul se memorează un an; HTML-ul nu se memorează
   niciodată (depinde de tenant și de utilizator). Cu CSS semantic, aceiași
   octeți se plătesc o singură dată.

   Mobile-first (D13): regulile de bază sunt pentru 360px, media query-urile
   adaugă pentru ecrane mari. Niciodată invers.
   ========================================================================= */

/* ─── Simboluri de temă ───────────────────────────────────────────────────
   Branding per tenant (brief §3) = suprascrierea acestor variabile pe :root.
   O singură injecție, fără recompilare.                                     */

:root {
    --brand:        #2b8cff;
    --brand-hover:  #4aa0ff;
    --brand-ink:    #ffffff;

    --bg:           #f1f5f9;
    --surface:      #ffffff;
    --surface-alt:  #f8fafc;
    --line:         #e2e8f0;
    --ink:          #0f172a;
    --ink-muted:    #64748b;
    --ink-subtle:   #94a3b8;

    --ok:      #10b981;
    --warn:    #f59e0b;
    --danger:  #f43f5e;
    --info:    #3b82f6;

    --radius:    0.625rem;
    --radius-lg: 0.875rem;
    --shadow:    0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px -4px rgba(15, 23, 42, .08);
    --shadow-lg: 0 10px 30px -12px rgba(15, 23, 42, .25);

    --sidebar-w: 15rem;
    --header-h:  3.5rem;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

/* Tema întunecată urmează preferința sistemului. Fără setare, fără JS —
   deci fără licărirea albă la încărcare. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #04060c;
        --surface:     #0f172a;
        --surface-alt: #0a1224;
        --line:        #1e293b;
        --ink:         #e2e8f0;
        --ink-muted:   #94a3b8;
        --ink-subtle:  #64748b;
        --brand:       #4aa0ff;
        --brand-hover: #6bb2ff;
        --brand-ink:   #04060c;
        --shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -4px rgba(0, 0, 0, .4);
        --shadow-lg:   0 10px 30px -12px rgba(0, 0, 0, .6);
    }
}

/* ─── Reset minimal ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

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

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus vizibil DOAR la navigarea cu tastatura — :focus-visible, nu :focus.
   Altfel fiecare click lasă un contur, iar oamenii cer să fie scos, ceea ce
   sparge accesibilitatea pentru cei care navighează cu Tab. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Respectă preferința de sistem pentru mișcare redusă. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ─── Utilitare strict necesare ──────────────────────────────────────────── */

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.stack > * + * { margin-top: var(--stack-gap, 1rem); }

/* ─── Tipografie ─────────────────────────────────────────────────────────── */

h1 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: .9375rem; font-weight: 600; }

.muted   { color: var(--ink-muted); }
.subtle  { color: var(--ink-subtle); }
.small   { font-size: .875rem; }
.tiny    { font-size: .8125rem; }
.mono    { font-family: var(--mono); font-size: .875em; }

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

/* ─── Iconițe (sprite SVG extern — D19) ──────────────────────────────────── */

.icon {
    width: 1.25em; height: 1.25em;
    flex: 0 0 auto;
    fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 1em; height: 1em; }

/* ─── Butoane ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .625rem 1rem;
    /* 44px: ținta minimă de atingere pe mobil (D13). */
    min-height: 44px;
    border: 1px solid transparent; border-radius: var(--radius);
    background: var(--brand); color: var(--brand-ink);
    font-size: .9375rem; font-weight: 500; text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: var(--brand-hover); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn-secondary {
    background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn-secondary:hover { background: var(--surface-alt); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(1.1); }

.btn-ghost { background: transparent; color: var(--ink-muted); }

/* Ștergerea: contur, nu suprafață plină (portat din rooflex). Un buton roșu
   masiv atrage privirea într-o pagină în care ștergerea e ultimul lucru de
   făcut; conturul îl lasă vizibil, dar nu strigă. Se umple la hover, ca să se
   vadă limpede ce se atinge. */
.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.btn-danger-outline:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-ghost:hover { background: var(--surface-alt); color: var(--ink); }

.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: .375rem .75rem; font-size: .875rem; }

/* ─── Formulare ──────────────────────────────────────────────────────────── */

.field { display: block; }
.field + .field { margin-top: 1rem; }

.label {
    display: block; margin-bottom: .375rem;
    font-size: .875rem; font-weight: 500; color: var(--ink-muted);
}

.input, .select, .textarea {
    display: block; width: 100%;
    padding: .625rem .75rem; min-height: 44px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    /* CHIAR 16px, nu 15: sub 16px, Safari pe iPhone mărește pagina la
       focus, iar apoi n-o mai micșorează — restul ecranului rămâne tăiat.
       Aici scria deja „16px pe mobil", dar valoarea era .9375rem = 15px. */
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 6rem; resize: vertical; }

.field-error { margin-top: .375rem; font-size: .8125rem; color: var(--danger); }
.field-hint  { margin-top: .375rem; font-size: .8125rem; color: var(--ink-subtle); }

/* ─── Controale mai mici, acolo unde există maus ──────────────────────────────

   Pe telefon, un câmp are 44px și scrisul 16px (D13 și capcana iOS de mai sus).
   Cu mausul, amândouă sunt risipă: rooflex ține câmpurile la 34px și scrisul la
   14px, iar o fișă de douăzeci de câmpuri câștigă 200px de ecran.

   DOUĂ condiții, nu una. Lățimea singură nu spune că omul are maus: o tabletă
   de 1024px e tot deget. `pointer: fine` e jumătatea care contează — și tocmai
   ea ține scrisul la 16px pe telefon, unde micșorarea ar declanșa zoom-ul.    */
@media (min-width: 64rem) and (pointer: fine) {
    .input, .select { min-height: 34px; padding: .3125rem .625rem; font-size: .875rem; }
    .textarea       { padding: .375rem .625rem; font-size: .875rem; }
    .label          { font-size: .8125rem; }

    /* Butoanele coboară odată cu ele: un buton de 44px lângă un câmp de 34px
       arată ca o greșeală de aliniere, nu ca o ierarhie. */
    .btn    { min-height: 36px; padding: .4375rem .875rem; font-size: .875rem; }
    .btn-sm { min-height: 30px; padding: .25rem .625rem; font-size: .8125rem; }
    .input-group .btn { min-height: 34px; }
}
.checkbox { display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.checkbox input { width: 1.125rem; height: 1.125rem; accent-color: var(--brand); }

/* ─── Carduri și panouri ─────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.card-header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .875rem 1rem; border-bottom: 1px solid var(--line);
}
.card-body   { padding: 1rem; }
.card-footer { padding: .875rem 1rem; border-top: 1px solid var(--line); }

/* ─── Alerte ─────────────────────────────────────────────────────────────── */

.alert {
    display: flex; align-items: flex-start; gap: .625rem;
    padding: .75rem .875rem; border-radius: var(--radius);
    border: 1px solid var(--line); border-left-width: 3px;
    background: var(--surface); font-size: .875rem;
}
/* Un banner nu se lipește de ce vine după el (card, formular, alt banner).
   Când e ultimul din container, nu lasă un gol în plus sub el. */
.alert:not(:last-child) { margin-bottom: 1rem; }
.alert-ok     { border-left-color: var(--ok); }
.alert-error  { border-left-color: var(--danger); }
.alert-warn   { border-left-color: var(--warn); }
.alert-info   { border-left-color: var(--info); }
.alert-ok    .icon { color: var(--ok); }
.alert-error .icon { color: var(--danger); }
.alert-warn  .icon { color: var(--warn); }
.alert-info  .icon { color: var(--info); }

/* ─── Etichete de stare ──────────────────────────────────────────────────── */

.pill {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .1875rem .5rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4;
    background: color-mix(in srgb, var(--ink-muted) 12%, transparent);
    color: var(--ink-muted);
}
.pill-ok     { background: color-mix(in srgb, var(--ok) 15%, transparent);     color: var(--ok); }
.pill-warn   { background: color-mix(in srgb, var(--warn) 18%, transparent);   color: var(--warn); }
.pill-danger { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.pill-info   { background: color-mix(in srgb, var(--info) 15%, transparent);   color: var(--info); }

/* ─── Ecranul de autentificare ───────────────────────────────────────────── */

.auth-screen {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--bg);
}
.auth-card { width: 100%; max-width: 23rem; }
.auth-brand {
    text-align: center; margin-bottom: 1.5rem;
    font-size: 1.125rem; font-weight: 600; color: var(--ink-muted);
}
.auth-brand b { color: var(--brand); font-weight: 600; }
.auth-title { text-align: center; margin-bottom: .375rem; }
.auth-sub   { text-align: center; margin-bottom: 1.5rem; font-size: .875rem; color: var(--ink-muted); }
.auth-foot  { margin-top: 1.25rem; text-align: center; font-size: .8125rem; color: var(--ink-subtle); }

/* Pe ecrane foarte mici, cardul umple lățimea și renunță la colțuri. */
@media (max-width: 24rem) {
    .auth-screen { padding: 0; }
    .auth-card   { max-width: none; }
    .auth-card .card {
        border: 0; border-radius: 0; box-shadow: none;
        min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    }
}

/* ─── Indicator de încărcare htmx (D17) ──────────────────────────────────── */

/* htmx pune .htmx-request pe elementul care declanșează cererea. Fără vreun
   semn vizibil, o cerere lentă pare o aplicație blocată. */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

[aria-busy="true"] { cursor: progress; }

/* ─── Buton care arată ca un link ────────────────────────────────────────────
   Necesar pentru acțiuni care TREBUIE să fie POST (logout), dar care arată ca
   un link. Ca o clasă, nu ca style="" inline: CSP-ul cu nonce blochează
   atributele de stil, iar rezultatul ar fi fost un buton nestilat, fără nicio
   eroare vizibilă. */

.btn-link {
    border: 0; background: none; padding: 0;
    color: var(--ink-subtle); font-size: .8125rem;
    text-decoration: underline; cursor: pointer;
}
.btn-link:hover { color: var(--ink-muted); }

/* ============================================================================
   LAYOUT APLICAȚIE — sidebar pe desktop, drawer pe mobil.
   Portat conceptual din rooflex, care are structura corectă (mobile-first,
   conținut fluid fără max-width). Rescris în CSS semantic (D18).
   ========================================================================= */

.app { min-height: 100vh; }

/* ─── Bara de sus (doar pe mobil) ────────────────────────────────────────── */

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .75rem;
    height: var(--header-h); padding: 0 .75rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar-title { font-weight: 600; font-size: .9375rem; }

/* ─── Navigația laterală ─────────────────────────────────────────────────── */

.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--line);
    /* Ascunsă în afara ecranului pe mobil; adusă de .is-open. */
    transform: translateX(-100%);
    transition: transform .2s ease;
}
.sidebar.is-open { transform: translateX(0); }

.sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); padding: 0 .75rem 0 1rem;
    border-bottom: 1px solid var(--line);
}
.sidebar-brand { font-weight: 600; letter-spacing: -.01em; }
.sidebar-brand b { color: var(--brand); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem; }

.nav-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem .75rem; min-height: 44px;
    border-radius: var(--radius);
    color: var(--ink-muted); font-size: .9375rem; font-weight: 500;
    text-decoration: none;
}
.nav-link:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.nav-link[aria-current="page"] { background: var(--brand); color: var(--brand-ink); }
.nav-link[aria-current="page"]:hover { background: var(--brand-hover); color: var(--brand-ink); }

.sidebar-foot { border-top: 1px solid var(--line); padding: .5rem; }

.nav-user {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .75rem; margin-bottom: .25rem;
}
.avatar {
    width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%;
    background: var(--brand); color: var(--brand-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 600;
}
.nav-user-name {
    font-size: .875rem; font-weight: 500; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* Fundalul întunecat de sub drawer, pe mobil. */
.backdrop {
    position: fixed; inset: 0; z-index: 30;
    background: rgba(2, 6, 23, .55);
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }

.app-main { padding: 1rem .75rem 2rem; }

/* Desktop: sidebar fix, conținutul se mută la dreapta, bara de sus dispare.

   `.sidebar-close` intră în aceeași listă, și e o reparație: butonul „×"
   din capul meniului închide SERTARUL de pe telefon. Pe desktop meniul e
   mereu deschis, deci butonul n-avea ce închide — apărea, arăta ca un
   buton, și nu făcea nimic la clic.

   Perechea lui, hamburgerul care DESCHIDE sertarul, era deja ascunsă aici
   (e în `.topbar`). Lipsea doar cealaltă jumătate. */
@media (min-width: 64rem) {
    .topbar, .backdrop, .sidebar-close { display: none; }
    .sidebar { transform: none; }
    .app-main { margin-left: var(--sidebar-w); padding: 1.5rem 1.5rem 3rem; }
}

/* ─── Antetul paginii ────────────────────────────────────────────────────── */

.page-head {
    display: flex; flex-wrap: wrap; gap: .75rem;
    align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.page-head h1 { margin: 0; }

/* ─── Bara de filtre ─────────────────────────────────────────────────────── */

/* ─── Bara de filtre a listelor ──────────────────────────────────────────────

   Un singur rând: căutarea ia spațiul rămas, selectoarele stau la dreapta ei,
   butonul la capăt. Pe ecran îngust se rup singure pe mai multe rânduri.

   ─── DE CE E NEVOIE SĂ ANULEZ LĂȚIMEA ───────────────────────────────────────

   `.input` și `.select` sunt `width: 100%`, și e corect: în FORMULARE fiecare
   câmp stă pe rândul lui, sub eticheta lui. Aici sunt unul lângă altul, iar
   `width: 100%` într-un flex face fiecare control să ceară rândul întreg — de
   aceea filtrele ieșeau unul sub altul, cât toată pagina.                     */

.filters {
    display: flex; flex-wrap: wrap; gap: .5rem;
    align-items: center; margin-bottom: 1rem;
    /* Referința panoului de perioadă — vezi `.daterange-panel`. */
    position: relative;
}

.filters .input,
.filters .select {
    width: auto;
    /* Puțin mai scunde decât în formulare: o bară de unelte, nu un formular
       de completat. Rămân peste pragul de atins cu degetul. */
    min-height: 40px;
}

/* Un `select` cu lățime automată se strânge pe cea mai lungă opțiune a lui,
   ceea ce e bine — dar sub o limită devine de necitit când e gol. */
.filters .select { min-width: 8.5rem; }

/* Căutarea ia tot ce rămâne. 16rem e pragul sub care un nume de firmă nu mai
   încape întreg cât îl scrii. */
.filter-search { position: relative; flex: 1 1 16rem; min-width: 0; }
.filter-search .input { width: 100%; }
.filter-search .icon {
    position: absolute; left: .625rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-subtle); pointer-events: none;
}
.filter-search .input { padding-left: 2.25rem; }

/* ─── Selector de perioadă (portat din rooflex) ──────────────────────────── */

.daterange { position: relative; }
.daterange-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-width: 11rem; min-height: 40px; padding: .5rem .75rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: .875rem; cursor: pointer;
}
.daterange-toggle:hover { background: var(--surface-alt); }
.daterange-panel {
    position: absolute; z-index: 25; margin-top: .25rem; left: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: none;
}
.daterange-panel.is-open { display: block; }
.daterange-body { display: flex; flex-direction: column; gap: .75rem; padding: .75rem; }
.daterange-presets { display: flex; flex-direction: column; gap: .125rem; }
.daterange-preset {
    padding: .4375rem .625rem; min-height: 36px;
    border: 0; border-radius: .5rem; background: none;
    color: var(--ink-muted); font-size: .875rem; text-align: left;
    white-space: nowrap; cursor: pointer;
}
.daterange-preset:hover { background: var(--surface-alt); color: var(--ink); }
.daterange-preset[aria-pressed="true"] { background: var(--surface-alt); color: var(--brand); font-weight: 500; }
.daterange-foot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .625rem .75rem; border-top: 1px solid var(--line);
}
/* Panoul NU se ancorează la buton — butonul stă oriunde pe rândul de filtre,
   de obicei spre dreapta, iar panoul lat de două coloane ieșea din ecran și
   lărgea pagina, pe telefon ȘI pe desktop. Referința e rândul de filtre
   întreg (`.filters`, nu `.daterange`): pe ecran mic panoul îi ia lățimea,
   pe desktop se lipește de marginea lui dreaptă. În ambele cazuri stă în
   interiorul cardului, deci nu are cum să depășească fereastra. Pe verticală
   rămâne sub buton: poziția statică a unui copil absolut se ia din părintele
   lui static, `.daterange`. */
.filters .daterange { position: static; }
.filters .daterange-panel { left: 0; right: 0; }
@media (min-width: 64rem) {
    .filters .daterange-panel { left: auto; }
}
.daterange-body > div { min-width: 0; }
@media (min-width: 30rem) {
    .daterange-body { flex-direction: row; }
    .daterange-body > div:first-child { flex: 1 1 auto; }
    .daterange-presets { border-left: 1px solid var(--line); padding-left: .75rem; }
}

/* ─── Tabele ─────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th {
    padding: .625rem 1rem; text-align: left;
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-muted);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-alt); }
.table tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* MOBIL: tabelul devine listă de carduri (D13).
   Un tabel cu scroll orizontal pe telefon e un tabel pe care nimeni nu-l
   citeste. Etichetele vin din data-label, puse pe fiecare celula. */
@media (max-width: 48rem) {
    .table--cards thead { display: none; }
    .table--cards, .table--cards tbody, .table--cards tr, .table--cards td {
        display: block; width: 100%;
    }
    .table--cards tr { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
    .table--cards td { padding: .1875rem 0; border: 0; }
    .table--cards td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--ink-muted); font-size: .8125rem;
    }
    .table--cards td.num { text-align: left; }
    .table--cards .cell-primary { font-weight: 600; padding-bottom: .25rem; }
    .table--cards .cell-primary::before { content: none; }
}

.empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-muted); font-size: .9375rem; }

/* ─── Paginare ───────────────────────────────────────────────────────────── */

.pager {
    display: flex; flex-wrap: wrap; gap: .75rem;
    align-items: center; justify-content: space-between;
    padding: .75rem 1rem; border-top: 1px solid var(--line);
    font-size: .875rem; color: var(--ink-muted);
}
.pager-nav { display: flex; gap: .25rem; align-items: center; }
.pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px; padding: 0 .5rem;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--surface); color: var(--ink-muted);
    font-size: .875rem; text-decoration: none; cursor: pointer;
}
.pager-btn:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.pager-btn[aria-current="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pager-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pager-perpage { display: flex; align-items: center; gap: .375rem; }
.pager-perpage .select { min-height: 36px; width: auto; padding: .25rem 1.5rem .25rem .5rem; }

/* ─── Toasturi ───────────────────────────────────────────────────────────── */

.toast-host {
    position: fixed; top: .75rem; right: .75rem; left: .75rem; z-index: 70;
    display: flex; flex-direction: column; gap: .5rem;
    pointer-events: none;
}
@media (min-width: 30rem) { .toast-host { left: auto; width: 22rem; } }

.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: .625rem;
    padding: .75rem .875rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line); border-left-width: 3px;
    box-shadow: var(--shadow-lg); font-size: .875rem;
    opacity: 0; transform: translateY(-.5rem);
    transition: opacity .2s, transform .2s;
}
.toast.is-in { opacity: 1; transform: none; }
.toast-ok    { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-warn  { border-left-color: var(--warn); }
.toast-msg { flex: 1; min-width: 0; }
.toast-close {
    border: 0; background: none; color: var(--ink-subtle); cursor: pointer;
    padding: .125rem; border-radius: .375rem; line-height: 0;
}
.toast-close:hover { color: var(--ink-muted); background: var(--surface-alt); }

/* ─── Dialog de confirmare ───────────────────────────────────────────────── */

.modal {
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .5); }
.modal-box {
    position: relative; width: 100%; max-width: 24rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ─── Taburi ─────────────────────────────────────────────────────────────── */

/* Capul unui card cu taburi: bara la stânga, butoanele panoului activ la
   dreapta. Pe telefon se rup pe două rânduri — un buton lipit de o bară care
   derulează orizontal e o țintă pe care degetul o ratează, fiindcă bara se mișcă
   sub el. */
.tabs-head {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--line);
}

.tabbar {
    display: flex; gap: .125rem; overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }

/* În capul cardului, linia o ține `.tabs-head` — altfel ar fi două, una sub
   alta, când butoanele trec pe rândul lor. */
.tabs-head .tabbar { flex: 1 1 14rem; min-width: 0; border-bottom: 0; }

.tabs-actions { flex: 0 1 auto; padding: .375rem .75rem; }
.tab-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* `display: flex` bate `[hidden]` din foaia browserului, iar butoanele TUTUROR
   panourilor rămâneau pe ecran, unul sub altul. Aceeași capcană e deja rezolvată
   mai jos, pentru `.tab-panel`. */
.tab-actions[hidden] { display: none; }

/* Sub 30rem, butonul ia rândul întreg: e singurul mod în care rămâne o țintă
   de 44px fără să înghesuie taburile (D13). */
@media (max-width: 30rem) {
    .tabs-actions { width: 100%; padding: .5rem .75rem; border-top: 1px solid var(--line); }
    .tab-actions .btn { flex: 1 1 auto; }
}
.tab {
    flex: 0 0 auto; white-space: nowrap;
    padding: .75rem .875rem; min-height: 44px;
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: none; color: var(--ink-muted);
    font-size: .875rem; font-weight: 500; cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tab-count {
    display: inline-flex; min-width: 1.25rem; justify-content: center;
    margin-left: .25rem; padding: 0 .375rem; border-radius: 999px;
    background: var(--surface-alt); color: var(--ink-muted);
    font-size: .6875rem; font-weight: 600;
}
.tab-panel[hidden] { display: none; }

/* ─── Banner (tenant suspendat / trial expirat) ──────────────────────────── */

.banner {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    justify-content: space-between;
    padding: .625rem 1rem; font-size: .875rem;
    background: color-mix(in srgb, var(--warn) 15%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
}

/* Butoanele din meniu (logout) arată ca linkurile de navigație. Ca regulă CSS,
   nu ca style="" inline — pe care CSP-ul cu nonce l-ar bloca tăcut. */
button.nav-link {
    width: 100%; border: 0; background: none; text-align: left;
    font: inherit; cursor: pointer;
}
.sidebar-foot form { display: block; }

/* ─── Formulare de detaliu ───────────────────────────────────────────────── */

/* Două coloane de la 40rem în sus, una pe telefon. `auto-fit` cu `minmax`, nu
   un media query: câmpurile se rearanjează după lățimea DISPONIBILĂ, deci
   funcționează la fel și când formularul stă într-un card îngust. */
.form-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
/* `.field + .field` pune margine între câmpuri; în grilă distanța o dă `gap`. */
.form-grid .field + .field { margin-top: 0; }

.form-actions {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-top: 1rem;
}

/* Setările pe care aproape nimeni nu le schimbă, strânse sub o linie.

   `<details>` nativ, fără JavaScript: se deschide singur, merge cu scripturile
   oprite și n-are nevoie de `onclick` (regula 6). Marcatorul rămâne cel al
   browserului — un triunghi desenat de noi ar fi al treilea fel de săgeată din
   aplicație, după iconițele din sprite.

   Câmpurile dinăuntru se trimit și când blocul e închis: sunt ascunse vizual,
   nu scoase din formular. */
details.advanced {
    margin-top: 1rem; padding-top: .75rem;
    border-top: 1px solid var(--line);
}
details.advanced > summary {
    cursor: pointer;
    font-size: .8125rem; font-weight: 600;
    color: var(--ink-muted);
}
details.advanced > summary:hover { color: var(--ink); }
details.advanced > .form-grid { margin-top: .75rem; }

/* Câmpul care a picat validarea. Nu doar culoare: pe ecranele unde roșul nu se
   distinge, umbra îngroșată rămâne un al doilea semnal. */
.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

/* La DREAPTA, fără linie deasupra (rooflex). Linia despărțea o „zonă
   periculoasă" care avea un singur buton în ea — iar butonul, singur pe rând
   la stânga, arăta ca acțiunea principală a paginii. */
.danger-zone { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ─── Fișă compactă: un singur card, cu secțiuni ─────────────────────────────

   De ce nu un card pentru fiecare secțiune: un card costă un antet, două
   borduri, două padding-uri și distanța până la următorul — peste 100px de
   cromatică pentru un titlu de două cuvinte. Pe fișa partenerului erau patru,
   adică o pagină de două ecrane pentru douăzeci de câmpuri.

   Aici secțiunile stau în ACELAȘI card, despărțite de o linie, iar titlul e o
   etichetă mică. Umbra și rotunjirea încadrează formularul întreg, nu fiecare
   grup de câmpuri — ceea ce e și mai aproape de adevăr: e un singur formular,
   cu un singur buton de salvare.                                             */

.form-sheet {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* Tot ce vine după fișă își ia distanța de la ea: ștergerea, taburile,
   zona de ștergere. Lipite, cele două carduri arată ca unul singur, tăiat. */
.form-sheet ~ * { margin-top: 1rem; }

.sheet-part { padding: 1rem; }
.sheet-part + .sheet-part { border-top: 1px solid var(--line); }
.sheet-part > * + * { margin-top: .75rem; }

/* Capul fișei: numele înregistrării și starea ei, în chiar cardul ei. Titlul
   paginii nu mai plutește deasupra, ca la rooflex — omul citește numele ACOLO
   unde îl și editează. */
.sheet-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--line);
}
.sheet-name { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }

/* Piciorul fișei: cine a adăugat-o și când, la stânga; salvarea, la dreapta.
   Butonul stă ÎN card, nu sub el: e acțiunea formularului, nu a paginii. */
.sheet-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .5rem;
    padding: .625rem 1rem; border-top: 1px solid var(--line);
}

/* Întoarcerea, deasupra fișei: un link, nu un buton. Nu e o acțiune asupra
   datelor, iar pe telefon un buton în plus în antet împinge titlul pe al
   doilea rând. */
.back-link {
    display: inline-flex; align-items: center; gap: .375rem;
    margin-bottom: .75rem; min-height: 32px;
    font-size: .875rem; font-weight: 500;
}

.sheet-title {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-subtle);
}

/* Câmpurile stau mai strâns decât în restul aplicației: o fișă are douăzeci de
   câmpuri, nu trei, iar distanța dintre ele se plătește de douăzeci de ori. */
.form-sheet .form-grid { gap: .75rem .875rem; }
.form-sheet .textarea { min-height: 4.5rem; }

/* Pe ecran mare nu mai e nevoie de ținta de atingere de 44px (D13): acolo se
   lucrează cu mausul. Regula de bază, pentru telefon, rămâne neatinsă —
   de aceea e scrisă aici și nu invers. Textarea NU intră: ea își ia înălțimea
   din `rows`, iar un `min-height` de 38px ar tăia-o la un rând. */
/* ─── Rânduri cu eticheta la STÂNGA câmpului ─────────────────────────────────

   Portat din rooflex (`admin/client.php`), cerut de proprietar. Două perechi
   etichetă-câmp pe rând, ca acolo.

   De ce e mai bun decât eticheta deasupra, pentru o FIȘĂ: ochiul coboară pe o
   singură coloană de etichete și se oprește la cea căutată. Cu eticheta
   deasupra, fiecare câmp cere două opriri, iar rândul crește cu 22px — de
   douăzeci de ori, pe o fișă de partener.

   Lățimea coloanei de etichete e FIXĂ, nu `max-content`: altfel fiecare pereche
   și-ar măsura singură eticheta, iar câmpurile ar începe la x-uri diferite pe
   fiecare rând — exact ce face o fișă greu de citit.

   Pe telefon, o singură coloană și eticheta deasupra: lângă un câmp, pe 360px,
   ar lăsa câmpului jumătate de ecran.                                        */

/* Steluța de „obligatoriu", lângă eticheta ei. `aria-hidden` n-are ce căuta:
   `required` de pe câmp e cel care o spune cititoarelor de ecran, steluța e
   doar pentru ochi. */
.req { margin-left: .1875rem; color: var(--danger); }

.form-rows { display: grid; gap: .5rem; grid-template-columns: 1fr; }
.form-row  { display: grid; gap: .125rem; }
.form-row .label { margin-bottom: .25rem; }
.control { min-width: 0; }

/* Un rând ascuns de comutatorul de tip (persoană fizică n-are CUI). `display:
   grid` bate `[hidden]` din foaia browserului — aceeași capcană ca la
   `.tab-actions`. */
.form-row[hidden], .perm[hidden] { display: none; }

/* Un câmp care ia rândul întreg: adresa, observațiile. */
.row-wide { grid-column: 1 / -1; }

@media (min-width: 64rem) {
    .form-rows { grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; }
    .form-row  { grid-template-columns: 8rem minmax(0, 1fr); gap: .875rem; align-items: center; }
    .form-row .label { margin-bottom: 0; }

    /* Bifele și zona de text nu se centrează pe rând: prima e mai înaltă decât
       eticheta ei, a doua are mai multe rânduri. Eticheta urcă la primul. */
    .row-top { align-items: start; }
    .row-top .label { padding-top: .5rem; }
}

/* ─── Grilă de 12 coloane ────────────────────────────────────────────────────

   Pentru rândurile în care câmpurile NU cântăresc la fel: denumirea firmei are
   nevoie de patru coloane, „Tip" de două. Unde toate câmpurile sunt la fel de
   late, `.form-grid` cu `auto-fit` rămâne mai bună — se rearanjează singură,
   după lățimea disponibilă, fără spanuri scrise cu mâna.

   Trei trepte: o coloană pe telefon, șase pe tabletă (spanurile se
   înjumătățesc), douăsprezece de la 80rem în sus. Sub 80rem, o coloană din
   douăsprezece ar fi de 60px — mai îngustă decât padding-ul propriului câmp. */
.grid-12 { display: grid; gap: .75rem .875rem; grid-template-columns: 1fr; }
.grid-12 .field + .field { margin-top: 0; }

@media (min-width: 40rem) {
    .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .grid-12 > .col-1 { grid-column: span 1; }
    .grid-12 > .col-2 { grid-column: span 2; }
    .grid-12 > .col-3, .grid-12 > .col-4 { grid-column: span 3; }
    .grid-12 > .col-5,  .grid-12 > .col-6,  .grid-12 > .col-7,
    .grid-12 > .col-8,  .grid-12 > .col-9,  .grid-12 > .col-10,
    .grid-12 > .col-11, .grid-12 > .col-12 { grid-column: span 6; }
}

@media (min-width: 80rem) {
    .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .grid-12 > .col-1  { grid-column: span 1; }
    .grid-12 > .col-2  { grid-column: span 2; }
    .grid-12 > .col-3  { grid-column: span 3; }
    .grid-12 > .col-4  { grid-column: span 4; }
    .grid-12 > .col-5  { grid-column: span 5; }
    .grid-12 > .col-6  { grid-column: span 6; }
    .grid-12 > .col-7  { grid-column: span 7; }
    .grid-12 > .col-8  { grid-column: span 8; }
    .grid-12 > .col-9  { grid-column: span 9; }
    .grid-12 > .col-10 { grid-column: span 10; }
    .grid-12 > .col-11 { grid-column: span 11; }
    .grid-12 > .col-12 { grid-column: span 12; }
}

/* Eticheta unui grup de bife, pe ACELAȘI rând cu ele („Rol: Client Furnizor").
   Deasupra ar costa încă 22px pentru un cuvânt. */
.label-inline { margin-bottom: 0; }

/* O bifă care nu ține de grupul dinaintea ei („Plătitor de TVA", lângă rolurile
   partenerului). Pe telefon nu primește nimic: acolo bifele se rup pe rânduri,
   iar o linie despărțitoare ar ajunge în capul rândului, ca o indentare
   greșită. De la 40rem în sus, unde rândul ține, linia o desparte — altfel s-ar
   citi drept al treilea rol. */
@media (min-width: 40rem) {
    .perm-apart { margin-left: .5rem; padding-left: 1rem; border-left: 1px solid var(--line); }
}

/* ─── Matricea de permisiuni ─────────────────────────────────────────────── */

.perm-grid {
    display: grid; gap: .25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* Toată eticheta e zonă de click, nu doar caseta de 16px: pe telefon, o țintă
   de 16px e sub pragul de 44px din D13 și se ratează constant. */
.perm {
    display: flex; gap: .625rem; align-items: flex-start;
    padding: .5rem; min-height: 44px;
    border-radius: var(--radius); cursor: pointer;
}
.perm:hover { background: var(--surface-alt); }
.perm input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--brand); }
.perm input:disabled { cursor: not-allowed; }

.perm-label { display: block; font-size: .9375rem; line-height: 1.35; }

/* Cheia tehnică, sub etichetă. Se vede pentru că e singurul lucru care leagă
   ecranul de ce scrie în `module.json` — fără ea, un client care raportează
   „nu merge permisiunea X" n-are cum să numească X. */
.perm-key { display: block; color: var(--ink-subtle); }

/* ─── Câmp cu buton alipit (CUI + „Preia de la ANAF") ────────────────────── */

.input-group { display: flex; gap: .5rem; align-items: stretch; }
.input-group .input { flex: 1 1 auto; min-width: 0; }
.input-group .btn  { flex: 0 0 auto; white-space: nowrap; }

/* Pe 360px, butonul cu text nu încape lângă câmp — trec unul sub altul. */
@media (max-width: 30rem) {
    .input-group { flex-wrap: wrap; }
    .input-group .btn { width: 100%; }
}

/* Butonul care așteaptă un răspuns de la rețea. Fără semnal, omul apasă din nou
   și pornește o a doua cerere. */
.btn.is-busy { opacity: .6; cursor: progress; }

/* Un rând de bife („Client" / „Furnizor"), nu o coloană: sunt puține și
   înrudite. Refolosește `.perm` pentru zona de click de 44px. */
.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }

/* ─── Formular de un singur buton, într-un rând de tabel ─────────────────── */

/* Bifarea unei sarcini direct din listă. Are nevoie de un <form> propriu ca să
   poarte tokenul CSRF, dar nu are voie să ocupe un rând. */
.inline-form { display: inline; }
.cell-actions { text-align: right; white-space: nowrap; }

/* ─── Firul de discuție al unei sarcini ─────────────────────────────────── */

.comments { list-style: none; display: flex; flex-direction: column; gap: .875rem; }

.comment {
    padding: .75rem .875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}
.comment-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
    margin-bottom: .375rem;
}
/* Butonul de retragere se duce la capătul rândului, oricâte elemente ar fi
   înaintea lui. */
.comment-head .inline-form { margin-left: auto; }

/* `word-break` pentru că un comentariu poate conține un link lipit, iar pe
   360px acela ar împinge pagina la orizontală. */
.comment-body { font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }

.comment-form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.comment-form .field { width: 100%; }
.comments + .comment-form { margin-top: 1rem; }

/* ─── Marca clientului ───────────────────────────────────────────────────── */

/* Logoul urcat de firmă, în antetul meniului. Înălțime fixă, lățime liberă:
   logourile vin în tot felul de proporții, iar o lățime fixă le-ar turti. */
.sidebar-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }

/* Previzualizarea din ecranul de setări. Fundal în carouri, ca transparența să
   se vadă ca transparență, nu ca alb — altfel omul descoperă abia pe prima
   factură că logoul lui are fundal. */
.logo-preview {
    height: auto; width: auto; max-width: 300px; max-height: 100px;
    margin: .5rem 0 .75rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .5rem;
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
        linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

/* ─── Facturi ────────────────────────────────────────────────────────────── */

/* Câmpuri strânse, pentru un tabel cu șase coloane editabile. Lățimea vine din
   conținut, nu din procente: pe telefon tabelul derulează orizontal în
   `.table-wrap`, iar coloanele își păstrează proporțiile. */
.input-xs { width: 6.5rem; }
.input-sm { width: 9rem; }

.table.lines td { vertical-align: middle; }
.table.lines .input { min-height: 38px; }

/* Totalurile facturii: etichetă la stânga, sumă la dreapta, aliniate în
   coloană. `dl` și nu tabel — sunt perechi nume/valoare, nu date tabelare. */
.totals {
    display: grid; grid-template-columns: 1fr auto;
    gap: .25rem .75rem; align-items: baseline;
    margin: 1rem 0 0 auto; max-width: 22rem;
    font-size: .9375rem;
}
.totals dt { color: var(--ink-muted); }
.totals dd { margin: 0; text-align: right; }
.totals .grand {
    padding-top: .5rem; margin-top: .25rem;
    border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.0625rem;
}

/* Totalul de sub listă: răspunsul la „cât am facturat", peste toate rândurile
   filtrate, nu peste pagina curentă. */
.list-total {
    padding: .625rem 1rem; margin: 0;
    border-top: 1px solid var(--line);
    font-size: .875rem; color: var(--ink-muted);
}

/* Acțiunile de document (emite / încasează / anulează), fiecare în formularul
   ei ca să poarte tokenul CSRF. */
.doc-actions { margin-top: 1rem; gap: .5rem; }

/* Linkul „mi-am uitat parola", sub butonul de autentificare. Clasă, nu
   `style=`: CSP-ul cu nonce blochează atributele de stil în tăcere (regula 6). */
.auth-hint { margin: 0; text-align: center; font-size: .875rem; }

/* ─── Setări declarate de module (D35) ───────────────────────────────────── */

/* Linkurile către ecranele de setări ale modulelor. Blocuri, nu o listă: pe
   telefon un rând de text e greu de nimerit cu degetul. */
.setting-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.setting-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .75rem 1rem; min-height: 44px;
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink); text-decoration: none; font-size: .9375rem;
}
.setting-link:hover { border-color: var(--brand); text-decoration: none; }
.setting-link .icon { color: var(--ink-subtle); }

/* Bifele unui grup de setări: una sub alta, fiecare cu explicația ei — sunt
   comutatoare de flux, iar un „de ce" contează mai mult decât spațiul. */
.check-column { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.check-hint { margin: .125rem 0 0 1.9rem; }

/* Un câmp care ocupă toată lățimea grilei (text lung, bifă). */
.field-wide { grid-column: 1 / -1; }

/* Comutatorul de limbă din subsolul meniului. Formular, nu linkuri: schimbă o
   preferință salvată, deci nu are ce căuta într-o cerere GET (D36). */
.lang-form { display: flex; align-items: center; gap: .375rem; }
.select-xs {
    height: 28px; min-height: 28px; padding: 0 1.5rem 0 .5rem;
    font-size: .8125rem; border-radius: .375rem;
}

/* Cifrele unei lucrări: aceleași perechi nume/valoare ca la factură, dar în
   cardul lor, nu sub un tabel — de aceea ocupă toată lățimea și nu se împing
   la dreapta. Pe telefon (publicul: șefi de șantier) e singurul lucru din card,
   deci n-are de ce să stea într-o coloană îngustă. */
.money-grid { margin: 0; max-width: none; }
@media (min-width: 40rem) { .money-grid { max-width: 26rem; } }

/* Firul Ariadnei pe lucrare: proiect › subproiect › componentă. `flex` cu
   `wrap`, ca un cod lung să treacă pe rândul următor în loc să lățească pagina
   — o pagină care se derulează lateral pe telefon e o pagină stricată. */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .125rem .375rem; margin: 0 0 .25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANOUL DE OPERATOR

   Deliberat ALTĂ culoare de bandă decât aplicația clienților. Nu e cochetărie:
   panoul poate suspenda firme, iar cine lucrează în două tab-uri trebuie să
   vadă dintr-o privire în care e. Cea mai ieftină apărare împotriva unui clic
   pe ecranul greșit.
   ───────────────────────────────────────────────────────────────────────────── */

.admin-body { background: var(--bg); }

.admin-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .625rem 1rem;
    background: #0f172a; color: #e2e8f0;
    border-bottom: 3px solid #f59e0b;
}
.admin-mark { color: #e2e8f0; text-decoration: none; font-weight: 600; }
.admin-mark b { color: #4aa0ff; }
.admin-mark span {
    margin-left: .375rem; padding: .125rem .375rem; border-radius: .25rem;
    background: #f59e0b; color: #0f172a;
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.admin-nav-link {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .5rem .75rem; border-radius: .5rem;
    color: #94a3b8; text-decoration: none; font-size: .875rem;
    /* Ținta de atingere de 44px (D13) — panoul se deschide și de pe telefon. */
    min-height: 44px;
}
.admin-nav-link:hover { background: rgba(255, 255, 255, .06); color: #e2e8f0; }
.admin-nav-link.is-active { background: rgba(74, 160, 255, .16); color: #e2e8f0; }

.admin-out { display: flex; align-items: center; gap: .5rem; color: #94a3b8; }

.admin-main {
    max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem;
    display: flex; flex-direction: column; gap: 1.25rem;
}

/* Două coloane de la tabletă în sus; una pe telefon, ca orice altceva. */
.admin-cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 56rem) { .admin-cols { grid-template-columns: 1fr 1fr; } }

/* Cifrele de sus: fiecare e un link către lista filtrată. Un număr pe care nu
   poți da clic te obligă să reconstruiești filtrul de mână. */
.stat-grid {
    display: grid; gap: .625rem;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.stat {
    display: flex; flex-direction: column; gap: .125rem;
    padding: .875rem 1rem; border-radius: .75rem;
    background: var(--card); border: 1px solid var(--line);
    text-decoration: none; color: inherit;
}
.stat:hover { border-color: var(--brand); }
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .8125rem; color: var(--ink-muted); }

/* Jurnalele: rânduri, nu tabel — se citesc de sus în jos. */
.log { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.log li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--line);
    font-size: .875rem;
}
.log li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Pașii de configurare a celui de-al doilea factor. */
.steps { margin: 1rem 0; padding-left: 1.25rem; display: grid; gap: .75rem; font-size: .9375rem; }
.steps li { padding-left: .25rem; }

.secret-key {
    display: block; margin: .5rem 0 .25rem; padding: .625rem .75rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: .5rem;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.0625rem; letter-spacing: .06em; word-break: break-all;
    /* Se selectează dintr-un dublu clic: se copiază, nu se tastează. */
    user-select: all;
}

/* Codul din aplicație: șase cifre, rărite, ca să se verifice din ochi. */
.input-code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.375rem; letter-spacing: .3em; text-align: center;
}

.auth-card-wide { max-width: 32rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .375rem; }


.text-danger { color: var(--danger, #dc2626); }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINILE JURIDICE

   Lățime de CITIT, nu de umplut ecranul. Un rând de contract întins pe 1600px
   e un rând pe care ochiul îl pierde la întoarcere — de aceea `max-width` în
   `ch`, unitatea care măsoară caractere, nu pixeli.
   ───────────────────────────────────────────────────────────────────────────── */

.legal-body { background: var(--bg); color: var(--ink); }

.legal-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
    background: var(--card);
}
.legal-brand { font-weight: 600; text-decoration: none; color: var(--ink); }
.legal-brand b { color: var(--brand); }
.legal-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; }

.legal-page {
    max-width: 72ch; margin: 0 auto; padding: 2rem 1.25rem 4rem;
    font-size: 1rem; line-height: 1.7;
}
.legal-page h1 { font-size: 1.75rem; line-height: 1.25; margin: .5rem 0 .25rem; }
.legal-page h2 { font-size: 1.1875rem; line-height: 1.35; margin: 2.5rem 0 .75rem; }
.legal-page h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.legal-page p, .legal-page ul, .legal-page ol { margin: 0 0 1rem; }
.legal-page ul, .legal-page ol { padding-left: 1.5rem; }
.legal-page li { margin-bottom: .5rem; }
.legal-page code {
    padding: .0625rem .25rem; border-radius: .25rem;
    background: var(--card); border: 1px solid var(--line);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .875em; word-break: break-word;
}

.legal-meta { color: var(--ink-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.legal-intro {
    font-size: 1.0625rem; color: var(--ink-muted);
    padding-left: 1rem; border-left: 3px solid var(--brand);
}

/* Cuprinsul: numerotat cu numerele din titluri, nu cu ale listei — titlurile
   își poartă deja numărul, iar două numerotări una lângă alta se bat cap în cap. */
.legal-toc {
    margin: 2rem 0; padding: 1rem 1.25rem;
    background: var(--card); border: 1px solid var(--line); border-radius: .75rem;
}
.legal-toc .label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--ink-muted); margin: 0 0 .5rem; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .375rem; }
.legal-toc li { margin: 0; font-size: .9375rem; }

/* Ancora sub antet: fără asta, un clic din cuprins pune titlul chiar pe muchia
   de sus a ferestrei. */
.legal-section { scroll-margin-top: 1.5rem; }

/* Tabelele din documente (temeiuri legale, termene de păstrare). Se derulează
   pe orizontală în containerul lor, nu împing pagina. */
.legal-page table {
    width: 100%; border-collapse: collapse; margin: 0 0 1.25rem;
    font-size: .9375rem; display: block; overflow-x: auto;
}
.legal-page th, .legal-page td {
    padding: .5rem .625rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.legal-page th { font-weight: 600; color: var(--ink-muted); white-space: nowrap; }

.legal-entity { border-top: 2px solid var(--line); padding-top: .5rem; }

.legal-list { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1.5rem 0; }
.legal-list li {
    padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: .75rem;
    background: var(--card); margin: 0;
}
.legal-list a { font-size: 1.0625rem; font-weight: 600; }
.legal-list p { margin: .25rem 0 0; }

.legal-foot {
    max-width: 72ch; margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
    border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-muted);
}

/* Subsolul juridic al aplicației. Discret, dar prezent pe fiecare pagină —
   legea cere „permanent accesibile", nu „undeva pe site". */
.app-foot {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem;
    padding: 1.25rem 1rem 2rem;
    font-size: .8125rem; color: var(--ink-muted);
}
.app-foot a { color: inherit; }
.app-foot a:hover { color: var(--brand); }

.auth-legal { margin-top: .75rem; text-align: center; color: var(--ink-muted); }

/* Sufixul lipit de câmp: „firma-mea│.truckplan.app". Omul vede din prima că scrie
   doar partea din față, nu toată adresa — un placeholder ar fi spus același
   lucru, dar dispare exact când începe să tasteze. */
.input-suffix { display: flex; align-items: stretch; }
.input-suffix .input {
    flex: 1; min-width: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: 0;
}
.input-suffix .suffix {
    display: flex; align-items: center; padding: 0 .75rem;
    border: 1px solid var(--line); border-left: 0;
    border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;
    background: var(--bg); color: var(--ink-muted);
    font-size: .875rem; white-space: nowrap;
}
/* Pe ecrane înguste sufixul ar strivi câmpul: trece dedesubt. */
@media (max-width: 26rem) {
    .input-suffix { flex-direction: column; }
    .input-suffix .input { border-radius: .5rem; border-right: 1px solid var(--line); }
    .input-suffix .suffix {
        border: 0; padding: .25rem 0 0; background: none;
        font-size: .8125rem;
    }
}


/* Cardul secundar de pe pagina de intrare: „nu-ți amintești adresa?". Vizual
   mai șters decât cel principal — e o cale de rezervă, nu una egală. */
.card-quiet { background: transparent; border-style: dashed; }
.tiny-title {
    font-size: .9375rem; font-weight: 600; margin: 0 0 .25rem;
}

/* ─── Cererile din pagina de prezentare ──────────────────────────────────── */

/* Contactul sus-stânga, starea sus-dreapta: prima privire răspunde la „cine e
   și am vorbit deja cu el?". Pe telefon se așază unul sub altul. */
.lead-head {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    align-items: flex-start; justify-content: space-between;
}
.lead-contact {
    margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem;
    font-size: .9375rem;
}
.lead-message {
    margin: .75rem 0 0; padding: .625rem .75rem;
    background: var(--surface-alt); border-radius: .5rem;
    font-size: .875rem; line-height: 1.5; white-space: normal;
    /* Mesajele de spam vin cu URL-uri lungi, fără spații: fără asta, cardul
       se lățește și pagina capătă bară orizontală. */
    overflow-wrap: anywhere;
}
/* Salvarea și ștergerea sunt formulare separate (rute diferite), dar stau pe
   același rând. Ștergerea împinsă la dreapta, ca să n-o nimerești din greșeală
   când voiai „Salvează". */
.lead-actions {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    align-items: center; margin-top: .75rem;
}
.lead-save {
    display: flex; flex-wrap: wrap; gap: .5rem;
    align-items: center; flex: 1 1 20rem;
}
.lead-save .input { flex: 1 1 14rem; min-width: 0; }
.lead-save .select { flex: 0 0 auto; width: auto; }
.lead-delete { margin-left: auto; }

/* Cifra pe care ai apăsat rămâne evidentă — altfel nu se vede ce filtru e pus. */
.stat.is-current { border-color: var(--brand); background: var(--surface-alt); }

/* Paginarea simplă, cu un link per pagină (listele din panoul de operator).
   `Ui::pager()` folosește `.pager-btn`; astea sunt ecranele care numerotează
   direct, fără contor. */
.pager-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px; padding: 0 .5rem;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--surface); color: var(--ink-muted);
    font-size: .875rem; text-decoration: none;
}
.pager-link:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.pager-link.is-current { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ─── Înregistrarea self-service ─────────────────────────────────────────── */

/* Un ecran mai lat decât cel de logare: aici sunt patru câmpuri, o bifă și
   trei pachete, nu email + parolă. */
.auth-screen-wide .auth-card { max-width: 34rem; }

.plan-choice { border: 0; padding: 0; margin: 0; }
.plan-choice legend { padding: 0; margin-bottom: .5rem; }

.plan-grid {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

/* Butonul radio rămâne în DOM pentru tastatură și cititoare de ecran, dar nu
   se vede: cardul întreg e ținta de atins cu degetul. */
.plan-option { position: relative; cursor: pointer; }
.plan-option input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.plan-body {
    display: flex; flex-direction: column; gap: .125rem;
    padding: .75rem .875rem; border-radius: .75rem;
    border: 1px solid var(--line); background: var(--card);
}
.plan-option input:checked + .plan-body {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}
/* Conturul de focus trebuie să rămână vizibil, altfel navigarea cu Tab devine
   invizibilă — butonul radio e ascuns, deci conturul lui n-ar apărea nicăieri. */
.plan-option input:focus-visible + .plan-body { outline: 2px solid var(--brand); outline-offset: 2px; }

.plan-name  { font-weight: 600; font-size: .9375rem; }
.plan-price { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.plan-per   { font-size: .75rem; font-weight: 400; color: var(--ink-muted); }
.plan-users { font-size: .8125rem; color: var(--ink-muted); }

/* Adresa: câmpul și sufixul `.truckplan.app` par un singur control, ca omul să
   vadă dintr-o privire ce va scrie în bara browserului. */
.addr-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--surface); overflow: hidden;
}
.addr-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft, rgba(43,140,255,.15)); }
.addr-input .input {
    border: 0; border-radius: 0; background: transparent;
    flex: 1 1 auto; min-width: 0;
}
.addr-input .input:focus { box-shadow: none; }
.addr-suffix {
    display: flex; align-items: center; padding: 0 .75rem;
    background: var(--surface-alt); color: var(--ink-muted);
    font-size: .875rem; white-space: nowrap;
    border-left: 1px solid var(--line);
}

.auth-alt { margin: 1.25rem 0 0; text-align: center; font-size: .875rem; color: var(--ink-muted); }

/* Pagina de așteptare, cât se construiește instanța. */
.wait-box { text-align: center; padding: 1rem 0; }
.wait-dot {
    display: inline-block; width: .625rem; height: .625rem; margin: 0 .1875rem;
    border-radius: 50%; background: var(--brand);
    animation: wait-pulse 1.2s ease-in-out infinite;
}
.wait-dot:nth-child(2) { animation-delay: .15s; }
.wait-dot:nth-child(3) { animation-delay: .3s; }
@keyframes wait-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Cine a cerut mai puțină mișcare nu primește niciuna. */
@media (prefers-reduced-motion: reduce) {
    .wait-dot { animation: none; opacity: .6; }
}

/* ─── Paginile publice ale platformei ────────────────────────────────────── */

/*
 * Tot ce vede un vizitator ÎNAINTE să intre în instanța lui — înregistrarea,
 * intrarea în cont, documentele juridice — poartă tema paginii de prezentare.
 *
 * DE CE nu urmează preferința sistemului, ca restul aplicației: omul vine de pe
 * `truckplan.app`, care e întunecată mereu. Pe un calculator cu tema deschisă,
 * următorul ecran s-ar albi brusc, iar saltul citește ca „am nimerit pe alt
 * site" exact în momentul în care i se cere emailul și o parolă.
 *
 * Înăuntru, în instanța lui, aplicația revine la preferința sistemului: acolo e
 * o unealtă de lucru, folosită ore în șir, nu o pagină de prezentare.
 *
 * Culorile sunt cele din `tailwind.config.js` al paginii de prezentare
 * (`ink` și `brand`). Se suprascriu DOAR variabilele: butoanele, cardurile și
 * câmpurile rămân neatinse și se colorează singure.
 */
.marketing {
    --bg:          #070b16;   /* ink-900 */
    --surface:     #0f172e;   /* ink-700 */
    --surface-alt: #0a1020;   /* ink-800 */
    --line:        #1e2a4a;
    --ink:         #e8edf7;
    --ink-muted:   #94a3b8;
    --ink-subtle:  #64748b;

    --brand:       #2563eb;   /* brand-600 */
    --brand-hover: #3b82f6;   /* brand-500 */
    --brand-ink:   #ffffff;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .8);

    background: var(--bg);
    color: var(--ink);
    /* Aceeași față și pe un ecran mai înalt decât conținutul. */
    min-height: 100vh;
}

/* Aceeași aură albastră de sub cardul principal ca pe pagina de prezentare. */
.marketing .auth-card > .card {
    border-color: rgba(96, 165, 250, .14);
    box-shadow: var(--shadow-lg), 0 0 60px -30px rgba(37, 99, 235, .6);
}

.marketing .auth-brand { color: #e8edf7; }
.marketing .auth-brand b { color: #60a5fa; }

/* Legăturile din text (termeni, confidențialitate) trebuie să se vadă pe fundal
   închis fără să strige. */
.marketing a { color: #60a5fa; }
.marketing a:hover { color: #93c5fd; }

/* Câmpurile: puțin mai deschise decât cardul, ca să se distingă marginile. */
.marketing .input,
.marketing .select,
.marketing .textarea,
.marketing .addr-input { background: #0a1020; }

.marketing .addr-suffix { background: #070b16; color: #94a3b8; }

/* Parola, cerută o singură dată: câmpul și butonul „arată" par un singur
   control, ca la adresă. Butonul e text, nu o iconiță de ochi — un cuvânt se
   citește fără să-l ghicești, iar cititoarele de ecran îl anunță corect. */
.pass-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--surface); overflow: hidden;
}
.pass-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 140, 255, .15); }
.pass-input .input {
    border: 0; border-radius: 0; background: transparent;
    flex: 1 1 auto; min-width: 0;
}
.pass-input .input:focus { box-shadow: none; }
.pass-reveal {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; min-width: 2.75rem; padding: 0 .875rem;
    border: 0; border-left: 1px solid var(--line);
    background: var(--surface-alt); color: var(--ink-muted);
    font: inherit; font-size: .8125rem; cursor: pointer;
    /* Aceeași lățime în ambele stări, ca marginea câmpului să nu sară la clic. */
    min-width: 5rem;
}
.pass-reveal:hover { color: var(--ink); }
.pass-reveal[aria-pressed="true"] { color: var(--brand); }

.marketing .pass-input { background: #0a1020; }
.marketing .pass-reveal { background: #070b16; }

/* Starea adresei, verificată în timp ce se scrie. Culoarea NU e singurul
   semn — mesajul de sub câmp spune același lucru în cuvinte, fiindcă unul din
   doisprezece bărbați nu deosebește roșul de verde. */
.slug-status { display: block; margin-top: .25rem; font-size: .8125rem; min-height: 1.1em; }
.slug-status.is-ok  { color: var(--ok); }
.slug-status.is-bad { color: var(--danger); }

.addr-input:has(.input.is-invalid) { border-color: var(--danger); }
.addr-input:has(.input.is-valid)   { border-color: var(--ok); }
/* `:has()` lipsește pe browsere vechi; atunci rămâne mesajul scris, care e
   oricum purtătorul adevărat al informației. */
.input.is-invalid { color: var(--danger); }

/* Banda de alertă pentru abuz. Lista, nu un semn de exclamare: ce anume a
   depășit pragul, de pe ce rețea și de câte ori. */
.abuse-alert { align-items: flex-start; margin-bottom: 1rem; }
.abuse-title { margin: 0 0 .375rem; font-weight: 600; }
.abuse-list { margin: 0; padding-left: 1.125rem; font-size: .875rem; line-height: 1.6; }
.abuse-list .mono { font-size: .8125rem; }

/* Întoarcerea la pagina de prezentare. Sus-stânga, deasupra cardului: acolo
   caută oricine „înapoi". Contează mai mult decât pare — e alt domeniu decât
   cel pe care se află omul, deci butonul browserului nu duce unde crede. */
.auth-back {
    display: inline-flex; align-items: center; gap: .375rem;
    margin-bottom: .75rem; padding: .375rem .625rem .375rem .375rem;
    border-radius: .5rem;
    font-size: .875rem; color: var(--ink-muted); text-decoration: none;
    /* Ținta de atins cu degetul, pe telefon. */
    min-height: 40px;
}
.auth-back:hover { color: var(--ink); background: var(--surface-alt); text-decoration: none; }
.auth-back .icon { width: 1rem; height: 1rem; }

/* Sigla e și ea un link acum; nu trebuie să arate ca unul. */
a.auth-brand { text-decoration: none; }
a.auth-brand:hover { text-decoration: none; }

.marketing .auth-back { color: #94a3b8; }
.marketing .auth-back:hover { color: #e8edf7; background: rgba(255, 255, 255, .04); }

/* Butonul „arată parola": iconiță, deci pătrat, nu bandă de text. */
.pass-reveal .icon { width: 1.125rem; height: 1.125rem; }

/* ─── Emitentul documentului juridic ─────────────────────────────────────── */

/*
 * Cartea de vizită a firmei, de la finalul fiecărui document.
 *
 * A folosit o vreme `.totals` — clasa totalurilor de factură. Semăna, dar
 * rezolva altceva: acolo sunt perechi „Subtotal / 1.234,00", valori scurte
 * aliniate la dreapta, într-o coloană îngustă lipită de marginea paginii.
 * Aici sunt etichete lungi („Protecția datelor") și valori lungi (o adresă
 * poștală întreagă) — iar rezultatul era etichete rupte în două rânduri, cu un
 * gol în mijloc și blocul plutind spre dreapta, departe de titlul lui.
 */
.entity-card {
    margin: 1rem 0 0;
    padding: .25rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--surface-alt);
}

.entity-grid {
    display: grid;
    /* Eticheta se dimensionează după cel mai lung text, dar nu peste 12rem:
       traducerile diferă, iar o coloană fixă ar rupe fie româna, fie engleza. */
    grid-template-columns: minmax(min-content, 12rem) 1fr;
    gap: 0;
    margin: 0;
    font-size: .9375rem;
}

.entity-grid dt,
.entity-grid dd {
    padding: .625rem 0;
    /* Linie între rânduri, nu chenar în jurul fiecăruia: ochiul urmărește
       perechea eticheta–valoare de-a lungul rândului. */
    border-top: 1px solid var(--line);
}

/* Primul rând n-are nevoie de linie: e lipit de marginea cardului. */
.entity-grid dt:first-of-type,
.entity-grid dt:first-of-type + dd { border-top: 0; }

.entity-grid dt {
    color: var(--ink-muted);
    padding-right: 1.5rem;
}

.entity-grid dd {
    margin: 0;
    /* La STÂNGA, nu la dreapta. Valorile se citesc una sub alta, ca o listă —
       alinierea la dreapta le împrăștia pe lățimi diferite. */
    text-align: left;
    /* O adresă lungă sau un email lung nu au voie să lățească pagina. */
    overflow-wrap: anywhere;
}

/* Pe telefon, eticheta trece deasupra valorii: două coloane într-un ecran de
   360px ar lăsa fiecărei valori vreo cincisprezece caractere. */
@media (max-width: 30rem) {
    .entity-grid { grid-template-columns: 1fr; }
    .entity-grid dt { padding: .625rem 0 0; font-size: .8125rem; }
    .entity-grid dd { padding: .125rem 0 .625rem; border-top: 0; }
    .entity-grid dt:first-of-type + dd { border-top: 0; }
}

/* Butonul de retrimitere, sub mesajul „verifică-ți emailul". Discret: nu e
   acțiunea principală, e plasa pentru cazul în care mesajul întârzie. */
.resend { margin-top: 1.25rem; text-align: center; }
.resend p { margin: 0; }

/* ─── Prima pagină după logare ───────────────────────────────────────────── */

.home-head h1 { margin: 0 0 1.25rem; font-size: 1.5rem; }

/* Butoanele de „începe ceva". Pe telefon se așază pe rânduri, fiecare cu
   înălțimea unei ținte de deget. */
.home-actions {
    display: flex; flex-wrap: wrap; gap: .625rem;
    margin-bottom: 1.5rem;
}
.home-actions .btn { min-height: 44px; }

/* Primii pași: o listă numerotată, nu bife. Bifele cer o stare salvată, iar
   aici starea E realitatea — pasul dispare când e făcut. */
.home-steps { margin-bottom: 1.5rem; }
.steps a { font-weight: 600; }
.steps p { margin: .125rem 0 0; }

/* Cardurile modulelor. `auto-fit` cu minim: pe un ecran lat intră patru, pe
   telefon unul, fără niciun punct de rupere scris de mână. */
.home-cards {
    display: grid; gap: .875rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.home-card {
    display: flex; flex-direction: column; gap: .125rem;
    padding: 1.125rem 1.25rem; border-radius: .875rem;
    border: 1px solid var(--line); background: var(--card);
    text-decoration: none; color: inherit;
}
.home-card:hover { border-color: var(--brand); text-decoration: none; }
.home-card-title { font-size: .8125rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.home-card-value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: .25rem; }
.home-card-label { font-size: .875rem; color: var(--ink-muted); }
.home-card-detail {
    display: flex; flex-wrap: wrap; gap: .25rem .875rem;
    margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line);
    font-size: .8125rem; color: var(--ink-muted);
}