/* 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. */

:root {
  color-scheme: light dark;

  /* --- neutre: o singura scara, cu nuanta rece --- */
  --n-0:  #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f4f6f9;
  --n-100:#e9edf3;
  --n-200:#d6dde8;
  --n-300:#b4c0d1;
  --n-400:#8593a8;
  --n-500:#61708a;
  --n-600:#465268;
  --n-700:#333d4f;
  --n-800:#212936;
  --n-900:#151b25;
  --n-950:#0c1018;

  /* --- semnale: fiecare inseamna un lucru, nu se folosesc decorativ --- */
  --accent:      #2563eb;   /* actiuni */
  --accent-slab: #dbeafe;
  --atentie:     #b45309;   /* are nevoie de om */
  --atentie-slab:#fef3c7;
  --bun:         #15803d;   /* confirmat */
  --bun-slab:    #dcfce7;
  --rau:         #b91c1c;   /* respins, blocant */
  --rau-slab:    #fee2e2;

  /* --- roluri --- */
  --fundal:        var(--n-50);
  --fundal-panou:  var(--n-0);
  --fundal-adanc:  var(--n-100);
  --bara:          var(--n-900);
  --bara-text:     var(--n-300);
  --bara-activ:    var(--n-0);
  --text:          var(--n-900);
  --text-slab:     var(--n-500);
  --text-sters:    var(--n-400);
  --linie:         var(--n-200);
  --linie-slaba:   var(--n-100);

  --umbra-1: 0 1px 2px rgb(12 16 24 / .06), 0 1px 1px rgb(12 16 24 / .04);
  --umbra-2: 0 4px 12px rgb(12 16 24 / .08), 0 1px 3px rgb(12 16 24 / .06);
  --umbra-3: 0 12px 32px rgb(12 16 24 / .12), 0 2px 8px rgb(12 16 24 / .08);

  --r-mic: 6px;
  --r: 10px;
  --r-mare: 14px;

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

  --bara-lat: 232px;
  --tranzitie: 140ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --fundal:       var(--n-950);
    --fundal-panou: var(--n-900);
    --fundal-adanc: #0a0e15;
    --bara:         #080b11;
    --bara-text:    var(--n-500);
    --bara-activ:   var(--n-0);
    --text:         var(--n-100);
    --text-slab:    var(--n-400);
    --text-sters:   var(--n-600);
    --linie:        #232c3a;
    --linie-slaba:  #1a212c;

    --accent:      #60a5fa;
    --accent-slab: #17253d;
    --atentie:     #fbbf24;
    --atentie-slab:#332409;
    --bun:         #4ade80;
    --bun-slab:    #0d2818;
    --rau:         #f87171;
    --rau-slab:    #331413;

    --umbra-1: 0 1px 2px rgb(0 0 0 / .4);
    --umbra-2: 0 4px 12px rgb(0 0 0 / .45);
    --umbra-3: 0 12px 32px rgb(0 0 0 / .55);
  }
}

:root[data-tema="dark"] {
  --fundal: var(--n-950); --fundal-panou: var(--n-900); --fundal-adanc: #0a0e15;
  --bara: #080b11; --bara-text: var(--n-500); --bara-activ: var(--n-0);
  --text: var(--n-100); --text-slab: var(--n-400); --text-sters: var(--n-600);
  --linie: #232c3a; --linie-slaba: #1a212c;
  --accent: #60a5fa; --accent-slab: #17253d;
  --atentie: #fbbf24; --atentie-slab: #332409;
  --bun: #4ade80; --bun-slab: #0d2818;
  --rau: #f87171; --rau-slab: #331413;
  --umbra-1: 0 1px 2px rgb(0 0 0 / .4);
  --umbra-2: 0 4px 12px rgb(0 0 0 / .45);
  --umbra-3: 0 12px 32px rgb(0 0 0 / .55);
}

* { 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); }