/* ═══════════════════════════════════════════════════════════════════════════
   Platformă comenzi LUCKYMARSIC S.R.L. — foaia de stil completă.

   Fundal DESCHIS (gri-albastrui), carduri albe, o singură zonă închisă:
   bara laterală navy. Accent portocaliu #f47a1f.

   Zero fonturi externe, zero CDN, zero @import, zero librărie de iconițe:
   toate iconițele sunt EMOJI scrise în text. Un singur stack de font de sistem.

   Ordinea fișierului:
     0  variabile + reset          11  celula de produse
     1  ecran de autentificare     12  modalul de detaliu
     2  layout + bară laterală     13  butoane
     3  bară mobilă + sertar       14  panou control (stare sistem)
     4  antet pagină + meniu ⋯     15  pagina Stocuri
     5  chips de filtrare          16  bara de impersonare
     6  bara de filtre             17  utilitare
     7  linia de sumar             18  responsiv (5 blocuri @media)
     8  tabelul de comenzi
     9  badge-uri de status
    10  AWB / factură / curier
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. variabile + reset ──────────────────────────────────────────────── */
:root{
  --bg:#eef1f5; --card:#fff; --line:#e3e6ea; --txt:#1c2430; --muted:#6b7585;
  --brand:#f47a1f; --brand-d:#d9650c;
  --ok:#27ae60; --warn:#e0a106; --bad:#e0402b; --proc:#3a7bd5;
  --shadow:0 1px 3px rgba(20,30,45,.07),0 2px 10px rgba(20,30,45,.05);
  --side:#2f3b52; --side-2:#283143; --side-txt:#c7d0df; --side-muted:#7f8aa3;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font:14px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt);
  -webkit-text-size-adjust:100%; overflow-x:hidden;
}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}
a{color:inherit}

/* Atributul `hidden` trebuie să învingă ORICE `display` de mai jos.
   Fără asta, `.login-wrap{display:flex}` ține ecranul de login vizibil
   peste aplicație după autentificare (capcană deja plătită). */
[hidden]{display:none !important}

/* ── 1. ecran de autentificare ─────────────────────────────────────────── */
.login-wrap{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:20px; overflow-y:auto;
}
.login-card{
  width:100%; max-width:360px;
  background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  padding:28px 24px;
}
.logo{font-size:22px;font-weight:800;margin:0 0 2px;line-height:1.25}
.logo span{color:var(--brand)}
.login-card .sub{margin:0 0 22px;font-size:13px;color:var(--muted)}

.field{display:block;margin-bottom:14px;position:relative}
.field>label,.field .lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  display:block; width:100%;
  padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  background:#fafbfc; color:var(--txt); font-size:14px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); background:#fff;
}
.field input[type=number]{border-radius:8px}
.field.pass input{padding-right:44px}
.field .eye{
  position:absolute; right:6px; bottom:5px;
  border:0; background:transparent; font-size:16px; padding:6px 8px; opacity:.65;
}
.field .eye:hover{opacity:1}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;align-items:end}
.field.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px 14px;align-items:end}
.field.four{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end}

/* Varianta cu <label class="lf"> care înfășoară input-ul (marcajul din index.html). */
.lf{display:block;margin-bottom:14px;position:relative;font-size:13px;color:var(--muted)}
.lf input{
  display:block; width:100%; margin-top:6px;
  padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  background:#fafbfc; color:var(--txt); font-size:14px;
}
.lf input:focus{outline:none;border-color:var(--brand);background:#fff}
.lf.pwwrap input{padding-right:44px}
.lf .eye{
  position:absolute; right:6px; bottom:5px;
  border:0; background:transparent; font-size:16px; padding:6px 8px; opacity:.65;
}
.lf .eye:hover{opacity:1}
.login-card .btn-primary{margin-top:4px}

.remember{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.35;margin-bottom:14px}
.hint{font-size:13px;color:var(--muted);margin-bottom:12px}
.err,.login-card .err,.lgerr{
  color:var(--bad); font-size:13px; text-align:center; min-height:18px; margin:12px 0 0;
}

/* ── 2. layout + bară laterală ─────────────────────────────────────────── */
.layout{display:flex;min-height:100vh;align-items:stretch}

.sidebar{
  width:230px; flex:0 0 230px;
  position:sticky; top:0; height:100vh; z-index:70;
  display:flex; flex-direction:column;
  background:var(--side); color:var(--side-txt);
}
.sidebar .brand{
  font-size:18px; font-weight:800; color:#fff;
  padding:18px 20px; border-bottom:1px solid var(--side-2);
}
.sidebar .brand span{color:var(--brand)}
.sidebar .nav{flex:1;overflow-y:auto;padding:4px 10px 12px}
.nav-group{
  font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--side-muted); margin:14px 12px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; text-decoration:none;
  padding:10px 12px; margin-bottom:2px; border:0; border-radius:9px;
  background:transparent; color:var(--side-txt); font-size:14px;
}
.nav-item .ic{flex:0 0 20px;width:20px;text-align:center}
.nav-item:hover{background:var(--side-2)}
.nav-item.active{background:var(--brand);color:#fff;font-weight:600}
.nav-item.soon,.soon{opacity:.45;cursor:default}
.nav-item.soon:hover,.soon:hover{background:transparent}

.navbadge{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--bad); color:#fff;
  font-size:11px; font-weight:700; line-height:1;
}
.navbadge.warn{background:#f0a020;color:#1c2430}

.side-foot,.sidebar-foot{padding:12px;border-top:1px solid var(--side-2)}
.who{font-size:12px;color:var(--side-muted);margin-bottom:8px}
.logout{
  width:100%; padding:9px; font-size:13px;
  border:1px solid var(--side-2); border-radius:8px;
  background:transparent; color:var(--side-txt);
}
.logout:hover{background:var(--side-2)}

.main{flex:1;min-width:0;padding:22px 26px}

/* ── 3. bară mobilă + sertar ───────────────────────────────────────────── */
.mtopbar{display:none}
.nav-overlay{display:none}

.mtb-brand{font-size:16px;font-weight:800}
.mtb-brand span{color:var(--brand)}
.hamb{
  width:42px; height:42px; border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamb i,.hamb span{
  display:block; width:23px; height:2px; border-radius:2px; background:#fff;
  transition:transform .25s ease,opacity .2s ease;
}
body.nav-open .hamb i:nth-child(1),body.nav-open .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .hamb i:nth-child(2),body.nav-open .hamb span:nth-child(2){opacity:0}
body.nav-open .hamb i:nth-child(3),body.nav-open .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── 4. antet pagină + meniul „⋯ Meniu” ────────────────────────────────── */
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;position:relative}
.page-head h1{flex:1;font-size:22px;margin:0}

/* Pe desktop acțiunile curg normal în rând, butonul kebab e ascuns. */
.head-menu{display:contents}
.kebab{display:none}
.menu-lbl,.menu-sep{display:none}

.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
/* Containerul de chips: app.js umple `#filters`, care n-are clasă proprie. */
.filters,#filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.refresh{
  border:1px solid var(--line); background:var(--card); color:var(--txt);
  border-radius:9px; padding:9px 14px; font-size:13px;
}
.refresh:hover{border-color:var(--brand);color:var(--brand-d)}
.refresh:disabled{opacity:.6;cursor:default}

/* ── 5. chips de filtrare status ───────────────────────────────────────── */
.chip{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  border:1.5px solid var(--line); background:var(--card); color:var(--txt);
  border-radius:8px; padding:7px 13px; font-size:13px;
}
.chip .n{
  background:rgba(0,0,0,.08); border-radius:6px; padding:1px 8px;
  font-size:12px; font-weight:700;
}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.chip.active .n{background:rgba(255,255,255,.25)}
.chip-alert{border-color:var(--bad);color:var(--bad);font-weight:600}
.chip-alert .n{background:var(--bad);color:#fff}
.chip-alert.active{background:var(--bad);color:#fff}

.mfilter{
  display:none; width:100%; align-items:center; justify-content:space-between;
  text-align:left; border:0; background:transparent;
  border-radius:8px; padding:10px 11px; font-size:13.5px; color:var(--txt);
}
.mfilter:hover{background:#f6f8fa}
.mfilter.on{color:var(--brand-d);font-weight:700}
.mfilter .n{background:rgba(0,0,0,.08);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:700}

/* ── 6. bara de filtre ─────────────────────────────────────────────────── */
.filterbar{
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; margin-bottom:10px; box-shadow:var(--shadow);
}
.flbl{
  display:block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; color:#9a9a94; margin-bottom:4px;
}
.filterbar select,.filterbar input{
  padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); font-size:14px; min-width:150px; max-width:260px; color:var(--txt);
}
.filterbar select:focus,.filterbar input:focus{outline:none;border-color:var(--brand)}
.fgrp{display:flex;flex-direction:column}
.filterbar .fsearch,.filterbar .grow{flex:1 1 220px}
.filterbar .fsearch input,.filterbar .grow input{max-width:none;width:100%}

/* ── 7. linia de sumar (doar admin) ────────────────────────────────────── */
.sumline{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.sumpill{
  border:1px solid var(--line); background:var(--card);
  border-radius:9px; padding:6px 12px; font-size:13px;
  font-variant-numeric:tabular-nums;
}
.sumpill b{font-size:14px}
.sumpill.total{background:var(--brand);border-color:var(--brand);color:#fff}
.sumpill.ok{border-color:#bfe3cd;background:#f2faf5}
.sumpill.bad{border-color:#f0c8c1;background:#fdf4f2}
.sumpill.warn{border-color:#ecd9a8;background:#fdf9ee}

/* ── 8. tabelul de comenzi ─────────────────────────────────────────────── */
.tablewrap{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.otable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px}
.otable th{
  text-align:left; color:var(--muted);
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.3px;
  padding:11px 14px; border-bottom:1px solid var(--line); background:#f8fafc;
  white-space:nowrap;
}
.otable td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.otable tbody tr:last-child td{border-bottom:0}
.otable tbody tr{cursor:pointer}
.otable tbody tr:hover td{background:#fbf7f2}
.otable td.right,.otable th.right,.otable td.num,.otable th.num{text-align:right}
.pozainp{
  width:100%; max-width:420px; padding:7px 10px;
  border:1px solid var(--line); border-radius:8px; background:#fafbfc; font-size:13px;
}
.pozainp:focus{outline:none;border-color:var(--brand);background:#fff}

a.oidlink{color:#1565d8;text-decoration:none;font-weight:600}
a.oidlink:hover{text-decoration:underline}
a.oidlink .ext,.ext{font-size:11px;opacity:.7;margin-left:3px}
.cust{display:block;font-size:12px;color:var(--muted);font-weight:400}
.qtytot{text-align:right;font-variant-numeric:tabular-nums}
.qtytot.red{color:var(--bad);font-weight:800}
.late{color:var(--bad);font-weight:700;margin-left:6px}
.empty{text-align:center;color:var(--muted);padding:46px 20px}

.otable th.sortable{cursor:pointer;user-select:none}
.otable th.sortable::after{content:"↕";font-size:11px;opacity:.35;margin-left:5px}
.otable th.sortable.sort-asc::after{content:"↑";opacity:1}
.otable th.sortable.sort-desc::after{content:"↓";opacity:1}

/* ── 9. badge-uri de STATUS ────────────────────────────────────────────── */
/* Bordura NU are culoare declarată → preia currentColor de la text. */
.tag{
  display:inline-block; padding:3px 10px;
  border:1.5px solid; border-radius:7px;
  font-size:11px; font-weight:700; white-space:nowrap; vertical-align:middle;
}
.t-noua{background:#fff1e3;color:var(--brand-d)}
.t-progres{background:#e7f0fb;color:var(--proc)}
.t-finalizata{background:#e6f6ec;color:var(--ok)}
.t-nepredata{background:#fdf3d6;color:#9a7400}
.t-dropoff{background:#fdf3d6;color:#b54708}
.t-retur{background:#fdeae7;color:var(--bad)}
.t-anulata{background:#eef0f3;color:#7a828c}
.t-stornata{background:#f1e9fb;color:#7a3fc0}
.t-rec-trimisa{background:#fff1e3;color:var(--brand-d)}
.t-rec-partiala{background:#e7f0fb;color:var(--proc)}
.t-rec-ok{background:#e6f6ec;color:var(--ok)}
.t-rec-alarma{background:#fdeae7;color:var(--bad)}

/* Pastile status curier, lângă status */
.track{
  display:inline-block; padding:3px 10px;
  border:1.5px solid; border-radius:7px;
  font-size:11px; font-weight:700; white-space:nowrap; vertical-align:middle; margin-left:6px;
}
.tk-emis{background:#fdf3d6;color:#9a7400}
.tk-preluat{background:#e7f0fb;color:var(--proc)}
.tk-avizat{background:#fdeede;color:#c2620a}
.tk-livrat{background:#e6f6ec;color:var(--ok)}
.tk-retur{background:#fdeae7;color:var(--bad)}
.tk-necunoscut{background:#eef0f3;color:#7a828c}

/* ── 10. buton AWB, badge factură, siglă curier, chip expeditor ────────── */
.awbbtn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:138px; height:44px; padding:5px 8px;
  border:1.6px solid var(--line); border-radius:9px;
  font-size:12.5px; font-weight:800; line-height:1.25; text-align:center;
  color:var(--muted); text-decoration:none;
  transition:filter .12s,box-shadow .12s;
}
.awbbtn .n{
  font-size:11.5px; font-weight:600; opacity:.8;
  font-variant-numeric:tabular-nums; letter-spacing:.2px;
}
a.awbbtn:hover{filter:brightness(.97);box-shadow:0 1px 4px rgba(20,30,45,.12)}
.aw-pregatit{color:#9a7400;border-color:#e0c266;background:#fdf8ea}
.aw-predat{color:var(--proc);border-color:#a9c6ee;background:#eef4fc}
.aw-avizat{color:#c2620a;border-color:#f0c08a;background:#fdf1e6}
.aw-asteapta_client{color:#0e8a8a;border-color:#8fd4d4;background:#e9f7f7}
.aw-livrat{color:var(--ok);border-color:#9fdcb6;background:#ecf8f0}
.aw-redirectionat{color:#7a3fc0;border-color:#c9aeea;background:#f4edfc}
.aw-in_retur{color:var(--brand-d);border-color:#f0c08a;background:#fdf1e6}
.aw-returnat,.aw-retur{color:var(--bad);border-color:#f0a99e;background:#fdeeeb}
.awbbtn.test{border-style:dashed;color:#9a7400;border-color:#d8b24a}
.awbmulti{
  display:inline-block; margin-left:5px; padding:1px 6px;
  font-size:10.5px; font-weight:800; color:var(--muted);
  background:#eef0f3; border-radius:6px;
}
.awbnum{
  display:inline-block; margin-left:6px; padding:3px 10px;
  border:1.5px solid; border-radius:7px;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ok);
}

.invtag{
  display:inline-flex; align-items:center; justify-content:center;
  width:138px; height:26px; padding:0 8px;
  border:1.5px solid; border-radius:7px;
  font-size:11px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.invtag.ok{background:#e6f6ec;color:var(--ok)}
.invtag.bad{background:#fdeae7;color:var(--bad)}
.invtag.warn{background:#fdf3d6;color:#9a7400}
.invtag.pending{background:#f4f6f8;color:#7a828c;border-color:var(--line)}
.invtag.storno{background:#f1e9fb;color:#7a3fc0}

/* Sigla curierului: chip alb de dimensiune fixă, ca să se alinieze pe coloană. */
.courier{
  display:inline-flex; align-items:center; justify-content:center;
  width:108px; height:34px; padding:4px 8px;
  border:1px solid var(--line); border-radius:8px; background:#fff; cursor:default;
}
.courier img{max-width:100%;max-height:100%;object-fit:contain}
.courier.unk{background:#f1f3f6;color:var(--muted);font-size:16px}
/* Variantă TEXT — cât timp nu avem PNG-uri, numele curierului scris cu culoarea lui. */
.courier.txt{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  background:#fff; line-height:1.15; text-align:center; overflow:hidden;
}
.courier.txt.fan,.courier.txt.c-fan{color:#e2001a}
.courier.txt.sameday,.courier.txt.c-sameday{color:#ff5a00}
.courier.txt.emag,.courier.txt.c-emag{color:#0a3ea1}
.courier.txt.easybox,.courier.txt.c-easybox{color:#0a3ea1}

.expchip{
  display:inline-flex; align-items:center; justify-content:center;
  width:76px; height:26px;
  border:1.5px solid #eccb95; border-radius:7px;
  background:#fdf3e0; color:#a05e03; font-size:11px; font-weight:700;
}
.expchip.sediu{background:#e7f0fd;color:#1d5bbf;border-color:#b9d2f5}

.srcbadge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  background:#e7f0fb; color:var(--proc); font-size:11px; font-weight:700;
}
.srcbadge.man{background:#e6f6ec;color:var(--ok)}

.courbadge{font-weight:700}
.courbadge.sameday{color:#ff5a00}
.courbadge.fan{color:#e2001a}
.courbadge.emag{color:#0a3ea1}

/* ── 11. celula de produse ─────────────────────────────────────────────── */
.prodcell{display:flex;flex-direction:column;gap:6px}
.pchip{display:flex;align-items:center;gap:7px}
.pthumb{
  width:34px; height:34px; flex:0 0 34px;
  border:1px solid var(--line); border-radius:7px; background:#fff; object-fit:cover;
}
.pthumb.noimg{
  display:inline-flex; align-items:center; justify-content:center;
  background:#f1f3f6; color:var(--muted); font-weight:700;
}
.pqty{font-size:13px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.pqty.red{color:var(--bad);font-weight:800}
.psku{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psku-gift{color:#dc2626;font-weight:800}
.skucell{overflow:hidden;text-overflow:ellipsis}

.prow{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:10px; padding:9px; margin-bottom:8px;
}
.pthumb-big{
  width:54px; height:54px; flex:0 0 54px;
  border:1px solid var(--line); border-radius:8px; background:#fff; object-fit:cover;
}
.pthumb-big.noimg{
  display:inline-flex; align-items:center; justify-content:center;
  background:#f1f3f6; color:var(--muted); font-weight:700;
}
.prow .pname{font-size:13px;font-weight:600;line-height:1.3}
.prow .pqty-big{margin-left:auto;font-size:15px;font-weight:800;color:var(--bad)}

.warnbox{
  background:#fdeae7; border:1px solid #f3b4ab; color:var(--bad);
  border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600; margin-bottom:14px;
}
.giftbox{
  background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
  border-radius:10px; padding:9px 12px; font-size:13px;
}
.giftbox .intern{font-size:12px;color:#b45309}

/* ── 12. modalul de detaliu ────────────────────────────────────────────── */
.sheet-bg{
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,22,33,.45);
}
.sheet{
  width:100%; max-width:620px; max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:14px; padding:20px 22px 26px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.sheet h2{font-size:19px;margin:0 0 2px}
.sheet .sub{font-size:13px;color:var(--muted);margin:0 0 16px}
h3.mosec,.mosec{
  font-size:14px; color:var(--brand);
  border-top:1px solid var(--line); padding-top:12px; margin:18px 0 8px;
}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:14px}
.dl dt,.dl .k,.dl .muted{color:var(--muted);margin:0}
.dl dd,.dl .v,.dl .val{margin:0;text-align:right;font-weight:600}
.prodlist{display:flex;flex-direction:column;gap:0}
.pnume{font-size:13px;font-weight:600;line-height:1.3}
.mochk{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.note{
  margin-top:14px; padding:11px 12px;
  background:#fafbfc; border:1px dashed var(--line); border-radius:10px;
  font-size:12px; color:var(--muted);
}
.sheet-close{
  width:100%; padding:12px; margin-top:16px;
  border:1px solid var(--line); background:var(--card); border-radius:10px; font-weight:600;
}
.sheet-close:hover{border-color:var(--brand)}

.locresults{
  position:absolute; z-index:30; max-height:220px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:9px;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.locitem{padding:9px 12px;font-size:13px;cursor:pointer}
.locitem:hover{background:#fbf7f2}

/* ── 13. butoane ───────────────────────────────────────────────────────── */
.btn-primary{
  width:100%; padding:13px; border:0; border-radius:10px;
  background:var(--brand); color:#fff; font-size:16px; font-weight:700;
}
.btn-primary:active{background:var(--brand-d)}
.btn-primary:disabled{opacity:.6;cursor:default}

.btn-awb{
  padding:11px 16px; border:0; border-radius:9px;
  background:var(--brand); color:#fff; font-size:15px; font-weight:700;
}
.btn-awb:active{background:var(--brand-d)}
.btn-awb:disabled{opacity:.6;cursor:default}

.btn-awb-2{
  padding:9px 13px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--txt); font-size:13px;
}
.btn-awb-2:hover{border-color:var(--brand);color:var(--brand-d)}

.btn-del{
  padding:9px 13px; border:1px solid #f3b4ab; border-radius:8px;
  background:var(--card); color:var(--bad); font-size:13px; font-weight:600;
}
.btn-del:hover{background:#fdeae7}
.btn-del-order{
  width:100%; padding:10px; border:1px solid #f3b4ab; border-radius:9px;
  background:var(--card); color:var(--bad); font-size:13px; font-weight:600;
}
.btn-del-order:hover{background:#fdeae7}
.delorder-row{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}

.minibtn{
  padding:5px 9px; margin-right:5px;
  border:1px solid var(--line); border-radius:7px;
  background:var(--card); color:var(--txt); font-size:12px;
}
.minibtn:hover{border-color:var(--brand);color:var(--brand-d)}

/* ── 14. panou control / stare sistem ──────────────────────────────────── */
.hpill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font-size:13px; font-weight:600; box-shadow:var(--shadow);
}
.hpill.big{font-size:14px;font-weight:800;padding:7px 15px}
.hpill.s-ok{background:#eafaf1;border-color:#bfe9cf}
.hpill.s-warn{background:#fdf6e3;border-color:#f0dca0}
.hpill.s-err{background:#fdecea;border-color:#f3c2ba}

.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.hcard{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ok);
  border-radius:12px; padding:12px 14px;
}
.hcard.s-warn{border-left-color:var(--warn)}
.hcard.s-err{border-left-color:var(--bad)}
.hcard-h{
  font-size:15px; font-weight:700; margin-bottom:8px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.hrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.hrow:last-child{border-bottom:0}
.hnm small{display:block;font-size:11.5px;color:var(--muted)}
.hdot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:#c2c8d0}
.hdot.s-ok{background:var(--ok)}
.hdot.s-warn{background:var(--warn)}
.hdot.s-err{background:var(--bad);box-shadow:0 0 0 3px rgba(224,64,43,.15)}
.hdot.s-na{background:#c2c8d0}
.hdet{
  margin-left:auto; text-align:right; color:var(--muted); font-size:12px;
  max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dotlegend{font-weight:600;margin-right:12px}

/* ── 15. pagina Stocuri ────────────────────────────────────────────────── */
.stk-img{width:38px;height:38px;flex:0 0 38px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.stk-img.noimg{
  display:inline-flex; align-items:center; justify-content:center;
  background:#f1f3f6; color:var(--muted); font-weight:700;
}
.stk-lvl{display:inline-block;padding:2px 9px;border-radius:10px;font-size:12px;font-weight:600}
.stk-red{background:#fde8e8;color:#b42318}
.stk-orange{background:#fef0c7;color:#b54708}
.stk-green{background:#d1fadf;color:#027a48}
.stk-none{background:#ececf0;color:#777}
.stk-zero{color:#b42318}
.stk-trend-up{color:#b54708;font-weight:700}
.stk-trend-down{color:var(--muted)}
.stk-dim{opacity:.45}
.stk-name{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-count{font-size:13px;color:var(--muted);white-space:nowrap}
.stk-count b{color:var(--txt)}
.stk-count .warn{color:var(--bad);font-weight:700}

/* Avertismentul „stocul de la eMAG lipsește / e vechi". Galben, nu roșu: datele NOASTRE sunt
   bune, doar jumătatea de la eMAG nu se poate confirma. */
.stk-warn{
  border:1px solid #ecd9a8; background:#fdf9ee; color:#7a5a05;
  border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:12px;
}
.stk-warn b{color:#5c4304}

/* linia mică de sub cifra principală (resigilate/defecte, media pe 12 luni, „3P: n") */
.stk-sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.stk-sub .bad{color:var(--bad);font-weight:600}

/* Semnul de întrebare care poartă explicația problemei de la eMAG. Cursorul „help" spune
   omului că are ce citi acolo; textul întreg stă în `title`. */
.stk-why{
  display:inline-block; margin-left:5px; cursor:help;
  border-bottom:1px dotted currentColor; font-weight:700;
}
.stk-flag{font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;white-space:nowrap}
.stk-flag.oversell{background:#fde8e8;color:#b42318}
.stk-flag.lipsa{background:#fef0c7;color:#b54708}
.stk-flag.lipsa_oferta{background:#ececf0;color:#555}
.stk-flag.comanda{background:#fde8e8;color:#b42318}

/* data-limită de comandă: trecută = ai întârziat deja */
.stk-date{font-variant-numeric:tabular-nums;white-space:nowrap}
.stk-date.late{color:var(--bad);font-weight:700}
.stk-date.soon{color:#b54708;font-weight:600}

.stktable td{vertical-align:top}
.stktable td.num{white-space:nowrap}
.stk-when{color:var(--muted);font-size:12.5px;margin-left:12px;margin-right:auto}

/* ── 15b. pagina Încasări ──────────────────────────────────────────────────
   Stările de bani. Verde = banii sunt la noi; galben = urmează; roșu = nu mai vin de la sine.
   Aceleași perechi de culori ca la restul badge-urilor de status (secțiunea 9), ca ochiul să
   nu învețe două limbaje în aceeași aplicație. */
.t-incasat{background:#e6f6ec;color:var(--ok)}
.t-decont{background:#e7f0fb;color:var(--proc)}
.t-urmarit{background:#fdeae7;color:var(--bad)}
.t-asteptare{background:#fdf3d6;color:#9a7400}
.t-platit{background:#e6f6ec;color:var(--ok)}
.t-depasit{background:#fdeae7;color:var(--bad)}
.t-curand{background:#fdf3d6;color:#9a7400}
.t-deplatit{background:#eef0f3;color:#5b6472}
.t-credit{background:#f1e9fb;color:#7a3fc0}

/* Sume: intrare / ieșire / bani care încă trebuie să vină. */
.inc-pos{color:var(--ok)}
.inc-neg{color:var(--bad)}
.inc-due{color:#b54708}
.inc-val{color:var(--brand-d);letter-spacing:.03em}
.inc-alarma{color:var(--bad);font-weight:600}

/* Rând care cere o acțiune (refund fără storno, lipsă SPV, factură depășită). Fundal foarte
   palid: trebuie să sară în ochi la derulare, nu să facă textul greu de citit. */
.inc-rand-rau td{background:#fdf5f4}
.otable tbody tr.inc-rand-rau:hover td{background:#fbeceb}

/* Badge-uri mici de pe rândul de factură (SPV). `.invtag` are lățime fixă 138px — aici ar
   rupe coloana, de aia sunt separate. */
.inc-badge{
  display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:700;
  white-space:nowrap;
}
.inc-badge.bad{background:#fde8e8;color:#b42318}
.inc-badge.wait{background:#fef0c7;color:#b54708}

.inctable td{vertical-align:top}
.inctable td.num{white-space:nowrap}
.inc-ref{font-size:12.5px;font-variant-numeric:tabular-nums;word-break:break-all}
.inc-desc{
  max-width:360px;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.inc-mai{margin-top:12px}

/* ── 16. bara de impersonare ───────────────────────────────────────────── */
.imp-bar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:#7a3df4; color:#fff; padding:9px 14px;
  font-size:14px; font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.imp-back{
  border:0; border-radius:8px; padding:6px 12px;
  background:#fff; color:#5a2bbf; font-weight:700;
}
.imp-back:hover{background:#f0e9ff}
body.has-imp-bar .layout{padding-top:42px}

/* ── 17. utilitare ─────────────────────────────────────────────────────── */
/* `.hidden` e comutatorul folosit de app.js (secțiuni, coloane, badge-uri).
   Trebuie să bată `display:flex` / `display:block` din regulile de mai sus. */
.hidden{display:none !important}
/* `.admin-only` e DOAR un marcaj pentru app.js, care scoate `.hidden` când
   utilizatorul e admin. NU-i pune `display:none` singură aici — altfel
   elementele n-ar mai apărea niciodată, nici pentru admin. Ascunderea vine
   din `.hidden`, pusă în marcaj lângă ea; regula de mai jos o face explicită. */
.admin-only.hidden{display:none !important}
.muted{color:var(--muted)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nowrap{white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}

/* ═══ 18. responsiv — 5 blocuri, 4 praguri. Fără dark mode. ═════════════ */

/* 18.1 — se ascunde coloana Canal */
@media (max-width:1150px){
  .col-canal{display:none}
}

/* 18.2 — se ascunde coloana Data */
@media (max-width:1080px){
  .col-data{display:none}
}

/* 18.3 — bara laterală devine sertar off-canvas + bară mobilă fixă */
@media (max-width:900px){
  .layout{flex-direction:column}
  .main{padding:66px 14px 20px}
  body.has-imp-bar .layout{padding-top:0}
  body.has-imp-bar .main{padding-top:108px}
  body.has-imp-bar .mtopbar{top:42px}

  .mtopbar{
    display:flex; align-items:center; gap:6px;
    position:fixed; top:0; left:0; right:0; height:52px; z-index:60;
    background:var(--side); color:#fff; padding:0 10px 0 6px;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }

  .sidebar{
    position:fixed; top:0; left:0; z-index:70;
    width:272px; max-width:82vw; flex:0 0 auto; height:100dvh;
    transform:translateX(-100%); transition:transform .28s ease;
    box-shadow:0 0 46px rgba(0,0,0,.4);
  }
  body.nav-open .sidebar{transform:translateX(0)}
  .sidebar .brand{padding:16px 18px}
  .sidebar .nav-item{padding:12px 12px}
  .sidebar .soon{display:flex}

  .nav-overlay{
    display:block; position:fixed; inset:0; z-index:65;
    background:rgba(10,15,22,.5); opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  body.nav-open .nav-overlay{opacity:1;pointer-events:auto}
}

/* 18.4 — antetul cu „⋯ Meniu”: acțiunile și filtrele secundare intră în dropdown */
@media (max-width:900px){
  .page-head h1{font-size:19px}
  .kebab{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--line); background:var(--card); color:var(--txt);
    border-radius:9px; padding:9px 12px; font-size:13px;
  }
  .head-menu{
    display:none; position:absolute; top:100%; right:0; z-index:35;
    min-width:224px; background:var(--card); border:1px solid var(--line);
    border-radius:12px; padding:6px; margin-top:6px;
    box-shadow:0 14px 34px rgba(0,0,0,.18);
  }
  .head-menu.open,body.menu-open .head-menu{display:block}
  .head-menu .refresh,
  .head-menu .btn-awb,
  .head-menu .btn-awb-2,
  .head-menu .minibtn,
  .head-menu button{
    display:block; width:100%; text-align:left;
    border:0; background:transparent; border-radius:8px;
    padding:11px 12px; font-size:13.5px; margin:0;
  }
  .head-menu .refresh:hover,
  .head-menu button:hover{background:#f6f8fa;color:var(--txt)}
  .menu-lbl{
    display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
    color:var(--muted); padding:8px 10px 4px;
  }
  .menu-sep{display:block;height:1px;background:var(--line);margin:5px 4px;border:0}
  .head-menu .mfilter{display:flex}

  /* Chips secundare: dispar dacă nu sunt active. Alerta rămâne mereu vizibilă. */
  .filters .chip.extra,#filters .chip.extra{display:none}
  .filters .chip.extra.active,#filters .chip.extra.active{display:flex}
  .filters .chip-alert,#filters .chip-alert{display:flex}
}

/* 18.5 — telefon: tabelul încape FĂRĂ derulare orizontală */
@media (max-width:560px){
  .page-head{flex-wrap:wrap}
  .filterbar .fsearch{flex:1 1 100%}
  .filterbar select,.filterbar input{max-width:none}
  .otable{min-width:0}
  .otable th,.otable td{padding:9px 8px}
  /* Rămân doar Comandă / Status / AWB / Buc. */
  .col-prod,.col-fact,.col-liv,.col-exp,
  .col-produse,.col-factura,.col-livrare,.col-pleaca{display:none}
  .awbbtn{width:auto;min-width:84px;padding:5px 8px}
  .invtag{width:auto;min-width:84px}
  .skucell{max-width:120px}
  .sheet{padding:16px 14px 20px;max-height:92vh}
  .main{padding:66px 10px 18px}
}

/* ── pagina Produse: codul SKU în tabel și rândul de butoane din dialoguri ── */
td.oid{font-weight:700;font-variant-numeric:tabular-nums}
.awbactions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.awbactions .btn-primary{width:auto;padding:11px 16px;font-size:15px;margin-top:0}
.pkgcell{white-space:nowrap}

/* piciorul barei: „Schimbă parola” deasupra lui „Ieși din cont” */
.logout+.logout{margin-top:6px}
.pw-hint{font-size:12px;color:var(--muted);margin:-6px 0 12px}


/* ── pagina Acte: semaforul lunii, folderele, reconcilierile ────────────────
   Nicio clasă nouă unde exista deja una bună: bulinele sunt `.hdot.s-ok/.s-warn/.s-err/.s-na`
   (aceleași ca în Panou control), cardurile de reconciliere sunt `.hcard`, tabelele `.otable`.
   Aici stă doar ce n-avea corespondent: semaforul mare și rândurile de sub-folder. */

/* Semaforul lunii. Fundal colorat, nu doar o bulină: e primul lucru care trebuie citit
   de la doi metri, iar propoziția de sub titlu spune EXACT ce lipsește. */
.act-sem{
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid var(--line); border-left:6px solid var(--ok);
  background:var(--card); border-radius:12px; padding:14px 16px;
  margin-bottom:12px; box-shadow:var(--shadow);
}
.act-sem.g-verde{border-left-color:var(--ok);background:#f4fbf7}
.act-sem.g-galben{border-left-color:var(--warn);background:#fdfaf0}
.act-sem.g-rosu{border-left-color:var(--bad);background:#fdf5f4}
.act-sem.g-gri{border-left-color:#c2c8d0;background:#f7f8fa}
.act-lamp{font-size:26px;line-height:1.1}
.act-titlu{font-size:16px;font-weight:800;margin-bottom:3px}
.act-rez{font-size:13.5px;line-height:1.5}

.act-h2{font-size:15px;font-weight:800;margin:22px 0 9px;display:flex;align-items:center;gap:8px}
.act-cards{display:grid;gap:14px}

/* `.hcard` are patru culori de bordură; „gri" (neverificat) lipsea — nu e nici bine, nici rău. */
.hcard.s-na{border-left-color:#c2c8d0}

/* Cifra reconcilierii stă în dreapta titlului: „0 din 124", „663,48 lei peste coada normală".
   Împinsă cu `margin-left:auto` într-un antet flex, NU cu `float`: pe un titlu scurt, floatul
   ar ieși din chenarul antetului și cifra ar pluti peste explicație. */
.act-hh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.act-cifra{
  margin-left:auto; font-weight:800; font-size:13px;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.act-exp{font-size:13.5px;line-height:1.55}

/* Detaliile: deschise când e o problemă, strânse când e curat (vezi comentariul din app.js). */
.act-det{margin-top:10px}
.act-det>summary{
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--proc);
  padding:4px 0; list-style:none;
}
.act-det>summary::-webkit-details-marker{display:none}
.act-det>summary::before{content:"▸ "}
.act-det[open]>summary::before{content:"▾ "}
.act-det .otable{margin-top:8px;font-size:12.5px}
.act-det .otable th,.act-det .otable td{padding:7px 9px}

/* Sub-rândurile de folder (Pay Out RO/HU/BG, Ads RO/HU/BG, artefactele-cheie din 6 și 8):
   vizual subordonate, ca să se citească drept „parte din folderul de deasupra". */
.act-subrow td{background:#fafbfc;font-size:12.5px}
.act-sub{padding-left:22px;color:var(--muted)}

.act-info{display:block;font-size:13px;line-height:1.55}

/* Al treilea fel de `.srcbadge`: „opțional" — gri, fiindcă nu cere nicio acțiune. */
.srcbadge.opt{background:#eef0f3;color:#7a828c}