/* ============================================================
   STOC EXPRESS pentru Shopify — STRATUL DE ASPECT
   ------------------------------------------------------------
   Refăcut după captura de ecran dată de client pe 30 sep 2026.
   Captura primează asupra oricărei descrieri scrise.

   Semnătura vizuală, de care nu ne atingem:
     · pătrat bleumarin cu colțuri rotunjite, iconiță aurie de linie
     · carduri albe pe fond foarte deschis, chenar subțire, umbră aproape
       inexistentă
     · colțuri de 10–12px, nu de 24px („carduri de AI")
     · densitate mare de informație, aliniere exactă

   Se încarcă DUPĂ style.css și schimbă numai ce trebuie. Regulile vechi
   rămân pentru restul ecranelor, ca să nu rup ce merge.
   ============================================================ */

:root {
  /* Treptele din captură. Nu se adaugă alte culori pe lângă. */
  --d-bg: #F5F7FA;
  --d-card: #FFFFFF;
  --d-navy: #071A33;
  --d-navy-2: #0B2342;
  --d-gold: #F4B400;
  --d-line: #E2E8F0;
  --d-line-soft: #EDF1F5;
  --d-txt: #071A33;
  --d-txt-2: #64748B;
  --d-txt-3: #94A3B8;
  --d-green: #16A34A;
  --d-green-bg: #EAF8EF;
  --d-green-ink: #16803B;
  --d-amber: #F59E0B;
  --d-amber-bg: #FFF5DB;
  --d-amber-ink: #B77900;
  --d-red: #DC2626;
  --d-red-bg: #FDECEC;
  --d-gray: #94A3B8;

  --d-umbra: 0 1px 2px rgba(7, 26, 51, .03), 0 4px 12px rgba(7, 26, 51, .025);
  --d-umbra-ico: 0 3px 8px rgba(7, 26, 51, .16);
  --d-r: 12px;
}

html, body { background: var(--d-bg); }
body { color: var(--d-txt); }

/* ------------------------------------------------------------- ANTET */
.cap {
  background: var(--d-card);
  border-bottom: 1px solid var(--d-line);
  min-height: 74px;
  padding: 0 30px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.cap-nume { display: flex; align-items: center; gap: 12px; }
.cap-nume .txt { display: flex; flex-direction: column; line-height: 1.1; }
.cap-nume .txt b { font-size: 19px; font-weight: 700; color: var(--d-txt); letter-spacing: -.01em; }
.cap-nume .txt i {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--d-gold);
  margin-top: 2px;
}
.cap-dr { display: flex; align-items: center; gap: 12px; }
.limba {
  appearance: none; -webkit-appearance: none;
  background: var(--d-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 14px center;
  border: 1px solid var(--d-line); border-radius: 10px;
  height: 40px; padding: 0 36px 0 14px;
  font: 600 13.5px/1 var(--f); color: var(--d-txt); cursor: pointer;
}
.limba:hover { border-color: #CBD5E1 }
.avat {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  background: var(--d-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--f); letter-spacing: .02em;
}

/* -------------------------------------------------------- NAVIGAȚIA */
.tabs {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 16px 30px; overflow-x: auto; scrollbar-width: none;
  background: transparent; border: 0;
}
.tabs::-webkit-scrollbar { display: none }
.ctab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 16px;
  background: var(--d-card); border: 1px solid var(--d-line); border-radius: 11px;
  box-shadow: 0 1px 3px rgba(7, 26, 51, .04);
  font: 600 13.5px/1 var(--f); color: var(--d-txt);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--ms) var(--ease), background var(--ms) var(--ease);
}
.ctab:hover { border-color: #CBD5E1 }
.ctab svg { width: 18px; height: 18px; flex: none; color: #10233F; }
.ctab.on { background: var(--d-navy); border-color: var(--d-navy); color: #fff; }
.ctab.on svg { color: var(--d-gold) }
/* dunga aurie de pe muchia de jos a butonului activ */
.ctab.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--d-gold);
}
.ctab .tabb {
  margin-left: 2px; padding: 2px 7px; border-radius: 999px;
  background: var(--d-line-soft); color: var(--d-txt-2);
  font-size: 11.5px; font-weight: 700;
}
.ctab.on .tabb { background: rgba(255, 255, 255, .14); color: #fff }

/* ------------------------------------------------- BANDA DE STARE */
.engros {
  margin: 0 30px; padding: 0 20px;
  min-height: 52px; border-radius: 10px; background: var(--d-navy);
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 26px;
  color: #CBD5E1; font-size: 13px;
}
.engros > b {
  color: var(--d-gold); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
}
.engros span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.engros strong { color: #fff; font-weight: 700 }
.engros .sist {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  color: #CBD5E1; font-size: 12.5px; white-space: nowrap;
}
.engros .sist i {
  width: 8px; height: 8px; border-radius: 999px; background: var(--d-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

/* ------------------------------------------------------ CONȚINUTUL */
#ecran { padding: 14px 30px 32px; display: block; }

/* ------------------------------------------------- PĂTRATUL BLEUMARIN
   Semnătura aplicației. Același tratament la KPI și la stoc. */
.dico {
  width: 48px; height: 48px; flex: none;
  border-radius: 13px; background: var(--d-navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--d-umbra-ico);
}
.dico svg { width: 22px; height: 22px; color: var(--d-gold) }
.dico--mare { width: 56px; height: 56px; border-radius: 14px }
.dico--mare svg { width: 24px; height: 24px }

/* ------------------------------------------------------- CARDURI KPI */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 0 0 14px;
}
.kpi {
  background: var(--d-card); border: 1px solid var(--d-line);
  border-radius: var(--d-r); box-shadow: var(--d-umbra);
  padding: 20px; min-height: 120px;
  display: grid; grid-template-columns: 48px 1fr auto; gap: 0 14px;
  align-items: start;
}
.kpi__t { grid-column: 2; min-width: 0 }
.kpi .et {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--d-txt-2); margin-bottom: 8px;
}
.kpi .vl {
  font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--d-txt);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  overflow-wrap: normal; word-break: normal;
}
.kpi .vl.mic { font-size: 21px }
.kpi .jos { margin-top: 7px; font-size: 12.5px; color: var(--d-txt-2); line-height: 1.4 }
/* bare mici, decorative: stau în plan secund, nu concurează cu cifra */
.kpi__b { grid-column: 3; display: flex; align-items: flex-end; gap: 3px; height: 34px; opacity: .55 }
.kpi__b i { width: 4px; border-radius: 2px; display: block; background: currentColor }

/* ------------------------------------------------ STOCUL, PE SCURT */
.stlist {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.stline {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
  padding: 0 20px; border-left: 1px solid var(--d-line-soft);
}
.stline:first-child { border-left: 0; padding-left: 0 }
.stline b {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--d-txt-2);
}
.stline .dot { width: 9px; height: 9px; border-radius: 999px; flex: none }
.stline .vl {
  display: block; margin-top: 5px;
  font-size: 22px; font-weight: 700; color: var(--d-txt);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stline em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 12.5px; color: var(--d-txt-2); line-height: 1.4;
}
.dot--ok { background: var(--d-green) } .dot--mid { background: var(--d-amber) }
.dot--bad { background: var(--d-red) } .dot--off { background: var(--d-gray) }

/* ------------------------------------------------------- PANOURILE */
.panel {
  background: var(--d-card); border: 1px solid var(--d-line);
  border-radius: var(--d-r); box-shadow: var(--d-umbra);
  margin-bottom: 14px; overflow: hidden;
}
.panel__cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--d-line-soft);
}
.panel__cap h2 {
  margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--d-txt);
}
.panel__cap p { margin: 4px 0 0; font-size: 12.5px; color: var(--d-txt-2); text-transform: none; letter-spacing: 0 }
.card { background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-r);
        box-shadow: var(--d-umbra); margin-bottom: 14px; overflow: hidden }
.card__t {
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--d-line-soft);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--d-txt);
}

/* ------------------------------------------------ TABELUL DE COMENZI */
.dtab { width: 100%; border-collapse: collapse }
.dtab th {
  text-align: left; padding: 12px var(--s-5);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--d-txt-3); border-bottom: 1px solid var(--d-line-soft);
  white-space: nowrap;
}
.dtab td {
  padding: 15px var(--s-5); border-bottom: 1px solid var(--d-line-soft);
  font-size: 13.5px; color: var(--d-txt-2); vertical-align: middle;
}
.dtab tr:last-child td { border-bottom: 0 }
.dtab .nr { font-weight: 700; color: var(--d-txt); white-space: nowrap }
.dtab .tot { text-align: right; font-weight: 700; color: var(--d-txt);
             font-variant-numeric: tabular-nums; white-space: nowrap }
.dtab .sag { width: 40px; text-align: right; color: var(--d-txt-3) }
.dtab .sag svg { width: 16px; height: 16px }

/* pastile de stare */
.pil {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.pil i { width: 7px; height: 7px; border-radius: 999px; flex: none }
.pil--asteapta { background: var(--d-amber-bg); color: var(--d-amber-ink) }
.pil--asteapta i { background: var(--d-amber) }
.pil--bine { background: var(--d-green-bg); color: var(--d-green-ink) }
.pil--bine i { background: var(--d-green) }
.pil--rau { background: var(--d-red-bg); color: var(--d-red) }
.pil--rau i { background: var(--d-red) }
.pil--gri { background: #F1F4F7; color: var(--d-txt-2) }
.pil--gri i { background: var(--d-gray) }

/* ------------------------------------------------------- CE S-A ÎNTÂMPLAT */
.jurnal { padding: var(--s-2) 0 }
.jrow {
  display: grid; grid-template-columns: 10px 96px 1fr auto;
  gap: 14px; align-items: start;
  padding: 13px var(--s-5); border-bottom: 1px solid var(--d-line-soft);
}
.jrow:last-child { border-bottom: 0 }
.jrow .pct { width: 10px; height: 10px; border-radius: 999px; margin-top: 5px; flex: none }
.jrow .cand { font-size: 12.5px; color: var(--d-txt-3); white-space: nowrap; font-variant-numeric: tabular-nums }
.jrow .ce { font-size: 13.5px; line-height: 1.5; color: var(--d-txt); overflow-wrap: break-word }
.jrow.bine .ce { color: var(--d-green-ink) }
.jrow.rau .ce { color: var(--d-red) }
.jrow .det {
  padding: 4px 10px; border-radius: 999px; background: var(--d-red-bg);
  color: var(--d-red); font-size: 12px; white-space: nowrap;
}
.pct--bine { background: var(--d-green) } .pct--rau { background: var(--d-red) }
.pct--info { background: var(--d-gray) }

/* --------------------------------------------------- LEGĂTURA „VEZI TOT" */
.lnk-tot {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  background: var(--d-card); border: 1px solid var(--d-line); border-radius: 9px;
  font: 600 12.5px/1 var(--f); color: var(--d-txt); cursor: pointer;
}
.lnk-tot:hover { border-color: #CBD5E1 }
.lnk-tot svg { width: 15px; height: 15px }

/* ======================================================
   COMUTATOARE, în loc de bife
   ------------------------------------------------------
   Cerut anume: ca pe iPhone. Pătrățelul bifat nu spune dacă
   ceva e PORNIT sau OPRIT, doar dacă e ales; iar aici toate
   opțiunile sunt lucruri care merg sau nu merg.

   Rămâne un `<input type=checkbox>` dedesubt: toată logica
   din aplicație citește `.checked`, tastatura îl ia în seamă,
   iar cititoarele de ecran îl anunță corect. Se schimbă numai
   ce se vede.
   ====================================================== */
.chk {
  display: grid; grid-template-columns: 1fr 46px; gap: 14px;
  align-items: start; padding: 14px 0; border-bottom: 1px solid var(--d-line-soft);
  cursor: pointer;
}
.chk:last-child { border-bottom: 0 }
.chk > input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  grid-column: 2; align-self: center; justify-self: end;
  position: relative; width: 46px; height: 28px; flex: none;
  background: #E2E8F0; border-radius: 999px; border: 0;
  cursor: pointer; transition: background var(--ms) var(--ease);
}
.chk > input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(7, 26, 51, .25);
  transition: transform var(--ms) var(--ease);
}
.chk > input[type="checkbox"]:checked { background: var(--d-green) }
.chk > input[type="checkbox"]:checked::after { transform: translateX(18px) }
.chk > input[type="checkbox"]:disabled { background: #EDF1F5; cursor: not-allowed }
.chk > input[type="checkbox"]:disabled::after { background: #F8FAFC; box-shadow: none }
.chk > input[type="checkbox"]:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 3px }
.chk > span { grid-column: 1; min-width: 0 }
.chk .t { font-size: 13.5px; font-weight: 600; color: var(--d-txt) }
.chk .d { font-size: 12.5px; color: var(--d-txt-2); line-height: 1.5 }

/* ---------------------------------------------------------- PE ECRANE MICI */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr) }
  .stlist { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5) }
  .stline:nth-child(3) { border-left: 0; padding-left: 0 }
}
@media (max-width: 760px) {
  .cap, .tabs, #ecran { padding-left: 16px; padding-right: 16px }
  .engros { margin-left: 16px; margin-right: 16px }
  .kpis { grid-template-columns: 1fr }
  .stlist { grid-template-columns: 1fr }
  .stline { border-left: 0; padding-left: 0 }
  .kpi__b { display: none }
  .engros .sist { margin-left: 0 }
  .jrow { grid-template-columns: 10px 1fr; row-gap: 4px }
  .jrow .cand { grid-column: 2 }
  .jrow .ce, .jrow .det { grid-column: 2 }
  .dtab th:nth-child(2), .dtab td:nth-child(2) { display: none }
}

/* Produs adus în aplicație dar fără pereche în magazin. NU se desenează
   palid: un rând șters cu guma arată a defecțiune, iar asta nu e o
   defecțiune — e felul în care lucrează modul „doar legături". */
.prow__fara { color: var(--d-txt-2); font-weight: 600 }

/* ============================================================
   NOTELE DE SUB LEGENDA STOCULUI — pe fundalul nostru
   ------------------------------------------------------------
   Stăteau pe alb, cu scris mic și șters: se citeau ca o notă de
   subsol pe care o sari. Dar exact alea două rânduri spun lucrul
   care încurcă lumea — că stocul NU e un număr exact.
   Pe fundal auriu se văd, fără să țipe.
   ============================================================ */
.stnota {
  margin: 0; padding: 13px var(--s-5);
  /* GALBENUL NOSTRU, la plin — #F0B429, acelasi cu al butoanelor.
     Prima varianta era un tint spalacit (#FDF8EA) care nu se vedea de pe
     alb; iar asta e tocmai randul care trebuie citit. Scrisul e inchis,
     nu alb: pe galben, albul nu se citeste. */
  background: var(--gold, #F0B429);
  border-top: 1px solid rgba(8, 13, 22, .12);
  font-size: 13px; line-height: 1.55; color: #2A2205; font-weight: 500;
}
.stnota b { color: #120E02; font-weight: 700 }
/* Nota despre VIP se desparte de cea despre trepte, fara sa schimbe culoarea:
   doua galbenuri diferite lipite ar arata a greseala. */
.stnota--vip { border-top: 1px solid rgba(8, 13, 22, .18) }

/* ============================================================
   SUBTABURILE DIN FILA COMENZI — aliniate cu restul
   ------------------------------------------------------------
   Ieșeau în stânga, lipite de marginea cardului, în timp ce tot
   ce era deasupra lor (titlul, anunțurile) respecta marginea de
   20px. Se vedea ca o piesă lipită după.
   ============================================================ */
.subtab {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--d-line-soft);
}
.subtab .ctab { height: 40px; padding: 0 14px; font-size: 13px }
.subtab .ctab.on::after { left: 10px; right: 10px }

/* ============================================================
   RÂNDUL DE COMANDĂ — scurt, se deschide la apăsare
   ------------------------------------------------------------
   Conținutul („produsul tău → echivalentul de la noi") se desena
   mereu, sub fiecare rând. La zece comenzi ecranul devenea un
   perete și nu mai vedeai stările — adică exact lucrul pe care îl
   cauți primul. Acum rândul stă strâns și se deschide când apeși.
   ============================================================ */
.cmdfold { display: block; border-bottom: 1px solid var(--d-line-soft) }
.cmdfold:last-of-type { border-bottom: 0 }
.cmdfold > .cmdfold__s {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr) auto 20px;
  padding: 13px var(--s-5);
  cursor: pointer; list-style: none;
}
.cmdfold > .cmdfold__s::-webkit-details-marker { display: none }
.cmdfold > .cmdfold__s:hover { background: #FAFBFC }
.cmdfold__v { display: flex; justify-content: flex-end; color: var(--d-txt-3) }
.cmdfold__v svg { width: 16px; height: 16px; transition: transform .18s ease }
.cmdfold[open] > .cmdfold__s .cmdfold__v svg { transform: rotate(90deg) }
.cmdfold > .cmdfold__s:focus-visible { outline: 2px solid var(--d-gold); outline-offset: -2px }

/* de ce n-a plecat: pe rândul lui, la vedere */
.cmdmotiv {
  margin: 0 var(--s-5) 12px; padding: 11px 13px;
  background: var(--d-red-bg); border-left: 3px solid var(--d-red); border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.5; color: #8B1D1D;
}
.cmdmotiv b { color: var(--d-red); font-weight: 700 }
.cmdmotiv--gol {
  background: var(--d-line-soft); border-left-color: var(--d-gray); color: var(--d-txt-2);
}

/* ---- ora la care s-a schimbat starea la depozit ---------------------
   Era în bază (`se_status_la`) și se arunca. Tocmai ea e ce întreabă
   omul: „la ce oră a fost ridicată?". */
.cand-dep {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--d-txt-3);
  font-variant-numeric: tabular-nums;
}

/* ---- datele firmei, pe fila Cont ---------------------------------- */
.cfirma {
  margin-top: var(--s-4); border: 1px solid var(--d-line);
  border-radius: 10px; overflow: hidden; background: #FCFDFE;
}
.cfirma__t {
  padding: 11px var(--s-4); border-bottom: 1px solid var(--d-line-soft);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--d-txt-2); background: var(--d-card);
}
.cfirma__r {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px;
  padding: 11px var(--s-4); border-bottom: 1px solid var(--d-line-soft);
  font-size: 13.5px;
}
.cfirma__r:last-child { border-bottom: 0 }
.cfirma__r span { color: var(--d-txt-2) }
.cfirma__r b { color: var(--d-txt); font-weight: 600; overflow-wrap: break-word }
@media (max-width: 560px) {
  .cfirma__r { grid-template-columns: 1fr; gap: 2px }
}