/* AppTruck — sistem de design.
   Fara framework, fara build. Tokenii de mai jos sunt singurul loc unde se
   schimba culorile si spatiile; restul fisierului nu contine valori brute.

   Redesenat pe 26 septembrie 2026 (cerinta: „sa arate premium, user friendly"):
   o singura familie de gri, usor rece; UN singur accent (cobalt), fara gradient;
   verde / galben / rosu raman doar cu intelesul pe care il aveau. Suprafetele
   urca in trepte (fundal -> panou -> ridicat), in loc sa fie despartite de
   margini groase. Fontul e Geist, gazduit pe server (OFL, fonturi/). */

@font-face {
  font-family: "Geist"; src: url("fonturi/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono"; src: url("fonturi/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  /* --- neutre: o singura scara, cu nuanta rece --- */
  --n-0:  #ffffff;
  --n-25: #fbfbfc;
  --n-50: #f5f6f8;
  --n-100:#eceef2;
  --n-200:#e0e3e9;
  --n-300:#c5cad3;
  --n-400:#959ba6;
  --n-500:#6c727e;
  --n-600:#4d535e;
  --n-700:#373c45;
  --n-800:#24282f;
  --n-900:#17191e;
  --n-950:#0e1014;

  /* --- semnale: fiecare inseamna un lucru, nu se folosesc decorativ --- */
  --accent:      #2f5bd3;   /* actiuni */
  --accent-slab: #e9eefc;
  --atentie:     #a85a0c;   /* are nevoie de om */
  --atentie-slab:#fcf1df;
  --bun:         #17803d;   /* confirmat */
  --bun-slab:    #e5f4ea;
  --rau:         #bf2d2d;   /* respins, blocant */
  --rau-slab:    #fcebeb;

  /* --- roluri --- */
  --fundal:        var(--n-50);
  --fundal-panou:  var(--n-0);
  --fundal-adanc:  var(--n-100);
  --fundal-ridicat:var(--n-0);
  --bara:          var(--n-25);
  --bara-text:     var(--n-600);
  --bara-activ:    var(--n-900);
  --bara-hover:    rgb(23 25 30 / .045);
  --bara-selectat: rgb(23 25 30 / .07);
  --bara-linie:    var(--n-200);
  --text:          var(--n-900);
  --text-slab:     var(--n-500);
  --text-sters:    #80868f;
  --linie:         var(--n-200);
  --linie-slaba:   #eef0f3;

  /* umbre colorate in nuanta neutrelor, nu negru pur; lumina vine de sus */
  --umbra-1: 0 1px 2px rgb(23 25 30 / .05), 0 0 0 1px rgb(23 25 30 / .03);
  --umbra-2: 0 6px 16px -4px rgb(23 25 30 / .10), 0 2px 4px rgb(23 25 30 / .05);
  --umbra-3: 0 24px 48px -12px rgb(23 25 30 / .22), 0 4px 12px rgb(23 25 30 / .08);

  /* colturi: mai stranse pe elementele dinauntru, mai largi pe containere */
  --r-mic: 7px;
  --r: 12px;
  --r-mare: 16px;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --bara-lat: 236px;
  --tranzitie: 160ms cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --fundal:       #0e1014;
    --fundal-panou: #15171c;
    --fundal-adanc: #0b0c10;
    --fundal-ridicat:#1b1e24;
    --bara:         #111317;
    --bara-text:    #9aa0ab;
    --bara-activ:   #f2f3f5;
    --bara-hover:   rgb(255 255 255 / .04);
    --bara-selectat:rgb(255 255 255 / .075);
    --bara-linie:   #1f2228;
    --text:         #e9ebef;
    --text-slab:    #a1a7b2;
    --text-sters:   #6f7581;
    --linie:        #262a31;
    --linie-slaba:  #1d2026;

    --accent:      #86a4f7;
    --accent-slab: #1a2238;
    --atentie:     #efb456;
    --atentie-slab:#2b2010;
    --bun:         #57c78f;
    --bun-slab:    #10261b;
    --rau:         #f08080;
    --rau-slab:    #2c1516;

    --umbra-1: 0 1px 2px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .02);
    --umbra-2: 0 8px 20px -6px rgb(0 0 0 / .55), 0 2px 4px rgb(0 0 0 / .3);
    --umbra-3: 0 28px 56px -12px rgb(0 0 0 / .7), 0 4px 12px rgb(0 0 0 / .4);
  }
}

:root[data-tema="dark"] {
  --fundal: #0e1014; --fundal-panou: #15171c; --fundal-adanc: #0b0c10; --fundal-ridicat: #1b1e24;
  --bara: #111317; --bara-text: #9aa0ab; --bara-activ: #f2f3f5;
  --bara-hover: rgb(255 255 255 / .04); --bara-selectat: rgb(255 255 255 / .075); --bara-linie: #1f2228;
  --text: #e9ebef; --text-slab: #a1a7b2; --text-sters: #6f7581;
  --linie: #262a31; --linie-slaba: #1d2026;
  --accent: #86a4f7; --accent-slab: #1a2238;
  --atentie: #efb456; --atentie-slab: #2b2010;
  --bun: #57c78f; --bun-slab: #10261b;
  --rau: #f08080; --rau-slab: #2c1516;
  --umbra-1: 0 1px 2px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .02);
  --umbra-2: 0 8px 20px -6px rgb(0 0 0 / .55), 0 2px 4px rgb(0 0 0 / .3);
  --umbra-3: 0 28px 56px -12px rgb(0 0 0 / .7), 0 4px 12px rgb(0 0 0 / .4);
}

* { box-sizing: border-box; }

html, body {
  height: 100%; margin: 0;
  font-family: var(--font);
  font-size: 14px; line-height: 1.5;
  color: var(--text); background: var(--fundal);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-mic);
}

/* ================= structura ================= */
.app { display: grid; grid-template-columns: var(--bara-lat) 1fr; height: 100%; }

/* ---- bara laterala ---- */
.bara {
  background: var(--bara); color: var(--bara-text);
  display: flex; flex-direction: column; overflow: hidden;
}
.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
}
.marca-semn {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: linear-gradient(140deg, var(--accent), #7c3aed);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.02em;
}
.marca-nume { color: var(--bara-activ); font-weight: 650; letter-spacing: -.01em; }
.marca-sub { display: block; font-size: 11px; color: var(--n-600); font-weight: 400; letter-spacing: 0; }

.nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; }
.nav-titlu {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--n-600); padding: 14px 8px 6px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-mic);
  background: none; border: 0; width: 100%; text-align: left;
  color: var(--bara-text); cursor: pointer;
  transition: background var(--tranzitie), color var(--tranzitie);
}
.nav-item:hover { background: rgb(255 255 255 / .05); color: var(--bara-activ); }
.nav-item[aria-current="page"] { background: rgb(255 255 255 / .09); color: var(--bara-activ); font-weight: 550; }
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.nav-item[aria-current="page"] svg { opacity: 1; }
.nav-numar {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  background: rgb(255 255 255 / .08); padding: 1px 6px; border-radius: 20px;
  min-width: 22px; text-align: center;
}
.nav-item[aria-current="page"] .nav-numar { background: var(--accent); color: #fff; }
.nav-numar.atentie { background: var(--atentie); color: #1a1206; font-weight: 600; }

.bara-jos { margin-top: auto; padding: 12px; border-top: 1px solid rgb(255 255 255 / .06); }
.stare-linie { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--n-600); padding: 4px 8px; }
.bec { width: 6px; height: 6px; border-radius: 50%; background: var(--bun); flex: none; }
.bec.gri { background: var(--n-600); }

/* ---- zona principala ---- */
.principal { display: flex; flex-direction: column; overflow: hidden; }

.antet {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 56px; flex: none;
  border-bottom: 1px solid var(--linie); background: var(--fundal-panou);
}
.antet h1 { font-size: 15px; font-weight: 620; margin: 0; letter-spacing: -.01em; }
.antet-dreapta { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.cauta {
  position: relative; flex: 1; max-width: 340px;
}
.cauta input {
  width: 100%; padding: 7px 10px 7px 32px;
  background: var(--fundal); border: 1px solid var(--linie);
  border-radius: var(--r-mic); color: var(--text);
  transition: border-color var(--tranzitie), background var(--tranzitie);
}
.cauta input:focus { outline: none; border-color: var(--accent); background: var(--fundal-panou); }
.cauta svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-sters); }

.buton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-mic);
  border: 1px solid var(--linie); background: var(--fundal-panou);
  color: var(--text); cursor: pointer; font-weight: 500;
  transition: background var(--tranzitie), border-color var(--tranzitie), transform var(--tranzitie);
}
.buton:hover { background: var(--fundal-adanc); }
.buton:active { transform: translateY(1px); }
.buton svg { width: 15px; height: 15px; }
.buton.principal-actiune { background: var(--accent); border-color: var(--accent); color: #fff; }
.buton.principal-actiune:hover { filter: brightness(1.08); }
.buton.bun { background: var(--bun); border-color: var(--bun); color: #fff; }
.buton.bun:hover { filter: brightness(1.08); }
.buton.rau { color: var(--rau); border-color: color-mix(in srgb, var(--rau) 40%, transparent); }
.buton.rau:hover { background: var(--rau-slab); }
.buton.mic { padding: 4px 9px; font-size: 12.5px; }
.buton[disabled] { opacity: .45; cursor: not-allowed; }

/* segmented control pentru filtre */
.segmente { display: inline-flex; background: var(--fundal-adanc); border-radius: var(--r-mic); padding: 2px; gap: 2px; }
.segmente button {
  border: 0; background: none; padding: 5px 11px; border-radius: 5px;
  color: var(--text-slab); cursor: pointer; font-weight: 500; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--tranzitie), color var(--tranzitie);
}
.segmente button:hover { color: var(--text); }
.segmente button[aria-pressed="true"] {
  background: var(--fundal-panou); color: var(--text);
  box-shadow: var(--umbra-1); font-weight: 570;
}
.segmente .n { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--text-sters); }
.segmente button[aria-pressed="true"] .n { color: var(--text-slab); }

/* ---- zona de lucru: lista + detaliu ---- */
.lucru { flex: 1; display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); overflow: hidden; }
.lucru.singur { grid-template-columns: 1fr; }

.coloana-lista { border-right: 1px solid var(--linie); display: flex; flex-direction: column; overflow: hidden; background: var(--fundal-panou); }
.bara-filtre { padding: 12px 14px; border-bottom: 1px solid var(--linie-slaba); display: flex; align-items: center; gap: 10px; flex: none; }
.lista { overflow-y: auto; flex: 1; }

.rand {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; background: none; cursor: pointer;
  border-bottom: 1px solid var(--linie-slaba);
  border-left: 3px solid transparent;
  transition: background var(--tranzitie);
}
.rand:hover { background: var(--fundal); }
.rand[aria-selected="true"] { background: var(--accent-slab); border-left-color: var(--accent); }

.rand-sus { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.rand-client { font-weight: 560; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rand-suma { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.rand-jos { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-slab); }
.rand-ref { font-family: var(--mono); font-size: 11.5px; color: var(--text-sters); }
.rand-ruta { font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pastila {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 1.5px 7px; border-radius: 20px;
  background: var(--fundal-adanc); color: var(--text-slab);
  white-space: nowrap; letter-spacing: .01em;
}
.pastila.atentie { background: var(--atentie-slab); color: var(--atentie); }
.pastila.bun { background: var(--bun-slab); color: var(--bun); }
.pastila.rau { background: var(--rau-slab); color: var(--rau); }
.pastila.accent { background: var(--accent-slab); color: var(--accent); }

/* ---- panoul de detaliu ---- */
.detaliu { overflow-y: auto; padding: 0; background: var(--fundal); }
.detaliu-antet {
  position: sticky; top: 0; z-index: 2;
  background: var(--fundal-panou); border-bottom: 1px solid var(--linie);
  padding: 16px 22px; display: flex; align-items: flex-start; gap: 16px;
}
.detaliu-titlu h2 { margin: 0 0 4px; font-size: 17px; font-weight: 630; letter-spacing: -.02em; }
.detaliu-titlu .sub { font-size: 12.5px; color: var(--text-slab); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.detaliu-actiuni { margin-left: auto; display: flex; gap: 8px; flex: none; }

/* minmax(0,...) e obligatoriu: fara el, un continut lung (o adresa de email)
   umfla coloana in loc sa se rupa, si panoul iese din ecran. */
.detaliu-corp { padding: 20px 22px 60px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: start; }
@media (max-width: 1280px) { .detaliu-corp { grid-template-columns: minmax(0,1fr); } }

.card {
  background: var(--fundal-panou); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--umbra-1); overflow: hidden;
  container-type: inline-size;
}
.card-antet {
  padding: 11px 15px; border-bottom: 1px solid var(--linie-slaba);
  font-size: 12px; font-weight: 620; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-slab); display: flex; align-items: center; gap: 8px;
}
.card-corp { padding: 14px 15px; }

.camp { display: grid; grid-template-columns: 122px 1fr; gap: 10px; padding: 6px 0; align-items: baseline; }
.camp + .camp { border-top: 1px solid var(--linie-slaba); }
.camp dt { color: var(--text-slab); font-size: 12.5px; }
.camp dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.camp dd.mono { font-family: var(--mono); font-size: 12.5px; }
.camp dd.gol { color: var(--text-sters); font-weight: 400; font-style: italic; }

/* Cand cardul e ingust, eticheta trece deasupra valorii. Altfel valorile lungi
   (adrese de email, note) se rup caracter cu caracter si devin ilizibile. */
@container (max-width: 430px) {
  .camp { grid-template-columns: 1fr; gap: 1px; padding: 7px 0; }
  .camp dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
}

/* opririle, ca un traseu */
.traseu { display: flex; flex-direction: column; gap: 0; }
.oprire { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding-bottom: 16px; }
.oprire:last-child { padding-bottom: 0; }
.oprire::before {
  content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px;
  background: var(--linie); border-radius: 2px;
}
.oprire:last-child::before { display: none; }
.punct {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundal-adanc); color: var(--text-slab);
  font-size: 10px; font-weight: 700; z-index: 1; border: 2px solid var(--fundal-panou);
}
.punct.ridicare { background: var(--accent); color: #fff; }
.punct.livrare { background: var(--bun); color: #fff; }
.oprire-nume { font-weight: 560; }
.oprire-adr { font-size: 12.5px; color: var(--text-slab); }
.oprire-cod { font-family: var(--mono); font-weight: 600; }
.oprire-cand { font-size: 12px; color: var(--text-slab); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* observatii */
.obs { display: flex; gap: 9px; padding: 8px 0; align-items: flex-start; font-size: 13px; }
.obs + .obs { border-top: 1px solid var(--linie-slaba); }
.obs-semn { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.obs.blocanta .obs-semn { color: var(--rau); }
.obs .obs-semn { color: var(--atentie); }

/* emailul original */
.email-text {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 420px; overflow-y: auto;
  color: var(--text-slab);
}
.atasamente { display: flex; flex-direction: column; gap: 10px; }
.atasament {
  border: 1px solid var(--linie); border-radius: var(--r-mic); overflow: hidden;
  background: var(--fundal);
}
.atasament-cap {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-size: 12px; color: var(--text-slab); border-bottom: 1px solid var(--linie-slaba);
}
.atasament-cap .nume { font-weight: 550; color: var(--text); }
.atasament-cap .marime { margin-left: auto; font-variant-numeric: tabular-nums; }
.atasament img { display: block; width: 100%; height: auto; background: #fff; }

/* stari goale */
.gol-mare {
  display: grid; place-items: center; height: 100%; text-align: center;
  color: var(--text-sters); padding: 40px; gap: 10px;
}
.gol-mare svg { width: 40px; height: 40px; opacity: .4; }
.gol-mare h3 { margin: 0; font-size: 15px; font-weight: 560; color: var(--text-slab); }
.gol-mare p { margin: 0; font-size: 13px; max-width: 380px; }

/* tabelul de suspecte */
/* table-layout: fixed opreste coloana cu date brute sa impinga tabelul in
   afara ecranului. Fara el, ultima coloana ramanea taiata. */
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.tabel col.c-data { width: 108px; }
.tabel col.c-de-la { width: 20%; }
.tabel col.c-subiect { width: 26%; }
.tabel col.c-motiv { width: 24%; }
.tabel th {
  text-align: left; padding: 9px 14px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-slab); font-weight: 620;
  border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--fundal-panou);
}
.tabel td { padding: 10px 14px; border-bottom: 1px solid var(--linie-slaba); vertical-align: top; overflow-wrap: anywhere; }
.tabel .pastila { white-space: normal; text-align: left; }
.tabel tr:hover td { background: var(--fundal); }
.tabel .mono { font-family: var(--mono); font-size: 12px; }

.zona-tabel { overflow-y: auto; overflow-x: hidden; flex: 1; background: var(--fundal-panou); }

/* mesaj trecator */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--n-900); color: var(--n-0); padding: 10px 16px;
  border-radius: var(--r); box-shadow: var(--umbra-3); font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity var(--tranzitie), transform var(--tranzitie);
  z-index: 40; display: flex; align-items: center; gap: 8px;
}
.toast.se-vede { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.rau { background: var(--rau); }

kbd {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px;
  border: 1px solid var(--linie); border-bottom-width: 2px;
  border-radius: 4px; background: var(--fundal-adanc); color: var(--text-slab);
}

.incarcare { padding: 30px; text-align: center; color: var(--text-sters); font-size: 13px; }

/* Spune cand lista a fost taiata de plafonul serverului. Fara ea, 60 de comenzi
   si 63 de emailuri semnalate lipseau de pe ecran fara niciun semn. */
.nota-taiere {
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--atentie);
  background: color-mix(in srgb, var(--atentie) 10%, transparent);
  border-bottom: 1px solid var(--linie-slaba);
}

/* Ce postcoduri s-au mai vazut la aceeasi adresa. Sugestie pentru dispecer,
   niciodata completare automata: aceeasi firma poate avea depozite diferite. */
.sugestii {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-sters);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sugestii em { color: var(--atentie); font-style: normal; }

/* ============ ziua de lucru ============================================== */
.zona-zile { flex: 1; overflow-y: auto; background: var(--fundal-panou); padding-bottom: 40px; }

.zile-antet {
  position: sticky; top: 0; z-index: 3;
  background: var(--fundal-panou);
  border-bottom: 1px solid var(--linie);
  padding: 16px 22px 12px;
}
.zile-rezumat { display: flex; gap: 26px; flex-wrap: wrap; }
.zile-cifra { display: flex; flex-direction: column; gap: 1px; }
.zile-cifra b { font-size: 23px; font-weight: 650; line-height: 1.1; }
.zile-cifra span { font-size: 11.5px; color: var(--text-sters); }
.zile-cifra.cuCursa b { color: var(--bun); }
.zile-cifra.faraCursa b { color: var(--accent); }
.zile-cifra.blocate b { color: var(--atentie); }
.zile-cifra.faraComanda b { color: var(--text-sters); }
.zile-sinc {
  margin-top: 12px; display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text-sters); flex-wrap: wrap;
}

.zi { border-bottom: 1px solid var(--linie-slaba); }
.zi-antet {
  position: sticky; top: 96px; z-index: 2;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 12px 22px 10px;
  background: color-mix(in srgb, var(--fundal-panou) 92%, var(--text) 8%);
  border-bottom: 1px solid var(--linie-slaba);
}
.zi-antet h2 { font-size: 14.5px; font-weight: 600; margin: 0; text-transform: capitalize; }
.zi-cifre { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-sters); flex-wrap: wrap; }
.zi-cifre .bun { color: var(--bun); }
.zi-cifre .nou { color: var(--accent); }
.zi-cifre .atentie { color: var(--atentie); }
.zi-cifre .rau { color: var(--rau); }

.zi-randuri { display: flex; flex-direction: column; }
.zi-rand {
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px; padding: 11px 22px;
  border-bottom: 1px solid var(--linie-slaba);
  cursor: pointer;
}
.zi-rand:last-child { border-bottom: 0; }
.zi-rand:hover { background: var(--fundal-adanc); }
.zi-rand.fara-comanda { cursor: default; opacity: .78; }

.zi-semn {
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; margin-top: 2px;
}
.cu-cursa    .zi-semn { background: color-mix(in srgb, var(--bun) 16%, transparent); color: var(--bun); }
.fara-cursa  .zi-semn { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.blocata     .zi-semn { background: color-mix(in srgb, var(--atentie) 18%, transparent); color: var(--atentie); }
.anulata     .zi-semn { background: color-mix(in srgb, var(--rau) 16%, transparent); color: var(--rau); }
.fara-comanda .zi-semn { background: var(--fundal-adanc); color: var(--text-sters); }

.zi-corp { min-width: 0; }
.zi-sus { display: flex; align-items: baseline; gap: 10px; }
.zi-client { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.zi-suma { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.zi-jos {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12px; color: var(--text-sters);
}
.zi-sursa { font-size: 11px; opacity: .75; }
.zi-lipsa { margin-top: 5px; font-size: 12px; color: var(--atentie); }
.zi-nota { margin-top: 5px; font-size: 11.5px; color: var(--text-sters); }
.zi-nota.nou { color: var(--accent); }
.zi-difuri { margin-top: 5px; font-size: 11.5px; color: var(--text-sters); display: flex; gap: 10px; flex-wrap: wrap; }
.zi-dif b { color: var(--text); font-weight: 600; }
.zi-cifre .sters { color: var(--text-sters); }

/* O zi fara emailuri descarcate NU e o zi in care am ratat comenzi. */
.zi-cifre .fara-arhiva {
  color: var(--atentie);
  background: color-mix(in srgb, var(--atentie) 12%, transparent);
  padding: 1px 7px; border-radius: 5px;
}

/* ============ completarea campurilor lipsa =============================== */
/* ⚠️ Editorul scrie DOAR local. Nu creeaza si nu modifica joburi in Truckcom. */
.editor { border-color: color-mix(in srgb, var(--atentie) 35%, var(--linie)); }
.ed-explicatie { margin: 0 0 14px; font-size: 12px; color: var(--text-sters); line-height: 1.5; }

.ed-randuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ed-camp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-eticheta { font-size: 11.5px; color: var(--text-sters); }
.ed-eticheta em { color: var(--atentie); font-style: normal; }
.ed-camp.completat .ed-intrare { border-color: color-mix(in srgb, var(--atentie) 55%, transparent); }
.ed-vechi { font-size: 11px; color: var(--text-sters); }

.ed-intrare {
  background: var(--fundal); color: var(--text);
  border: 1px solid var(--linie); border-radius: 8px;
  padding: 7px 10px; font: inherit; font-size: 13px;
  min-width: 0; width: 100%;
}
.ed-intrare:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); }
.ed-intrare.mic { max-width: 118px; }
.ed-intrare.cod { max-width: 116px; font-family: ui-monospace, monospace; text-transform: uppercase; }

.ed-titlu { margin: 18px 0 8px; font-size: 12px; font-weight: 600; }
.ed-titlu span { font-weight: 400; color: var(--text-sters); margin-left: 8px; }
.ed-opriri { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ed-oprire { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-oprire .ed-intrare[name="text"] { flex: 1 1 220px; }
.ed-gol { font-size: 12px; color: var(--text-sters); padding: 6px 0; }
.ed-actiuni { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Preturile vazute pe aceeasi ruta. Se apasa ca sa se puna in camp; NU se
   completeaza singure, iar cand pretul variaza mult se spune pe fata. */
.ed-sugestii {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: -4px; font-size: 11.5px; color: var(--text-sters);
}
.ed-sug-titlu { color: var(--text-sters); }
.ed-pune-pret { cursor: pointer; border: 1px solid var(--linie); background: var(--fundal); font: inherit; }
.ed-pune-pret:hover { border-color: var(--accent); color: var(--text); }
.ed-sugestii em { font-style: normal; }


/* ============ vederea Joburi ============================================ */
/* Semnul din stanga fiecarui rand. Aceleasi patru intelesuri ca in „Zile",
   ca omul sa nu trebuiasca sa invete doua alfabete. */
.job-semn {
  width: 21px; height: 21px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--fundal-adanc); color: var(--text-sters);
}
.job-semn.cu-cursa   { background: color-mix(in srgb, var(--bun) 16%, transparent); color: var(--bun); }
.job-semn.fara-cursa { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.job-semn.blocata    { background: color-mix(in srgb, var(--atentie) 18%, transparent); color: var(--atentie); }
.job-semn.anulata    { background: color-mix(in srgb, var(--rau) 16%, transparent); color: var(--rau); }
.detaliu-titlu h2 .job-semn { vertical-align: middle; display: inline-grid; margin-right: 6px; }

.banda-oprit {
  background: var(--atentie-slab); color: var(--atentie);
  border: 1px solid color-mix(in srgb, var(--atentie) 30%, transparent);
  border-radius: var(--r); padding: 11px 13px; font-size: 12.5px; line-height: 1.55;
}
.banda-oprit b { display: block; margin-bottom: 2px; }

/* ⚠️ Vederea de joburi are nevoie de mai multa latime decat cea de validare:
   formularul are zece campuri, iar fiecare oprire inca sapte. Cu latimile
   celeilalte vederi, panoul iesea la 254px si toate campurile cadeau unul sub
   altul, adica exact ce nu vrei cand compari un rand cu emailul de langa el.
   Lista se strange, panoul creste. */
.lucru.joburi { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
.lucru.joburi .detaliu-corp { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1180px) { .lucru.joburi .detaliu-corp { grid-template-columns: minmax(0, 1fr); } }
.lucru.joburi .rand-ruta { font-size: 11px; }

.job-grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ed-ajutor { font-size: 11px; color: var(--text-sters); line-height: 1.45; }
.ed-camp.netrimis .ed-intrare { background: var(--fundal-adanc); color: var(--text-sters); }
.semn-netrimis { color: var(--text-sters) !important; }
.ed-camp textarea.ed-intrare { resize: vertical; min-height: 62px; font: inherit; }

/* O oprire = un bloc, nu un rand: sunt sapte campuri, iar pe un singur rand
   nu se mai vede care postcod tine de care adresa. */
.job-oprire { border: 1px solid var(--linie); border-radius: var(--r); padding: 10px 11px; margin-bottom: 10px; }
.job-oprire-cap { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.job-oprire-cap .ed-sterge { margin-left: auto; }
.job-oprire-campuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.job-oprire-campuri label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.job-oprire-campuri span { font-size: 11px; color: var(--text-sters); font-family: var(--mono); }
.job-intermediare { font-size: 12px; color: var(--text-slab); margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.job-intermediare em { font-style: normal; color: var(--text-sters); font-size: 11px; }
.job-pune-oprire { cursor: pointer; border: 1px solid var(--linie); background: var(--fundal); font: inherit; }
.job-pune-oprire:hover { border-color: var(--accent); color: var(--accent); }

.job-plic {
  margin: 0; padding: 11px 12px; background: var(--fundal-adanc); border-radius: var(--r-mic);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  max-height: 340px; overflow: auto; white-space: pre; color: var(--text-slab);
}
.job-plic.mare { max-height: 60vh; font-size: 12px; }

/* Verificarile: nivelul se citeste din eticheta, nu din culoare singura. */
.obs.atentioneaza .obs-semn { color: var(--atentie); }
.obs.bun .obs-semn { color: var(--bun); }
.obs-nivel {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em;
  background: var(--fundal-adanc); color: var(--text-sters);
}
.obs-nivel.rau { background: var(--rau-slab); color: var(--rau); }
.obs-nivel.atentie { background: var(--atentie-slab); color: var(--atentie); }
.obs-detaliu { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--text-sters); }

/* Fereastra cu cererea care ar fi plecat. */
.valul { position: fixed; inset: 0; background: rgb(12 16 24 / .55); display: grid; place-items: center; padding: 24px; z-index: 60; }
.fereastra { background: var(--fundal-panou); border-radius: var(--r-mare); box-shadow: var(--umbra-3); max-width: 780px; width: 100%; overflow: hidden; }
.fereastra-cap { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--linie); font-size: 13px; }
.fereastra-cap span { color: var(--text-slab); font-size: 12px; }
.fereastra-cap button { margin-left: auto; }
.fereastra-cap code { font-family: var(--mono); font-size: 11.5px; }

/* Lista din vederea de joburi e mai ingusta, deci filtrele nu mai incap pe un
   rand: „De lamurit" iesea taiat afara din panou. */
.lucru.joburi .segmente { flex-wrap: wrap; }
.lucru.joburi .segmente button { padding: 4px 8px; font-size: 12.5px; }
.lucru.joburi .bara-filtre { padding: 10px 12px; }

/* Siglele din semnatura: se pot deschide, dar nu stau in fata. */
.card.sigle > summary { cursor: pointer; list-style: none; }
.card.sigle > summary::-webkit-details-marker { display: none; }
.card.sigle > summary::before { content: '▸'; margin-right: 6px; color: var(--text-sters); }
.card.sigle[open] > summary::before { content: '▾'; }

/* Lista de joburi are randuri mai incarcate (semn + pastile + data) intr-o
   coloana mai ingusta: fara astea, panoul primea o bara de derulare laterala. */
.lucru.joburi .lista { overflow-x: hidden; }
.lucru.joburi .rand-jos { flex-wrap: wrap; row-gap: 4px; }
.lucru.joburi .rand-client { min-width: 0; }

/* Capul de zi din lista de joburi. Ramane lipit sus cat timp derulezi ziua,
   altfel la a treizecea comanda nu mai stii pe ce zi te uiti. */
.zi-cap {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--fundal-adanc); border-bottom: 1px solid var(--linie);
  font-size: 12px; font-weight: 600; color: var(--text-slab);
}
.zi-cap-nume { letter-spacing: -.01em; }
.zi-cap-numar {
  font-variant-numeric: tabular-nums; color: var(--text-sters); font-weight: 500;
}
.zi-cap .pastila { margin-left: auto; }
.zi-cap.azi { color: var(--accent); background: var(--accent-slab); }
.zi-cap.fara-data { color: var(--atentie); background: var(--atentie-slab); }

.rand-ora {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--text-slab); flex: none;
}
.pastila.job-id { font-family: var(--mono); font-size: 11px; }

.bara-filtre.a-doua { padding-top: 0; border-bottom: 1px solid var(--linie-slaba); }
.bara-filtre.a-doua .buton { margin-left: auto; white-space: nowrap; }

/* ---- semnul de email pe rand ------------------------------------------
   Doua semne, nu unul: „jobul e creat" si „avem emailul" sunt lucruri diferite.
   278 de joburi exista in Truckcom fara email, iar 80 de comenzi au email
   fara job. */
.semn-email { display: inline-flex; flex: none; }
.semn-email svg { width: 14px; height: 14px; }
.semn-email.are { color: var(--accent); }
.semn-email.nu { color: var(--text-sters); opacity: .6; }
/* emailul EXISTA, doar ca n-a fost inca descarcat: alt inteles, deci alt semn */
.semn-email.asteapta { color: var(--atentie, #d98324); opacity: .9; }

/* ---- notitele noastre -------------------------------------------------- */
.card.notite .doar-noi {
  margin-left: auto; font-weight: 400; font-size: 11px;
  color: var(--text-sters); text-transform: none; letter-spacing: 0;
}
.card.notite textarea.ed-intrare { width: 100%; resize: vertical; min-height: 76px; font: inherit; }
.dif-lista {
  background: var(--fundal-adanc); border-radius: var(--r-mic);
  padding: 10px 11px; margin-bottom: 12px;
}
.dif-titlu { font-size: 11.5px; color: var(--text-sters); margin-bottom: 7px; }
.dif-rand {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 14px minmax(0, 1fr);
  gap: 7px; align-items: baseline; padding: 3px 0; font-size: 12.5px;
}
.dif-camp { color: var(--text-slab); }
.dif-email { font-family: var(--mono); font-size: 11.5px; color: var(--text-sters); }
.dif-sageata { color: var(--text-sters); text-align: center; }
.dif-job { font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.dif-lista .buton { margin-top: 8px; }

/* ---- filtrele de data -------------------------------------------------- */
.bara-filtre.a-doua { gap: 5px; flex-wrap: wrap; padding: 8px 10px 10px; }
/* ⚠️ `flex: 1 1 auto` lua latimea CONTINUTULUI ca baza, iar „luna: toate" e
   lat: cele trei selectoare cadeau fiecare pe randul lui, adica trei randuri
   de filtre intr-o coloana de 300px. Cu baza 0 impart randul in trei egale. */
/* ⚠️ Doua incercari gresite inainte de asta, amandoua vazute pe captura:
   cu toate pe un rand, selectoarele se stransesera la „20", „se", „7";
   cu latime minima si wrap, fiecare lua un rand intreg — patru randuri de
   filtre. Asezarea de acum: anul/luna/ziua pe un rand, butoanele si firma pe
   urmatorul. */
.bara-filtre.a-doua select.ed-intrare { max-width: none; flex: 1 1 0; min-width: 0; }
.bara-filtre.a-treia { position: relative; padding: 0 10px 10px; border-bottom: 1px solid var(--linie-slaba);
  display: flex; align-items: center; gap: 6px; flex: none; }
.bara-filtre.a-treia .buton { flex: none; }
/* Alegerea firmelor: buton + panou cu bifa, nu lista derulanta.
   ⚠️ Prima varianta a folosit variabile de culoare care NU EXISTA in tema
   (--fundal-card, --fundal-slab): panoul a iesit TRANSPARENT, cu lista de joburi
   vizibila prin el, si numele firmelor taiate. Vazut pe captura, semnalat de
   client. Numele reale sunt --fundal-panou si --fundal-adanc. */
/* ⚠️ Panoul se ancoreaza de BARA, nu de buton. Masurat: ancorat de buton si
   lat de 340px, incepea la x=209, iar coloana incepe la x=232 si are
   `overflow: hidden` — deci 23px din stanga lui erau taiati, inclusiv bifele
   si inceputul casetei de cautare. Se vedea pe captura ca o dunga.
   De aceea `.alegere-firme` NU e pozitionata: blocul de referinta e bara. */
.alegere-firme { flex: 1 1 0; min-width: 0; }
.alegere-firme .deschide { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; overflow: hidden; white-space: nowrap; }
.alegere-firme .deschide > :first-child { overflow: hidden; text-overflow: ellipsis; }
.alegere-firme .sageata { flex: none; opacity: .6; }

/* ⚠️ Panoul se agata de MARGINEA DREAPTA a butonului si se intinde spre stanga
   peste toata coloana: numele sunt lungi („JSM LOGISTICS GLASGOW LIMITED") si
   intr-o caseta de latimea butonului se taie toate la trei cuvinte. */
.alegere-firme .panou {
  position: absolute; z-index: 60; top: calc(100% - 4px); left: 10px; right: 10px;
  background: var(--fundal-panou); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--umbra-3); overflow: hidden;
}
.alegere-firme .panou-cap { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--linie-slaba); }
.alegere-firme .panou-cap input { flex: 1 1 0; min-width: 0; }
.alegere-firme .panou-lista { max-height: 44vh; overflow-y: auto; padding: 4px; }
.firma-rand { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r-mic);
  cursor: pointer; font-size: 13px; }
.firma-rand:hover { background: var(--fundal-adanc); }
/* ⚠️ Bifele ieseau ca o dunga de un pixel: fara marime scrisa, casuta se
   strangea in randul flex. Se vedea pe captura, semnalat de client. */
.firma-rand input[type=checkbox] { flex: none; margin: 0; width: 15px; height: 15px;
  accent-color: var(--accent); cursor: pointer; }
.firma-rand .nume { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firma-rand .cate { flex: none; color: var(--text-sters); font-size: 12px; font-variant-numeric: tabular-nums; }
.gol-mic { padding: 12px; color: var(--text-sters); font-size: 13px; margin: 0; text-align: center; }
/* sagetile de zi: inguste, langa „Azi" */
#f-inapoi, #f-inainte { padding-left: 9px; padding-right: 9px; font-size: 15px; line-height: 1; }
.bara-filtre.a-doua .buton { flex: none; }
.bara-filtre #ordine-joburi { margin-left: auto; }

/* ---- ce scrie ACUM in Truckcom ----------------------------------------
   Trei coloane: numele campului asa cum il stie Truckcom, valoarea lui, si ce
   am pune noi. Randurile care difera se aprind — alea sunt tot ce cauti aici. */
.card.truckcom .tc-id {
  margin-left: auto; font-weight: 400; font-size: 11px;
  color: var(--text-sters); text-transform: none; letter-spacing: 0;
}
.tc-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tc-tabel th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-sters); padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--linie);
}
.tc-tabel td { padding: 4px 8px 4px 0; vertical-align: top; border-bottom: 1px solid var(--linie-slaba); }
.tc-tabel tr.difera td { background: color-mix(in srgb, var(--atentie) 9%, transparent); }
.tc-tabel tr.difera .tc-nostru { color: var(--atentie); font-weight: 600; }
.tc-camp { color: var(--text-slab); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.tc-val { font-weight: 560; word-break: break-word; }
.tc-nostru { font-family: var(--mono); font-size: 11.5px; color: var(--text-slab); word-break: break-word; }
.tc-tabel .gol { color: var(--text-sters); font-weight: 400; }

.tc-titlu { margin: 16px 0 8px; font-size: 11.5px; font-weight: 600; color: var(--text-sters); }
.tc-opriri { display: flex; flex-direction: column; gap: 10px; }
.tc-oprire { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }

/* ---- trimiterea unui singur camp -------------------------------------
   Iconita sta in eticheta campului, nu langa el: langa input ar fi confundata
   cu un buton de curatat, iar in eticheta se citeste ca „trimite ASTA". */
.camp-trimite {
  margin-left: auto; border: 0; background: none; padding: 1px 3px;
  color: var(--text-sters); cursor: pointer; border-radius: 4px; line-height: 0;
}
.camp-trimite svg { width: 12px; height: 12px; }
.camp-trimite:hover { color: var(--accent); background: var(--accent-slab); }
.camp-trimite:disabled { opacity: .4; cursor: default; }
.ed-eticheta { display: flex; align-items: center; gap: 4px; }
.camp-trimite-bloc { margin-left: 8px; }

/* ---- joburi legate intre ele in Truckcom (iconita „G" de la ei) -------- */
.pastila.grupat { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tc-grupat {
  margin-top: 14px; padding: 10px 11px; border-radius: var(--r-mic);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.tc-grupat em { font-style: normal; color: var(--text-sters); font-size: 11.5px; width: 100%; }
.tc-mergi { cursor: pointer; border: 1px solid var(--linie); background: var(--fundal-panou); font: inherit; font-family: var(--mono); }
.tc-mergi:hover { border-color: var(--accent); color: var(--accent); }

/* Camp care pleaca pe o cheie ghicita de noi, nu confirmata de Truckcom. */
.semn-presupus { color: var(--atentie) !important; font-style: normal; cursor: help; }

/* Cele 112 campuri: primele la vedere, restul grupate sub o singura apasare. */
.tc-restul { margin-top: 14px; }
.tc-restul > summary {
  cursor: pointer; font-size: 12px; color: var(--text-slab);
  padding: 6px 0; list-style: none;
}
.tc-restul > summary::-webkit-details-marker { display: none; }
.tc-restul > summary::before { content: '▸ '; color: var(--text-sters); }
.tc-restul[open] > summary::before { content: '▾ '; }
.tc-grup-nume {
  margin: 14px 0 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-sters);
}

/* Cât de veche e copia din Truckcom. ⚠️ Nu e decor: lista e o fotografie, iar
   fără linia asta un job creat după ultima sincronizare arată ca unul pierdut. */
.sincronizare {
  padding: 6px 12px; font-size: 11.5px; color: var(--text-sters);
  border-bottom: 1px solid var(--linie-slaba); flex: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sincronizare.vechi { color: var(--atentie); }

/* ---------- fila „Coduri" ---------------------------------------------------
   Codurile postale invatate din joburile facute. Folosesc aceiasi tokeni ca
   restul: fara culori scrise direct, ca tema intunecata sa mearga singura.

   ⚠️ Localitatile cu MAI MULTE coduri poarta semn de atentie, nu unul neutru.
      Acolo alegerea e a omului: masurat, un prefix duce la un singur cod
      complet doar in 18% din cazuri.                                        */
/* ⚠️ .lucru are overflow:hidden (e gandit pentru vederea Joburi, unde panourile
   dinauntru isi fac singure derularea). Fila Coduri n-avea niciun container care
   sa deruleze, deci cele 877 de localitati erau TAIATE la inaltimea ecranului si
   nu se putea ajunge la restul. Raportat de client pe 7 septembrie 2026. */
.lucru.locuri { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; overflow: hidden; }
.lucru.locuri .locuri-cap { flex: none; }

/* ⚠️ min-height:0 NU e decorativ. Un copil de flex nu coboara sub inaltimea
   continutului lui, deci fara randul asta overflow-y:auto n-are ce taia, iar
   lista se intinde in jos la fel de netaiata ca inainte. Acelasi tipar ca
   min-width:0 pe orizontala. */
.locuri-lista-invelis { flex: 1; min-height: 0; overflow-y: auto; }

.locuri-cap {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--fundal-panou); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--umbra-1);
}
.locuri-cap .mic { color: var(--text-slab); font-size: 12.5px; line-height: 1.45; }
.locuri-unelte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }

.locuri-lista { display: flex; flex-direction: column; gap: 8px; }

.loc {
  background: var(--fundal-panou); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--umbra-1); overflow: hidden;
}
.loc-cap {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 14px; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--text); text-align: left;
}
.loc-cap:hover { background: var(--fundal-adanc); }
.loc-nume { font-weight: 560; font-size: 14px; }
.loc-semne { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.loc .semn {
  font-size: 11.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--fundal-adanc); color: var(--text-slab); white-space: nowrap;
}
.loc .semn.tare { background: var(--accent-slab); color: var(--accent); }
.loc .semn.atentie { background: var(--atentie-slab); color: var(--atentie); font-weight: 560; }

/* ⚠️ Ascuns cu `display`, nu cu inaltime: la 1.666 de chei, o animatie pe
      inaltime ar tine browserul ocupat degeaba. */
.loc-corp { display: none; border-top: 1px solid var(--linie-slaba); }
.loc.deschis .loc-corp { display: block; }

.tabel-locuri { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel-locuri th {
  text-align: left; font-weight: 500; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-sters);
  padding: 8px 14px; border-bottom: 1px solid var(--linie-slaba);
}
.tabel-locuri td { padding: 7px 14px; border-bottom: 1px solid var(--linie-slaba); }
.tabel-locuri tr:last-child td { border-bottom: 0; }
.tabel-locuri tr:hover td { background: var(--fundal-adanc); }
.tabel-locuri .nr { text-align: right; font-variant-numeric: tabular-nums; }
.tabel-locuri .mic { color: var(--text-slab); font-size: 12px; }
.tabel-locuri .cod code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 560; letter-spacing: .02em;
  background: var(--fundal-adanc); padding: 2px 6px; border-radius: var(--r-mic);
  white-space: nowrap;
}

/* Lista de modificări din cardul „Rezervarea s-a modificat".
   ⚠️ Fără `list-style: none` ies buline lângă pastile, iar rândul arată rupt. */
.lista-modificari { list-style: none; margin: 0 0 10px; padding: 0; }
.lista-modificari li { margin: 0 0 6px; line-height: 1.5; }
.lista-modificari .pastila { margin-right: 6px; }
/* Schimbările unei modificări, fiecare pe rândul ei.
   ⚠️ Lipite cu „;", trei schimbări de oprire ies un paragraf pe care nimeni
   nu-l citește până la capăt. */
.lista-schimbari { list-style: disc; margin: 4px 0 0 22px; padding: 0; }
.lista-schimbari li { margin: 0 0 2px; }

/* ---------- fila „Joburi create" ---------------------------------------- */
/* O singura coloana: randurile sunt putine si se citesc intregi, deci a doua
   coloana ar fi doar gol. */
.lucru.trimise { grid-template-columns: 1fr; }
.lista-trimise { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* ⚠️ `flex: none` nu e de forma. Intr-o coloana flex cu inaltime marginita,
   cardurile se STRANG (`flex-shrink` e 1 din oficiu): masurat, un card de 89px
   tinea un continut de 108px, iar `overflow: hidden` taia restul semnalului —
   „…deci Truckcom nu le-a potrivit" se pierdea pe jumatate de rand. */
.lista-trimise > .card { flex: none; }
.lucru.trimise .mono { font-family: var(--mono); font-size: 12px; }
.lucru.trimise .mic { font-size: 12.5px; color: var(--text-slab); margin: 6px 0; }
.lucru.trimise .titlu-mic { margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-slab); }
.lucru.trimise .gol { padding: 40px; text-align: center; color: var(--text-sters); }

/* ⚠️ Dunga din stanga e idiomul care exista deja in aplicatie: `.rand` o tine
   transparenta si o coloreaza doar cand inseamna ceva. Aceeasi grosime si
   aceleasi culori aici — se coloreaza DOAR cand jobul cere atentie.
   Colorata pe toate, inclusiv verde pe cele bune, ar fi fost culoare fara
   informatie: „nimic de semnalat" n-are nevoie de dunga, iar trei culori pe
   toata lista fac cardul care chiar cere ceva mai greu de gasit, nu mai usor. */
.card.trimitere { padding: 0; overflow: hidden; border-left: 3px solid transparent; }
.card.trimitere.rau { border-left-color: var(--rau); }
.card.trimitere.atentie { border-left-color: var(--atentie); }

.trimitere-cap {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 11px 13px; font: inherit; color: inherit;
}
.trimitere-cap:hover { background: var(--fundal); }
.trimitere-semne { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
/* ⚠️ `.pastila` e facuta pentru etichete scurte si are `white-space: nowrap`.
   Semnalele de aici sunt propozitii intregi, iar masurat la 640px ieseau 32-36px
   in afara cardului si se taiau la `overflow: hidden`. Aici au voie sa curga pe
   mai multe randuri. */
.trimitere-semne .pastila { white-space: normal; text-align: left; line-height: 1.45; }
.card.trimitere.deschis .trimitere-cap { border-bottom: 1px solid var(--linie); }

.tabel-trimis { width: 100%; table-layout: fixed; }
.tabel-trimis td, .tabel-trimis th { vertical-align: top; word-break: break-word; }
.tabel-trimis th { font-size: 11.5px; color: var(--text-sters); font-weight: 600; text-align: left; }
.tabel-trimis tr.schimbat td.vechi { color: var(--rau); text-decoration: line-through; }
.tabel-trimis tr.schimbat td.nou { color: var(--bun); }

.pastila.info { background: var(--fundal); color: var(--text-slab); }


/* ---------- banda de anunțuri ----------
   ⚠️ Stă deasupra zonei de lucru, nu în ea: vederile își rescriu conținutul, iar
   un anunț desenat înăuntru ar fi dispărut la fiecare reîmprospătare. */
.anunturi { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 0; }
.anunturi[hidden] { display: none; }

.anunt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px;
  /* ⚠️ Severitatea o poarta FUNDALUL si culoarea muchiei, nu o bara groasa pe
     o latura. Prima varianta avea si bara: fundal tentat PLUS spina colorata e
     forma clasica de „callout", si spunea acelasi lucru de doua ori.
     ⚠️ `.card.trimitere` din aplicatie foloseste spina — dar pe fundal SIMPLU,
     unde ea e singurul semn. Aici fundalul o face deja. */
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--fundal-panou);
}
.anunt.atentie { border-color: var(--atentie); background: var(--atentie-slab); }
.anunt.rau     { border-color: var(--rau);     background: var(--rau-slab); }
.anunt.sters   { border-color: var(--linie);   background: var(--fundal-adanc); }

.anunt-corp { flex: 1; min-width: 0; }
.anunt-mesaj { margin: 0; font-weight: 600; line-height: 1.45; color: var(--text); }
.anunt-mic   { margin: 4px 0 0; font-size: 12px; color: var(--text-slab); }
.anunt .buton { flex: none; white-space: nowrap; }

/* ⚠️ Amănuntele sunt rânduri etichetă–valoare, nu o propoziție lungă: ziua
   cerută și ziua în care a venit emailul trebuie citite una lângă alta, fiindcă
   diferența dintre ele E motivul opririi. */
.anunt-amanunte {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 6px 0 0; font-size: 12px;
}
.anunt-amanunte div { display: flex; gap: 6px; }
.anunt-amanunte dt { margin: 0; color: var(--text-slab); }
.anunt-amanunte dd { margin: 0; color: var(--text); font-weight: 600; }


/* Butoanele unui anunț, unul lângă altul. „Nu mai semnala" nu apare decât la
   comenzile oprite, deci de multe ori rămâne doar X-ul. */
.anunt-butoane { display: flex; align-items: center; gap: 6px; flex: none; }
.buton.doar-semn { padding: 4px 6px; line-height: 0; }
.buton.doar-semn svg { width: 14px; height: 14px; }

/* ---------- fila Rapoarte ---------- */
/* ⚠️ `.lucru` are `overflow: hidden` pentru toate filele: fila asta trebuie sa
   deruleze ea insasi, altfel nu se ajunge la tabele. Iar copiii au `flex: none`,
   fiindca intr-o coloana flex cu inaltime fixa cardurile s-ar strange in loc sa
   depaseasca, si n-ar mai fi nimic de derulat. Raportat de Ionut, 26 sep 2026. */
.lucru.rapoarte, .lucru.flota, .lucru.conformitate, .lucru.analize { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 40px; overflow-y: auto; overflow-x: hidden; }
.lucru.rapoarte > *, .lucru.flota > *, .lucru.conformitate > *, .lucru.analize > * { flex: none; min-width: 0; }
.rap-unelte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rap-data { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-slab); }
.rap-data input { font: inherit; color: var(--text); background: var(--fundal-panou); border: 1px solid var(--linie); border-radius: var(--r-mic); padding: 4px 8px; }
.rap-sursa { font-size: 12px; color: var(--text-sters); }
.rap-nota { margin: 0; font-size: 12.5px; color: var(--text-slab); max-width: 900px; }
.rap-nota-tabel { margin: 0; padding: 8px 15px; font-size: 12px; color: var(--text-slab); border-bottom: 1px solid var(--linie-slaba); }
.rap-cifre { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.rap-cifra { background: var(--fundal-panou); border: 1px solid var(--linie); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--umbra-1); border-left: 3px solid transparent; }
.rap-cifra.atentie { border-left-color: var(--atentie); }
.rap-cifra.rau { border-left-color: var(--rau); }
.rap-cifra-v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rap-cifra-e { font-size: 12.5px; color: var(--text-slab); margin-top: 2px; }
.rap-cifra-s { font-size: 11.5px; color: var(--text-sters); margin-top: 4px; }
.rap-sectiuni { flex-wrap: wrap; align-self: flex-start; }
.rap-card { padding: 0; overflow: hidden; }
.rap-antet { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rap-cate { color: var(--text-sters); font-weight: 400; font-size: 12px; margin-left: 6px; }
.rap-derulare { overflow-x: auto; }
.rap-tabel th { white-space: nowrap; }
.rap-tabel td { vertical-align: top; }
.rap-tabel th.nr, .rap-tabel td.nr { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rap-sort { all: unset; cursor: pointer; }
.rap-sort:hover { color: var(--text); }
.rap-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.rap-tabel td:first-child { white-space: nowrap; }

/* =========================================================================
   STRATUL PREMIUM — 26 septembrie 2026
   Se aplica PESTE regulile de mai sus, pe aceleasi clase. Nicio clasa sau id
   folosit de JavaScript nu e redenumit; reparatiile masurate de mai sus
   (latimi de filtre, derulari, min-width: 0) raman neatinse.
   ========================================================================= */

html, body {
  font-size: 14px; line-height: 1.5; letter-spacing: -.003em;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-mic); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-sters) 45%, transparent) transparent; }
code, kbd, .mono, pre { font-family: var(--mono); }

/* ---- bara laterala: acelasi ton ca restul paginii, nu o insula neagra ---- */
.bara { background: var(--bara); border-right: 1px solid var(--bara-linie); }
.marca { padding: 20px 18px 18px; gap: 11px; }
.marca-semn {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--text); color: var(--fundal-panou);
  box-shadow: var(--umbra-1);
}
.marca-semn svg { width: 18px; height: 18px; }
.marca-nume { color: var(--bara-activ); font-weight: 640; font-size: 15px; letter-spacing: -.02em; }
.marca-sub { color: var(--text-sters); font-size: 11.5px; }

.nav { padding: 4px 10px; gap: 2px; }
.nav-titlu {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 550;
  color: var(--text-sters); padding: 14px 10px 6px;
}
.nav-item {
  position: relative; padding: 8px 10px; border-radius: 9px;
  color: var(--bara-text); font-weight: 500;
  transition: background var(--tranzitie), color var(--tranzitie), transform var(--tranzitie);
}
.nav-item:hover { background: var(--bara-hover); color: var(--bara-activ); }
.nav-item:active { transform: scale(.985); }
.nav-item[aria-current="page"] { background: var(--bara-selectat); color: var(--bara-activ); font-weight: 600; }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item svg { width: 17px; height: 17px; opacity: .8; }
.nav-numar {
  background: var(--bara-hover); color: var(--text-slab); font-weight: 560;
  padding: 1px 7px; border-radius: 6px; font-size: 11.5px;
}
.nav-item[aria-current="page"] .nav-numar { background: var(--accent); color: var(--fundal-panou); }
/* Zero nu spune nimic: dispare, iar numarul revine singur cand exista ceva. */
.nav-numar[data-zero] { display: none; }

.bara-jos { border-top: 1px solid var(--bara-linie); padding: 12px 12px 14px; }
.stare-linie { color: var(--text-sters); font-size: 12px; }
.bec { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bun) 18%, transparent); }
.bec.gri { background: var(--text-sters); box-shadow: none; }

/* ---- antetul ---- */
.antet {
  height: 60px; padding: 0 24px; gap: 18px;
  background: color-mix(in srgb, var(--fundal-panou) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.antet h1 { font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.cauta { max-width: 420px; }
.cauta input {
  padding: 8px 40px 8px 34px; border-radius: 10px;
  background: var(--fundal); border-color: var(--linie);
}
.cauta input::placeholder { color: var(--text-sters); }
.cauta input:hover { border-color: var(--n-300); }
.cauta input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.cauta svg { left: 11px; }
.cauta kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 11px; padding: 0 6px; line-height: 18px;
  transition: opacity var(--tranzitie);
}
.cauta input:focus + kbd, .cauta input:not(:placeholder-shown) + kbd { opacity: 0; }

/* ---- butoane ---- */
.buton {
  border-radius: 9px; padding: 7px 13px; font-weight: 550; letter-spacing: -.005em;
  background: var(--fundal-ridicat); border-color: var(--linie); box-shadow: var(--umbra-1);
  transition: background var(--tranzitie), border-color var(--tranzitie), transform var(--tranzitie), box-shadow var(--tranzitie);
}
.buton:hover { background: var(--fundal-adanc); border-color: var(--n-300); }
.buton:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.buton.mic { padding: 5px 10px; border-radius: 8px; font-size: 12.5px; }
/* Textul de pe butoanele pline: alb pe tema deschisa, aproape negru pe cea
   intunecata, unde accentul si verdele sunt deschise la culoare. */
.buton.principal-actiune, .buton.bun { border-color: transparent; color: var(--pe-plin, #fff); }
.buton.principal-actiune { background: var(--accent); box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.buton.bun { background: var(--bun); box-shadow: 0 1px 2px color-mix(in srgb, var(--bun) 40%, transparent); }
.buton.principal-actiune:hover, .buton.bun:hover { filter: brightness(1.06); background: var(--accent); }
.buton.bun:hover { background: var(--bun); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { --pe-plin: #0b0c10; } }
:root[data-tema="dark"] { --pe-plin: #0b0c10; }

/* ---- control segmentat ---- */
.segmente { background: var(--fundal-adanc); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--linie-slaba); }
.segmente button { border-radius: 7px; padding: 5px 11px; font-weight: 520; }
.segmente button[aria-pressed="true"] { background: var(--fundal-ridicat); box-shadow: var(--umbra-1); font-weight: 600; }
.segmente button:active { transform: scale(.98); }

/* ---- pastile: eticheta scurta, colt strans, nu capsula ---- */
.pastila { border-radius: 6px; padding: 2px 7px; font-weight: 580; font-size: 11.5px; letter-spacing: 0; }

/* ---- carduri ---- */
.card { border-radius: var(--r); border-color: var(--linie); box-shadow: var(--umbra-1); background: var(--fundal-panou); }
.card-antet {
  text-transform: none; letter-spacing: -.005em; font-size: 13px; font-weight: 620;
  color: var(--text); padding: 12px 16px;
  background: color-mix(in srgb, var(--fundal-adanc) 35%, transparent);
}
.card-antet svg { width: 15px; height: 15px; color: var(--text-sters); }
.card-corp { padding: 15px 16px; }
.camp dt { color: var(--text-sters); }
@container (max-width: 430px) { .camp dt { text-transform: none; letter-spacing: 0; font-size: 12px; } }

/* ---- lista de joburi ---- */
.coloana-lista { background: var(--fundal-panou); border-right-color: var(--linie); }
.rand { padding: 12px 16px; transition: background var(--tranzitie); }
.rand:hover { background: color-mix(in srgb, var(--fundal-adanc) 55%, transparent); }
.rand[aria-selected="true"] { background: var(--accent-slab); border-left-color: var(--accent); }
.rand-client { font-weight: 600; letter-spacing: -.015em; }
.rand-suma { font-weight: 640; letter-spacing: -.01em; }
.zi-cap {
  background: color-mix(in srgb, var(--fundal-panou) 88%, transparent); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; color: var(--text-slab); padding: 8px 16px;
}
.zi-cap.azi { background: color-mix(in srgb, var(--accent-slab) 92%, transparent); color: var(--accent); }
.job-semn { border-radius: 7px; width: 22px; height: 22px; }
.sincronizare { font-size: 11.5px; padding: 7px 14px; }

/* ---- panoul de detaliu ---- */
.detaliu { background: var(--fundal); }
.detaliu-antet {
  background: color-mix(in srgb, var(--fundal-panou) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); padding: 18px 24px;
}
.detaliu-titlu h2 { font-size: 20px; font-weight: 660; letter-spacing: -.03em; }
.detaliu-corp { padding: 22px 24px 64px; gap: 18px; }
.obs { font-size: 13.5px; line-height: 1.55; padding: 10px 0; }
.obs-nivel { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 620; border-radius: 5px; }
.email-text { font-size: 12.5px; line-height: 1.7; }
.tc-tabel th, .tc-grup-nume { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* ---- intrari si selectoare ---- */
.ed-intrare, .rap-data input {
  border-radius: 9px; background: var(--fundal-panou); border-color: var(--linie);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie);
}
.ed-intrare:hover, .rap-data input:hover { border-color: var(--n-300); }
.ed-intrare:focus, .rap-data input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* ---- tabele: antete in propozitie, nu cu majuscule ---- */
.tabel th, .tabel-locuri th {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 560; color: var(--text-sters);
  background: var(--fundal-panou);
}
.tabel-locuri td { padding: 9px 14px; }
.tabel-locuri tbody tr { transition: background var(--tranzitie); }

/* ---- banda de anunturi: compacta, nu mai mananca un sfert de ecran ---- */
.anunturi { padding: 12px 24px 0; gap: 6px; }
.anunt { padding: 8px 10px 8px 14px; border-radius: 11px; align-items: center; box-shadow: var(--umbra-1); }
.anunt-mesaj { font-weight: 560; font-size: 13px; }

/* ---- Joburi create: carduri mai dense ---- */
.lista-trimise { padding: 16px 24px 40px; gap: 8px; }
.trimitere-cap { padding: 13px 16px; transition: background var(--tranzitie); }
.trimitere-cap:hover { background: color-mix(in srgb, var(--fundal-adanc) 50%, transparent); }

/* ---- Coduri ---- */
.lucru.locuri { padding: 20px 24px; }

/* ---- incarcarea: schelet in forma continutului, nu doar un text ---- */
.incarcare {
  padding: 22px 24px; text-align: left; font-size: 12.5px;
  display: grid; gap: 10px; color: var(--text-sters);
}
.incarcare::before, .incarcare::after {
  content: ""; display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--fundal-adanc) 0%, color-mix(in srgb, var(--fundal-adanc) 40%, var(--fundal-panou)) 50%, var(--fundal-adanc) 100%);
  background-size: 200% 100%; animation: schelet 1.3s ease-in-out infinite;
}
.incarcare::before { width: 62%; }
.incarcare::after { width: 38%; }
@keyframes schelet { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- goluri ---- */
.gol-mare svg { width: 44px; height: 44px; opacity: .35; }
.gol-mare h3 { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -.015em; }

/* ---- mesaj trecator ---- */
.toast { background: var(--text); color: var(--fundal-panou); border-radius: 11px; padding: 11px 16px; font-weight: 520; box-shadow: var(--umbra-3); }
.toast.rau { background: var(--rau); color: #fff; }

kbd { border-radius: 5px; background: var(--fundal-adanc); border-color: var(--linie); color: var(--text-sters); }

.fereastra { border-radius: var(--r-mare); border: 1px solid var(--linie); }
.valul { background: rgb(14 16 20 / .5); backdrop-filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Rapoarte ca tablou de bord (26 sep 2026) ----------
   Culoarea graficelor e --grafic, nu --accent: validata cu skill-ul de
   vizualizare, #6f8de6 trece pe fundalul intunecat, accentul deschis nu. */
:root { --grafic: #2f5bd3; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { --grafic: #6f8de6; } }
:root[data-tema="dark"] { --grafic: #6f8de6; }

.lucru.rapoarte, .lucru.flota, .lucru.conformitate, .lucru.analize { padding: 20px 24px 48px; gap: 16px; }

/* cifrele de sus: prima, venitul, e cifra de capetenie a paginii */
.rap-cifre { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.rap-cifra {
  border-left: 0; border-radius: var(--r); padding: 14px 16px 15px; position: relative;
  box-shadow: var(--umbra-1); border-color: var(--linie);
}
.rap-cifra.atentie::after, .rap-cifra.rau::after {
  content: ""; position: absolute; top: 16px; right: 14px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--atentie); box-shadow: 0 0 0 3px color-mix(in srgb, var(--atentie) 20%, transparent);
}
.rap-cifra.rau::after { background: var(--rau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rau) 20%, transparent); }
.rap-cifra-v { font-size: 22px; font-weight: 640; letter-spacing: -.03em; line-height: 1.15; }
.rap-cifra-e { font-size: 12.5px; margin-top: 4px; color: var(--text-slab); font-weight: 500; }
.rap-cifra-s { font-size: 11.5px; line-height: 1.4; }
.rap-cifra.erou { grid-column: span 2; background: var(--fundal-panou); }
.rap-cifra.erou .rap-cifra-v { font-size: 34px; letter-spacing: -.04em; }
@media (max-width: 560px) { .rap-cifra.erou { grid-column: span 1; } }

/* graficele */
.rap-grafice { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1320px) { .rap-grafice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rap-grafic-mare { grid-column: 1 / -1; } }
@media (max-width: 760px) { .rap-grafice { grid-template-columns: minmax(0, 1fr); } }
.rap-grafice .card { padding: 16px 18px 14px; }
.g-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.g-cap h3 { margin: 0; font-size: 14px; font-weight: 630; letter-spacing: -.015em; }
.g-cap p { margin: 2px 0 0; font-size: 12px; color: var(--text-sters); }
.g-cap-cifra { font-size: 18px; font-weight: 640; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-gazda { width: 100%; min-height: 60px; }
.g-gazda svg { display: block; overflow: visible; }
.g-grila { stroke: var(--linie-slaba); stroke-width: 1; }
.g-axa { fill: var(--text-sters); font-size: 11px; font-variant-numeric: tabular-nums; }
.g-varf { fill: var(--text-slab); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-bara { fill: var(--grafic); transition: opacity var(--tranzitie); }
.g-gazda svg:hover .g-bara { opacity: .55; }
.g-gazda svg:hover .g-bara.aprinsa { opacity: 1; }
.g-lovire { fill: transparent; cursor: crosshair; }

.g-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* ⚠️ Coloane fixe: cu `auto` pe valoare, pista incepea altundeva in fiecare
   card si barele nu se mai puteau compara din ochi. */
.g-top li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) 5.6em; align-items: center; gap: 12px;
  padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13px;
}
.g-top-nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
.g-top-nume small { display: block; font-size: 11px; color: var(--text-sters); font-weight: 400; }
.g-top-pista { height: 10px; border-radius: 0 4px 4px 0; background: var(--fundal-adanc); overflow: hidden; }
.g-top-bara { display: block; height: 100%; background: var(--grafic); border-radius: 0 4px 4px 0; }
.g-top-val { font-variant-numeric: tabular-nums; font-weight: 580; font-size: 12.5px; text-align: right; }

/* ce se poate deschide se vede ca atare */
.rap-deschide { cursor: pointer; transition: background var(--tranzitie); }
.rap-deschide:hover, .rap-deschide:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); outline: none; }
tr.rap-deschide:hover td, tr.rap-deschide:focus-visible td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
tr.rap-deschide td:first-child { color: var(--text); font-weight: 560; }

.g-balon {
  position: fixed; z-index: 80; pointer-events: none;
  background: var(--fundal-ridicat); color: var(--text); border: 1px solid var(--linie);
  border-radius: 10px; padding: 8px 11px; box-shadow: var(--umbra-2);
  display: grid; gap: 1px; font-size: 12px; min-width: 110px;
}
.g-balon b { font-size: 14px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g-balon span { color: var(--text-slab); }
.g-balon small { color: var(--text-sters); font-size: 11px; }
.g-balon[hidden] { display: none; }

/* fila de sectiuni: sub grafice, ca un rand de file, nu ca un buton mare */
.rap-sectiuni { margin-top: 4px; }

/* ---- fisa laterala ---- */
.fisa-val {
  position: fixed; inset: 0; z-index: 70; background: rgb(14 16 20 / 0);
  transition: background 200ms ease;
}
.fisa-val[hidden] { display: none; }
.fisa-val.deschis { background: rgb(14 16 20 / .38); }
.fisa {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
  background: var(--fundal-panou); border-left: 1px solid var(--linie); box-shadow: var(--umbra-3);
  display: flex; flex-direction: column;
  transform: translateX(24px); opacity: 0; transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease;
}
.fisa-val.deschis .fisa { transform: none; opacity: 1; }
.fisa-cap {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--linie);
}
.fisa-fel { font-size: 12px; color: var(--text-sters); }
.fisa-cap h2 { margin: 3px 0 0; font-size: 21px; font-weight: 660; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.fisa-corp { overflow-y: auto; padding: 18px 22px 40px; }
.fisa-cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fisa-cifra { background: var(--fundal); border: 1px solid var(--linie-slaba); border-radius: 10px; padding: 10px 12px; }
.fisa-cifra div { font-size: 17px; font-weight: 640; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.fisa-cifra span { font-size: 11.5px; color: var(--text-sters); }
.fisa-cifra.atentie div { color: var(--atentie); }
.fisa-titlu { margin: 22px 0 8px; font-size: 12.5px; font-weight: 620; color: var(--text-slab); }
.fisa-nota { margin: 14px 0 0; font-size: 12px; color: var(--text-sters); line-height: 1.5; }
.fisa-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie-slaba); border-radius: 10px; overflow: hidden; }
.fisa-lista li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 12px; font-size: 12.5px; border-top: 1px solid var(--linie-slaba);
}
.fisa-lista li:first-child { border-top: 0; }
.fisa-lista code { font-size: 11.5px; color: var(--text-slab); }
.fisa-lista span { color: var(--text-sters); font-variant-numeric: tabular-nums; }
.fisa-lista .fisa-lista-nume { color: var(--text-slab); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fisa-lista b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .fisa-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- telefon (sub 820px) ----------
   ⚠️ Pana pe 26 sep 2026 aplicatia n-avea deloc asezare de telefon: bara
   laterala de 236px lua jumatate din ecranul de 390px, pe toate filele. Acum
   bara devine un rand de file jos, ca in aplicatiile de telefon, iar marca si
   starea (Truckcom / emailuri) se ascund: pe ecranul mic nu cer nimic. */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .bara {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: auto;
    border-right: 0; border-top: 1px solid var(--bara-linie);
    background: color-mix(in srgb, var(--bara) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .marca, .bara-jos, .nav-titlu { display: none; }
  .nav { flex-direction: row; padding: 6px 8px; gap: 4px; }
  .nav-item {
    flex: 1 1 0; flex-direction: column; gap: 3px; padding: 7px 4px 6px;
    font-size: 11px; text-align: center; justify-content: center; position: relative;
  }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item[aria-current="page"]::before { left: 30%; right: 30%; top: -7px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .nav-numar { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; font-size: 10px; padding: 0 5px; }
  .principal { padding-bottom: calc(66px + env(safe-area-inset-bottom)); min-width: 0; }

  .antet { height: 56px; padding: 0 14px; gap: 10px; }
  .antet h1 { font-size: 16px; white-space: nowrap; }
  .cauta { max-width: none; min-width: 0; }
  .cauta kbd { display: none; }
  .cauta input { padding-right: 10px; }
  .antet-dreapta { gap: 6px; }
  .anunturi { padding: 10px 14px 0; }
  .anunt { flex-wrap: wrap; }

  /* Joburi: lista sus, fisa dedesubt, fiecare cu derularea ei */
  .lucru, .lucru.joburi { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 45%) minmax(0, 1fr); }
  .lucru.trimise { grid-template-rows: none; }
  .coloana-lista { border-right: 0; border-bottom: 1px solid var(--linie); }
  .detaliu-antet { flex-wrap: wrap; padding: 14px 16px; }
  .detaliu-actiuni { margin-left: 0; width: 100%; }
  .detaliu-corp, .lucru.joburi .detaliu-corp { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 48px; }

  .lista-trimise, .lucru.locuri { padding-left: 14px; padding-right: 14px; }
  .lucru.rapoarte, .lucru.flota, .lucru.conformitate, .lucru.analize { padding: 14px 14px 40px; }
  .rap-unelte { gap: 8px; }
  .rap-unelte .segmente { width: 100%; overflow-x: auto; }
  .rap-unelte .segmente button { white-space: nowrap; }
  .rap-data { flex: 1 1 150px; }
  .rap-data input { width: 100%; }
  .rap-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rap-cifra.erou { grid-column: 1 / -1; }
  .rap-cifra-v { font-size: 19px; }
  .rap-cifra.erou .rap-cifra-v { font-size: 30px; }
  .rap-sectiuni { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .rap-sectiuni button { white-space: nowrap; }
  .fisa { width: 100vw; border-left: 0; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); }
}

/* ---------- fila Flotă (28 sep 2026) ----------
   Cerinta clientului: nimic de cautat, nimic de derulat fara rost. Tabelul
   sta intr-o cutie cu inaltime limitata si capul lipit sus, deci cifrele de
   sus si comutatoarele raman pe ecran cat se deruleaza randurile. */
.tf-derulare, .fl-derulare { max-height: min(62vh, 640px); overflow: auto; }
.tf-derulare thead th, .fl-derulare thead th { position: sticky; top: 0; z-index: 1; background: var(--fundal-panou); box-shadow: inset 0 -1px 0 var(--linie); }
.fl-comutator { align-self: flex-start; flex-wrap: wrap; }
.fl-doua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
@media (max-width: 1100px) { .fl-doua { grid-template-columns: minmax(0, 1fr); } }
.fl-panou { padding: 16px 18px 14px; }
.fl-urmarit { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.fl-urmarit li { display: flex; align-items: baseline; gap: 10px; padding: 7px 8px; border-radius: var(--r-mic); font-size: 13px; }
.fl-urmarit li[data-flfisa] { cursor: pointer; }
.fl-urmarit li[data-flfisa]:hover, .fl-urmarit li[data-flfisa]:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); outline: none; }
.fl-bulina { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--atentie); transform: translateY(-1px); }
.fl-urmarit li.rau .fl-bulina { background: var(--rau); }
.fl-eroare { color: var(--rau); }
.fl-rosu { color: var(--rau); }
/* Un rand pe o singura linie: textele lungi (soferii unui camion) se taie cu
   „…”, altfel un singur rand ajungea cat cinci si tabelul nu mai incapea. */
.tf-derulare .rap-tabel td, .fl-derulare .rap-tabel td { white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
/* Formularul din „Costuri și profit”: aceleasi campuri ca in restul aplicatiei. */
.fl-formular { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 14px 15px; border-bottom: 1px solid var(--linie-slaba); }
.fl-formular label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-slab); }
.fl-intrare { font: inherit; font-size: 13px; color: var(--text); background: var(--fundal-panou); border: 1px solid var(--linie); border-radius: var(--r-mic); padding: 5px 8px; }
.fl-intrare:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.fl-mic { width: 8em; text-align: right; }
.fl-derulare .rap-tabel td .fl-intrare { max-width: 100%; }

/* ---------- tabelul comun (tabel.js): filtre pe fiecare coloana ----------
   Randul de filtre sta sub cap si e lipit sus odata cu el, deci filtrele se
   vad oricat s-ar derula. Totalul sta lipit jos. */
.tf-actiuni { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tf-actiuni .buton[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
/* Tot capul (titluri + filtre) e lipit sus ca UN bloc; lipite rand cu rand,
   filtrele aveau nevoie de inaltimea capului ghicita. */
.tf-derulare thead { position: sticky; top: 0; z-index: 2; }
.tf-derulare thead th { position: static; }
.tf-derulare thead th, .tf-derulare thead td { background: var(--fundal-panou); }
.tf-derulare thead tr.tf-filtre td { box-shadow: inset 0 -1px 0 var(--linie); padding: 6px 8px; overflow: visible; max-width: none; }
.tf-f input, .tf-f select { width: 100%; min-width: 72px; font: inherit; font-size: 12px; color: var(--text); background: var(--fundal-adanc); border: 1px solid var(--linie); border-radius: var(--r-mic); padding: 4px 6px; }
.tf-f input:focus, .tf-f select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent); }
.tf-f-doua { display: table-cell; }
.tf-f-doua input { width: calc(50% - 2px); min-width: 58px; }
.tf-f-doua input + input { margin-left: 4px; }
.tf-f input[type="date"] { min-width: 118px; }
.tf-derulare tfoot td { position: sticky; bottom: 0; background: var(--fundal-panou); box-shadow: inset 0 1px 0 var(--linie); font-weight: 620; }
/* Socoteala dintre „Pe scurt” si Soferi / Camioane: un rand, detaliile la click. */
.rap-impacare { font-size: 12.5px; color: var(--text-slab); max-width: 1100px; }
.rap-impacare summary { cursor: pointer; line-height: 1.5; }
.rap-impacare summary b { color: var(--text); }
.rap-impacare-corp { margin-top: 10px; max-height: 320px; overflow: auto; }
.cf-lista li[data-cfsub] { cursor: pointer; }
.cf-lista li[data-cfsub]:hover, .cf-lista li[data-cfsub]:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); outline: none; }
.cf-lista { max-height: min(56vh, 560px); }
.tf-perioada { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-perioada-mesaj { font-size: 12px; color: var(--text-sters); }
.tf-perioada-mesaj.rau { color: var(--rau); }

/* ---------- fila Analize ---------- */
.an-punct { fill: var(--grafic); fill-opacity: .82; stroke: var(--fundal-panou); stroke-width: 1.5; cursor: default; }
.an-punct:hover { fill-opacity: 1; r: 8; }
.an-mediana { stroke: var(--text-sters); stroke-dasharray: 4 4; stroke-width: 1; }
.an-cadran { font-size: 11px; font-weight: 600; fill: var(--text-sters); pointer-events: none; }
.an-cadran[data-cadran="ss"] { fill: var(--bun); }
.an-cadran[data-cadran="dj"] { fill: var(--rau); }
.an-legenda { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; font-size: 13px; line-height: 1.4; }
.an-legenda li { padding-left: 10px; border-left: 3px solid var(--linie); }
.an-legenda li[data-cadran="ss"] { border-left-color: var(--bun); }
.an-legenda li[data-cadran="dj"] { border-left-color: var(--rau); }
.an-legenda b { display: block; font-weight: 600; }
.an-legenda span { color: var(--text-sters); }
.an-sugestii { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 520px); overflow: auto; }
.an-sugestii li { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: baseline; padding: 8px; border-radius: var(--r-mic); font-size: 13px; line-height: 1.45; }
.an-sugestii li:nth-child(odd) { background: color-mix(in srgb, var(--fundal-adanc) 60%, transparent); }
.an-sugestii li b { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- fila Utilizatori (30 sep 2026) ---------- */
.nav [hidden] { display: none !important; }
.lucru.utilizatori { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 48px; overflow-y: auto; overflow-x: hidden; }
.lucru.utilizatori > * { flex: none; min-width: 0; }
.ut-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; padding: 16px 15px; align-items: end; }
.ut-formular label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-slab); }
.ut-formular .fl-intrare { width: 100%; padding: 7px 9px; }
.ut-parola { display: flex; gap: 6px; }
.ut-parola .fl-intrare { flex: 1; min-width: 0; font-family: var(--mono); }
.ut-jos { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ut-mesaj { font-size: 13px; }
.ut-mesaj.rau { color: var(--rau); }
.ut-predare { margin: 0 15px 16px; padding: 12px 14px; border-radius: var(--r-mic); background: var(--bun-slab); font-size: 13px; line-height: 1.6; }
.ut-predare code { font-family: var(--mono); font-size: 12.5px; }
.ut-tabel td, .ut-tabel th { padding: 9px 12px; }
.ut-tabel td.ut-actiuni { white-space: nowrap; text-align: right; }
.ut-tabel td.ut-actiuni .buton + .buton { margin-left: 6px; }
.ut-tabel tr.oprit td { color: var(--text-sters); }
@media (max-width: 720px) {
  .lucru.utilizatori { padding: 14px 14px 40px; }
  .ut-tabel td.ut-actiuni { white-space: normal; }
  .ut-tabel td.ut-actiuni .buton { margin: 3px 0 0 6px; }
}

/* ---------- fila Verificari (30 sep 2026): acelasi schelet ca Rapoarte ---------- */
.lucru.verificari { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 48px; overflow-y: auto; overflow-x: hidden; }
.lucru.verificari > * { flex: none; min-width: 0; }
@media (max-width: 720px) { .lucru.verificari { padding: 14px 14px 40px; } }