/* Gestiune stoc — temă închisă, accent portocaliu */
:root{--bg:#12100e;--pan:#1a1714;--card:#1f1b17;--bd:#302a24;--bd2:#272220;
 --tx:#f0ece7;--tx-2:#a89e93;--tx-3:#736a61;
 --ac:#f97316;--ac-2:#fb923c;--ac-bg:#2a1d12;
 --gr:#4ade80;--gr-bg:#14241a;--am:#fbbf24;--am-bg:#2a2312;--rd:#f87171;--rd-bg:#2b1616;
 --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);
 font:14px/1.45 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.top{background:var(--pan);border-bottom:1px solid var(--bd);padding:13px 26px;display:flex;align-items:center;gap:14px}
.ico{width:36px;height:36px;border-radius:9px;background:linear-gradient(150deg,#fb923c,#c2410c);
 color:#1a1005;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex:none}
h1{font-size:16.5px;font-weight:700}
.top .sub{font-size:12px;color:var(--ac-2);margin-top:1px}
.nav{margin-left:auto;display:flex;gap:7px}
.nav a{padding:8px 16px;border-radius:8px;border:1px solid var(--bd);color:var(--tx-2);
 text-decoration:none;font-size:13.5px}
.nav a.on{background:var(--ac);border-color:var(--ac);color:#1a1005;font-weight:700}
.wrap{padding:22px 26px 46px;max-width:1700px;margin:0 auto}
h2{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx-3);font-weight:700;margin-bottom:13px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:16px 18px}
.k4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
.kpi .k{font-size:12.5px;color:var(--tx-2)}
.kpi .v{font-size:27px;font-weight:700;letter-spacing:-.5px;margin:6px 0 4px;font-family:var(--mono)}
.kpi .s{font-size:12px;color:var(--tx-3)}
.kpi.al{border-color:#4a2320;background:var(--rd-bg)}
.kpi.al .v{color:var(--rd)}
.alert{background:var(--rd-bg);border:1px solid #4a2320;border-radius:9px;padding:12px 15px;
 display:flex;align-items:center;color:#fca5a5;font-size:13.5px;font-weight:600;margin-bottom:16px}
.alert .pill{margin-left:auto;border:1px solid #5a2a26;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:400}
.btn{border:1px solid var(--bd);background:var(--pan);border-radius:8px;padding:8px 15px;font:inherit;
 font-size:13px;color:var(--tx);cursor:pointer}
.btn.p{background:var(--ac);border-color:var(--ac);color:#1a1005;font-weight:700}
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:700;
 text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--bd)}
th.n{text-align:right}
td{padding:12px;border-bottom:1px solid var(--bd2);font-size:13.5px;vertical-align:top}
td.n{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);white-space:nowrap}
.cod{font-family:var(--mono);font-size:12px;color:var(--tx-3)}
.st{display:inline-flex;align-items:center;gap:6px;border-radius:5px;padding:2px 8px;font-size:11.5px;font-weight:700}
.st i{width:6px;height:6px;border-radius:50%;background:currentColor}
.st.ok{background:var(--gr-bg);color:var(--gr)}
.st.wt{background:var(--am-bg);color:var(--am)}
.st.er{background:var(--rd-bg);color:var(--rd)}
/* bara de acoperire */
.cov{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.cov .t{width:96px;height:7px;background:#2a2420;border-radius:99px;overflow:hidden;position:relative;flex:none}
.cov .t b{display:block;height:100%;border-radius:99px}
.cov .t u{position:absolute;top:-3px;width:2px;height:13px;background:var(--tx-3);text-decoration:none}
.cov .v{width:74px;text-align:right;font-family:var(--mono);font-size:12.5px}
/* gestiuni */
.gz{display:flex;gap:7px;font-size:12px;color:var(--tx-3);margin-top:5px;flex-wrap:wrap}
.gz span{background:#241f1b;border-radius:5px;padding:1px 7px;font-family:var(--mono)}
/* miscari */
.mv{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--bd2);font-size:13.5px}
.mv:last-child{border:none}
.mv .d{width:82px;flex:none;color:var(--tx-3);font-family:var(--mono);font-size:12.5px}
.mv .ar{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
 font-size:13px;font-weight:700;flex:none}
.mv .ar.i{background:var(--gr-bg);color:var(--gr)}
.mv .ar.e{background:var(--ac-bg);color:var(--ac-2)}
.mv .q{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mv .doc{width:88px;text-align:right;color:var(--tx-3);font-family:var(--mono);font-size:12px;flex:none}
/* inventar */
.dif{font-family:var(--mono);font-weight:700}
.dif.m{color:var(--rd)}.dif.p{color:var(--gr)}.dif.z{color:var(--tx-3)}

/* telefon */
@media (max-width:820px){
  /* antet: sigla si titlul pe primul rand, navigatia pe al doilea, ca un rand
     care se deruleaza in cutia lui — cele patru butoane cer ~340px singure. */
  .top{padding:11px 14px;flex-wrap:wrap;gap:11px}
  .nav{margin-left:0;width:100%;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav a{flex:none;white-space:nowrap}
  .wrap{padding:14px 14px 34px}
  /* overflow-x pe card e plasa pentru tabele (vezi mai jos) si, in acelasi timp,
     pentru orice caseta al carei continut depaseste cu putin coloana. */
  .card{padding:13px 14px;overflow-x:auto}

  .k4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi .v{font-size:19px}
  .kpi .k{font-size:12px}

  /* alerta: pastila trece sub text in loc sa fie impinsa in dreapta randului. */
  .alert{flex-wrap:wrap;padding:11px 13px}
  .alert .pill{margin-left:0;margin-top:7px}

  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}

  table{min-width:840px}

  [style*="width:180px"],[style*="width:170px"]{width:110px!important}
  [style*="width:110px"],[style*="width:88px"]{width:86px!important}
  /* Aceleasi randuri, plus antetul cu butoane din inventar (titlu + doua
     butoane, ~320px): daca tot nu incap, se rup pe doua linii, nu ies din ecran. */
  .card>div[style*="display:flex"]{flex-wrap:wrap}
  .card span[style*="margin-left:auto"]{margin-left:0!important;flex-wrap:wrap}
  .btn{padding:7px 11px;font-size:12.5px}
}