/* Atelierul ERP — 2 oct 2026. Aceeasi familie ca magazinul: otel #13263F + lime #A4D932.
   Principiu: un om care n-a vazut niciodata un ERP trebuie sa stie, pe fiecare ecran, ce poate apasa si ce se intampla. */
:root{
  --otel:#13263F; --otel2:#1c3554; --otel3:#2a4a70; --lime:#A4D932; --lime-ink:#4c7300; --lime-bg:#f1f9e0;
  --fond:#f3f5f8; --card:#ffffff; --linie:#e1e6ee; --text:#13263F; --slab:#5a6a80; --foarte-slab:#8d9aac;
  --verde:#1f9d55; --verde-bg:#e6f6ec; --galben:#b7860b; --galben-bg:#fdf4dc; --rosu:#d14343; --rosu-bg:#fdeaea;
  --albastru:#2d6cd2; --albastru-bg:#e7effc; --mov:#7a4fd8; --mov-bg:#f0eafc; --gri:#7d8899; --gri-bg:#eef0f4;
  --r:16px; --umbra:0 1px 2px rgba(19,38,63,.06),0 4px 14px rgba(19,38,63,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--text)}
body{font:16px/1.55 'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.titlu{font-family:'Outfit',system-ui,sans-serif;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:30px;font-weight:800}
h2{font-size:21px;font-weight:700}
h3{font-size:17px;font-weight:700}
a{color:var(--albastru);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:8px}
.cifre{font-variant-numeric:tabular-nums}

/* ── schelet ── */
.cadru{display:flex;min-height:100vh}
.meniu{width:248px;flex:0 0 248px;background:var(--otel);color:#dfe7f1;padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.meniu .marca{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.meniu .marca .logo{width:38px;height:38px;border-radius:11px;background:var(--lime);display:grid;place-items:center;color:var(--otel);font:900 20px 'Outfit'}
.meniu .marca b{font:800 19px 'Outfit';color:#fff;display:block;line-height:1.1}
.meniu .marca span{font-size:12px;color:#9fb1c8}
.meniu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#dfe7f1;font-weight:700;font-size:15.5px}
.meniu a:hover{background:var(--otel2);text-decoration:none}
.meniu a.activ{background:var(--lime);color:var(--otel)}
.meniu a .ic{font-size:20px;width:26px;text-align:center}
.meniu a .nr{margin-left:auto;background:#ffffff1f;border-radius:99px;font-size:12px;padding:1px 9px}
.meniu a.activ .nr{background:#13263f22}
.meniu .grup{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7f93ad;padding:16px 12px 4px}
.meniu .jos{margin-top:auto;padding-top:14px;font-size:12.5px;color:#8ea2bb;line-height:1.5}
.continut{flex:1;min-width:0;padding:0 0 60px}
.banda{background:var(--otel2);color:#e5ecf5;font-size:13.5px;padding:9px 28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.banda b{color:var(--lime)}
.banda .sync{margin-left:auto;display:flex;align-items:center;gap:7px}
.banda .punct{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #a4d93233}
.pagina{max-width:1180px;margin:0 auto;padding:26px 28px}
.cap{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.sub{color:var(--slab);font-size:15.5px;margin:6px 0 22px;max-width:70ch}

/* ── carduri ── */
.card{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--umbra);padding:20px}
.grila{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi .eticheta{font-size:13px;color:var(--slab);font-weight:700}
.kpi .valoare{font:800 28px/1.15 'Outfit';margin-top:4px}
.kpi .valoare small{font-size:15px;color:var(--slab);font-weight:700}
.kpi .expl{font-size:13.5px;color:var(--foarte-slab);margin-top:4px}

/* ── „Ce vrei sa faci?" — butoanele mari ── */
.actiuni{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:8px 0 28px}
.mare{display:flex;flex-direction:column;gap:6px;background:var(--card);border:2px solid var(--linie);border-radius:20px;padding:18px 18px 16px;color:var(--text);box-shadow:var(--umbra);transition:transform .12s,border-color .12s}
.mare:hover{transform:translateY(-3px);border-color:var(--lime);text-decoration:none}
.mare .ic{font-size:34px;line-height:1}
.mare b{font:800 18px 'Outfit'}
.mare span{font-size:14px;color:var(--slab)}

/* ── de facut azi ── */
.sarcina{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;border:1px solid var(--linie);background:var(--card);box-shadow:var(--umbra)}
.sarcina .ic{font-size:30px;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:0 0 52px}
.sarcina .txt{flex:1;min-width:0}
.sarcina .txt b{font:800 17px 'Outfit';display:block}
.sarcina .txt span{color:var(--slab);font-size:14.5px}
.s-rosu .ic{background:var(--rosu-bg)} .s-galben .ic{background:var(--galben-bg)} .s-albastru .ic{background:var(--albastru-bg)}
.s-mov .ic{background:var(--mov-bg)} .s-verde .ic{background:var(--verde-bg)}
.s-rosu{border-left:6px solid var(--rosu)} .s-galben{border-left:6px solid var(--galben)} .s-albastru{border-left:6px solid var(--albastru)} .s-mov{border-left:6px solid var(--mov)}
.liniste{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;background:var(--verde-bg);color:#155f34;font-weight:700}

/* ── butoane ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font:800 15.5px 'Nunito Sans',sans-serif;cursor:pointer;background:var(--otel);color:#fff;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--otel3);text-decoration:none}
.btn.lime{background:var(--lime);color:var(--otel)} .btn.lime:hover{background:#b6e64d}
.btn.verde{background:var(--verde)} .btn.verde:hover{background:#18834a}
.btn.rosu{background:#fff;color:var(--rosu);border:2px solid #f2c4c4} .btn.rosu:hover{background:var(--rosu-bg)}
.btn.alb{background:#fff;color:var(--otel);border:2px solid var(--linie)} .btn.alb:hover{border-color:var(--otel)}
.btn.mic{padding:8px 13px;font-size:14px;border-radius:10px}
.btn.urias{padding:16px 26px;font-size:18px;border-radius:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.explica{font-size:13.5px;color:var(--slab);margin-top:6px}

/* ── pastile de stare ── */
.pastila{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 12px;font-size:13.5px;font-weight:800;white-space:nowrap}
.pastila::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.p-verde{background:var(--verde-bg);color:var(--verde)} .p-galben{background:var(--galben-bg);color:var(--galben)} .p-rosu{background:var(--rosu-bg);color:var(--rosu)}
.p-albastru{background:var(--albastru-bg);color:var(--albastru)} .p-mov{background:var(--mov-bg);color:var(--mov)} .p-gri{background:var(--gri-bg);color:var(--gri)}

/* ── tabele (putine coloane, randuri inalte) ── */
.tabel{width:100%;border-collapse:separate;border-spacing:0}
.tabel th{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--foarte-slab);text-align:left;padding:10px 14px;border-bottom:1px solid var(--linie);font-weight:800}
.tabel td{padding:14px;border-bottom:1px solid var(--linie);vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel td.dr{white-space:nowrap}
.tabel tr.clic{cursor:pointer} .tabel tr.clic:hover td{background:#f8fafc}
.tabel .dr{text-align:right}
.tabel .nume{font-weight:800}
.tabel .mic:not(.btn){font-size:13px;color:var(--slab)}
.cutie-tabel{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--umbra);overflow-x:auto}

/* ── file (taburi) ── */
.file{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.file a{padding:10px 16px;border-radius:12px;background:#fff;border:2px solid var(--linie);color:var(--text);font-weight:800;font-size:15px}
.file a:hover{text-decoration:none;border-color:var(--otel3)}
.file a.activ{background:var(--otel);border-color:var(--otel);color:#fff}
.file a .nr{display:inline-block;margin-left:6px;background:#13263f14;border-radius:99px;padding:0 8px;font-size:13px}
.file a.activ .nr{background:#ffffff26}

/* ── cautare ── */
.cauta{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.cauta input,.cauta select{flex:1;min-width:200px;font:600 17px 'Nunito Sans',sans-serif;padding:14px 16px;border-radius:14px;border:2px solid var(--linie);background:#fff;color:var(--text)}
.cauta input:focus,.cauta select:focus{border-color:var(--lime);outline:none}
input.camp,select.camp{font:700 16px 'Nunito Sans',sans-serif;padding:11px 13px;border-radius:12px;border:2px solid var(--linie);background:#fff;color:var(--text);width:100%}
input.camp:focus,select.camp:focus{border-color:var(--lime);outline:none}
input.cant{width:92px;text-align:center;font:800 18px 'Outfit'}
label.et{display:block;font-weight:800;font-size:14px;margin:0 0 6px}

/* ── produse (carduri cu poza) ── */
.produse{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.prod{background:#fff;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;box-shadow:var(--umbra);color:var(--text);display:flex;flex-direction:column}
.prod:hover{text-decoration:none;border-color:var(--otel3)}
.prod .poza{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;border-bottom:1px solid var(--linie)}
.prod .poza img{max-width:100%;max-height:100%;object-fit:contain}
.prod .info{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .info b{font-weight:800;line-height:1.3}
.prod .rand{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.prod .pret{font:800 17px 'Outfit'}
.mini{width:56px;height:56px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--linie)}

/* ── mesaje ── */
.mesaj{display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:14px;font-weight:700;margin-bottom:18px}
.mesaj.bine{background:var(--verde-bg);color:#155f34;border:1px solid #bfe6cd}
.mesaj.rau{background:var(--rosu-bg);color:#8f2424;border:1px solid #f2c4c4}

/* ── grafic simplu cu bare ── */
.bare{display:flex;align-items:flex-end;gap:14px;height:210px;padding:10px 4px 0}
.bara{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bara .b{width:100%;max-width:64px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--lime),#8cc21f);min-height:4px}
.bara .b.marja{background:linear-gradient(180deg,#3d6fb3,var(--otel2))}
.bara .v{font:800 13px 'Outfit'} .bara .l{font-size:13px;color:var(--slab);font-weight:700}

/* ── pasii unei comenzi ── */
.pasi{display:flex;gap:0;margin:8px 0 4px;flex-wrap:wrap}
.pas{flex:1;min-width:120px;text-align:center;position:relative;padding-top:34px;font-weight:800;font-size:14px;color:var(--foarte-slab)}
.pas::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--linie);z-index:1}
.pas::after{content:'';position:absolute;top:18px;left:-50%;width:100%;height:3px;background:var(--linie)}
.pas:first-child::after{display:none}
.pas.facut{color:var(--verde)} .pas.facut::before{background:var(--verde);border-color:var(--verde)} .pas.facut::after{background:var(--verde)}
.pas.acum{color:var(--otel)} .pas.acum::before{background:var(--lime);border-color:var(--otel)}

.doc{background:#fff;max-width:880px;margin:0 auto;padding:40px;border:1px solid var(--linie);border-radius:8px}
.doc table{width:100%;border-collapse:collapse} .doc th,.doc td{border-bottom:1px solid var(--linie);padding:8px;text-align:left}
.doc .dr{text-align:right}
.ascuns-pe-hartie{} @media print{.meniu,.banda,.ascuns-pe-hartie,.mesaj{display:none!important}.pagina{padding:0}.doc{border:0}}

@media (max-width:900px){
  .cadru{flex-direction:column}
  .meniu{width:auto;height:auto;position:static;flex:none;flex-direction:row;overflow-x:auto;padding:10px;gap:6px}
  .meniu .marca,.meniu .grup,.meniu .jos{display:none}
  .meniu a{flex:0 0 auto;padding:9px 12px;font-size:14px}
  .pagina{padding:18px 16px}
  h1{font-size:25px}
  .banda{padding:8px 16px}
  /* 2 oct: pe telefon — tabelele fara cadru fac scroll in interiorul lor, nu toata pagina */
  :not(.cutie-tabel)>table.tabel{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabel td{padding:11px 10px} .tabel th{padding:9px 10px}
  .grila>*,.card{min-width:0}   /* un card nu se mai intinde dupa tabelul din el */
  .doc{overflow-x:auto;padding:18px}   /* NIR / factura: documentul de tiparit face scroll in el */
}
@media (max-width:700px){
  /* grilele (si cele cu coloane scrise in pagina, ex. fisa produsului) trec pe o coloana */
  .grila{grid-template-columns:1fr!important}
  .cap{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── 2 oct: depozitul pe rafturi ── */
.raft-cod{display:inline-block;font:800 14px 'Outfit';letter-spacing:.04em;background:var(--otel);color:var(--lime);border-radius:8px;padding:3px 9px;white-space:nowrap}
.raft-cod.mare-cod,.mare-cod{font-size:17px;padding:4px 11px}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--slab);margin:0 0 10px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:16px;height:16px;border-radius:5px;display:inline-block;border:2px solid var(--linie)}
.legenda .l-liber{background:#fff}.legenda .l-plin{background:var(--lime-bg);border-color:#cfe79a}
.legenda .l-putin{background:var(--galben-bg);border-color:#f0d58e}.legenda .l-gasit{background:#fff;border:3px solid var(--albastru)}
.harta{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.zona h3{margin-bottom:10px}
.rafturi{display:grid;gap:8px}
.raft{display:flex;flex-direction:column;gap:4px;background:#f6f8fb;border-radius:10px;padding:5px;border-bottom:5px solid #c9d2de}
.nr-raft{text-align:center;font:800 12px 'Outfit';color:var(--slab);order:99;padding-top:2px}
.polita{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;border-radius:7px;background:#fff;border:2px solid var(--linie);color:var(--foarte-slab);text-decoration:none;line-height:1.1}
.polita:hover{border-color:var(--otel3);text-decoration:none}
.polita .cod{font-size:10px;font-weight:700}
.polita b{font:800 15px 'Outfit';color:var(--otel)}
.polita.plin{background:var(--lime-bg);border-color:#cfe79a}
.polita.putin{background:var(--galben-bg);border-color:#f0d58e}
.polita.gol{background:var(--rosu-bg);border-color:#efb9b9}
.legenda .l-gol{background:var(--rosu-bg);border-color:#efb9b9}
.polita.gasit{border:3px solid var(--albastru);box-shadow:0 0 0 3px #2d6cd226}
.polita.ales{outline:3px solid var(--otel);outline-offset:1px}
@media print{.lista-luat .raft-cod{background:#fff;color:#000;border:2px solid #000}}