/* ============================================================
   CULORILE TEMEI — definite, nu presupuse
   ============================================================
   Numele astea sunt folosite în tot fişierul (--alb de 3 ori, --rosu de 9,
   --gri-text de zeci de ori), dar nu erau declarate nicăieri. O variabilă
   nedefinită nu dă eroare: declaraţia devine invalidă şi dispare în tăcere.
   Aşa a ajuns picătura de meniu să fie transparentă, cu pagina văzându-se
   prin ea — şi tot aşa, fiecare „roşu" era de fapt culoarea moştenită.

   Sunt aceleaşi valori ca în tema CTC şi ca în PDF-uri (flota/pdf.py), ca
   ecranul şi hârtia să arate la fel.
   ============================================================ */
:root {
  --alb: #ffffff;
  --rosu: #ed2944;              /* roşul Electric — alerte şi depăşiri */
  --gri-text: #6b7a90;
  --gri-fundal: #f4f7fb;
  --linie-tare: #c3cedd;
}

/* ============================================================
   TMS ELECTRIC — completările peste tema CTC (app.css rămâne neatins)
   Regula temei: ~90% CTC, ~10% accente. Roșul Electric (#ed2944) e rezervat
   alertelor și depășirilor — nu decorațiunilor.
   ============================================================ */
:root { --electric-red: #ed2944; }

/* navigarea pe zile în planner */
.zinav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.zinav .zi { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.zinav a.small { text-decoration: none; }
.zinav form { margin: 0; }
.zinav input[type=date] { margin: 0; padding: .3rem .5rem; width: auto; }

/* cardul de cursă din planner */
.cursa-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); margin-bottom: .8rem; overflow: hidden; }
.cursa-card > header { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid #eef1f5; flex-wrap: wrap; }
.cursa-card > header a.cine { font-weight: 700; color: #16233a; text-decoration: none; font-size: 1.02rem; }
.cursa-card > header a.cine:hover { color: var(--navy); text-decoration: underline; }
.cursa-card .opriri { padding: .2rem .9rem .5rem; }
.cursa-card .opr { display: flex; gap: .6rem; padding: .34rem 0; border-bottom: 1px dashed #eef1f5; align-items: baseline; font-size: .93rem; flex-wrap: wrap; }
.cursa-card .opr:last-child { border-bottom: none; }
.cursa-card .opr .cl { font-weight: 600; min-width: 34%; }
.cursa-card .opr .pr { color: #556; flex: 1; }
.cursa-card > footer { display: flex; align-items: center; gap: .9rem; padding: .45rem .9rem; background: #f7f9fb; border-top: 1px solid #eef1f5; font-size: .85rem; color: #445; flex-wrap: wrap; }
.cursa-card > footer .cost { margin-left: auto; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.depasire { color: var(--electric-red); font-weight: 700; }

/* bara de umplere a vehiculului */
.umplere { display: inline-flex; align-items: center; gap: .4rem; }
.umplere .bara { width: 64px; height: 7px; border-radius: 99px; background: #e3e8ef; overflow: hidden; }
.umplere .bara i { display: block; height: 100%; background: var(--navy); border-radius: 99px; transition: width .3s ease; }
.umplere.plin .bara i { background: var(--electric-red); }

/* comparatorul propriu vs. terț */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 640px) { .cmp { grid-template-columns: 1fr; } }
.cmp .varianta { border: 1.5px solid #d9dee6; border-radius: 12px; padding: .7rem .9rem; background: #fff; }
.cmp .varianta.aleasa { border-color: var(--ok); background: #f2faf4; }
.cmp .varianta h4 { margin: 0 0 .3rem; font-size: .95rem; }
.cmp .varianta .suma { font-size: 1.5rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.cmp table { font-size: .85rem; margin: .4rem 0 0; }
.cmp td { padding: .15rem .3rem; border: 0; }
.cmp td.n { text-align: right; font-variant-numeric: tabular-nums; }
.economie { font-weight: 700; color: var(--ok); }
.economie.neg { color: var(--electric-red); }

/* statusul cursei */
.status-pasi { display: flex; gap: .35rem; flex-wrap: wrap; }
.status-pasi button { width: auto; margin: 0; padding: .35rem .7rem; font-size: .85rem; }

/* accentul «10% futurist»: linia vie de sub titlul planner-ului */
.puls { height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--navy), #0f6e7a 55%, var(--electric-red)); background-size: 200% 100%; animation: puls 6s linear infinite; margin: .2rem 0 .9rem; }
@media (prefers-reduced-motion: reduce) { .puls { animation: none; } }
@keyframes puls { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }

/* graficele au nevoie de o înălțime explicită: Chart.js cu maintainAspectRatio:false
   umple containerul, iar un container fără înălțime înseamnă un grafic invizibil */
.chart-box { min-height: 260px; display: flex; flex-direction: column;
  /* fără asta, un element de grilă nu se lasă îngustat sub lăţimea conţinutului
     lui, iar diagramele împing pagina în lateral pe telefon */
  min-width: 0; }
.chart-box h4 { margin: 0 0 .5rem; font-size: .95rem; color: var(--navy); }
.chart-box canvas { flex: 1; min-height: 210px; }

/* selectorul de perioadă din dashboard: pe un singur rând, aliniat cu titlul */
.zinav form.row { display: flex; align-items: center; gap: .4rem; margin: 0; }
.zinav form.row select, .zinav form.row input { margin: 0; padding: .35rem .55rem; width: auto; font-size: .92rem; }

/* ---------------------------------------------------------------- hartă (v0.3) */
.harta { width: 100%; border-radius: 12px; border: 1px solid #d9dee6; z-index: 1; }
.harta-wrap { margin-bottom: .8rem; }
.pin { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
       border-radius: 50%; color: #fff; font-weight: 700; font-size: .78rem;
       box-shadow: 0 1px 4px rgba(0,0,0,.35); border: 2px solid #fff; }
.pin-baza { border-radius: 7px; }
.pin-retur { border-style: dashed; }
.leaflet-popup-content { font-family: "Source Sans 3", sans-serif; font-size: .9rem; }
.leaflet-popup-content a.waze { display: inline-block; margin-top: .35rem; padding: .25rem .6rem;
  background: #33ccff; color: #063; font-weight: 700; border-radius: 6px; text-decoration: none; font-size: .82rem; }
.leaflet-popup-content a.waze:hover { background: #1ab8ee; }
/* butonul Waze din listele de opriri */
a.waze-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem;
  background: #e6f7fd; color: #0a6a86; border: 1px solid #b6e6f5; border-radius: 6px;
  font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.waze-btn:hover { background: #d0f0fa; }
/* legenda traseelor de pe harta zilei */
.legenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .5rem 0 .2rem; font-size: .86rem; }
.legenda span.t { display: inline-flex; align-items: center; gap: .35rem; }
.legenda i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
/* tabelul de conformitate */
.conform td { text-align: center; }
.conform td.v { text-align: left; font-weight: 700; }
.celula { display: inline-block; min-width: 4.6rem; padding: .12rem .4rem; border-radius: 5px; font-size: .76rem; font-weight: 600; }
.celula.ok { background: #e6f4ea; color: #1a7f37; }
.celula.apropiata { background: #fff3e0; color: #b26a00; }
.celula.depasita { background: #fdecea; color: #c62828; }
.celula.lipsa { background: #eef1f5; color: #8894a5; font-weight: 400; }

/* ================================================================
   v0.4 — pagina de cursă nouă: itinerariu + panou de cost live
   ================================================================ */
.doua-coloane { display: grid; grid-template-columns: 1fr 22rem; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .doua-coloane { grid-template-columns: 1fr; } }
.dreapta { position: sticky; top: 4.2rem; }
@media (max-width: 1000px) { .dreapta { position: static; } }

.rand-camp { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .5rem; }
.rand-camp label { display: flex; flex-direction: column; gap: .15rem; flex: 0 1 auto; margin: 0; }
.rand-camp label.lat { flex: 1 1 14rem; }
.rand-camp input, .rand-camp select { margin: 0; padding: .4rem .55rem; font-size: .95rem; }
.rand-camp.mic input, .rand-camp.mic select { padding: .3rem .45rem; font-size: .9rem; }
.rand-camp.mic label { font-size: .82rem; }
.rand-camp .cant { width: 5rem; }
.rand-camp .coord { width: 8rem; }

/* alegerea: flota noastră sau transportator */
.alegere-fel { border: 0; padding: 0; margin: .8rem 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.alegere-fel legend { font-size: .82rem; font-weight: 600; color: #667; padding: 0; margin-bottom: .35rem; }
.alegere-fel .optiune { flex: 1 1 12rem; margin: 0; cursor: pointer; }
.alegere-fel .optiune input { position: absolute; opacity: 0; width: 0; height: 0; }
.alegere-fel .optiune span { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  border: 2px solid #cfd6e0; border-radius: 12px; background: #fff; transition: all .12s; flex-wrap: wrap; }
.alegere-fel .optiune span b { font-size: .98rem; }
.alegere-fel .optiune span small { color: #667; font-size: .8rem; width: 100%; padding-left: 1.7rem; }
.alegere-fel .optiune input:checked + span { border-color: var(--navy); background: #eef4fb; }
.alegere-fel .optiune input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }

/* itinerariul */
.oprire { border: 1px solid #d9dee6; border-radius: 12px; padding: .7rem .8rem; margin-bottom: .6rem; background: #fafbfd; }
.oprire-cap { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.nr-oprire { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.oprire-cap .tip-oprire { margin: 0; padding: .28rem .5rem; font-size: .88rem; width: auto; }
.oprire-cap .sterge-oprire { margin: 0 0 0 auto; padding: .2rem .5rem; }
.oprire .obs { margin: .3rem 0 0; padding: .3rem .5rem; font-size: .88rem; }

/* căutarea de clienți și adrese */
.cauta-client { position: relative; margin-bottom: .5rem; }
.q-client { margin: 0; padding: .4rem .6rem; font-size: .95rem; }
.sugestii { list-style: none; margin: .25rem 0 0; padding: 0; border: 1px solid #cfd6e0;
  border-radius: 10px; background: #fff; max-height: 15rem; overflow: auto; }
.sugestii li { margin: 0; border-bottom: 1px solid #eef1f5; }
.sugestii li:last-child { border-bottom: none; }
.sugestii .sugestie { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  padding: .45rem .7rem; background: #fff; border: 0; border-radius: 0; margin: 0; font-size: .92rem; color: #223; }
.sugestii .sugestie:hover { background: #eef4fb; }
.sugestii.adrese .sugestie span { line-height: 1.3; }
.fara-rezultat { border: 1px dashed #cfd6e0; border-radius: 10px; padding: .5rem .7rem; margin-top: .3rem; background: #fff; }
.client-nou-form, .adresa-noua-form { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; }
.client-nou-form input, .adresa-noua-form input { margin: 0; padding: .35rem .5rem; font-size: .9rem; }
.titlu-adrese { font-size: .88rem; margin: .5rem 0 .35rem; color: #445; display: flex; align-items: center; gap: .35rem; }
.adrese-client { border-top: 1px dashed #cfd6e0; padding-top: .5rem; margin-top: .4rem; }
.lista-adrese { display: flex; flex-direction: column; gap: .3rem; }
.adresa-optiune { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%;
  text-align: left; padding: .45rem .7rem; background: #fff; border: 1.5px solid #cfd6e0; border-radius: 9px;
  margin: 0; color: #223; font-size: .92rem; }
.adresa-optiune:hover { border-color: var(--navy); background: #eef4fb; }
.adresa-optiune.aleasa { border-color: var(--ok); background: #f2faf4; }
.adresa-optiune small { color: #667; font-size: .82rem; }
.client-ales { display: flex; align-items: center; gap: .4rem; }
.client-ales button { margin: 0; padding: .15rem .5rem; font-size: .78rem; }

/* panoul de cost */
.panou-rezumat .mini-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; text-align: center; }
.panou-rezumat .mini-kpi .v { display: block; font-size: 1.25rem; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.panou-rezumat .mini-kpi .l { display: block; font-size: .74rem; color: #667; }
.mic { font-size: .82rem; }
.umplere-bara { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .84rem; }
.umplere-bara .bara { flex: 1; height: 8px; border-radius: 99px; background: #e3e8ef; overflow: hidden; }
.umplere-bara .bara i { display: block; height: 100%; background: var(--navy); border-radius: 99px; transition: width .3s; }
.umplere-bara.plin .bara i { background: var(--electric-red); }

.cost-card { border: 2px solid transparent; transition: border-color .15s; }
.cost-card.activ { border-color: var(--navy); }
.suma-mare { font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.suma-mare span { font-size: 1rem; font-weight: 600; color: #667; }
table.defalcare { width: 100%; font-size: .87rem; margin: .5rem 0 0; }
table.defalcare td { padding: .18rem .2rem; border: 0; border-bottom: 1px solid #f0f3f7; }
table.defalcare td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.defalcare tr.total td { border-top: 1.5px solid #cfd6e0; border-bottom: 0; padding-top: .3rem; }
table.defalcare tr.atentie td { color: var(--warn); font-weight: 600; }
.detalii-sofer summary { font-size: .88rem; font-weight: 600; color: var(--navy); margin-top: .5rem; }

.oferte { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.oferte li { border: 1.5px solid #d9dee6; border-radius: 9px; padding: .4rem .6rem; background: #fff; font-size: .88rem; }
.oferte li.cea-mai-buna { border-color: var(--ok); background: #f2faf4; }
.oferte li.aleasa { border-color: var(--navy); background: #eef4fb; }
.oferte li.nepotrivit { opacity: .62; background: #fbfcfd; }
.of-cap { display: flex; align-items: baseline; gap: .5rem; }
.of-pret { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.of-detalii { font-size: .78rem; color: #667; margin-top: .1rem; }
.of-motiv { font-size: .78rem; color: var(--bad); margin-top: .15rem; display: flex; align-items: center; gap: .25rem; }

.recomandare { border-left: 5px solid var(--ok); }
.recomandare.tert { border-left-color: var(--warn); }
.recomandare .rec-titlu { font-weight: 700; margin: 0 0 .3rem; display: flex; align-items: center; gap: .4rem; }
.recomandare p { margin: .2rem 0; font-size: .92rem; }

/* ================================================================
   Antetul lipit: coloanele sticky se aliniază sub el, oricât ar fi de înalt.
   Înălţimea reală o pune JS-ul din base.html în --h-antet; valoarea de aici
   e doar rezerva, pentru cazul în care JS-ul nu a apucat să ruleze.
   ================================================================ */
:root { --h-antet: 106px; }
html { scroll-padding-top: calc(var(--h-antet) + 1rem); }
.dreapta { top: calc(var(--h-antet) + .7rem); }

/* pictogramele de vehicule */
.cu-pictograma { display: inline-flex; align-items: center; gap: .45rem; }
.pic-vehicul { color: var(--navy); flex-shrink: 0; display: inline-flex; }
.pic-mic { color: var(--navy); display: inline-flex; vertical-align: middle; }
.of-pic { color: var(--navy); display: inline-flex; flex-shrink: 0; }
.tip-vehicul-lista { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- încărcare mixtă: paleți + baxuri ---------- */
.bife-incarcare { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; margin: -.25rem 0 .35rem; }
.bife-incarcare .bifa { display: flex; align-items: center; gap: .38rem; font-size: .78rem;
  color: var(--muted, #6b7a90); margin: 0; cursor: pointer; }
.bife-incarcare .bifa input { width: auto; margin: 0; }
.bife-incarcare .bifa b { color: var(--navy, #1f3a5f); font-weight: 600; }
.detaliu-incarcare { margin-top: .55rem; font-size: .82rem; }
.detaliu-incarcare > summary { cursor: pointer; color: var(--navy, #1f3a5f); }
.lista-incarcare { margin: .4rem 0 .3rem; padding-left: 1.1rem; color: var(--muted, #6b7a90); }
.lista-incarcare li { margin: .15rem 0; }

/* ================== MODUL MTE ================== */
.antet-pagina { margin-bottom: 1rem; }
.antet-pagina h1 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-size: 1.45rem; }
.antet-pagina p { margin: 0; }

.doua-coloane.mte .dreapta { min-width: 320px; }

/* ---- pagina de lucru a MTE: lăţime proprie, centrată, cu loc pentru bara de jos ---- */
.mte-lucru { max-width: 1240px; margin: 0 auto; padding-bottom: 5.5rem; }
@media (min-width: 1240px) { .doua-coloane.mte { grid-template-columns: 1fr 26rem; } }

.antet-mte { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.antet-mte h1 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-size: 1.45rem; }
.antet-mte p { margin: 0; }
.antet-mte a { flex: 0 0 auto; }

/* ---- banda de paşi: unde sunt, ce urmează, cât a mai rămas ---- */
.ghid-bara { background: #fff; border: 1px solid var(--linie, #e2e8f0); border-radius: 14px;
  padding: .7rem .9rem .8rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(16,30,54,.07); }
.ghid-progres { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding-bottom: .7rem; border-bottom: 1px solid var(--linie, #e2e8f0); margin-bottom: .7rem; }

/* Inelul de progres: o conică desenată din procent, fără SVG şi fără bibliotecă.
   Cifra din mijloc rămâne text — se poate citi cu cititorul de ecran şi se poate
   selecta cu mouse-ul, spre deosebire de o imagine. */
.ghid-inel { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid;
  place-items: center; position: relative;
  background: conic-gradient(var(--ok, #1a7f37) calc(var(--p) * 1%), #e7ecf4 0); }
.ghid-inel::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.ghid-inel span { position: relative; z-index: 1; font-weight: 800; font-size: .92rem;
  color: var(--navy, #1f3a5f); font-variant-numeric: tabular-nums; }
.ghid-inel small { font-size: .62rem; font-weight: 600; opacity: .65; }

.ghid-stare { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ghid-stare > b { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #6b7a90); }
.ghid-stare .urmator { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: 1rem; font-weight: 600; color: var(--navy, #1f3a5f); }
.ghid-stare .urmator.atentie { color: var(--warn, #b26a00); }
.ghid-stare .urmator.gata { color: var(--ok, #1a7f37); }
.ghid-stare .sari { font-size: .82rem; font-weight: 700; background: #eef4fb; color: var(--navy, #1f3a5f);
  border-radius: 999px; padding: .1rem .6rem; text-decoration: none; }
.ghid-stare .sari:hover { background: var(--navy, #1f3a5f); color: #fff; }

.pasi-mte { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  list-style: none; margin: 0; padding: 0; }
.pasi-mte li { display: flex; align-items: center; gap: .5rem; background: #f7f9fc;
  border: 1px solid var(--linie, #e2e8f0); border-radius: 12px; padding: .5rem .6rem;
  position: relative; }
.pasi-mte li > a, .pasi-mte li > span:first-child { display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit; min-width: 0; flex: 1; }
.pasi-mte .nr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: #e7ecf4; color: #6b7a90; transition: background .2s ease; }
.pasi-mte .txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pasi-mte .txt b { font-size: .93rem; }
.pasi-mte .txt small { color: var(--muted, #6b7a90); font-size: .74rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasi-mte li.gata { background: #f2faf4; border-color: #cbe7d4; }
.pasi-mte li.gata .nr { background: var(--ok, #1a7f37); color: #fff; }
.pasi-mte li.gata > a:hover .txt b { text-decoration: underline; }
.pasi-mte li.acum { background: #fff; border-color: var(--navy, #1f3a5f);
  box-shadow: 0 0 0 2px rgba(31,58,95,.14); }
.pasi-mte li.acum .nr { background: var(--navy, #1f3a5f); color: #fff; }
/* pasul curent respiră uşor — atât cât să-l găseşti, nu cât să te enerveze */
.pasi-mte li.acum .nr { animation: puls-pas 2.4s ease-in-out infinite; }
@keyframes puls-pas {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,58,95,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(31,58,95,0); }
}
.pasi-mte li.blocat { opacity: .55; }
.pasi-mte li.blocat .txt small { font-style: italic; }
@media (prefers-reduced-motion: reduce) { .pasi-mte li.acum .nr { animation: none; } }
@media (max-width: 900px) { .pasi-mte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pasi-mte { grid-template-columns: 1fr; } }

.bulina { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy, #1f3a5f); color: #fff; font-size: .8rem; font-weight: 700; flex: 0 0 auto; }

.gol-pool { text-align: center; color: var(--muted, #6b7a90); padding: 1.6rem .5rem 1rem;
  max-width: 34rem; margin: 0 auto; }
.gol-pool p { margin: .4rem 0 0; }
.gol-pool p b { color: var(--navy, #1f3a5f); font-size: 1.15rem; }
.gol-pool .btn-big { margin-top: 1rem; }
.tabel td.num, .tabel th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- sumarul de erori (deasupra titlului, cu focus) ---- */
.sumar-erori { background: #fdecea; border: 2px solid var(--bad, #c62828); border-radius: 12px;
  padding: .8rem 1rem; margin-bottom: 1rem; }
.sumar-erori:focus { outline: 3px solid var(--bad, #c62828); outline-offset: 2px; }
.sumar-erori h2 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem;
  font-size: 1.05rem; color: var(--bad, #c62828); }
.sumar-erori p { margin: 0 0 .4rem; font-size: .9rem; }
.sumar-erori ul { margin: 0; padding-left: 1.2rem; }
.sumar-erori li { margin: .2rem 0; }
.sumar-erori a { color: var(--bad, #c62828); font-weight: 600; }
.card-eroare { border: 2px solid var(--bad, #c62828); }
.eroare-camp { display: flex; align-items: center; gap: .35rem; margin: .1rem 0 .5rem;
  color: var(--bad, #c62828); font-size: .85rem; font-weight: 600; }
.rand-camp.gresit input, .cauta-client.gresit .q-client { border-color: var(--bad, #c62828); }
.cauta-client .et { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
.calc-locuri { margin: -.2rem 0 .5rem; min-height: 1.1em; font-weight: 600; }

/* ---- bara de acţiune, lipită jos ---- */
.bara-actiune { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--linie, #e2e8f0); border-radius: 14px;
  padding: .7rem .9rem; margin-top: 1rem; box-shadow: 0 -2px 14px rgba(20,35,60,.12); }
.bara-actiune .numaratoare { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .92rem; flex: 1 1 16rem; min-width: 0; }
.bara-actiune .numaratoare b { font-size: 1.15rem; color: var(--navy, #1f3a5f);
  font-variant-numeric: tabular-nums; }
.bara-actiune .sep { color: #b6c0cd; }
.avert-capacitate { display: inline-flex; align-items: center; gap: .3rem; background: #fff4e5;
  color: var(--warn, #b26a00); border-radius: 999px; padding: .15rem .6rem; font-size: .84rem;
  font-weight: 600; }
.avert-capacitate.ascuns { display: none; }
/* Pico dă `button[type=submit] {width:100%}` — de aceea selectorul e mai
   specific decât ar părea nevoie: altfel butonul mare se întinde pe toată bara
   şi arată ca un banner, nu ca o acţiune. */
.bara-actiune .btn-compune { display: flex; flex-direction: column; align-items: center; gap: .1rem;
  width: auto; flex: 0 0 auto; margin: 0; padding: .6rem 1.8rem; border-radius: 12px; font-size: 1.12rem;
  font-weight: 700; background: var(--electric-red, #ed2944); border: 2px solid var(--electric-red, #ed2944);
  color: #fff; box-shadow: 0 3px 0 #b81e33; }
.btn-compune span { display: flex; align-items: center; gap: .45rem; }
.btn-compune small { font-weight: 500; font-size: .72rem; opacity: .9; }
.btn-compune:hover:not(:disabled) { background: #d31f38; border-color: #d31f38; }
.btn-compune:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #b81e33; }
.btn-compune:disabled { background: #cfd6e0; border-color: #cfd6e0; box-shadow: none; color: #7c8798; }
@media (max-width: 720px) {
  .bara-actiune { bottom: 60px; flex-direction: column; align-items: stretch; }
  .bara-actiune .btn-compune { width: 100%; }
}
.btn-adauga { background: var(--navy, #1f3a5f); border-color: var(--navy, #1f3a5f); color: #fff; }
.pasi { margin: .4rem 0 .6rem; padding-left: 1.25rem; }
.pasi li { margin: .35rem 0; }
.explicatie { background: #f7f9fc; }

.tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabel th { text-align: left; font-weight: 600; color: var(--muted, #6b7a90);
  border-bottom: 1px solid var(--linie, #e2e8f0); padding: .4rem .5rem; font-size: .8rem; }
.tabel td { padding: .45rem .5rem; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.tabel tr:last-child td { border-bottom: 0; }
.comenzi-mte tr.urgent td { background: #fff6f6; }

.comanda-noua > * { margin-bottom: .5rem; }
.lista-resurse { display: grid; gap: .3rem; max-height: 340px; overflow-y: auto; margin-top: .4rem; }
/* Rândul bifabil: patru indicii în acelaşi timp — bifa, bara din stânga, fundalul
   şi îngroşarea textului. Numai culoarea nu ajunge: monitoarele de dispecerat
   sunt ieftine, lumina bate în ecran, iar 8% dintre bărbaţi nu deosebesc verdele.
   Rândul întreg e etichetă şi are minimum 44px, ca să se poată nimeri din mers. */
.resursa { position: relative; display: flex; width: 100%; box-sizing: border-box;
  align-items: center; gap: .55rem;
  padding: .45rem .55rem .45rem .75rem; border-radius: 8px; cursor: pointer; margin: 0;
  min-height: 44px; border: 1px solid transparent; transition: background .12s ease; }
.resursa::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px;
  border-radius: 4px; background: transparent; }
.resursa:hover { background: #f2f6fb; }
.resursa:focus-within { outline: 2px solid var(--navy, #1f3a5f); outline-offset: 1px; }
.resursa input { width: auto; margin: 0; flex: 0 0 auto; }
.resursa .pic { color: var(--navy, #1f3a5f); display: flex; }
.resursa .txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.resursa .txt small { color: var(--muted, #6b7a90); font-size: .74rem; }
.resursa .stare-bifa { margin-left: auto; display: none; color: var(--ok, #1a7f37); flex: 0 0 auto; }
.resursa.aleasa { background: #eaf3ff; border-color: #c3d8f2; }
.resursa.aleasa::before { background: var(--navy, #1f3a5f); }
.resursa.aleasa .txt b { font-weight: 800; }
.resursa.aleasa .txt small { color: #43536a; }
.resursa.aleasa .stare-bifa { display: flex; }
.lista-resurse + .lista-resurse { margin-top: .3rem; }
.card h3 .right .toate { padding: .2rem .55rem; font-size: .78rem; }

.sumar-mte .btn-ruleaza { width: 100%; margin-top: .5rem; }
/* KPI-urile se foloseau doar în panoul de cost — le facem generale */
.mini-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .4rem;
  text-align: center; }
.mini-kpi .v { display: block; font-size: 1.25rem; font-weight: 700; color: var(--navy, #1f3a5f);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.mini-kpi .l { display: block; font-size: .74rem; color: #667; line-height: 1.3; }
.mini-kpi.mare { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.mini-kpi.mare .v { font-size: 1.75rem; }
.economie-mte .castig .v { color: #0d8a4f; }
.economie-mte .castig .l small { color: #0d8a4f; }

.curse-propuse { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.cursa-propusa header { gap: .45rem; align-items: center; }
.nr-cursa { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--navy, #1f3a5f); color: #fff; font-weight: 700; font-size: .84rem; }
.cursa-propusa .pic { color: var(--navy, #1f3a5f); display: flex; }
.cost-cursa { font-weight: 700; font-size: 1.05rem; }
.kpi-cursa { display: flex; flex-wrap: wrap; gap: .1rem .85rem; font-size: .82rem; margin: .45rem 0 .3rem;
  color: var(--muted, #6b7a90); }
.kpi-cursa span { display: inline-flex; align-items: center; gap: .25rem; }
.opriri-propuse { margin: .5rem 0 .4rem; padding-left: 1.3rem; }
.opriri-propuse li { display: grid; grid-template-columns: 1fr auto auto; gap: .35rem; align-items: center;
  padding: .28rem 0; border-bottom: 1px solid #f0f4f8; }
.opriri-propuse li:last-child { border-bottom: 0; }
.opriri-propuse .cl { display: flex; flex-direction: column; line-height: 1.2; }
.opriri-propuse .mf { grid-column: 1 / -1; margin-top: -.2rem; }
.muta-form { display: inline; }
.muta-form select { font-size: .72rem; padding: .1rem .25rem; height: auto; width: auto; margin: 0; }
.decizie { margin-top: .35rem; padding-top: .45rem; border-top: 1px solid #eef2f7; font-size: .8rem; }

.lista-neatribuite { list-style: none; margin: .4rem 0 0; padding: 0; }
.lista-neatribuite li { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding: .4rem 0; border-bottom: 1px solid #f0f4f8; font-size: .87rem; }
.lista-neatribuite .motiv { color: #b5651d; font-size: .8rem; }
.bara-actiuni { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.bara-actiuni form { margin: 0; }

/* ================== PROGRAMUL ZILEI ================== */
.rand-antet { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; justify-content: space-between; }
.navigare-zile { display: flex; gap: .4rem; align-items: center; }
.navigare-zile form { margin: 0; }
.navigare-zile input[type=date] { width: auto; margin: 0; padding: .25rem .5rem; font-size: .85rem; }
.mini-kpi .v.rosu { color: var(--electric-red, #ed2944); }

.cursa-orar header { gap: .45rem; align-items: center; }
.cursa-orar .pic { color: var(--navy, #1f3a5f); display: flex; }
.banda-orar { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: center;
  font-size: .84rem; color: var(--muted, #6b7a90); margin: .5rem 0 .6rem;
  padding: .45rem .6rem; background: #f4f7fb; border-radius: 8px; }
.banda-orar b { color: var(--navy, #1f3a5f); font-variant-numeric: tabular-nums; }
.banda-orar .sageata { color: #b7c3d3; }
.banda-orar .pleaca b { color: var(--electric-red, #ed2944); font-size: 1.02rem; }
.orar-opriri td { font-size: .85rem; }

.card-blocare { border: 2px solid var(--navy, #1f3a5f); }
.card-blocare .btn-big { width: 100%; margin-top: .4rem; }
.butoane-export { display: flex; flex-wrap: wrap; gap: .45rem; }
.sus { margin-top: .55rem; }
.text-grup { background: #f4f7fb; border: 1px solid var(--linie, #e2e8f0); border-radius: 8px;
  padding: .8rem 1rem; font-size: .86rem; line-height: 1.5; white-space: pre-wrap;
  margin-top: .7rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.text-mesaj { background: #f4f7fb; border-radius: 6px; padding: .5rem .7rem; font-size: .8rem;
  white-space: pre-wrap; margin: .3rem 0 0; max-width: 460px; }
.avertismente-zi > summary { cursor: pointer; display: flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: #8a5a12; }
.avertismente-zi { background: #fffaf0; border-color: #f2d9a8; }
.lista-avertismente { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .84rem;
  color: var(--muted, #6b7a90); }
.lista-avertismente li { margin: .22rem 0; }

/* ---------- ilustraţiile vehiculelor ---------- */
.ilustratie { width: auto; display: block; max-width: 100%; }
.ilustratie-cutie { display: flex; align-items: flex-end; justify-content: center;
  padding: .5rem .6rem; background: #f7f9fc; border-radius: 10px; overflow: hidden; }
.ilustratie-cutie .ilustratie { max-height: 100%; }
.card-vehicul { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 1rem;
  align-items: center; }
@media (max-width: 640px) { .card-vehicul { grid-template-columns: 1fr; } }
.resursa .ilustratie { height: 26px; }
.resursa.cu-desen { align-items: center; }

/* ---------- tarife şi analiza costurilor ---------- */
.tabel .nr { text-align: right; font-variant-numeric: tabular-nums; }
.tabel-tarife .pic-cell { width: 46px; padding-right: 0; }
.tabel-tarife .pic-cell .ilustratie { height: 22px; }
.rand-noi td { background: #eef5ff !important; border-top: 2px solid var(--navy, #1f3a5f); }
.card-semnal { background: #fffaf0; border-color: #f2d9a8; }
.lista-semnale { list-style: none; margin: .5rem 0 .4rem; padding: 0; }
.lista-semnale li { padding: .3rem 0; border-bottom: 1px solid #f2e8d4; font-size: .88rem; }
.lista-semnale li:last-child { border-bottom: 0; }
.bara-mica { display: inline-block; width: 42px; height: 6px; border-radius: 99px;
  background: #e3e8ef; overflow: hidden; vertical-align: middle; margin-right: .3rem; }
.bara-mica i { display: block; height: 100%; background: var(--navy, #1f3a5f); }

/* minmax(430px, …) nu coboară niciodată sub 430px, oricât de îngust ar fi
   ecranul — de aici derularea laterală pe telefon. min() rezolvă: pe ecrane mici
   coloana devine cât ecranul. */
.mgrid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); gap: .9rem; }

/* ---------- componenţa costului ---------- */
.tabel-clic tbody tr:hover { background: #f2f6fb; }
.link-rand { text-decoration: none; color: inherit; display: block; }
.link-rand:hover { color: var(--navy, #1f3a5f); text-decoration: underline; }
.celule-executanti { display: flex; flex-wrap: wrap; gap: .22rem; align-items: center; }
.chip { display: inline-block; padding: .06rem .38rem; border-radius: 99px; font-size: .7rem;
  background: #e6efe9; color: #2c5a3f; white-space: nowrap; }
.chip-tert { background: #fdeee0; color: #8a5a12; }
.pic-mic .ilustratie { height: 20px; display: inline-block; vertical-align: middle; }
.tag.mic { font-size: .66rem; padding: .04rem .3rem; }

/* ================== ATRIBUIREA CURSELOR CĂTRE TERŢI ================== */
.card-atribuire .atribuire-acum { display: grid; grid-template-columns: 1fr auto; gap: .8rem;
  align-items: center; padding: .5rem .6rem; background: #f7f9fc; border-radius: 10px;
  margin-bottom: .5rem; }
.card-atribuire .cine-duce { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.card-atribuire .cine-duce b { font-size: 1.02rem; }
.card-atribuire .cine-duce small { color: var(--muted, #6b7a90); }
/* Trei cifre una lângă alta: contract, convenit, diferenţă. A treia e singura
   care se citeşte la renegociere, dar fără primele două n-ar exista. */
.card-atribuire .preturi { display: flex; gap: .9rem; text-align: right; }
.card-atribuire .preturi .et { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted, #6b7a90); }
.card-atribuire .preturi b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-atribuire .preturi b.mare { font-size: 1.12rem; color: var(--navy, #1f3a5f); }
.card-atribuire .preturi b.peste { color: var(--electric-red, #ed2944); }
.card-atribuire .preturi b.sub { color: var(--ok, #1a7f37); }
.card-atribuire .actiuni-atribuire { gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.rand-actiune { border-top: 1px solid var(--linie, #e2e8f0); padding-top: .4rem; margin-top: .4rem; }
.rand-actiune summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: .25rem 0; }
.form-atribuire { margin-top: .4rem; }
.form-atribuire > * { margin-bottom: .45rem; }
.form-atribuire .help { font-size: .8rem; }
.inapoi-in-casa { border-top: 1px dashed var(--linie, #e2e8f0); padding-top: .5rem; margin-top: .6rem; }
.istoric-atribuiri tr.activa td { background: #eaf3ff; }
.istoric-atribuiri tr.activa td:first-child { box-shadow: inset 3px 0 0 var(--navy, #1f3a5f); }
.cursa-card .actiuni-card { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.cursa-card .actiuni-card .small { padding: .2rem .5rem; font-size: .76rem; }

/* ================== PARTENERI ================== */
.ruta { border: 1px solid var(--linie, #e2e8f0); border-radius: 12px; padding: .7rem .8rem;
  margin-bottom: .7rem; background: #fff; }
.ruta.stinsa { opacity: .55; }
.ruta.expirata { border-color: #f0c9a0; background: #fffaf3; }
.ruta-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; }
.ruta-nume { display: flex; flex-direction: column; line-height: 1.3; }
.ruta-nume b { font-size: 1.05rem; color: var(--navy, #1f3a5f); }
/* Cele patru cifre, una lângă alta. Ele sunt tot rostul paginii: el dă un preţ
   pe cursă, iar comparaţia nu se poate face decât aici, pe aceeaşi unitate. */
.ruta-preturi { display: flex; gap: .9rem; text-align: right; flex-wrap: wrap; }
.ruta-preturi .et { display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted, #6b7a90); }
.ruta-preturi b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .95rem; }
.ruta-preturi b.mare { font-size: 1.15rem; color: var(--navy, #1f3a5f); }
.ruta-etichete { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .45rem; }
.istoric-preturi { font-size: .84rem; margin-top: .3rem; }
.istoric-preturi tr.activa td { background: #eef4fb; font-weight: 600; }
.oferte-rand { display: flex; gap: .35rem; flex-wrap: wrap; }
.oferta-chip { display: inline-flex; flex-direction: column; line-height: 1.2; text-decoration: none;
  background: #f2f6fb; border: 1px solid var(--linie, #e2e8f0); border-radius: 8px;
  padding: .25rem .55rem; font-size: .8rem; color: #33415c; }
.oferta-chip b { color: var(--navy, #1f3a5f); }
.oferta-chip span { font-variant-numeric: tabular-nums; }
.oferta-chip.ieftin { background: #eaf7ee; border-color: #bfe3c9; }
.oferta-chip.expirat { opacity: .55; text-decoration: line-through; }
.oferta-chip:hover { border-color: var(--navy, #1f3a5f); }
.rand-flota { display: flex; align-items: center; gap: .5rem; padding: .35rem 0;
  border-bottom: 1px solid #eef2f7; }
.rand-flota:last-of-type { border-bottom: 0; }
.rand-flota .txt { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.rand-flota .txt small { color: var(--muted, #6b7a90); font-size: .74rem; }
.rand-flota form { margin-left: auto; }
.unde-sunt { list-style: none; margin: .2rem 0 .5rem; padding: 0; font-size: .82rem; }
.unde-sunt li { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
  padding: .25rem 0; border-bottom: 1px dashed #eef2f7; }
tr.inactiv { opacity: .55; }
.mini-kpi .v.rosu, .mini-kpi .v.rosu { color: var(--electric-red, #ed2944); }

/* ================== MANUALUL ================== */
.manual { max-width: 900px; margin: 0 auto; }
.caseta-intrebare { border: 2px solid var(--navy, #1f3a5f); }
.forma-intrebare { display: flex; gap: .5rem; margin: .5rem 0 .4rem; flex-wrap: wrap; }
.forma-intrebare input { flex: 1 1 18rem; margin: 0; height: 46px; font-size: 1rem;
  border-radius: 999px; padding: 0 1.1rem; border: 2px solid #d7dde6; }
.forma-intrebare input:focus { border-color: var(--navy, #1f3a5f); }
.forma-intrebare button { width: auto; margin: 0; flex: 0 0 auto; border-radius: 999px;
  padding: 0 1.3rem; height: 46px; background: var(--navy, #1f3a5f);
  border-color: var(--navy, #1f3a5f); display: inline-flex; align-items: center; gap: .4rem; }
.sugestii-rapide { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-bottom: .3rem; }
.sugestii-rapide a { font-size: .8rem; background: #eef4fb; border-radius: 999px;
  padding: .15rem .6rem; text-decoration: none; color: var(--navy, #1f3a5f); }
.sugestii-rapide a:hover { background: var(--navy, #1f3a5f); color: #fff; }
.raspunsuri { margin-top: .6rem; }
.raspuns { border: 1px solid var(--linie, #e2e8f0); border-radius: 12px; padding: .7rem .85rem;
  margin-bottom: .5rem; background: #fbfcfe; }
.raspuns.primul { border-color: var(--navy, #1f3a5f); background: #fff;
  box-shadow: 0 0 0 2px rgba(31,58,95,.1); }
.raspuns header { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; flex-wrap: wrap; }
.raspuns header b { font-size: 1rem; color: var(--navy, #1f3a5f); }
.raspuns header .right { margin-left: auto; }
.raspuns p { margin: 0 0 .4rem; line-height: 1.5; }
.pasi-raspuns, .pasi-capitol, .pasi-exemplu { margin: .3rem 0 .4rem; padding-left: 1.3rem; }
.pasi-raspuns li, .pasi-capitol li, .pasi-exemplu li { margin: .3rem 0; line-height: 1.45; }
.pasi-capitol li b, .pasi-exemplu li b { display: block; color: var(--navy, #1f3a5f); }
.pasi-capitol li span, .pasi-exemplu li span { color: #445; }
.atentie { background: #fff4e5; border-left: 4px solid var(--warn, #b26a00); border-radius: 0 8px 8px 0;
  padding: .5rem .7rem; margin: .5rem 0 0; font-size: .9rem; line-height: 1.45; }
.para-manual { line-height: 1.6; margin: 0 0 .6rem; }
.cuprins { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip-cuprins { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  background: #f2f6fb; border: 1px solid var(--linie, #e2e8f0); border-radius: 999px;
  padding: .3rem .75rem; font-size: .86rem; font-weight: 600; color: var(--navy, #1f3a5f); }
.chip-cuprins:hover { background: var(--navy, #1f3a5f); color: #fff; }
.capitol { scroll-margin-top: 120px; }
.exemplu, .faq { border-bottom: 1px solid var(--linie, #e2e8f0); padding: .5rem 0; }
.exemplu:last-child, .faq:last-child { border-bottom: 0; }
.exemplu summary, .faq summary { cursor: pointer; font-size: .96rem; padding: .2rem 0;
  display: flex; align-items: flex-start; gap: .5rem; }
.faq summary { font-weight: 600; color: var(--navy, #1f3a5f); }
.nr-faq { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #eef4fb; color: var(--navy, #1f3a5f);
  font-size: .75rem; font-weight: 700; }
.faq p { margin: .4rem 0 .3rem 1.9rem; line-height: 1.55; }
.faq a { margin-left: 1.9rem; }
.exemplu .context { font-style: italic; color: #445; margin: .3rem 0 .2rem; }
.economie.ok-verde { color: var(--ok, #1a7f37); }
.grup-ok { margin-top: .8rem; }
.grup-ok > summary { cursor: pointer; font-weight: 700; color: var(--ok, #1a7f37);
  padding: .5rem .2rem; display: flex; align-items: center; gap: .4rem; }
.grup-ok > summary::marker { color: var(--ok, #1a7f37); }


/* ================== FORMULARE: aceeaşi înălţime peste tot ==================
   Pico dă alte paddinguri la <select> decât la <input>, iar în rândurile mixte
   ieşea o linie şchioapă: câmpurile aliniate, lista derulantă cu 12px mai jos şi
   mai scundă. Plus loc pentru săgeată, ca să nu stea peste text. */
.rand-camp select, .rand-camp input, .rand-camp textarea { box-sizing: border-box; }
.rand-camp select { padding-right: 2rem; min-width: 9rem; }
.rand-camp label > select, .rand-camp label > input { width: 100%; }
.rand-camp.mic select { min-width: 8rem; }
select { padding-right: 2rem; }
/* Acţiunea principală a unui rând de formular: vizibilă, dar nu cât cardul. */
.buton-principal { width: auto; margin: 0; padding: .6rem 1.4rem; border-radius: 10px;
  font-size: 1rem; font-weight: 700; background: var(--navy, #1f3a5f);
  border: 2px solid var(--navy, #1f3a5f); color: #fff;
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-end; }
.buton-principal:hover { background: #16304f; border-color: #16304f; }
.pereche-actiuni { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
a.btn-compune { text-decoration: none; }
.restul-anomaliilor { margin-top: .4rem; }
.restul-anomaliilor summary { cursor: pointer; font-size: .85rem; font-weight: 600; }
.restul-anomaliilor ul { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
.restul-anomaliilor li { margin: .15rem 0; }
/* Bara şi procentul pe acelaşi rând: altfel fiecare rând din tabel devine dublu,
   iar coloanele numerice de lângă se aliniază la nimic. */
.cota { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.cota b { font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
tr.fara-km td { background: #fffaf3; }
/* Barele de filtre se rup pe rânduri pe ecrane mici, altfel împing pagina. */
.navigare-zile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; }
.navigare-zile label.mic { display: flex; flex-direction: column; font-size: .78rem; gap: .1rem; }
.navigare-zile input[type=date] { margin: 0; padding: .3rem .5rem; font-size: .9rem; max-width: 100%; }
.navigare-zile button { margin: 0; }
@media (max-width: 520px) { .navigare-zile { width: 100%; } .navigare-zile > * { flex: 1 1 auto; } }
.rand-principal { align-items: flex-end; gap: .8rem; margin-bottom: .3rem; }
.rand-principal label.lat { flex: 1 1 16rem; }
.rand-principal input, .rand-principal select { height: 44px; font-size: 1rem; }
.detalii-ruta { border-top: 1px dashed var(--linie, #e2e8f0); }
.detalii-ruta > summary { font-weight: 600; font-size: .88rem; }
.bulina-culoare { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* ================== ALIMENTAREA DE LA POMPĂ ==================
   Pagina se deschide pe telefon, în benzinărie, cu o mână şi cu cineva la coadă
   în spate. De aceea câmpurile sunt mari, butonul e cât degetul mare, iar tot
   ce nu e strict necesar stă strâns sub o clapetă. */
.pompa { max-width: 460px; margin: 0 auto; }
.masina-alimentare { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.masina-alimentare h1 { margin: 0; font-size: 1.5rem; color: var(--navy, #1f3a5f); }
.masina-alimentare p { margin: 0; font-size: .9rem; }
.ultima-alim { background: #f2f6fb; border-radius: 8px; padding: .5rem .7rem; font-size: .88rem;
  margin: 0 0 .8rem; }
.forma-pompa .camp-mare { display: block; margin-bottom: .9rem; }
.forma-pompa .camp-mare .et { display: block; font-weight: 700; font-size: 1rem;
  color: var(--navy, #1f3a5f); margin-bottom: .2rem; }
.forma-pompa .camp-mare input { height: 58px; font-size: 1.5rem; font-weight: 700;
  text-align: center; margin: 0; border: 2px solid #cfdcec; border-radius: 12px; }
.forma-pompa .camp-mare input:focus { border-color: var(--navy, #1f3a5f); }
.forma-pompa .camp-mare.gresit input { border-color: var(--bad, #c62828); background: #fff8f8; }
.forma-pompa .camp-mare small { display: block; margin-top: .2rem; font-size: .8rem; }
.bifa.mare { font-size: 1rem; padding: .6rem .2rem; }
.bifa.mare input[type=checkbox] { width: 24px; height: 24px; }
.atentie-bifa { background: #fff4e5; border-radius: 8px; padding: .5rem .7rem; }
.btn-pompa { display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; margin-top: .6rem; padding: 1rem; font-size: 1.15rem; font-weight: 700;
  border-radius: 14px; background: var(--ok, #1a7f37); border: 2px solid var(--ok, #1a7f37);
  color: #fff; }
.btn-pompa:hover { background: #15682d; border-color: #15682d; }
.mic-card { padding: .6rem .8rem; }

.card-gata { text-align: center; }
.bifa-mare { width: 76px; height: 76px; margin: .2rem auto .6rem; border-radius: 50%;
  display: grid; place-items: center; background: #e6f4ea; color: var(--ok, #1a7f37); }
.card-gata h1 { margin: 0 0 .2rem; font-size: 1.5rem; color: var(--ok, #1a7f37); }
.consum-mare { margin: 1rem 0 .3rem; padding: .9rem; border-radius: 14px; background: #f2f6fb;
  border: 2px solid #cfdcec; }
.consum-mare .v { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--navy, #1f3a5f); font-variant-numeric: tabular-nums; }
.consum-mare .u { display: block; font-size: .95rem; font-weight: 600; color: #5d6f8a; }
.consum-mare small { display: block; margin-top: .3rem; font-size: .8rem; color: #6b7a90; }
.consum-mare.bun { background: #f2faf4; border-color: #bfe3c9; }
.consum-mare.bun .v { color: var(--ok, #1a7f37); }
.consum-mare.rau { background: #fdecea; border-color: #f3c2be; }
.consum-mare.rau .v { color: var(--bad, #c62828); }
.fata-de { margin: .2rem 0 0; font-size: .92rem; color: #445; }

/* ---- foaia de etichete ---- */
.foaie-etichete { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .7rem; }
.eticheta-qr { border: 2px dashed #b6c0cd; border-radius: 12px; padding: .7rem .5rem;
  text-align: center; background: #fff; break-inside: avoid; }
.eticheta-qr .antet-eticheta { display: flex; flex-direction: column; margin-bottom: .3rem; }
.eticheta-qr .firma { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  color: #8892a0; }
.eticheta-qr .numar { font-size: 1.25rem; color: var(--navy, #1f3a5f); letter-spacing: .02em; }
.eticheta-qr .cod svg { width: 160px; height: 160px; display: block; margin: .2rem auto; }
.eticheta-qr .instructiune { margin-top: .3rem; line-height: 1.25; }
.eticheta-qr .instructiune b { display: block; font-size: .82rem; color: var(--navy, #1f3a5f); }
.eticheta-qr .instructiune span { font-size: .7rem; color: #5d6f8a; }
.eticheta-qr .sub-eticheta { margin-top: .25rem; font-size: .66rem; color: #8892a0; }

@media print {
  .topbar, .footer, .fara-print, .ghid-strat, .ghid-bula { display: none !important; }
  body { background: #fff; padding: 0; }
  main.container { padding: 0; max-width: none; }
  /* Două pe rând, nu trei. Codul tipărit ajunge la ~50 mm, adică 1,35 mm pe
     modul — de la 0,85 mm, cât era. Aia era cauza principală a scanărilor
     eşuate: nu codul, ci mărimea la care ajungea pe hârtie. O etichetă mai
     mare costă o coală în plus; una care nu se scanează costă un drum până la
     birou, de fiecare dată. */
  .foaie-etichete { grid-template-columns: repeat(2, 1fr); gap: 6mm; }
  .eticheta-qr { border-style: solid; border-color: #ccc; }
  .eticheta-qr .cod svg { width: 50mm; height: 50mm; }
}
.card-qr { background: linear-gradient(180deg, #f7fbff, #fff); border: 1px solid #cfdcec; }
.qr-mic { margin-left: auto; color: #8892a0; display: inline-flex; }
.qr-mic:hover { color: var(--navy, #1f3a5f); }

/* ============================================================
   COMPLETAREA PÂNĂ LA PLIN
   Blocul stă imediat sub cantităţi pentru că e a doua jumătate a
   aceleiaşi reguli: ori scrii cât e, ori spui că e „cât încape".
   ============================================================ */
.completare-cutie { border: 1px solid var(--linie); border-left: 3px solid var(--navy);
  border-radius: 5px; padding: .55rem .7rem .6rem; margin: .1rem 0 .55rem;
  background: color-mix(in srgb, var(--navy) 3%, transparent); }
.completare-cutie.gresit { border-color: var(--rosu); border-left-color: var(--rosu);
  background: color-mix(in srgb, var(--rosu) 5%, transparent); }
/* «bifa-lata», nu «bifa-mare»: numele al doilea e deja luat de cercul verde din
   pagina de alimentare, iar reutilizarea lui colora eticheta în verde şi îi
   punea un cerc de 76 px în spate. Coliziunile de clase nu dau erori — dau
   ecrane ciudate pe care nimeni nu le poate explica. */
.completare-cutie .bifa-lata { display: flex; align-items: flex-start; gap: .45rem;
  font-size: .84rem; line-height: 1.35; cursor: pointer; }
.completare-cutie .bifa-lata input { width: auto; margin: .18rem 0 0; flex: none; }
.completare-cutie .bifa-lata svg { vertical-align: -2px; color: var(--navy); }
.completare-produse { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--linie); }
.completare-produse p:first-child { margin: 0 0 .4rem; }
.completare-produse select { width: 100%; }
.calc-completare { margin: .35rem 0 0; font-size: .78rem; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 6%, transparent); border-radius: 4px;
  padding: .3rem .45rem; }
.calc-completare.muted { color: var(--gri-text); }
.tag.completare { background: color-mix(in srgb, var(--navy) 12%, transparent);
  color: var(--navy); border: 1px solid color-mix(in srgb, var(--navy) 25%, transparent); }
.tag.completare svg { vertical-align: -2px; }
.rand-completare { font-size: .78rem; color: var(--navy); }
.rand-completare b { font-weight: 600; }
.completare-propusa { margin: .4rem 0 .1rem; padding: .45rem .6rem; border-radius: 4px;
  background: color-mix(in srgb, var(--navy) 5%, transparent);
  border-left: 3px solid var(--navy); font-size: .82rem; }
.completare-propusa b { font-weight: 600; }
.lista-completare { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .8rem; }
.lista-completare li { margin: .1rem 0; }

/* ---- marfa care aşteaptă un tovarăş de drum ---- */
.tag.asteptare { background: color-mix(in srgb, var(--navy) 10%, transparent);
  color: var(--navy); }
.tag.asteptare svg, .tag.warn svg, .tag.bad svg { vertical-align: -2px; }
.mesaj-asteptare { margin: .5rem 0 0; padding: .5rem .7rem; border-radius: 5px;
  font-size: .84rem; background: color-mix(in srgb, var(--navy) 6%, transparent);
  border-left: 3px solid var(--navy); }
.mesaj-asteptare svg { vertical-align: -3px; }
.cursa-amanata { border-left: 4px solid var(--portocaliu, #b3801a) !important;
  background: color-mix(in srgb, #b3801a 5%, transparent); }
.eticheta-amanata { display: inline-flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, #b3801a 16%, transparent); color: #8a6010;
  font-size: .74rem; font-weight: 600; padding: .18rem .5rem; border-radius: 99px; }
.coridor-lista { margin: .35rem 0 0; font-size: .78rem; color: var(--gri-text); }
.coridor-lista b { color: var(--navy); font-weight: 600; }
.coridor-lista .pe-drum { color: #1a6f4c; font-weight: 600; }
.amanare-explicatie { margin: .4rem 0 .2rem; font-size: .84rem; color: var(--gri-text); }

/* ---- coduri UIT: pagina şoferului, gândită pentru telefon ---- */
.card-uit { border-left: 4px solid var(--rosu); }
.card-uit.confirmat { border-left-color: #1a6f4c; }
.cod-uit { font-size: 1.05rem; letter-spacing: .01em; }
.marfa-uit { margin: .3rem 0 .5rem; font-size: .95rem; }
.obs-uit { margin: .5rem 0 0; font-size: .84rem; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 6%, transparent);
  border-radius: 4px; padding: .35rem .5rem; }
.obs-uit svg { vertical-align: -3px; }
.butoane-uit { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.butoane-uit .btn-big { flex: 1 1 46%; text-align: center; }
.butoane-uit form { flex: 1 1 46%; }
.butoane-uit form .btn-big { width: 100%; }
tr.sters td { opacity: .5; text-decoration: line-through; }

/* ============================================================
   LINIILE DE PALET — dimensiuni, nu doar număr
   ============================================================ */
.paleti-cutie { border: 1px solid var(--linie); border-radius: 5px; padding: .5rem .6rem .55rem;
  margin: .15rem 0 .5rem; background: var(--alb); }
.paleti-cutie .cap-paleti { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .4rem; }
.paleti-cutie .cap-paleti .et { font-size: .82rem; color: var(--navy); }
.paleti-cutie .cap-paleti .et svg { vertical-align: -3px; }
.rezumat-paleti { margin-left: auto; font-size: .77rem; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 7%, transparent); border-radius: 4px;
  padding: .16rem .45rem; }
.rezumat-paleti.muted { background: transparent; color: var(--gri-text); }
.rezumat-paleti.rau { background: color-mix(in srgb, var(--rosu) 10%, transparent); color: var(--rosu); }
.linie-palet { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  padding: .22rem 0; }
.linie-palet + .linie-palet { border-top: 1px dashed var(--linie); }
.linie-palet .sel-tip-palet { flex: 1 1 190px; min-width: 150px; margin: 0; font-size: .82rem;
  padding: .28rem .4rem; height: auto; }
.linie-palet .dim { width: 62px; margin: 0; font-size: .82rem; padding: .28rem .3rem;
  text-align: center; height: auto; }
.linie-palet .dim[readonly] { background: var(--gri-fundal); color: var(--gri-text); }
.linie-palet .buc { width: 66px; margin: 0; font-size: .82rem; padding: .28rem .3rem;
  text-align: center; height: auto; font-weight: 600; }
.linie-palet .x, .linie-palet .um { font-size: .78rem; color: var(--gri-text); }
.linie-palet .bifa { display: flex; align-items: center; gap: .25rem; font-size: .76rem;
  color: var(--gri-text); margin: 0; white-space: nowrap; }
.linie-palet .bifa input { width: auto; margin: 0; }
.linie-palet .sterge-linie { background: none; border: 0; color: var(--gri-text); cursor: pointer;
  padding: .2rem .3rem; line-height: 1; width: auto; margin: 0; }
.linie-palet .sterge-linie:hover:not(:disabled) { color: var(--rosu); }
.linie-palet .sterge-linie:disabled { opacity: .25; cursor: default; }
.adauga-palet { background: none; border: 1px dashed var(--linie-tare, #c3cedd); color: var(--navy);
  font-size: .8rem; font-weight: 600; padding: .3rem .6rem; border-radius: 4px; cursor: pointer;
  width: auto; margin: .35rem 0 0; }
.adauga-palet:hover { border-style: solid; background: color-mix(in srgb, var(--navy) 5%, transparent); }
.adauga-palet svg { vertical-align: -3px; }
.platforma-masina { font-size: .78rem; color: var(--gri-text); }
.platforma-masina b { color: var(--navy); }
@media (max-width: 560px) {
  .linie-palet .sel-tip-palet { flex: 1 1 100%; }
}

/* ============================================================
   COMUTATOARE ŞI CLAPETE — mai puţine câmpuri la vedere
   Formularul de marfă se completează de zece-cincisprezece ori
   în fiecare dimineaţă. Fiecare câmp ţinut la vedere degeaba
   costă o oprire de tab şi o privire, înmulţite cu cincisprezece.
   ============================================================ */
.comutatoare-marfa { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .55rem; }
.chip-bifa { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.chip-bifa input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-bifa span { display: inline-flex; align-items: center; gap: .32rem; font-size: .79rem;
  font-weight: 600; color: var(--gri-text); background: var(--gri-fundal, #eef1f6);
  border: 1px solid var(--linie); border-radius: 99px; padding: .3rem .65rem;
  transition: background .12s, border-color .12s, color .12s; }
.chip-bifa span svg { opacity: .55; }
.chip-bifa:hover span { border-color: var(--navy); color: var(--navy); }
.chip-bifa input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip-bifa input:checked + span svg { opacity: 1; }
.chip-bifa.urgent input:checked + span { background: var(--rosu); border-color: var(--rosu); }
.chip-bifa input:focus-visible + span { outline: 2px solid var(--rosu); outline-offset: 2px; }

details.mai-multe { margin: .2rem 0 .6rem; border-top: 1px dashed var(--linie); padding-top: .45rem; }
details.mai-multe > summary { cursor: pointer; font-size: .79rem; font-weight: 600;
  color: var(--gri-text); list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .1rem; }
details.mai-multe > summary::-webkit-details-marker { display: none; }
details.mai-multe > summary::after { content: "▾"; font-size: .7rem; opacity: .6; }
details.mai-multe[open] > summary::after { content: "▴"; }
details.mai-multe > summary:hover { color: var(--navy); }
details.mai-multe > summary svg { opacity: .6; }
details.mai-multe > *:not(summary) { margin-top: .45rem; }
.sari-la-marfa { margin-left: .5rem; }

/* ============================================================
   LINIILE DE MARFĂ — un produs, o ambalare, o cantitate
   ============================================================ */
.marfa-cutie { border: 1px solid var(--linie); border-radius: 5px; padding: .5rem .6rem .55rem;
  margin: .15rem 0 .5rem; background: var(--alb); container-type: inline-size; }
.marfa-cutie .cap-marfa { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .4rem; }
.marfa-cutie .cap-marfa .et { font-size: .82rem; color: var(--navy); }
.marfa-cutie .cap-marfa .et svg { vertical-align: -3px; }
.rezumat-marfa { margin-left: auto; font-size: .77rem; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 7%, transparent); border-radius: 4px;
  padding: .16rem .45rem; }
.rezumat-marfa.muted { background: transparent; color: var(--gri-text); }
.rezumat-marfa.rau { background: color-mix(in srgb, var(--rosu) 10%, transparent); color: var(--rosu); }
.linie-marfa { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; padding: .28rem 0; }
.linie-marfa + .linie-marfa { border-top: 1px dashed var(--linie); }
.linie-marfa .ce { flex: 1 1 240px; min-width: 180px; max-width: 330px;
  display: flex; flex-direction: column; gap: .2rem; }
.linie-marfa select, .linie-marfa input { margin: 0; height: auto; font-size: .82rem;
  padding: .28rem .4rem; }
.linie-marfa .sel-ambalare { flex: 0 0 92px; }
.linie-marfa .zona-palet { display: inline-flex; align-items: center; gap: .25rem; }
.linie-marfa .sel-tip-palet { flex: 0 1 210px; min-width: 140px; }
.linie-marfa .dims-proprii { display: inline-flex; align-items: center; gap: .25rem; }
.linie-marfa .dim { width: 58px; text-align: center; }
.linie-marfa .dim[readonly] { background: var(--gri-fundal); color: var(--gri-text); }
.linie-marfa .buc { width: 66px; text-align: center; font-weight: 600; }
.linie-marfa .x, .linie-marfa .um { font-size: .78rem; color: var(--gri-text); }
.linie-marfa .um-buc { font-size: .75rem; color: var(--gri-text); min-width: 42px; }
.linie-marfa .bifa { display: flex; align-items: center; gap: .25rem; font-size: .76rem;
  color: var(--gri-text); margin: 0; white-space: nowrap; }
.linie-marfa .bifa input { width: auto; margin: 0; }
.linie-marfa .sterge-linie { background: none; border: 0; color: var(--gri-text); cursor: pointer;
  padding: .2rem .3rem; line-height: 1; width: auto; margin: 0; }
.linie-marfa .sterge-linie:hover:not(:disabled) { color: var(--rosu); }
.linie-marfa .sterge-linie:disabled { opacity: .25; cursor: default; }
.adauga-marfa-linie { background: none; border: 1px dashed var(--linie-tare, #c3cedd); color: var(--navy);
  font-size: .8rem; font-weight: 600; padding: .3rem .6rem; border-radius: 4px; cursor: pointer;
  width: auto; margin: .35rem 0 0; }
.adauga-marfa-linie:hover { border-style: solid; background: color-mix(in srgb, var(--navy) 5%, transparent); }
.adauga-marfa-linie svg { vertical-align: -3px; }
@media (max-width: 640px) {
  .linie-marfa .zona-palet { flex: 1 1 100%; }
  .linie-marfa .sel-ambalare { flex: 0 0 88px; }
}
/* Într-o coloană îngustă cele şapte comenzi ale unui rând nu încap una lângă alta.
   În loc să se rupă unde se nimereşte, se rup unde are sens: sus marfa, jos cum e
   ambalată şi cât e. Aceeaşi ordine de citire, pe două rânduri. */
@container (max-width: 760px) {
  .linie-marfa .ce { flex: 1 1 100%; max-width: none; }
  .linie-marfa .sel-tip-palet { flex: 1 1 150px; }
  /* când sunt la vedere şi dimensiunile scrise de mână, lista de tipuri nu mai
     creşte — altfel „peste" şi coşul cad singure pe al treilea rând */
  .linie-marfa:has(.dims-proprii:not([hidden])) .sel-tip-palet { flex: 0 1 150px; }
}

/* ============================================================
   MENIUL GRUPAT — ce faci azi la vedere, restul la un clic
   ============================================================ */

/* inline-flex, nu block: un <details> deschis, lăsat block, ia toată lăţimea
   şi rupe rândul de meniu în două — grupurile de după el sar pe rândul următor */
.topnav .grup-nav { position: relative; display: inline-flex; align-items: center; }

/* «Flota» şi «Bani» arată exact ca celelalte intrări: sunt intrări de meniu,
   nu altceva. Diferenţa e doar săgeata care spune că se deschide ceva. */
.topnav .grup-nav > summary {
  list-style: none; cursor: pointer;
  color: #33415c; opacity: 1; font-weight: 600; font-size: .92rem;
  padding: .3rem .65rem; border-radius: 8px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem;
  /* Pico pune margine sub summary când <details> e deschis, ca să despartă
     titlul de conţinut. Aici conţinutul pluteşte deasupra paginii, deci
     marginea n-are ce despărţi — doar face bara de meniu să sară cu 16 px la
     fiecare deschidere de grup. */
  margin: 0;
}
.topnav .grup-nav > summary::-webkit-details-marker { display: none; }
.topnav .grup-nav > summary::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .6;
}
.topnav .grup-nav > summary:hover { background: #eef2f8; color: var(--navy); }
.topnav .grup-nav.on > summary {
  background: var(--navy); color: #fff; font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--brand, #e6332a);
}
.topnav .grup-nav[open] > summary { background: #e6ecf5; color: var(--navy); }
.topnav .grup-nav.on[open] > summary { background: var(--navy); color: #fff; }

.topnav .picatura {
  position: absolute; top: calc(100% + .35rem); left: 0; z-index: 40;
  background: var(--alb); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31,58,95,.18); padding: .3rem; min-width: 224px;
  display: flex; flex-direction: column; gap: .1rem;
}
.topnav .picatura a {
  color: var(--navy); opacity: 1; font-weight: 600; font-size: .9rem;
  padding: .42rem .6rem; border-radius: 6px;
  display: flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.topnav .picatura a:hover { background: var(--gri-fundal); color: var(--navy); }

.topnav .nav-separator { flex: 1 1 auto; min-width: .5rem; }
.topnav .nav-mic { font-weight: 500; opacity: .75; }

/* Meniul nu se mai derulează pe orizontală: cu nouă intrări în loc de
   şaptesprezece încape pe orice laptop, iar derularea tăia picăturile
   grupurilor exact când se deschideau (overflow-x:auto implică
   overflow-y:hidden — panoul se vedea doar pe o dungă).

   Pe ecrane înguste trece pe două rânduri: mai bine două rânduri întregi
   decât un rând din care jumătate e ascunsă după o bară de derulare. */
.topnav { overflow: visible; flex-wrap: wrap; }
.topnav .picatura { z-index: 60; }

/* Pagina în care eşti, marcată şi în picătură — altfel deschizi grupul şi nu
   ştii unde te afli deja. */
.topnav .picatura a.aici { background: var(--gri-fundal); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--rosu); }

/* Versiunea: prezentă, dar discretă. E pentru cine o caută, nu pentru toată lumea. */
.footer .versiune { font-variant-numeric: tabular-nums; opacity: .75; }
.versiune-login { margin: 1rem 0 0; text-align: center; font-size: .78rem;
  color: var(--gri-text); font-variant-numeric: tabular-nums; }

/* Clienţii şi destinaţiile din lista de planificări: multe etichete mici, care
   trebuie să încapă fără să umfle rândul. */
.clienti-planificare { max-width: 30rem; }
.clienti-planificare .tag { margin: 0 .18rem .18rem 0; display: inline-block; }

/* Adresa scrisă sub cod: pentru camera spartă sau aburită. Monospaţiat, ca
   literele să nu se confunde între ele când e citită de pe hârtie. */
.eticheta-qr .link-eticheta {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem;
  color: var(--navy); letter-spacing: .01em; word-break: break-all;
  margin: .15rem 0 .1rem; line-height: 1.2;
}
@media print { .eticheta-qr .link-eticheta { font-size: 9pt; } }
.eticheta-qr .instructiune .alt-cale { display: block; margin-top: .15rem;
  font-size: .66rem; color: #8892a0; }