/* Corda Campers — shell UI (reuse Camperly), temă BLEU. Culorile centralizate în tokeni.
   F1-08: teal → bleu deschis. Sursa UNICĂ de culoare e blocul `:root` de mai jos; template-urile
   nu au voie să reintroducă hexuri de temă (vezi tests/test_tema_culori.py, care asertează asta).
   Contrastele perechilor text/fundal sunt verificate mecanic în același test (WCAG AA, ≥4.5:1). */
:root{
  /* Design tokens — tema bleu Corda (era teal; înainte navy/blue-ul Camperly). */
  --sidebar-bg:#0A3D62;      /* bleu închis, fundal meniu (era teal închis) */
  --primary:#0F76B8;         /* bleu deschis: butoane, nav activ, linkuri (era teal) */
  --primary-hover:#0B5E8F;   /* hover */
  --accent:#28B2FA;          /* cyan CORDA (sampleuit din logo) — DOAR accente NEtextuale */
  --primary-soft:#E3F1FB;    /* fundal moale pe primary (badge PF, pill-uri) */
  --primary-mild:#C7E3F7;    /* o treaptă peste soft: hover pe pill-uri/butoane plate */
  --primary-light:#7FC3E8;   /* bleu deschis pentru SERII de grafic (fill, nu text) */
  --chart-neutru:#94a3b8;    /* seria neutră din grafice (restul/„de plătit") */
  /* Accent secundar — ZONA DE BANI (Trezorerie/Financiar/Facturare). Vezi `.zona-bani` mai jos. */
  --money:#C2410C;           /* portocaliu: butoane, indicatori de sumă, header de secțiune */
  --money-hover:#9A3412;     /* hover pe butoanele din zona de bani */
  --money-soft:#FFEDD5;      /* fundal moale portocaliu (pill-uri, header de secțiune) */
  --money-fg:#7C2D12;        /* text portocaliu închis, pe alb sau pe --money-soft */
  /* Neutre — rămân pe paleta Camperly (nu se schimbă). */
  --page-bg:#f3f6fb; --text:#172033; --muted:#64748b; --border:#e5e7eb;
  --input-border:#d6deeb; --card-shadow:0 10px 30px #dbe4f0;
  /* Badge-uri PF/PJ (bleu). */
  --badge-pf-bg:#E3F1FB; --badge-pf-fg:#0B5E8F;
  --badge-pj-bg:#A9D6F5; --badge-pj-fg:#0A3D62;
  /* F3-09 — badge de ALERTĂ („Blocată"): roșu, aceleași valori ca `.flash.error`. Nu bleu (ar
     citi ca stare normală) și nu portocaliul de bani (accentul ăla marchează ZONA de bani). */
  --badge-alerta-bg:#fee2e2; --badge-alerta-fg:#991b1b;
  /* F2-01 — statusul clientului. Trei culori DISTINCTE de restul: bleul e „tip de client", roșul
     de alertă e „fișă blocată". Inactiv e gri stins, nu roșu — un client care n-a mai venit de
     doi ani nu e o urgență de rezolvat, e o stare de citit. Contrast verificat în
     `tests/test_tema_culori.py` (toate ≥ 6:1). */
  --badge-activ-bg:#DCFCE7; --badge-activ-fg:#166534;
  --badge-dormant-bg:#FEF3C7; --badge-dormant-fg:#92400E;
  --badge-inactiv-bg:#E2E8F0; --badge-inactiv-fg:#334155;
  /* F2-03 — expirarea documentelor. Roșul e cel de ALERTĂ (deja folosit de „Blocată"): un act
     expirat e aceeași clasă de urgență ca o fișă blocată, deci merită aceeași culoare, nu una
     nouă. Galbenul de avertisment e propriu, nu împrumutat de la „Dormant": tokenii ăia înseamnă
     status de CLIENT, iar o valoare schimbată acolo n-are voie să mute culoarea alertelor de aici.
     Contrast verificat în `tests/test_document_expirari.py` (≥ 4.5:1). */
  --badge-avertisment-bg:#FEF3C7; --badge-avertisment-fg:#92400E;
  /* F2-11 — statusul VEHICULULUI. Familie proprie de tokeni, nu cea de status CLIENT: cele două
     apar una lângă alta (fișa vehiculului arată și clientul), iar aceeași culoare pentru „Activ"
     și „Disponibil" ar fi citit ca aceeași stare. Patru culori distincte între ele, niciuna
     roșie: nicio stare de vehicul nu e o urgență — „În service" e o informație, nu o alertă.
     Portocaliul e evitat deliberat (accentul ăla marchează ZONA DE BANI, ca la „Blocată").
     Contrast verificat în `tests/test_tema_culori.py` (toate ≥ 6:1). */
  --badge-vehicul-service-bg:#EDE9FE; --badge-vehicul-service-fg:#5B21B6;
  --badge-vehicul-parcare-bg:#CFFAFE; --badge-vehicul-parcare-fg:#155E75;
  --badge-vehicul-mentenanta-bg:#FCE7F3; --badge-vehicul-mentenanta-fg:#9D174D;
  --badge-vehicul-disponibil-bg:#DCFCE7; --badge-vehicul-disponibil-fg:#166534;
  /* F3-02 — SEGMENTUL COMERCIAL al clientului. Familie proprie, și aici cu un motiv precis: pe
     lista de clienți segmentul stă în ACELAȘI rând cu statusul (F2-01), iar o culoare împrumutată
     de acolo ar fi citit cele două ca pe o singură stare — exact confuzia pe care AC3 o interzice.
     Spre deosebire de celelalte familii, asta e o SCARĂ: același ton, tot mai saturat de la Nou la
     VIP, fiindcă valorile chiar sunt ordonate (Nou < Standard < VIP). VIP e singurul badge PLIN
     din aplicație — treapta de sus se vede dintr-o privire, fără să citești textul.
     Fără portocaliu (accentul ăla marchează ZONA DE BANI) și fără verde/chihlimbar/gri, care sunt
     deja statusuri de client. Contrast verificat în `tests/test_segment_client.py` (toate ≥ 6:1). */
  --badge-segment-nou-bg:#E0E7FF; --badge-segment-nou-fg:#3730A3;
  --badge-segment-standard-bg:#C7D2FE; --badge-segment-standard-fg:#312E81;
  --badge-segment-vip-bg:#4338CA; --badge-segment-vip-fg:#FFFFFF;
}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--page-bg);color:var(--text)}

/* Layout */
.app{display:flex;min-height:100vh}
.content{flex:1;padding:32px}
h1{margin:0 0 20px;font-size:28px}

/* Sidebar */
.sidebar{width:255px;background:var(--sidebar-bg);color:#fff;padding:20px 16px;display:flex;flex-direction:column}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:24px;padding:12px 8px 4px}
.brand-logo{width:170px;max-width:100%;height:auto;display:block;padding:6px}  /* safe-area ca logo-ul să respire pe bleu */
.brand-sub{font-size:11px;font-weight:400;color:#94a3b8;text-align:center}
nav{flex:1}
nav a{display:flex;align-items:center;gap:10px;color:#cbd5e1;text-decoration:none;padding:10px 14px;border-radius:12px;margin:2px 0;font-size:14px;transition:all .15s;border-left:3px solid transparent}
nav a svg{width:20px;height:20px;flex-shrink:0;stroke-width:1.8}
nav a:hover{background:var(--primary);color:#fff}
/* Item activ: bleu + accent cyan discret (bordură + iconiță) — accentul e mic, bleul rămâne dominant. */
nav a.active{background:var(--primary);color:#fff;border-left-color:var(--accent)}
nav a.active svg{color:var(--accent)}

/* Panels / carduri */
.panel{background:#fff;border-radius:22px;padding:22px;box-shadow:var(--card-shadow);margin-bottom:20px}

/* Tabele */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-size:13px}
td a{color:var(--primary);font-weight:600;text-decoration:none}
/* Hover pe link de tabel: `--primary-hover`, NU `--accent`. Cyanul #28B2FA are 2.4:1 pe alb —
   ca TEXT era ilizibil (defect moștenit din tema teal); ca accent NEtextual rămâne folosit. */
td a:hover{color:var(--primary-hover);text-decoration:underline}

/* Badge-uri */
.badge{padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;background:var(--primary-soft);color:var(--primary-hover)}
.badge-pf{background:var(--badge-pf-bg);color:var(--badge-pf-fg)}
.badge-pj{background:var(--badge-pj-bg);color:var(--badge-pj-fg)}
/* Culori EXPLICITE, nu tokeni de temă: badge-ul de alertă rămâne roșu și în `.zona-bani`,
   unde `--primary-soft` devine portocaliu. */
.badge-blocata{background:var(--badge-alerta-bg);color:var(--badge-alerta-fg)}
/* F2-01 — status client. Tot culori explicite, din același motiv: badge-ul trebuie să însemne
   același lucru și pe o pagină din `.zona-bani`. */
.badge-status-activ{background:var(--badge-activ-bg);color:var(--badge-activ-fg)}
.badge-status-dormant{background:var(--badge-dormant-bg);color:var(--badge-dormant-fg)}
.badge-status-inactiv{background:var(--badge-inactiv-bg);color:var(--badge-inactiv-fg)}
/* F2-03 — expirarea documentelor (roșu = expirat, galben = aproape de termen). Tot culori
   explicite: badge-ul înseamnă același lucru și pe o pagină din `.zona-bani`. */
.badge-expirat{background:var(--badge-alerta-bg);color:var(--badge-alerta-fg)}
.badge-expira-curand{background:var(--badge-avertisment-bg);color:var(--badge-avertisment-fg)}
/* F2-11 — status vehicul. Tot culori explicite, din același motiv ca mai sus: badge-ul trebuie
   să însemne același lucru și pe o pagină din `.zona-bani`. */
.badge-vehicul-service{background:var(--badge-vehicul-service-bg);color:var(--badge-vehicul-service-fg)}
.badge-vehicul-parcare{background:var(--badge-vehicul-parcare-bg);color:var(--badge-vehicul-parcare-fg)}
.badge-vehicul-mentenanta{background:var(--badge-vehicul-mentenanta-bg);color:var(--badge-vehicul-mentenanta-fg)}
.badge-vehicul-disponibil{background:var(--badge-vehicul-disponibil-bg);color:var(--badge-vehicul-disponibil-fg)}
/* F3-02 — segment comercial. Pe lângă culoare, badge-ul are altă FORMĂ decât cele de status:
   colțuri drepte în loc de pastilă, text mare-mic și contur. Culoarea singură n-ar fi fost o
   distincție onestă (AC3) — cine nu deosebește nuanțele tot ar fi văzut două pastile identice
   în același rând de tabel. */
.badge-segment{border-radius:6px;text-transform:uppercase;letter-spacing:.06em;font-size:11px;border:1px solid currentColor}
.badge-segment-nou{background:var(--badge-segment-nou-bg);color:var(--badge-segment-nou-fg)}
.badge-segment-standard{background:var(--badge-segment-standard-bg);color:var(--badge-segment-standard-fg)}
.badge-segment-vip{background:var(--badge-segment-vip-bg);color:var(--badge-segment-vip-fg)}

/* Formulare */
label{display:block;margin:.7rem 0 .25rem;font-weight:600;font-size:14px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--input-border);border-radius:12px;background:#fff;font-family:inherit;font-size:inherit}
select{cursor:pointer}
fieldset{border:1px solid var(--border);border-radius:16px;padding:8px 16px 16px;margin:16px 0}
legend{font-weight:700;color:var(--muted);padding:0 6px}
.search-input{width:100%;max-width:420px;padding:12px 16px;border:1px solid var(--input-border);border-radius:12px;font-size:14px;background:#f8fafc}
/* Focus ring = accent cyan (accent mic). */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(40,178,250,.18)}

/* Butoane */
.btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:12px;padding:11px 18px;font-weight:700;cursor:pointer;text-decoration:none;font-size:14px}
.btn:hover{background:var(--primary-hover)}
.btn.secondary{background:#e5e7eb;color:var(--text)}
.btn.secondary:hover{background:#d1d5db}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}

/* Flash */
.flash{padding:14px 20px;border-radius:12px;margin-bottom:20px;font-weight:600;font-size:14px}
.flash.success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.flash.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.flash.warning{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}

/* F3-01 — câmp precompletat din OCR pe care citirea NU l-a putut confirma (cifră de control
   picată, câmp gol sau poză slabă). Aceleași valori ca `.flash.error`, ca „neconfirmat" să se
   citească la fel peste tot în aplicație. Marcajul e VIZUAL: poarta care oprește salvarea e bifa
   de confirmare, nu culoarea — un operator care lucrează pe un ecran prost calibrat nu trebuie să
   depindă de ea, de aceea eticheta câmpului spune și în cuvinte „neconfirmat". */
.camp-neconfirmat{border:1px solid #fca5a5;background:#fee2e2}

/* Responsive */
@media(max-width:768px){
  .app{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;flex-wrap:wrap;padding:12px 16px;gap:8px}
  .brand{margin-bottom:0}
  nav{display:flex;flex-wrap:wrap;gap:4px}
  nav a{padding:8px 12px;font-size:13px}
  /* F3-08: pe mobil nav-ul e un rând care se înfășoară; grupurile păstrează comportamentul,
     fiecare pe linia lui, cu intrările înșirate sub titlul-buton. */
  .nav-grup{display:flex;flex-wrap:wrap;gap:4px;width:100%}
  .nav-grup-intrari{display:flex;flex-wrap:wrap;gap:4px;width:100%}
  .nav-section{margin:6px 0 0}
  .content{padding:16px}
}

/* UI grafice+meniu: etichete de secțiune în sidebar.
   F3-08: eticheta a devenit BUTON de colapsare (`<button class="nav-section">`), deci regula
   resetează stilul implicit de buton (fundal/bordură/font) ca aspectul să rămână identic cu al
   fostului `<div>`. Aliniere neschimbată: fostul `margin:14px 14px 4px` = margin vertical +
   `padding:0 14px`, ca zona de click să prindă toată lățimea sidebar-ului, nu doar textul. */
.nav-section{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;background:none;border:0;font:inherit;text-align:left;cursor:pointer;color:#8FB6D6;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:14px 0 4px;padding:0 14px;opacity:.8}
.nav-section:hover{opacity:1;color:#fff}
.nav-section:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.nav-chevron{width:12px;height:12px;flex-shrink:0;transition:transform .15s}
/* Starea STRÂNSĂ: pusă de JS pe grup. Fără JS nu există `.strans` nicăieri ⇒ meniul e integral
   vizibil, exact ca înainte de felie (AC4). */
.nav-grup.strans .nav-chevron{transform:rotate(-90deg)}
.nav-grup.strans .nav-grup-intrari{display:none}
/* grid pentru grafice pe dashboard/rapoarte */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:16px 0}
.chart-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.chart-card h3{margin:0 0 10px;font-size:14px}
.chart-card canvas{max-height:240px}

/* ─── F3-03: banda orizontală a atelierului (vehicule × zile) ─────────────────────────────────
   Grila și barele sunt randate pe server (templates/dashboard_timeline.html); aici stau DOAR
   culorile și geometria fixă. Poziționarea (câte coloane, unde începe bara) rămâne în `style=`
   inline, fiindcă depinde de date — restul vine din tokeni, ca peste tot. */
.tl-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tl-btn{display:inline-block;background:var(--primary-soft);color:var(--primary-hover);border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700;text-decoration:none}
.tl-btn:hover{background:var(--primary-mild)}
.tl-btn.activ{background:var(--primary);color:#fff}
.tl-zoom{display:inline-flex;gap:6px;margin-left:auto}
.tl-legenda{color:var(--muted);font-size:13px;margin:0 0 14px}
.tl-scroll{overflow-x:auto;overflow-y:visible;border:1px solid var(--border);border-radius:12px;background:#fff}
.tl-grid{display:grid;min-width:max-content}
/* Coloana de vehicule rămâne lipită la stânga cât timp banda se derulează orizontal. */
.tl-corner{position:sticky;left:0;z-index:3;background:var(--sidebar-bg);color:#fff;font-weight:700;font-size:12px;padding:8px}
.tl-head{background:var(--sidebar-bg);color:#fff;text-align:center;padding:6px 0;font-size:11px;line-height:1.1}
.tl-head-zi{display:block;font-weight:700}
.tl-head-luna{display:block;opacity:.65;font-size:9px}
.tl-head.tl-azi{background:var(--primary)}
.tl-luna-noua{box-shadow:inset 2px 0 0 var(--accent)}
.tl-nume{position:sticky;left:0;z-index:2;background:#f8fafc;border-top:1px solid var(--border);font-size:12px;font-weight:600;padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-lane{border-top:1px solid var(--border)}
.tl-lane-grid{display:grid;position:relative;min-height:32px}
.tl-cell{border-right:1px solid #f1f5f9;grid-row:1}
.tl-azi-cell{background:var(--primary-soft)}
/* Bara = link către fișă (click pe celulă → fișa comenzii). Text alb pe `--primary`: pereche
   verificată în tests/test_tema_culori.py. */
.tl-bar{align-self:center;height:24px;line-height:24px;border-radius:6px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tl-bar:hover{background:var(--primary-hover)}
/* Fișă blocată (F3-09): roșul închis al badge-ului de alertă, folosit aici ca FUNDAL (text alb pe
   el = 8.6:1). Culori explicite, nu tokeni de temă — alerta rămâne roșie și în `.zona-bani`. */
.tl-bar-blocata{background:var(--badge-alerta-fg)}
.tl-bar-blocata:hover{background:var(--badge-alerta-fg);opacity:.9}
/* Capătul din stânga tăiat = fișa e deschisă dinaintea ferestrei; cel din dreapta „în curs" =
   fișa n-are dată de sfârșit, deci ocuparea continuă dincolo de marginea ferestrei. */
.tl-taiat-stanga{border-top-left-radius:0;border-bottom-left-radius:0;border-left:3px dashed rgba(255,255,255,.85)}
.tl-in-curs{border-top-right-radius:0;border-bottom-right-radius:0;border-right:3px solid rgba(255,255,255,.55)}

/* Meniu final: zona user (Parola mea/Deconectare) separată jos, împinsă la bază */
.nav-user{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column}
/* F2-13: „Deconectare" e acum un buton într-un formular POST (mutație sub CSRF), nu un link — deci
   aceleași reguli pe `a` și pe `button`, ca aspectul din meniu să rămână identic. */
.nav-user a,.nav-user button{display:flex;align-items:center;gap:10px;color:#cbd5e1;text-decoration:none;padding:10px 14px;border-radius:12px;margin:2px 0;font-size:14px}
.nav-user button{width:100%;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
.nav-user a svg,.nav-user button svg{width:20px;height:20px;flex-shrink:0;stroke-width:1.8}
.nav-user a:hover,.nav-user button:hover{background:var(--primary);color:#fff}
/* Buton care arată ca un link (pagina de schimbare a parolei, în afara shell-ului cu meniu). */
.link-buton{background:none;border:0;padding:0;font:inherit;color:var(--primary);text-decoration:underline;cursor:pointer}

/* ─── F1-08: ZONA DE BANI (Trezorerie / Financiar / Facturare) ────────────────────────────────
   Accent secundar portocaliu, aplicat prin RE-DEFINIREA tokenilor în scope-ul `.content` al
   paginilor de bani — nu prin reguli paralele. Regulile de mai sus (`.btn`, `td a`, `.badge`)
   rămân neatinse și primesc automat portocaliul; restul aplicației rămâne bleu.

   Scope-ul e `.content`, nu `body`: sidebar-ul trebuie să rămână bleu și pe paginile de bani,
   altfel hover-ul din meniu ar deveni portocaliu peste tot cât ești în Trezorerie, iar accentul
   n-ar mai marca ZONA — ar marca pagina curentă. Clasa se pune în `base.html`, din calea rutei. */
body.zona-bani .content{
  --primary:var(--money);
  --primary-hover:var(--money-hover);
  --primary-soft:var(--money-soft);
}
/* Header de secțiune: bară portocalie + text portocaliu închis (8.2:1 pe alb). */
body.zona-bani .content h1,
body.zona-bani .content h2{
  color:var(--money-fg);
  border-left:5px solid var(--money);
  padding-left:12px;
}
/* Indicator de sumă — clasă EXPLICITĂ, pusă în template pe cifra de bani (sold, total, cotă).
   Global: cifre tabulare, ca sumele să se alinieze pe coloană. În zona de bani: portocaliu. */
.suma{font-weight:700;font-variant-numeric:tabular-nums}
body.zona-bani .suma{color:var(--money-fg)}

/* ─── F3-10: facturi primite — rând colapsabil per factură + filtru de interval ────────────────
   Colapsarea o face `<details>/<summary>` nativ (zero JavaScript): funcționează cu JS dezactivat,
   e navigabilă de la tastatură și nu adaugă nimic de reparat la trecerea CSP pe enforce. */
.hint{font-size:13px;color:var(--muted);margin:6px 0 16px}
.filtru-data{max-width:11rem}
.factura-rand{display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid var(--border)}
.factura-rand:last-child{border-bottom:0}
.factura{flex:1 1 auto;min-width:0}
.factura-actiuni{flex:0 0 auto;margin:0;padding:12px 0}
.factura-cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;cursor:pointer;list-style:none}
.factura-cap::-webkit-details-marker{display:none}
/* Săgeata de stare: ► colapsat, ▼ deschis. Marcajul nativ e ascuns mai sus ca să arate la fel
   în toate browserele, deci indicatorul îl desenăm noi. */
.factura-cap::before{content:"\25B6";color:var(--primary);font-size:11px;flex:0 0 auto}
.factura[open]>.factura-cap::before{content:"\25BC"}
.factura-cap:hover{background:var(--primary-soft)}
.fc-numar{font-weight:700}
.fc-furnizor{flex:1 1 12rem;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-data{color:var(--muted);font-variant-numeric:tabular-nums}
.fc-total{margin-left:auto}
.fc-nr-linii{flex:0 0 auto}
.factura-corp{padding:0 0 16px 18px}
.factura-corp .hint{margin-top:0}

/* ─── F2-09: controalele de paginare (`templates/_paginare.html`) ──────────────────────────────
   Stau SUB tabel, în același „panel", ca ordinea de citire să fie rânduri → unde sunt în listă →
   navigare. Starea („Pagina X din Y") rămâne vizibilă și când nu e nimic de navigat: pe o listă
   goală, absența controalelor s-ar citi ca „ecranul s-a rupt". */
.paginare{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.paginare-stare{font-weight:700}
.paginare-domeniu{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:auto}

/* ─── F2-12: galeria de poze de pe fișa vehiculului ────────────────────────────────────────────
   Grilă care se rearanjează singură, fără media queries: `auto-fill` + `minmax` ține miniaturile
   la o lățime lizibilă și pune pe rând câte încap. Miniatura e mărginită de `max-height`, nu de
   `height`: o poză portret și una peisaj rămân amândouă nedeformate (`object-fit:contain`). */
.galerie-poze{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:0;margin:16px 0 0}
.galerie-poze li{border:1px solid var(--border);border-radius:6px;padding:10px;text-align:center}
.galerie-poze img{max-width:100%;max-height:160px;object-fit:contain}
.galerie-poze small{display:block;color:var(--muted);word-break:break-all;margin:8px 0}