/* ============================================================================
   Identitate vizuala Caretta
   Culori primare (manual de identitate, cap. 07.1):
     rosu caretta     #E0004D   Pantone 1925C   C0 M100 Y40 K0
     albastru caretta #003349   Pantone 2189C   C100 M90 Y60 K30
   Font corporate: Caretta Office (Regular / Bold)
   Font de sistem: Trebuchet MS
   ========================================================================== */

@font-face {
  font-family: 'Caretta Office';
  src: url('/brand/CarettaOfficeRegular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Caretta Office';
  src: url('/brand/CarettaOfficeBold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* culori de brand */
  --rosu: #E0004D;
  --rosu-inchis: #b5003e;
  --albastru: #003349;
  --albastru-mediu: #0a4a66;
  --albastru-slab: #e6ecef;

  /* suprafete */
  --fundal: #f4f6f7;
  --card: #ffffff;
  --text: #003349;
  --text-slab: #5c7382;
  --linie: #dde4e8;

  /* stari */
  --critic: #E0004D;
  --critic-fundal: #ffe9ef;
  --urgent: #a86800;
  --urgent-fundal: #fff4de;
  --ok: #00695c;
  --ok-fundal: #e0efec;

  --umbra: 0 1px 2px rgba(0,51,73,.06), 0 4px 14px rgba(0,51,73,.05);
  --radius: 10px;

  --font-titlu: 'Caretta Office', 'Trebuchet MS', system-ui, sans-serif;
  --font-corp: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundal: #001e2b;
    --card: #00293a;
    --text: #e8f1f5;
    --text-slab: #8fa9b6;
    --linie: #0d3a4f;
    --albastru-slab: #073349;
    --critic: #ff4d7f;
    --critic-fundal: #3b0d1d;
    --urgent: #e0a83c;
    --urgent-fundal: #35280d;
    --ok: #4dbfae;
    --ok-fundal: #0a2f2b;
    --umbra: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundal);
  color: var(--text);
  font: 14px/1.5 var(--font-corp);
  -webkit-font-smoothing: antialiased;
}

.ascuns { display: none !important; }

/* ------------------------------------------------------------- bara de sus */

.bara {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 12px 22px;
  background: var(--card);
  border-bottom: 3px solid var(--albastru);
  position: sticky; top: 0; z-index: 20;
}
.bara-stanga { display: flex; align-items: center; gap: 16px; min-width: 0; }

/* semnatura grafica: sus-stanga la aplicatiile web, cu spatiu de excludere */
.logo { height: 30px; width: auto; display: block; flex: none; }
.separator-logo { width: 1px; height: 32px; background: var(--linie); flex: none; }

.bara h1 {
  margin: 0; font-family: var(--font-titlu); font-weight: 700;
  font-size: 17px; letter-spacing: -.1px; color: var(--albastru); line-height: 1.25;
}
@media (prefers-color-scheme: dark) { .bara h1 { color: var(--text); } }

.prospetime { font-size: 12.5px; color: var(--text-slab); margin-top: 1px; }
.prospetime b { color: var(--text); font-weight: 700; }
.prospetime .vechi { color: var(--urgent); font-weight: 700; }
.bara-actiuni { display: flex; gap: 8px; }

/* Uneltele de lângă siglă: clopoțelul și exportul. Stau lipite de titlu, nu
   împinse la capăt, ca să se citească drept „ale aplicației", nu „ale listei
   din față". */
.bara-unelte { display: flex; align-items: center; gap: 8px; flex: none; }

.btn {
  border: 1.5px solid var(--linie); border-radius: 6px;
  padding: 8px 16px; font-family: var(--font-corp); font-size: 13.5px; font-weight: 700;
  cursor: pointer; background: var(--card); color: var(--albastru);
  transition: background .12s, border-color .12s, color .12s, transform .06s;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .btn { color: var(--text); } }
.btn:hover { border-color: var(--albastru); background: var(--albastru-slab); }
.btn:active { transform: translateY(1px); }
.btn-primar { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.btn-primar:hover { background: var(--rosu-inchis); border-color: var(--rosu-inchis); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-text-mic {
  background: none; border: none; color: var(--text-slab);
  cursor: pointer; font-size: 12.5px; text-decoration: underline; padding: 4px;
}
.btn-text-mic:hover { color: var(--rosu); }

/* ------------------------------------------------- bara laterala de module */

.aplicatie { display: flex; align-items: flex-start; min-height: calc(100vh - 62px); }

/* Coloana, cu inaltime fixata: altfel "margin-top: auto" de pe blocul cu cine
   esti n-are de ce sa se impinga, iar el ramane lipit sub ultimul modul in loc
   sa stea jos. Lista modulelor e cea care se strange si care se deruleaza cand
   nu incap toate; numele si iesirea raman mereu la vedere. */
.lateral {
  flex: 0 0 214px; align-self: stretch;
  background: var(--albastru); color: #fff;
  padding: 16px 0; position: sticky; top: 62px;
  height: calc(100vh - 62px);
  display: flex; flex-direction: column;
}
.lateral-titlu { flex: none; }
.lateral-titlu {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.45);
  padding: 0 18px 10px;
}
.lateral-lista { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto;
  overflow-y: auto; min-height: 0; }

.lateral-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 18px; border: none; border-left: 3px solid transparent;
  background: none; color: rgba(255,255,255,.82);
  font-family: var(--font-corp); font-size: 13.5px; font-weight: 700;
  transition: background .12s, color .12s, border-color .12s;
}
.lateral-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.lateral-item.activ {
  background: rgba(255,255,255,.12); color: #fff;
  border-left-color: var(--rosu);
}
.lateral-item.inactiv { opacity: .45; cursor: default; }
.lateral-item.inactiv:hover { background: none; }
.lateral-nume { line-height: 1.3; }
.lateral-eticheta {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; padding: 2px 6px; border-radius: 10px;
  background: rgba(255,255,255,.16);
}

.continut { flex: 1; min-width: 0; }

.modul-antet { padding: 18px 22px 0; }
.modul-antet h2 {
  margin: 0; font-family: var(--font-titlu); font-weight: 700;
  font-size: 19px; letter-spacing: -.2px; color: var(--albastru);
}
@media (prefers-color-scheme: dark) { .modul-antet h2 { color: var(--text); } }
.modul-antet p { margin: 2px 0 0; font-size: 13px; color: var(--text-slab); }

@media (max-width: 900px) {
  .aplicatie { display: block; }
  .lateral {
    position: static; height: auto; max-height: none; padding: 8px 0;
    /* Pe orizontala, nu pe verticala: regula de baza o aseaza in coloana, iar
       fara randul asta modulele se stivuiau unul sub altul si bara manca o
       cincime din ecranul telefonului. */
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
    gap: 2px; overflow-x: auto;
  }
  .lateral-titlu { display: none; }
  .lateral-lista { flex-direction: row; }
  .lateral-item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .lateral-item.activ { border-left: none; border-bottom-color: var(--rosu); }
}

/* ---------------------------------------------------------------- banner */

.banner {
  margin: 12px 22px 0; padding: 10px 14px;
  border-radius: 6px; font-size: 13px;
  background: var(--urgent-fundal); color: var(--urgent);
  border-left: 3px solid var(--urgent);
}
.banner.eroare { background: var(--critic-fundal); color: var(--critic); border-left-color: var(--critic); }
.banner.succes { background: var(--ok-fundal); color: var(--ok); border-left-color: var(--ok); }

/* ------------------------------------------------------------------- KPI */

/* Cardurile sunt compacte dinadins: sunt multe si se tot adauga, iar cine se
   uita la ele vrea sa le prinda pe toate dintr-o privire, nu sa deruleze. */
.kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px; padding: 14px 22px 4px;
}
.kpi-card {
  background: var(--card); border: 1px solid var(--linie);
  border-top: 3px solid var(--albastru);
  border-radius: var(--radius); padding: 9px 11px; box-shadow: var(--umbra);
  cursor: pointer; transition: border-color .12s, transform .08s, box-shadow .12s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,51,73,.12); }
.kpi-card.critic { border-top-color: var(--critic); }
.kpi-card.urgent { border-top-color: var(--urgent); }
.kpi-card.ok { border-top-color: var(--ok); }
/* Eticheta spune la ce se uita omul; cifra spune doar cat. De aceea e scrisa
   apasat, nu ca o legenda sub cifra. */
.kpi-eticheta {
  font-size: 13px; color: var(--albastru); text-transform: uppercase;
  letter-spacing: .4px; font-weight: 700; line-height: 1.25;
}
@media (prefers-color-scheme: dark) { .kpi-eticheta { color: var(--text); } }

/* Rupe randul de carduri: grupurile care raspund la intrebari diferite nu se
   amesteca pe acelasi rand. */
.kpi-rupe { grid-column: 1 / -1; height: 0; }
.kpi-valoare {
  font-family: var(--font-titlu); font-size: 23px; font-weight: 700;
  margin-top: 1px; letter-spacing: -.5px; font-variant-numeric: tabular-nums;
  color: var(--albastru); line-height: 1.1;
}
@media (prefers-color-scheme: dark) { .kpi-valoare { color: var(--text); } }
/* Procentul sta langa cifra, nu sub ea: cifra spune cate, procentul cat de mult
   inseamna din total. Scris mai mic, ca sa nu concureze cu ea. */
.kpi-procent {
  font-family: var(--font-corp); font-size: 12.5px; font-weight: 700;
  color: var(--text-slab); margin-left: 6px; letter-spacing: 0;
}
.kpi-detaliu { font-size: 11px; color: var(--text-slab); margin-top: 1px; line-height: 1.3; }
.kpi-card.critic .kpi-valoare { color: var(--critic); }
.kpi-card.urgent .kpi-valoare { color: var(--urgent); }
.kpi-card.ok .kpi-valoare { color: var(--ok); }

/* ---------------------------------------------------------------- taburi */

.tab-uri { display: flex; gap: 2px; padding: 16px 22px 0; flex-wrap: wrap; }
.tab {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 8px 14px; font-family: var(--font-corp); font-size: 14px; font-weight: 700;
  color: var(--text-slab); cursor: pointer; border-radius: 5px 5px 0 0;
}
.tab:hover { color: var(--albastru); background: var(--albastru-slab); }
@media (prefers-color-scheme: dark) { .tab:hover { color: var(--text); } }
.tab.activ { color: var(--rosu); border-bottom-color: var(--rosu); }
.pastila {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
  background: var(--albastru); color: #fff;
  border-radius: 20px; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tab.activ .pastila { background: var(--rosu); }

/* ---------------------------------------------------------------- filtre */

.filtre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 22px; border-bottom: 1px solid var(--linie); background: var(--card);
}
.cautare {
  flex: 1 1 240px; max-width: 340px;
  padding: 7px 12px; border: 1.5px solid var(--linie); border-radius: 6px;
  background: var(--fundal); color: var(--text);
  font-family: var(--font-corp); font-size: 13.5px;
}
.cautare::placeholder { color: var(--text-slab); }
.cautare:focus { outline: none; border-color: var(--albastru); background: var(--card); }
.grup-chip { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  padding: 5px 12px; border: 1.5px solid var(--linie); border-radius: 20px;
  background: var(--card); color: var(--text-slab);
  font-family: var(--font-corp); font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .12s;
}
.chip:hover { border-color: var(--albastru); color: var(--albastru); }
@media (prefers-color-scheme: dark) { .chip:hover { color: var(--text); } }
.chip.activ { background: var(--albastru); border-color: var(--albastru); color: #fff; }
.chip.activ.critic { background: var(--critic); border-color: var(--critic); color: #fff; }
.chip.activ.urgent { background: var(--urgent); border-color: var(--urgent); color: #fff; }
.chip.activ.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
/* marfa vanduta, nu doar sub minim: rosul marcii, ca sa se vada ca e alta treaba */
.chip.activ.pe-comenzi { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.comutator { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-slab); cursor: pointer; }
.comutator input { accent-color: var(--rosu); width: 15px; height: 15px; cursor: pointer; }
.comutator.inactiv { opacity: .4; text-decoration: line-through; }

/* rand separat pentru simbolurile de gestiune */
.filtre-gestiuni { padding-top: 9px; padding-bottom: 9px; align-items: flex-start; }
.filtre-gestiuni.continuare { border-top: none; padding-top: 0; }
.eticheta-filtru {
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-slab);
  padding-top: 6px; flex: none; min-width: 66px;
}
.chip-gestiune { font-family: "Consolas", "Courier New", monospace; letter-spacing: .2px; }
.chip-gestiune .numar {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 10px; font-size: 10.5px; font-weight: 700;
  background: var(--critic); color: #fff; vertical-align: 1px;
}
.chip-gestiune.activ .numar { background: rgba(255,255,255,.28); }
.chip-gestiune.fara-necesar { opacity: .62; }
.chip-mai-multe { border-style: dashed; }

/* ----------------------------------------------------------------- tabel */

main { padding: 0 22px 40px; }

/* ------------------------------------------ totalurile de deasupra tabelului */

.totaluri {
  display: flex; flex-wrap: wrap; gap: 1px;
  margin-top: 14px; overflow: hidden;
  background: var(--linie);
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--umbra);
}
.total-celula {
  flex: 1 1 116px; min-width: 106px;
  background: var(--card); padding: 9px 13px;
}
.total-eticheta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-slab);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.total-valoare {
  font-family: var(--font-titlu); font-weight: 700; font-size: 19px;
  letter-spacing: -.3px; font-variant-numeric: tabular-nums;
  color: var(--albastru); margin-top: 1px;
}
@media (prefers-color-scheme: dark) { .total-valoare { color: var(--text); } }
.total-celula.accent { background: color-mix(in srgb, var(--critic-fundal) 70%, var(--card)); }
.total-celula.accent .total-valoare { color: var(--rosu); }
.total-celula.total-pozitii { flex: 0 0 auto; min-width: 88px; background: var(--albastru); }
.total-celula.total-pozitii .total-eticheta { color: rgba(255,255,255,.7); }
.total-celula.total-pozitii .total-valoare { color: #fff; }

.totaluri + .tabel-container { margin-top: 10px; }
.tabel-container {
  background: var(--card); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--umbra);
  /* Inaltimea tabelului: cat a ramas din ecran sub antet, dar niciodata sub
     320 px. Fara plasa asta, o fereastra scunda - un laptop cu bara de
     activitati mare, un browser cu doua randuri de unelte, o pagina marita la
     150% - facea socoteala zero sau negativa, iar tabelul disparea cu totul.
     Randurile erau acolo, cifrele de sub el la fel; doar ca nu se vedea nimic.
     Mai bine se deruleaza toata pagina decat sa nu se vada nimic. */
  overflow: auto; max-height: max(320px, calc(100vh - 340px)); margin-top: 14px;
}
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tabel th {
  position: sticky; top: 0; z-index: 2;
  background: var(--albastru); color: #fff;
  padding: 10px 12px; text-align: left; font-weight: 700; font-size: 12px;
  letter-spacing: .3px; white-space: nowrap; cursor: pointer; user-select: none;
  border-bottom: none;
}
.tabel th:first-child { border-top-left-radius: 0; }
.tabel th:hover { background: var(--albastru-mediu); }
.tabel th { padding-right: 6px; }
.tabel th .th-titlu { cursor: pointer; }
.tabel th .th-titlu:hover { text-decoration: underline; }
.tabel th.num .th-titlu { display: inline-block; }
.tabel th.filtrat { background: var(--rosu); }
.tabel th.filtrat:hover { background: var(--rosu-inchis); }

.th-filtru {
  border: none; background: rgba(255,255,255,.16); color: #fff;
  border-radius: 3px; cursor: pointer; margin-left: 6px;
  font-size: 8px; line-height: 1; padding: 3px 4px; vertical-align: middle;
  opacity: .65; transition: opacity .12s, background .12s;
}
.th-filtru:hover { opacity: 1; background: rgba(255,255,255,.35); }
.th-filtru.activ { opacity: 1; background: #fff; color: var(--rosu); }

.tabel th.num, .tabel td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabel td { padding: 8px 12px; border-bottom: 1px solid var(--linie); }
.tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--albastru-slab) 45%, transparent); }
.tabel tbody tr:hover { background: var(--albastru-slab); }
.tabel tbody tr:last-child td { border-bottom: none; }
.sageata { opacity: .8; font-size: 9px; margin-left: 4px; }

.cod-gestiune {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: var(--albastru-slab); color: var(--albastru);
  font-family: "Consolas", "Courier New", monospace;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: help;
}
@media (prefers-color-scheme: dark) { .cod-gestiune { color: var(--text); } }

/* coloanele care descriu filiala sursa, vizual separate de restul */
.tabel th.grup-sursa, .tabel td.grup-sursa {
  background: color-mix(in srgb, var(--albastru-slab) 55%, transparent);
}
.tabel th.grup-sursa { background: var(--albastru-mediu); }
.tabel tbody tr:hover td.grup-sursa { background: var(--albastru-slab); }
.de-trimis { font-weight: 700; color: var(--ok); }
.suplimentar {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 10px; font-size: 10.5px; font-weight: 700;
  background: var(--ok-fundal); color: var(--ok); cursor: help;
}
/* pozitie mutata integral pe productie: transferul e anulat intentionat */
.anulat { color: var(--text-slab); cursor: help; text-decoration: line-through; opacity: .75; }
.mutat {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 10px; font-size: 10.5px; font-weight: 700;
  background: var(--albastru-slab); color: var(--albastru); cursor: help;
}
@media (prefers-color-scheme: dark) { .mutat { color: var(--text); } }
/* Iasiul sub propriul minim: informatie, nu avertisment - acolo se produce
   local si rapid, iar articolul apare oricum in tabul de productie. */
.sub-minim {
  color: var(--text-slab); cursor: help;
  text-decoration: underline dotted var(--urgent); text-underline-offset: 3px;
}
.insuficient {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 10px; font-size: 10.5px; font-weight: 700;
  background: var(--urgent-fundal); color: var(--urgent); cursor: help;
}

.fasii {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 10px; font-size: 10.5px; font-weight: 700;
  background: var(--albastru-slab); color: var(--albastru); cursor: help;
}
@media (prefers-color-scheme: dark) { .fasii { color: var(--text); } }

/* unitatea de masura, mica, langa cantitate - nu concureaza cu cifra */
.um-mic {
  margin-left: 4px; font-size: 10.5px; font-weight: 600;
  color: var(--text-slab); text-transform: lowercase;
}

/* numarul comenzii clientului: cifre, deci monospatiat si aliniat */
.comanda-client {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
}

/* comanda pornita pe post: are un rest inceput, deci nu se mai reprogrameaza */
.stare-inceputa {
  font-size: 12px; font-weight: 700; color: var(--albastru); cursor: help;
}
@media (prefers-color-scheme: dark) { .stare-inceputa { color: var(--text); } }

/* ------------------------------------------------------------- filiale
   Aproape fiecare lista amesteca randuri de la Iasi si de la Filipesti, iar
   ochiul nu le desparte: doua cuvinte cu majuscule, la fel de lungi si de
   cenusii. Fiecare filiala isi are culoarea ei, aceeasi peste tot - in coloana
   de filiala, pe simbolul gestiunii, pe butoanele de filtru si in capul paginii.

   Culorile stau deoparte de cele de stare: rosul, ambra si verdele inseamna
   deja critic, urgent si suficient, asa ca aici se folosesc albastrul marcii
   pentru Iasi si un violet pentru Filipesti - o nuanta care nu apare nicaieri
   altundeva in aplicatie. */
.filiala {
  display: inline-block; padding: 1px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  background: var(--fundal); color: var(--text-slab);
}
.filiala-iasi { background: #e3edf2; color: #0a4a66; }
.filiala-filipesti { background: #ede4f5; color: #6b3fa0; }
.filiala-isalnita { background: #e8efe6; color: #3d6b46; }

@media (prefers-color-scheme: dark) {
  .filiala-iasi { background: #0a3348; color: #7fc4e8; }
  .filiala-filipesti { background: #2a1d3d; color: #c0a3e8; }
  .filiala-isalnita { background: #1b2e20; color: #8fc79a; }
}

/* simbolul gestiunii poarta aceeasi culoare, dar mai discret: sunt multe
   pe ecran si n-au voie sa strige */
.cod-gestiune.filiala-filipesti { background: #ede4f5; color: #6b3fa0; }
.cod-gestiune.filiala-isalnita { background: #e8efe6; color: #3d6b46; }
@media (prefers-color-scheme: dark) {
  .cod-gestiune.filiala-filipesti { background: #2a1d3d; color: #c0a3e8; }
  .cod-gestiune.filiala-isalnita { background: #1b2e20; color: #8fc79a; }
}

/* butoanele de filtru: cand sunt apasate iau culoarea filialei lor */
.chip-filiala.filiala-iasi.activ { background: #0a4a66; border-color: #0a4a66; }
.chip-filiala.filiala-filipesti.activ { background: #6b3fa0; border-color: #6b3fa0; }
.chip-filiala.filiala-isalnita.activ { background: #3d6b46; border-color: #3d6b46; }
.chip-gestiune.filiala-filipesti.activ { background: #6b3fa0; border-color: #6b3fa0; }
.chip-gestiune.filiala-isalnita.activ { background: #3d6b46; border-color: #3d6b46; }

/* seria ruloului: cod de bobina, deci monospatiat ca sa se compare usor */
.serie-rulou {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 12px; letter-spacing: .2px;
}
/* capat de rulou: sub pragul de la care merita consumat */
.sub-prag { font-weight: 700; color: var(--rosu); cursor: help; }

.motiv { font-size: 12.5px; color: var(--text-slab); cursor: help; }
.motiv.grav { color: var(--critic); font-weight: 700; }

.principal { font-weight: 700; }
.slab { color: var(--text-slab); font-size: 12.5px; }
.necesar { font-weight: 700; font-variant-numeric: tabular-nums; }
.necesar.pozitiv { color: var(--rosu); }

.eticheta {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.eticheta.critic { background: var(--critic); color: #fff; }
.eticheta.urgent { background: var(--urgent-fundal); color: var(--urgent);
  box-shadow: inset 0 0 0 1.5px var(--urgent); }
.eticheta.ok { background: var(--ok-fundal); color: var(--ok); }
.eticheta.neutru { background: var(--fundal); color: var(--text-slab); }

.bara-acoperire {
  position: relative; width: 62px; height: 6px;
  background: var(--linie); border-radius: 4px; overflow: hidden; display: inline-block;
  vertical-align: middle; margin-right: 7px;
}
.bara-acoperire i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.bara-acoperire i.critic { background: var(--critic); }
.bara-acoperire i.urgent { background: var(--urgent); }
.bara-acoperire i.ok { background: var(--ok); }

.gol { text-align: center; padding: 56px 20px; color: var(--text-slab); }
.gol-icon {
  width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--ok-fundal); color: var(--ok);
  font-size: 24px; line-height: 48px; font-weight: 700;
}
.subsol { padding: 10px 4px; font-size: 12.5px; color: var(--text-slab); }
.subsol b { color: var(--text); }

/* Nuanta tablei difera de la un furnizor la altul, iar diferenta se vede abia
   dupa montaj. Semnul sta pe randul care se schimba, nu deasupra tabelului:
   asa se vede exact la ce tabla e vorba, fara sa acopere lista. */
.semn-nuanta {
  display: inline-block; margin-left: 6px; padding: 0 7px;
  border-radius: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  background: var(--critic); color: #fff; cursor: help;
}

/* Ordinea de lucru la feliere. Culoarea spune din ce criteriu vine: comanda
   client, produs critic, produs urgent, sau fasia cu stocul cel mai mic. */
.prio {
  display: inline-block; min-width: 26px; padding: 1px 6px;
  border-radius: 10px; font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; cursor: help; text-align: center;
}
.prio-1 { background: var(--critic); color: #fff; }
.prio-2 { background: var(--critic-fundal); color: var(--critic); }
.prio-3 { background: var(--urgent-fundal); color: var(--urgent); }
.prio-4 { background: var(--albastru-slab); color: var(--text-slab); }
/* Taierea urcata langa ruloul care e deja pe masina. Sta lipita de cifra, in
   gri: nu e o prioritate noua, e explicatia pozitiei. */
.prio-rulou {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  border: 1px solid var(--linie); border-radius: 9px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-slab); cursor: help; vertical-align: middle;
}

/* Bucatile de luat de pe raft, cu seria lor: fara ele, o retaiere spune cate
   kilograme, dar nu si care bucata anume. */
.serii-lot { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.serii-lot .serie-rulou { cursor: help; }

/* Randurile de feliere care stiu ce se produce mai departe se pot desface. */
tr.rand-desfacibil { cursor: pointer; }
tr.rand-desfacibil:hover td { background: var(--albastru-slab); }
tr.rand-desfacibil.desfacut td { background: var(--albastru-slab); font-weight: 600; }

tr.rand-detaliu td { padding: 0; background: var(--fundal); }
.det-titlu {
  font-family: var(--font-titlu); font-weight: 700; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-slab);
  padding: 9px 16px 5px;
}
.det-fasie {
  display: flex; gap: 14px; align-items: baseline;
  padding: 5px 16px; border-top: 1px solid var(--linie);
}
.det-latime {
  flex: none; min-width: 76px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--albastru);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
@media (prefers-color-scheme: dark) { .det-latime { color: var(--text); } }
.det-linii { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-bottom: 3px; }

/* Impartirea pe comenzi / pe stoc, inaintea articolelor. */
.det-rezumat {
  display: flex; gap: 9px; align-items: baseline;
  margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--linie);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.det-rez-comenzi { font-weight: 700; color: var(--critic); cursor: help; }
.det-rez-stoc { font-weight: 700; color: var(--text-slab); cursor: help; }
.det-rez-sep { color: var(--linie); }
.det-linie { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.det-produs { flex: 1; }

/* Butonul de eticheta. Sta stins pana se trece cu mausul peste linie: sunt
   multe linii pe ecran si, aprinse toate, ar trage ochiul de la cifre. */
.det-eticheta {
  flex: none; cursor: pointer; font: inherit; font-size: 11px;
  padding: 2px 8px; border-radius: 5px;
  border: 1px solid var(--linie); background: var(--card); color: var(--text-slab);
  opacity: 0; transition: opacity .12s, border-color .12s, color .12s;
}
.det-fasie:hover .det-eticheta, .det-eticheta:focus-visible { opacity: 1; }
.det-eticheta:hover { border-color: var(--albastru); color: var(--albastru); }
@media (prefers-color-scheme: dark) {
  .det-eticheta:hover { border-color: var(--text); color: var(--text); }
}
/* Pe ecran tactil nu exista "trecut cu mausul", deci butonul se vede mereu. */
@media (hover: none) { .det-eticheta { opacity: 1; } }
/* Eticheta se printeaza singura, din iframe-ul ei: pe hartia A4 butonul n-are
   ce cauta. */
@media print { .det-eticheta { display: none; } }

/* Butonul care scoate toate etichetele tăierii. Spre deosebire de cel de
   lățime, ăsta nu se ascunde până trece mausul peste el: e prima apăsare a
   celui care tocmai a desfăcut tăierea, nu una căutată. */
.det-titlu { display: flex; align-items: center; gap: 12px; }
.det-eticheta-tot {
  opacity: 1; margin-left: auto; margin-right: 4px;
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 650;
  border-color: var(--albastru); color: var(--albastru);
}
.det-eticheta-tot:hover { background: var(--albastru); color: #fff; border-color: var(--albastru); }
@media (prefers-color-scheme: dark) {
  .det-eticheta-tot:hover { background: var(--albastru); color: #fff; }
}
.det-marca {
  display: inline-block; margin-left: 7px; padding: 0 6px;
  border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: .2px;
  background: var(--critic); color: #fff; cursor: help; vertical-align: 1px;
}
/* Ce se face pentru raft nu e urgent: eticheta o spune, dar nu striga. */
.det-marca-stoc { background: var(--albastru-slab); color: var(--text-slab); }
.det-stoc { flex: 1; color: var(--text-slab); }
.det-cant { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Cele doua motive ale cantitatii: ce tine un termen si ce umple raftul. */
.det-parte-comenzi { color: var(--critic); }
.det-parte-stoc { color: var(--text-slab); font-weight: 600; }
.det-plus { margin: 0 5px; color: var(--text-slab); font-weight: 400; }

/* Retaierea dintr-o fasie deja aflata pe raft: alta operatie decat felierea
   unui rulou nou si prima la rand, deci se vede ca atare. */
tr.rand-din-stoc td { background: var(--albastru-slab); }
tr.rand-din-stoc td:first-child { box-shadow: inset 3px 0 0 var(--albastru); }

/* Ce contine tabul curent. Numai acolo unde titlul singur nu lamureste. */
.sectiune-descriere {
  margin: -4px 4px 10px; padding: 8px 12px;
  border-left: 3px solid var(--albastru);
  background: var(--albastru-slab); border-radius: 0 6px 6px 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-slab);
  max-width: 92ch;
}

/* ------------------------------------------- panoul de filtrare pe coloana */

.panou-filtru {
  position: absolute; z-index: 40;
  /* Larg cat sa incapa denumirile intregi de articol - "SEMIFABRICAT 113.6MM
     1046 3005 BRILIANT DUO 0.60" nu se poate alege daca se vede pe jumatate.
     Panoul se ingusteaza singur la continut si nu iese din ecran: pozitionarea
     il trage inapoi la marginea din dreapta. */
  min-width: 232px; max-width: min(620px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--linie);
  border-top: 3px solid var(--rosu);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,51,73,.22);
  padding: 12px; font-size: 13px;
}
.panou-titlu {
  font-family: var(--font-titlu); font-weight: 700; font-size: 13px;
  color: var(--albastru); margin-bottom: 9px;
}
@media (prefers-color-scheme: dark) { .panou-titlu { color: var(--text); } }

.panou-cautare {
  width: 100%; padding: 5px 9px; margin-bottom: 8px;
  border: 1.5px solid var(--linie); border-radius: 5px;
  background: var(--fundal); color: var(--text);
  font-family: var(--font-corp); font-size: 12.5px;
}
.panou-cautare:focus { outline: none; border-color: var(--albastru); }

.panou-lista { max-height: 246px; overflow-y: auto; margin: 0 -4px; }
.panou-optiune {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
}
.panou-optiune:hover { background: var(--albastru-slab); }
.panou-optiune input { accent-color: var(--rosu); width: 14px; height: 14px; cursor: pointer; flex: none; }
.panou-eticheta { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panou-numar {
  font-size: 11px; font-weight: 700; color: var(--text-slab);
  font-variant-numeric: tabular-nums; flex: none;
}

.panou-interval { display: flex; gap: 8px; }
.panou-interval label {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; color: var(--text-slab);
}
.panou-interval input {
  padding: 5px 8px; border: 1.5px solid var(--linie); border-radius: 5px;
  background: var(--fundal); color: var(--text);
  font-family: var(--font-corp); font-size: 13px; width: 100%;
}
.panou-interval input:focus { outline: none; border-color: var(--albastru); }
.panou-info { font-size: 11.5px; color: var(--text-slab); margin-top: 7px; }

.panou-actiuni {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--linie);
}
.panou-actiuni .btn { margin-left: auto; }
.btn-mic { padding: 5px 12px; font-size: 12.5px; }

/* --------------------------------------------------- versiunea de printat */

.print-fereastra {
  position: fixed; inset: 0; z-index: 60;
  background: var(--fundal); overflow: auto;
}
body.cu-print { overflow: hidden; }

.print-bara {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 22px; background: var(--card);
  border-bottom: 3px solid var(--albastru);
}
.print-bara-titlu {
  font-family: var(--font-titlu); font-weight: 700; font-size: 16px;
  color: var(--albastru);
}
@media (prefers-color-scheme: dark) { .print-bara-titlu { color: var(--text); } }
.print-bara-actiuni { display: flex; gap: 8px; margin-left: auto; }

.print-comutator {
  display: flex; gap: 2px; padding: 3px;
  background: var(--fundal); border-radius: 8px;
}
.print-optiune {
  border: none; background: none; cursor: pointer;
  padding: 6px 14px; border-radius: 6px;
  font-family: var(--font-corp); font-size: 13px; font-weight: 700;
  color: var(--text-slab);
}
.print-optiune:hover { color: var(--albastru); }
@media (prefers-color-scheme: dark) { .print-optiune:hover { color: var(--text); } }
.print-optiune.activ { background: var(--albastru); color: #fff; }

/* Foile, dimensionate ca pagini A4 LANDSCAPE. Lista are coloane inguste,
   deci latimea in plus se imparte in doua coloane de tabel pe pagina. */
.print-pagina { padding: 22px 0 40px; }
.print-foaie {
  background: #fff; color: #000;
  width: 297mm; min-height: 210mm; margin: 0 auto 22px;
  padding: 8mm; box-shadow: 0 4px 24px rgba(0,51,73,.18);
  display: flex; flex-direction: column;
}

.print-antet {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 2px solid #003349;
}
.print-logo { height: 26px; width: auto; flex: none; }
.print-titlu { flex: 1; }
.print-titlu h1 {
  margin: 0; font-family: var(--font-titlu); font-size: 18px;
  font-weight: 700; color: #003349; letter-spacing: -.2px;
}
.print-subtitlu { font-size: 11px; color: #55636b; margin-top: 2px; }
.print-pagina-nr { font-size: 11px; color: #55636b; white-space: nowrap; }

/* foaia folosita doar pentru masurarea inaltimii randurilor, invizibila */
.print-proba {
  position: absolute; left: -10000px; top: 0;
  visibility: hidden; pointer-events: none;
}

.print-coloane { display: flex; gap: 10mm; align-items: flex-start; flex: 1; }
.print-coloane > * { flex: 1 1 0; min-width: 0; }
.print-coloana-goala { visibility: hidden; }

/* table-layout: fixed este esential. Altfel latimea coloanelor depinde de
   continut, iar proba de masurare (toate randurile) ar da alte latimi decat
   pagina randata (30 de randuri) - deci alte ruperi de rand si alte inaltimi. */
.print-tabel {
  width: 100%; border-collapse: collapse; font-size: 11.5px;
  table-layout: fixed;
}
.print-tabel .part { width: 36%; }
.print-tabel .pral { width: 22%; }
.print-tabel .pgros { width: 8%; }

/* cand lista cuprinde mai multe filiale, articolul cedeaza din latime */
.print-tabel.cu-filiala .pfil { width: 13%; font-weight: 700; }
.print-tabel.cu-filiala .part { width: 27%; }
.print-tabel.cu-filiala .pral { width: 20%; }
.print-tabel.cu-filiala .pgros { width: 7%; }
.print-tabel.cu-filiala .pcant { width: 12%; }
.print-tabel.cu-filiala .pscris { width: 15%; }

/* tabel pe latimea intreaga a foii: incap mai multe coloane fara ca denumirile
   sa se rupa, deci se foloseste acolo unde sunt doua cantitati de aratat */
.print-tabel.lat { font-size: 12px; }
.print-tabel.lat .pnr { width: 4%; }
.print-tabel.lat .pstare { width: 7%; }
.print-tabel.lat .part { width: 23%; }
.print-tabel.lat .pral { width: 13%; }
.print-tabel.lat .pgros { width: 5%; }
.print-tabel.lat .pdimsemi { width: 10%; }
.print-tabel.lat .pstoc { width: 7%; color: #55636b; }
.print-tabel.lat .pcant { width: 10%; }
.print-tabel.lat .pscris { width: 14%; }
.print-tabel.lat.cu-filiala .pnr { width: 3%; }
.print-tabel.lat.cu-filiala .pfil { width: 10%; }
.print-tabel.lat.cu-filiala .pstare { width: 6%; }
.print-tabel.lat.cu-filiala .part { width: 23%; }
.print-tabel.lat.cu-filiala .pral { width: 11.5%; }
.print-tabel.lat.cu-filiala .pgros { width: 4%; }
.print-tabel.lat.cu-filiala .pdimsemi { width: 8.5%; }
.print-tabel.lat.cu-filiala .pstoc { width: 6%; }
.print-tabel.lat.cu-filiala .pcant { width: 8.5%; }
.print-tabel.lat.cu-filiala .pscris { width: 11%; }
/* Varianta pentru fluxurile de la presa de pai: fara grosime, care e aceeasi
   peste tot, dar cu stocul fiecarei filiale si cu totalul lor. */
.print-tabel.lat.cu-stocuri .pnr { width: 4%; }
.print-tabel.lat.cu-stocuri .pstare { width: 7%; }
.print-tabel.lat.cu-stocuri .part { width: 20%; }
.print-tabel.lat.cu-stocuri .pral { width: 12%; }
.print-tabel.lat.cu-stocuri .pstoc { width: 8%; color: #55636b; }
.print-tabel.lat.cu-stocuri .pstoctotal { width: 9%; font-weight: 700; }
.print-tabel.lat.cu-stocuri .pcant { width: 10%; }
.print-tabel.lat.cu-stocuri .pscris { width: 14%; }
.print-tabel th.pstoc, .print-tabel th.pstoctotal { background: #0a4a66; }
.print-tabel td.pstoctotal { border-left: 1px solid #dde4e8; }

/* bonul de croire de la presa de pai: alte coloane decat listele de productie */
.print-tabel.print-tabla { font-size: 11px; }
.print-tabel.print-tabla .pnr { width: 3.5%; }
.print-tabel.print-tabla .pral { width: 13%; }
.print-tabel.print-tabla .pstare { width: 7%; }
.print-tabel.print-tabla .part { width: 21%; }
.print-tabel.print-tabla .pbucata { width: 11%; }
.print-tabel.print-tabla .pbuc { width: 6.5%; font-weight: 700; }
.print-tabel.print-tabla .psemi { width: 16%; }
.print-tabel.print-tabla .pdincola { width: 8%; color: #55636b; }
.print-tabel.print-tabla .pcant { width: 6%; }
.print-tabel.print-tabla .pscris { width: 11%; }
.print-tabel.print-tabla td.psemi, .print-tabel.print-tabla td.part { overflow-wrap: break-word; }

.print-tabel th {
  background: #003349; color: #fff; text-align: left;
  padding: 5px 6px; font-weight: 700; font-size: 10px;
  letter-spacing: .2px; text-transform: uppercase;
}
/* randuri ceva mai inalte decat ar cere textul: ultima coloana se completeaza
   de mana, iar un rand strans nu lasa loc de pix */
.print-tabel td { padding: 5px 6px; border-bottom: 1px solid #dde4e8; }
.print-tabel tbody tr:nth-child(even) td { background: #f4f7f8; }
.print-tabel .pnr { width: 6%; color: #8a969c; text-align: right; }
.print-tabel .pnum { text-align: right; font-variant-numeric: tabular-nums; }
.print-tabel .pcant { width: 13%; font-weight: 700; }
.print-tabel td.part, .print-tabel td.pral { overflow-wrap: break-word; }

/* Starea articolului, scrisa in litere in stanga denumirii.
   Listele se scot pe imprimanta alb-negru, unde rosul iese un gri mai sters
   decat textul normal - exact pe dos. De aceea marcajul nu se sprijina deloc pe
   culoare: cuvantul spune ce e, eticheta plina il desparte de cea conturata,
   iar bara din margine se vede si cand rasfoiesti teancul. */
.print-tabel .pstare { width: 8%; }
.print-tabel .stare-critic, .print-tabel .stare-urgent {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px; line-height: 1.5;
}
.print-tabel .stare-critic { background: #003349; color: #fff; }
.print-tabel .stare-urgent { border: 1.5px solid #003349; color: #003349; }

.print-tabel tr.critic td { font-weight: 700; }
.print-tabel tr.critic td.pnr { border-left: 3px solid #003349; font-weight: 700; }
.print-tabel tr.urgent td.pnr { border-left: 3px solid #8a969c; }

/* Articolele cu client care asteapta: prioritatea intai. Steluta sta in fata
   denumirii, ca sa nu se incurce cu "critic" sau "urgent" - un articol poate fi
   si vandut, si sub minim. Bara dubla din margine se vede si cand rasfoiesti
   teancul, fara sa depinda de culoare. */
.print-tabel .semn-comanda { font-size: 11px; margin-right: 4px; line-height: 1; }
/* cat cere clientul, chiar inaintea stelutei */
.print-tabel .cant-comanda { font-weight: 700; margin-right: 3px; }
.print-tabel tr.pe-comanda td { font-weight: 700; }
.print-tabel tr.pe-comanda td.pnr {
  border-left: 3px double #003349; border-left-width: 5px;
}
.print-tabel tr.pe-comanda.critic td.pnr { border-left: 5px double #003349; }

.print-legenda {
  margin-top: 6px; font-size: 10px; color: #55636b;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.print-legenda .stare-critic, .print-legenda .stare-urgent { flex: none; }
.print-legenda .semn-comanda { flex: none; font-size: 13px; color: #003349; }
/* prioritatea intai: se citeste inaintea celorlalte, deci scrie apasat */
.print-legenda .legenda-tare {
  font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #003349;
}

/* Bonul de croire: ce se taie si ce se face din ce s-a taiat, pe acelasi rand. */
.print-croire .pnr { width: 3%; }
.print-croire .pral { width: 15%; }
.print-croire .pschema { width: 20%; }
.print-croire .pcant { width: 6%; }
.print-croire .pdeprodus { width: 38%; }
.print-croire .pscris { width: 12%; }
.print-croire td { vertical-align: top; }

.print-croire .pfasie { margin-bottom: 3px; }
.print-croire .pfasie:last-child { margin-bottom: 0; }
.print-croire .pfasie-cap {
  font-weight: 700; font-size: 10.5px; color: #003349;
  border-bottom: 1px solid #d4dade;
}
.print-croire .pfasie-rezumat {
  font-size: 10px; font-weight: 700; padding-left: 8px;
  font-variant-numeric: tabular-nums;
}
.print-croire .pfasie-linie { font-size: 10.5px; padding-left: 8px; }
.print-croire .pkg { font-variant-numeric: tabular-nums; color: #55636b; }
.print-croire .pnota { font-size: 9.5px; font-style: italic; color: #55636b; }
/* Seriile bucatilor de luat de pe raft. Se scriu apasat: fara ele omul ajunge
   la raft si nu stie care bucata e a lui. */
.print-croire .pserii { font-size: 9.5px; font-weight: 700; margin-top: 2px; }
/* fasia care se retaie din stoc: se face prima, deci se vede din prima */
.print-croire tr.din-stoc .pral { border-left: 3px solid #003349; padding-left: 5px; }

/* Nuanta difera de la un furnizor la altul si diferenta se vede abia dupa
   montaj. Pe hartie, alb-negru, avertismentul se sprijina pe chenar si pe
   majuscule, nu pe culoare. */
.print-croire .pnuanta {
  margin-top: 3px; padding: 3px 5px;
  border: 1.5px solid #000; background: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .2px;
}

/* coloana de completat de gestionar / seful de sectie */
.print-tabel .pscris { width: 15%; border-left: 1px solid #003349; }
.print-tabel th.pscris { text-align: center; background: #0a4a66; }
.print-tabel td.pscris { background: #fff !important; }

.print-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 7px; padding-top: 6px; border-top: 2px solid #003349;
  font-weight: 700; font-size: 13px; color: #003349;
}
.print-total-cifre { display: flex; gap: 26px; align-items: baseline; }
.print-total-bloc { display: flex; gap: 8px; align-items: baseline; }
.print-total-eticheta { font-size: 10.5px; font-weight: 700; color: #55636b; text-transform: uppercase; }
.print-total-valoare { font-size: 16px; font-variant-numeric: tabular-nums; }

.print-semnaturi {
  display: flex; gap: 34px; margin-top: 9px;
  font-size: 11px; color: #55636b;
}
.print-semnaturi > div { flex: 1; }
.print-linie { display: block; border-bottom: 1px dotted #8a969c; margin-top: 13px; }
.print-gol { color: #55636b; font-size: 13px; padding: 20px 0; }

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background: #fff; }

  /* Restul paginii se ascunde DOAR cu fereastra de print deschisa. Altfel un
     Ctrl+P obisnuit, din aplicatie, ar scoate o coala alba. */
  body.cu-print > *:not(.print-fereastra) { display: none !important; }
  body.cu-print .lateral { display: none !important; }
  body.cu-print .print-fereastra { position: static; overflow: visible; background: #fff; }
  .print-bara { display: none !important; }
  .print-pagina { padding: 0; }

  /* fiecare foaie e o pagina fizica; paginarea o controlam noi, nu browserul */
  .print-foaie {
    width: auto; min-height: 0; margin: 0; padding: 0;
    box-shadow: none; break-after: page;
  }
  .print-foaie:last-child { break-after: auto; }

  .print-tabel { font-size: 11.5px; }
  .print-tabel tr { break-inside: avoid; }
  .print-tabel tbody tr:nth-child(even) td {
    background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-tabel th {
    background: #003349 !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-tabel th.pscris { background: #0a4a66 !important; }
  /* coloana de scris ramane alba, ca sa se vada pixul pe randurile umbrite */
  .print-tabel td.pscris { background: #fff !important; }
  .print-semnaturi, .print-total { break-inside: avoid; }
}

/* ------------------------------------------------------------- incarcare */

.incarcare {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,51,73,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.incarcare-cutie {
  background: var(--card); padding: 30px 42px; border-radius: 12px;
  text-align: center; box-shadow: 0 14px 44px rgba(0,51,73,.4); max-width: 360px;
  border-top: 3px solid var(--rosu);
}
.incarcare-cutie p { margin: 16px 0 4px; font-weight: 700; font-family: var(--font-titlu); }
.incarcare-cutie small { color: var(--text-slab); font-size: 12.5px; }
.rotitor {
  width: 36px; height: 36px; margin: 0 auto;
  border: 3px solid var(--albastru-slab); border-top-color: var(--rosu);
  border-radius: 50%; animation: roteste .8s linear infinite;
}
@keyframes roteste { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ mic */

@media (max-width: 760px) {
  .bara, .kpi, .filtre, .tab-uri, main { padding-left: 12px; padding-right: 12px; }
  .banner { margin-left: 12px; margin-right: 12px; }
  .tabel-container { max-height: none; }
  .separator-logo { display: none; }
  .logo { height: 26px; }
}

/* ---------------------------------------------------- graficul de vechime */

.grafic {
  background: var(--card); border: 1px solid var(--linie); border-radius: 12px;
  padding: 18px 20px 20px; margin-bottom: 14px;
}
.grafic-bara {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  margin-bottom: 10px;
}
.grafic-nota {
  font-size: 12.5px; color: var(--text-slab); margin: 0 0 14px; max-width: 92ch;
}
/* Desenul se intinde pe latimea ferestrei, dar nu se turteste sub o inaltime
   de la care punctele n-ar mai fi de deosebit. */
.grafic-cadru { width: 100%; overflow-x: auto; }
.grafic-desen { width: 100%; height: auto; display: block; }
.grafic-grila { stroke: var(--linie); stroke-width: 1; }
.grafic-axa {
  font-family: var(--font-corp); font-size: 11px; fill: var(--text-slab);
}
.grafic-gol {
  padding: 40px 0; text-align: center; color: var(--text-slab); font-size: 13px;
}

/* Legenda e si rezumatul perioadei: culoarea, media si cate comenzi stau in
   spatele ei. Se apasa ca sa scoata categoria din desen. */
.grafic-legenda {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px; margin-top: 16px;
}
.grafic-legenda-item {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 4px 8px;
  align-items: center; text-align: left;
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: 9px;
  background: transparent; cursor: pointer; font-family: var(--font-corp);
  transition: all .12s;
}
.grafic-legenda-item:hover { border-color: var(--albastru); }
.grafic-legenda-item.stinsa { opacity: .42; }
.grafic-bulina { width: 12px; height: 12px; border-radius: 3px; grid-row: span 2; }
.grafic-legenda-nume { font-size: 12.5px; font-weight: 700; color: var(--text); }
.grafic-legenda-cifra {
  font-family: var(--font-titlu); font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.grafic-legenda-detaliu {
  grid-column: 2 / 4; font-size: 11.5px; color: var(--text-slab);
}

/* --------------------------------------------- taburile principale de modul */

/* Stau deasupra casutelor, fiindca schimba si casutele, nu doar tabelul: sunt
   doua intrebari diferite puse aceluiasi modul, nu doua tabele. */
.taburi-principale {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 2px;
}
.tab-principal {
  padding: 9px 18px; border: 1.5px solid var(--linie); border-radius: 10px;
  background: var(--card); color: var(--text-slab);
  font-family: var(--font-titlu); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.tab-principal:hover { border-color: var(--albastru); color: var(--albastru); }
.tab-principal.activ {
  background: var(--albastru); border-color: var(--albastru); color: #fff;
}
@media (prefers-color-scheme: dark) {
  .tab-principal:hover { color: var(--text); }
  .tab-principal.activ { background: var(--rosu); border-color: var(--rosu); color: #fff; }
}

/* Pastila de pe tabul principal: pe fundal albastru, cea obisnuita ar disparea
   in el. Pe tabul activ se inverseaza - alb pe albastru devine albastru pe alb. */
.tab-principal .pastila { background: var(--albastru); color: #fff; }
.tab-principal.activ .pastila { background: #fff; color: var(--albastru); }
@media (prefers-color-scheme: dark) {
  .tab-principal.activ .pastila { background: #fff; color: var(--rosu); }
}

/* Casutele de data ale graficului: apar langa butoanele de perioada, cand e
   ales intervalul propriu. */
.grafic-interval {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.grafic-interval label {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--font-corp); font-size: 12.5px; color: var(--text-slab);
}
.grafic-interval input[type="date"] {
  padding: 5px 8px; border: 1.5px solid var(--linie); border-radius: 8px;
  background: var(--card); color: var(--text);
  font-family: var(--font-corp); font-size: 12.5px;
}
.grafic-interval input[type="date"]:focus {
  outline: none; border-color: var(--albastru);
}

/* Navigatorul de perioadă al graficului: cărarea parcursă deasupra, treapta
   următoare dedesubt. Se coboară an → lună → săptămână → zi. */
.grafic-navigator {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 10px 12px; margin: 12px 0 14px;
}
.grafic-carare {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.carare-pas {
  border: 0; background: transparent; cursor: pointer; padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--font-corp); font-size: 12.5px; font-weight: 700;
  color: var(--text-slab);
}
.carare-pas:hover { background: var(--fundal); color: var(--albastru); }
.carare-pas.activ { color: var(--text); cursor: default; }
.carare-sageata { color: var(--text-slab); font-size: 11px; }
.grafic-trepte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grafic-trepte .chip[disabled] { cursor: default; opacity: .38; }
.grafic-trepte .chip[disabled]:hover { border-color: var(--linie); color: var(--text-slab); }

/* Barele graficului. Grupate pe galeata de timp, cate una pe categorie. */
.grafic-bara { transition: opacity .1s; cursor: pointer; }
.grafic-bara:hover { opacity: .75; }
.grafic-baza { stroke: var(--text-slab); stroke-width: 1; opacity: .5; }

/* ------------------------------------------------------ KPI-uri producție */

.kpi-modul { margin-bottom: 16px; }
.kpi-bara {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.kpi-luna {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-corp); font-size: 12.5px; font-weight: 700;
  color: var(--text-slab);
}
.kpi-luna input {
  padding: 5px 8px; border: 1.5px solid var(--linie); border-radius: 8px;
  background: var(--card); color: var(--text); font-family: var(--font-corp);
}
.kpi-nota, .kpi-explicatie {
  font-size: 12.5px; color: var(--text-slab); margin: 0 0 10px; max-width: 96ch;
}

/* Căsuțele de completat din tabel: mici, aliniate la dreapta ca cifrele. */
.kpi-nr {
  width: 92px; padding: 4px 6px; text-align: right;
  border: 1.5px solid var(--linie); border-radius: 6px;
  background: var(--card); color: var(--text);
  font-family: var(--font-corp); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.kpi-nr:focus { outline: none; border-color: var(--albastru); }
.kpi-rol {
  padding: 4px 6px; border: 1.5px solid var(--linie); border-radius: 6px;
  background: var(--card); color: var(--text);
  font-family: var(--font-corp); font-size: 12.5px; max-width: 150px;
}
tr.kpi-ales > td { background: var(--fundal); }

/* Matricea de polivalență: posturile ca butoane, grupate pe secții. */
.kpi-matrice { padding: 10px 4px 16px; }
.kpi-sectii { margin-bottom: 12px; }
.kpi-sectie h4 {
  font-family: var(--font-corp); font-size: 12px; font-weight: 700;
  color: var(--text-slab); text-transform: uppercase; letter-spacing: .04em;
  margin: 12px 0 6px;
}
.kpi-posturi { display: flex; flex-wrap: wrap; gap: 6px; }
.kpi-post {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 10px; border: 1.5px solid var(--linie); border-radius: 8px;
  background: var(--card); cursor: pointer;
  font-family: var(--font-corp); font-size: 12.5px; color: var(--text-slab);
}
.kpi-post:hover { border-color: var(--albastru); }
/* Postul care nu se mai apasa: nivelul lui vine din ore, nu dintr-un click. */
.kpi-post-fix { cursor: help; }
.kpi-post-fix:hover { border-color: var(--linie); }
.kpi-post-nivel {
  min-width: 20px; padding: 1px 5px; border-radius: 5px;
  background: var(--linie); color: var(--text-slab);
  font-weight: 700; text-align: center;
}
.kpi-post.nivel-I { border-color: #E8A33D; color: var(--text); }
.kpi-post.nivel-I .kpi-post-nivel { background: #E8A33D; color: #fff; }
.kpi-post.nivel-A { border-color: #0E7C7B; color: var(--text); }
.kpi-post.nivel-A .kpi-post-nivel { background: #0E7C7B; color: #fff; }
.kpi-post.nivel-T { border-color: var(--rosu); color: var(--text); }
.kpi-post.nivel-T .kpi-post-nivel { background: var(--rosu); color: #fff; }

/* Aceleasi culori, dar pe insigna singura - in tabelul de ore si in praguri,
   unde nivelul se arata fara butonul din matrice in jurul lui. */
.kpi-post-nivel.nivel-I { background: #E8A33D; color: #fff; }
.kpi-post-nivel.nivel-A { background: #0E7C7B; color: #fff; }
.kpi-post-nivel.nivel-T { background: var(--rosu); color: #fff; }
.kpi-post-nivel.nivel-gol { background: var(--albastru-slab); color: var(--text-slab); }

/* Randul de subtaburi al polivalentei: putin aer sub el, ca sa nu para lipit
   de tabelul care urmeaza. */
.kpi-subtaburi { margin: 10px 0 14px; }

/* Titlurile din tabul de potriviri: doua tabele in aceeasi pagina au nevoie de
   un cuvant intre ele, altfel par unul singur. */
.kpi-titlu-mic { margin: 18px 0 6px; font-size: 14px; color: var(--text-slab); }
.kpi-nelegat { color: var(--text-slab); font-style: italic; }
/* Panoul de ales posturile: mai lat si mai inalt decat cel de filtre, fiindca
   sunt nouazeci de posturi grupate pe sectii. */
.panou-lat { width: min(560px, calc(100vw - 24px)); }
.panou-lat .panou-lista { max-height: 52vh; }
.panou-grup + .panou-grup { margin-top: 8px; }
.panou-grup-titlu {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-slab); padding: 4px 6px 2px; position: sticky; top: 0;
  background: var(--card);
}
/* Posturile alese, aratate ca marunte langa operatie. */
.kpi-alese { display: flex; flex-wrap: wrap; gap: 4px; max-width: 460px; }
.chip-mic { padding: 1px 7px; font-size: 11px; }

/* Randul cu butonul de aplicat pragurile si cu efectul lor. */
.kpi-aplica-rand { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; flex-wrap: wrap; }
.kpi-nesalvat { color: var(--urgent); }
.kpi-nesalvat::after { content: " — încă neaplicat"; }
/* Casuta soldului de pornire: se vede ca se poate scrie in ea, altfel pare
   inca o cifra adusa din ERP. */
.kpi-ore-manual { width: 84px; }

/* Tabelele de KPI folosesc acelasi cap ca restul aplicatiei: titlu plus un
   buton mic de filtru. Stilul lor vine de acolo, nu se repeta aici. */
}

/* Bifele zilnice de organizare și ordine. */
.kpi-zile { padding: 10px 4px 16px; }
.kpi-legenda {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px;
  font-size: 11.5px; color: var(--text-slab);
}
.kpi-legenda b { color: var(--text); margin-right: 4px; }
.kpi-tabel-zile { max-width: 620px; }
.kpi-tabel-zile input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* Auditul 5S, lipit de organizare: fișa cu paisprezece criterii. */
.kpi-titlu {
  font-family: var(--font-titlu); font-size: 15px; font-weight: 700;
  color: var(--text); margin: 22px 0 6px;
}
.kpi-audit { padding: 10px 4px 16px; }
.kpi-audit-cap {
  display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px;
  font-family: var(--font-corp); font-size: 12.5px; color: var(--text-slab);
}
.kpi-audit-cap label { display: flex; align-items: center; gap: 8px; }
.kpi-audit-obs { flex: 1 1 320px; }
.kpi-audit-cap input {
  padding: 5px 8px; border: 1.5px solid var(--linie); border-radius: 8px;
  background: var(--card); color: var(--text); font-family: var(--font-corp);
  font-size: 12.5px;
}
.kpi-audit-obs input { width: 100%; }
.kpi-tabel-audit td:first-child { width: 34px; color: var(--text-slab); }
.kpi-note { display: flex; gap: 5px; white-space: nowrap; }
.kpi-nota-5s {
  width: 30px; padding: 3px 0; border: 1.5px solid var(--linie); border-radius: 7px;
  background: var(--card); color: var(--text-slab); cursor: pointer;
  font-family: var(--font-corp); font-size: 12.5px; font-weight: 700;
}
.kpi-nota-5s:hover { border-color: var(--albastru); }
.kpi-nota-5s.activ { color: #fff; border-color: transparent; }
.kpi-nota-5s[data-scor="0"].activ { background: var(--critic, #E0004D); }
.kpi-nota-5s[data-scor="1"].activ { background: #E8A33D; }
.kpi-nota-5s[data-scor="2"].activ { background: #0E7C7B; }

/* ------------------------------------------------------ intrarea în aplicație */

.login {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--albastru);
}
.login.ascuns { display: none; }
body.cu-login { overflow: hidden; }
.login-cutie {
  width: min(360px, 90vw);
  background: var(--card); border-radius: 14px; padding: 28px 26px 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 12px;
}
.login-logo { height: 30px; align-self: center; margin-bottom: 4px; }
.login-cutie h1 {
  font-family: var(--font-titlu); font-size: 19px; font-weight: 700;
  color: var(--text); margin: 0; text-align: center;
}
.login-nota {
  font-size: 12.5px; color: var(--text-slab); margin: 0 0 6px; text-align: center;
}
.login-cutie label {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--font-corp); font-size: 12px; font-weight: 700;
  color: var(--text-slab);
}
.login-cutie input {
  padding: 9px 11px; border: 1.5px solid var(--linie); border-radius: 9px;
  background: var(--card); color: var(--text);
  font-family: var(--font-corp); font-size: 15px;
}
.login-cutie input:focus { outline: none; border-color: var(--albastru); }
.login-buton {
  margin-top: 6px; padding: 11px; border: 0; border-radius: 9px;
  background: var(--rosu); color: #fff; cursor: pointer;
  font-family: var(--font-titlu); font-size: 14px; font-weight: 700;
}
.login-buton:hover { background: var(--rosu-inchis); }
.login-buton:disabled { opacity: .6; cursor: default; }
.login-eroare {
  margin: 2px 0 0; text-align: center; font-size: 12.5px; color: var(--rosu);
}
.login-eroare.ascuns { display: none; }

/* Cine e la tastatură, jos în bara laterală. */
.lateral-cine {
  flex: none; padding: 14px 14px 10px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-corp); font-size: 12px;
}
.cine-nume { color: #fff; font-weight: 700; line-height: 1.25; }
.cine-functie { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .4px;
  text-transform: uppercase; margin-bottom: 10px; }

/* Iesirea era un link marunt, de aceeasi culoare cu fundalul aproape. Acum e un
   buton intreg, cat toata bara: se apasa cu manusa de lucru, nu cu varful
   mausului, si se vede de la un metru. */
.cine-iesi {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 9px 12px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color: #fff;
  transition: background .13s, border-color .13s;
}
.cine-iesi:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.cine-iesi:active { background: rgba(255,255,255,.26); }
.cine-iesi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cine-iesi svg { flex: none; }

/* Versiunea care ruleaza. Sta discret jos: nu se citeste zilnic, dar cand se
   suna la birou intrebarea e mereu "ce versiune ai acolo?". */
.lateral-versiune {
  flex: none; padding: 8px 14px 2px; text-align: center;
  font-family: var(--font-corp); font-size: 10.5px;
  color: rgba(255,255,255,.4);
}

/* Vestea ca serverul ruleaza alt cod decat pagina asta. */
.versiune-noua {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  max-width: min(440px, calc(100vw - 36px));
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px; border-radius: 12px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--linie);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  animation: versiuneApare .22s ease-out;
}
@keyframes versiuneApare { from { opacity: 0; transform: translateY(10px); } }
.versiune-noua-text { font-size: 13.5px; line-height: 1.45; }
.versiune-noua-text strong { display: block; margin-bottom: 2px; }
.versiune-noua-text span { color: var(--text-slab); }
.versiune-noua-actiuni { display: flex; gap: 8px; justify-content: flex-end; }
@media print { .versiune-noua { display: none; } }

/* Modulul de utilizatori. */
.util-adauga { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.util-adauga input { width: 220px; text-align: left; }
.util-bifa {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 8px;
  font-family: var(--font-corp); font-size: 12px; color: var(--text-slab);
}
tr.stinsa > td { opacity: .5; }

/* Numele la intrare: obligatoriu doar pentru funcțiile mari. */
.login-optional { font-weight: 400; color: var(--text-slab); opacity: .8; }
.login-tine-minte {
  flex-direction: row !important; align-items: center; gap: 7px !important;
  font-weight: 400 !important; font-size: 11.5px !important; margin-top: -4px;
}
.login-tine-minte input { width: 15px; height: 15px; }

/* ------------------------------------------- monitorizarea din secție */

/* Pagina asta sta pe un monitor din hala si se citeste din mers, de la cativa
   metri. Deci nu are tabel, nu are coloane si nu are nimic de apasat: doar
   numarul comenzii si utilajul unde a ramas. Marimea scrisului vine din
   --h, pusa la randare dupa cate randuri incap pe ecran. */
.monitor { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.monitor-bara {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding-bottom: 4px;
}
.monitor-grup { display: flex; align-items: center; gap: 5px; }
.monitor-grup-nume {
  font-family: var(--font-titlu); font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-slab);
}
.monitor-chip {
  cursor: pointer; font: inherit; font-size: 11.5px; line-height: 1;
  padding: 4px 9px; border-radius: 20px;
  border: 1px solid var(--linie); background: var(--card); color: var(--text-slab);
}
.monitor-chip:hover { border-color: var(--albastru); color: var(--albastru); }
.monitor-chip.activ { background: var(--albastru); border-color: var(--albastru); color: #fff; }
.monitor-ecran {
  margin-left: auto; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--albastru); background: var(--card); color: var(--albastru);
}
.monitor-ecran:hover { background: var(--albastru); color: #fff; }

/* Doua panouri, unul langa altul: pe un monitor lat asa incap cele mai multe
   randuri intregi. Pe ecran ingust trec unul sub altul. */
.monitor-panouri {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  flex: 1 1 auto; min-height: 0;
  height: calc(100vh - 210px);
}
@media (max-width: 900px) {
  .monitor-panouri { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

.monitor-panou {
  display: flex; flex-direction: column; min-height: 0;
  border: 2px solid var(--linie); border-radius: 10px; overflow: hidden;
  background: var(--card);
}
.monitor-depasit { border-color: var(--critic); }
.monitor-urmeaza { border-color: var(--urgent, #d98324); }

.monitor-cap {
  flex: none; display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 8px 16px; color: #fff;
  font-family: var(--font-titlu);
}
.monitor-depasit .monitor-cap { background: var(--critic); }
.monitor-urmeaza .monitor-cap { background: var(--urgent, #d98324); }
.monitor-titlu { font-size: 18px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.monitor-numar { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Lista care se deruleaza singura. Bara de derulare se ascunde: pe un monitor
   nu o trage nimeni cu mausul, si ar fura din latimea randului. */
.monitor-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.monitor-lista::-webkit-scrollbar { display: none; }

.monitor-rand {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--linie);
}
.monitor-rand:last-child { border-bottom: none; }
.monitor-comanda {
  flex: none; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.monitor-utilaj {
  flex: 1 1 auto; color: var(--text-slab); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.monitor-zile {
  flex: none; font-weight: 700; font-variant-numeric: tabular-nums;
}
.monitor-rand-depasit .monitor-zile { color: var(--critic); }
.monitor-rand-urmeaza .monitor-zile { color: var(--urgent, #d98324); }
.monitor-zile small { font-size: .5em; font-weight: 400; margin-left: 1px; }
.monitor-gol { padding: 24px 16px; color: var(--text-slab); font-size: 20px; }


/* Ecranul complet: raman doar cele doua panouri si chipurile mici. Tot ce
   inseamna navigare - antet, bara laterala, taburi - dispare. */
body.monitor-plin .bara,
body.monitor-plin .lateral,
body.monitor-plin .modul-antet,
body.monitor-plin .taburi-principale,
body.monitor-plin #banner { display: none !important; }
body.monitor-plin .aplicatie { display: block; }
body.monitor-plin .continut { padding: 10px 12px; }
body.monitor-plin .monitor-panouri { height: calc(100vh - 48px); }

/* Pe ecran complet raman doar comenzile si iesirea. Filtrele s-au pus deja
   inainte de a trece pe monitor; acolo, pe perete, nu le mai schimba nimeni,
   iar randul lor de chipuri ar fura din inaltimea listelor. */
body.monitor-plin .monitor-grup { display: none; }
body.monitor-plin .monitor-bara { padding: 0 0 6px; }
body.monitor-plin .monitor-ecran { margin-left: auto; opacity: .45; }
body.monitor-plin .monitor-ecran:hover { opacity: 1; }

/* ------------------------------------------------- filtrele pliabile */

/* Filtrele stau stranse, in spatele unui buton: pe unele module randul de
   cautare, statusurile, gestiunile si categoriile luau un sfert din inaltimea
   paginii - adica exact spatiul in care ar fi incaput tabelul. Bara ramane
   insa mereu la vedere si spune cate filtre sunt puse: un panou inchis peste
   filtre active ar fi mai rau decat unul deschis. */
.filtre-bara {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 6px 0 2px;
}
.filtre-buton {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 7px;
  border: 1px solid var(--linie); background: var(--card); color: var(--text);
  transition: border-color .12s, background .12s;
}
.filtre-buton:hover { border-color: var(--albastru); color: var(--albastru); }
.filtre-buton.desfacut { background: var(--albastru-slab); border-color: var(--albastru); }
.filtre-sageata { display: inline-block; transition: transform .15s; font-size: 10px; }
.filtre-buton.desfacut .filtre-sageata { transform: rotate(90deg); }
.filtre-buton .pastila { background: var(--albastru); color: #fff; }

/* Ce e pus, in cuvinte, cand panoul e strans. Se taie la un rand: rostul lui e
   sa spuna ca exista un filtru, nu sa-l enumere pe tot. */
.filtre-rezumat {
  flex: 1 1 200px; min-width: 0; font-size: 12px; color: var(--text-slab);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.filtre-panou.pliat { display: none; }
@media print { .filtre-bara { display: none !important; } }

/* Butonul de resetare a filtrelor. Era un link marunt, gri pe alb, lipit de
   comutator: cine punea trei filtre si voia sa scape de ele il cauta cu ochii.
   Acum e buton intreg, cu semnul de reluare, si se aprinde cand chiar are ce
   sterge. */
.reset-filtre {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: 7px; white-space: nowrap;
  border: 1px solid var(--linie); background: var(--card); color: var(--text-slab);
  transition: border-color .12s, color .12s, background .12s;
}
.reset-filtre:hover {
  border-color: var(--critic); color: var(--critic); background: var(--critic-fundal);
}
.reset-filtre:active { transform: translateY(1px); }
.reset-filtre:focus-visible { outline: 2px solid var(--albastru); outline-offset: 2px; }
/* Cand exista filtre puse, butonul iese in fata: altfel sta linistit, ca sa nu
   ceara o apasare care n-ar schimba nimic. */
.reset-filtre.are-ce-sterge {
  border-color: var(--critic); color: var(--critic);
}
.reset-filtre svg { flex: none; }


/* Locul in ordinea de lucru. Nu e un identificator, e un ordin: 1 se face
   prima. De aceea sta in fata, plin, nu la capatul randului ca zilele - o cifra
   dupa nume se citeste ca o masuratoare, una inainte ca o prioritate. */
.monitor-loc {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9em; padding: 0 .3em; border-radius: .3em;
  font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5;
  color: #fff;
}
.monitor-rand-depasit .monitor-loc { background: var(--critic); }
.monitor-rand-urmeaza .monitor-loc { background: var(--urgent); }

/* Primele trei se ingroasa: pe un monitor din hala nimeni nu citeste treizeci
   de randuri, dar toata lumea vede care sunt cele trei de facut acum. */
.monitor-rand:nth-child(-n+3) .monitor-loc { box-shadow: 0 0 0 .18em rgba(0,0,0,.14); }
.monitor-rand:nth-child(n+4) .monitor-loc { opacity: .55; }


/* Marimea scrisului vine din inaltimea randului, pusa la randare in --h.
   Cu trepte fixe randurile se intindeau ca sa umple panoul iar textul ramanea
   mic in mijlocul lor: jumatate din ecran era spatiu gol intre randuri. Acum
   litera creste odata cu randul. */
.monitor-lista .monitor-rand {
  height: var(--rand-inaltime, auto);
  box-sizing: border-box;
  align-items: center;
  padding: 0 16px;
  gap: .45em;
}
.monitor-comanda { font-size: calc(var(--h, 60px) * .38); line-height: 1.04; }
.monitor-utilaj  { font-size: calc(var(--h, 60px) * .235); line-height: 1.12; }
.monitor-zile    { font-size: calc(var(--h, 60px) * .32); line-height: 1; }
.monitor-loc     { font-size: calc(var(--h, 60px) * .36); line-height: 1.25; }

/* Butonul de resetare din bara monitorului. Apare doar cand exista filtre puse:
   pe un ecran care sta pe perete, un buton care nu face nimic e doar zgomot. */
.monitor-reset {
  cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--critic); background: var(--card); color: var(--critic);
}
.monitor-reset:hover { background: var(--critic); color: #fff; }
body.monitor-plin .monitor-reset { display: none; }

/* Randul are doua etaje: sus numarul comenzii cu zilele, dedesubt utilajele.
   Asa numele lung nu se mai taie si nu mai ramane gol pe verticala. */
.monitor-mijloc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; gap: .1em; }
.monitor-sus { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.monitor-lista .monitor-rand { gap: .5em; }
/* Numele utilajelor pot curge pe doua randuri. O comanda care sta pe patru
   masini are peste o suta de caractere - pe un singur rand s-ar taia tocmai
   partea dupa care omul stie unde sa se duca. Doua randuri incap in golul
   ramas; peste ele s-ar manca din numarul comenzii. */
.monitor-utilaj {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; white-space: normal;
}

/* Lista versiunilor pastrate, din modulul de administrare. */
.versiune-nr { font-weight: 700; font-variant-numeric: tabular-nums; }
.versiune-acum td { background: var(--albastru-slab); }
.versiune-eticheta {
  margin-left: 8px; padding: 2px 7px; border-radius: 10px;
  background: var(--albastru); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
}

/* Jurnalul unei versiuni: ce fișiere s-au atins și nota scrisă de om. */
.rand-versiune { cursor: pointer; }
.rand-jurnal td { background: var(--fundal); padding: 12px 16px; }
.jurnal-nota { display: block; font-size: 12px; color: var(--text-slab); margin-bottom: 8px; }
.jurnal-nota textarea {
  display: block; width: 100%; max-width: 620px; margin-top: 4px;
  font: inherit; font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--linie); border-radius: 6px;
  background: var(--card); color: var(--text); resize: vertical;
}
.jurnal-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.jurnal-fel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; color: #fff;
}
.jurnal-fel.nou { background: #1f7a4d; }
.jurnal-fel.schimbat { background: var(--albastru); }
.jurnal-fel.sters { background: var(--critic); }
.jurnal-grup code {
  font-size: 11.5px; padding: 2px 6px; border-radius: 4px;
  background: var(--card); border: 1px solid var(--linie); color: var(--text-slab);
}

/* Semnalul ca o sursa de date nu mai vine. Stă lipit de data ultimului export,
   acolo unde se uită oricine vrea să știe cât de proaspete sunt datele. */
.tacere {
  display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 10px;
  background: var(--critic); color: #fff; cursor: help;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
}

/* Bara de publicare, din tabul Versiuni. Ce rulează pe server și ce li s-a
   anunțat oamenilor sunt două lucruri: aici se vede diferența și se trimite. */
.live-bara {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 12px; border-radius: 8px;
  border: 1px solid var(--linie); background: var(--card);
  font-size: 13px; line-height: 1.5;
}
.live-bara.de-anuntat { border-color: var(--albastru); background: var(--albastru-slab); }
.live-text { flex: 1 1 300px; min-width: 0; }
.live-bara strong { display: block; }
.versiune-eticheta.live { background: #1f7a4d; }

/* ------------------------------------------------------- notificările */

.clopotel-loc { position: relative; }
.clopotel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 8px;
  background: var(--card); color: var(--text-slab);
}
.clopotel:hover { border-color: var(--albastru); color: var(--albastru); }
.clopotel.are { color: var(--critic); border-color: var(--critic); }
.clopotel-numar {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  border-radius: 9px; background: var(--critic); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
}

.notificari-panou {
  /* Se deschide spre dreapta, fiindca clopotelul sta acum in stanga barei,
     langa sigla. Ancorat la dreapta, cum era cand statea in coltul opus,
     panoul ar fi iesit din ecran. */
  position: absolute; left: 0; top: 46px; z-index: 70;
  width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.24);
  font-family: var(--font-corp);
}
.notif-cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--linie);
  font-family: var(--font-titlu); font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-slab);
  position: sticky; top: 0; background: var(--card);
}
.notif { padding: 11px 14px; border-bottom: 1px solid var(--linie); cursor: default; }
.notif:last-child { border-bottom: none; }
.notif.necitit { background: var(--albastru-slab); cursor: pointer; }
.notif.necitit .notif-titlu { font-weight: 700; }
.notif-titlu { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text); margin-bottom: 3px; }
.notif-filiala {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 8px; background: var(--albastru); color: #fff;
}
.notif-cand { margin-left: auto; font-size: 11px; color: var(--text-slab); font-weight: 400; }
.notif-text { font-size: 12.5px; color: var(--text-slab); line-height: 1.45; }
.notif-detalii { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-slab); }
.notif-detalii li { margin: 1px 0; }
.notif-gol { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--text-slab); }
@media print { .clopotel-loc { display: none; } }

/* Ecranul de administrare al notificărilor. */
.notif-feluri { display: flex; flex-direction: column; gap: 10px; }
.notif-fel {
  padding: 13px 16px; border: 1px solid var(--linie); border-radius: 9px;
  background: var(--card);
}
.notif-fel-cap { display: flex; align-items: center; gap: 12px; }
.notif-activ { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.notif-stare {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 10px; background: var(--albastru); color: #fff;
}
.notif-stare.gol { background: var(--linie); color: var(--text-slab); }
.notif-stare.oprit { background: var(--text-slab); color: #fff; }
.notif-fel-ce { margin: 5px 0 9px; font-size: 12.5px; color: var(--text-slab); line-height: 1.45; }
.notif-bife, .notif-oameni {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px;
}
.notif-eticheta {
  font-family: var(--font-titlu); font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-slab);
  min-width: 74px;
}
.notif-bifa { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12.5px; }
.notif-bifa.oprit { opacity: .4; cursor: not-allowed; }
.notif-oameni select {
  font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--linie); background: var(--card); color: var(--text);
}
.notif-avertisment {
  margin: 9px 0 0; padding: 7px 10px; border-radius: 6px;
  background: var(--critic-fundal); color: var(--critic);
  font-size: 12px; line-height: 1.4;
}

/* Numele oamenilor: casuta mostenea latimea cifrelor (92px, aliniate la
   dreapta), asa ca "Constantinescu Gheorghe" se vedea pe jumatate. Numele nu
   sunt cifre - au nevoie de latime si de aliniere la stanga. */
.util-nume {
  width: 100%; min-width: 200px; max-width: 280px;
  text-align: left; font-variant-numeric: normal;
}

/* Randul de cautare din capul tabelului: sta lipit sub titluri, ca sa se vada
   ca filtreaza coloana de deasupra lui, nu ca e un rand de date. */
.util-cauta-rand > th {
  /* Al doilea rand lipit: primul sta la 0, asta imediat sub el. Fara decalaj
     s-ar suprapune peste titluri la derulare. */
  top: 36px; z-index: 1; cursor: default;
  padding-top: 6px; padding-bottom: 8px;
  background: var(--card); color: var(--text-slab);
  border-bottom: 1.5px solid var(--linie);
  font-weight: 400; letter-spacing: 0; white-space: normal;
}
.util-cauta-rand > th:hover { background: var(--card); }
.util-cauta {
  width: 100%; min-width: 200px; max-width: 280px; padding: 5px 9px;
  border: 1.5px solid var(--linie); border-radius: 6px;
  background: var(--fundal); color: var(--text);
  font-family: var(--font-corp); font-size: 13px;
}
.util-cauta:focus { outline: none; border-color: var(--albastru); background: var(--card); }
.util-cauta-stare { text-align: left; }
.util-cate {
  font-family: var(--font-corp); font-size: 12px; color: var(--text-slab);
  font-variant-numeric: tabular-nums; margin-right: 8px;
}
.util-nimic {
  text-align: center; padding: 26px 10px; color: var(--text-slab);
  font-family: var(--font-corp); font-size: 13px;
}

/* Numărul rândului: îngust, discret, aliniat la dreapta ca orice cifră. E un
   reper pentru vorbit — „uită-te la 37" — nu o informație despre om, deci nu
   trebuie să tragă ochiul înaintea numelui. */
.util-nr {
  width: 42px; min-width: 42px; text-align: right; padding-right: 10px;
  color: var(--text-slab); font-variant-numeric: tabular-nums; font-size: 12px;
}
th.util-nr { cursor: default; }

/* Antetul care întoarce ordinea. Săgeata arată ordinea curentă, nu ce se
   întâmplă la apăsare: e starea listei, nu o promisiune. */
.util-sortabil { cursor: pointer; }
.util-sageata { margin-left: 6px; font-size: 9px; opacity: .85; }

/* Bifele din tabel: categoriile și gestiunile. Un buton colorat spune „sunt
   apăsat" doar celui care știe ce culoare înseamnă apăsat; o bifă spune singură.
   Fundalul rămâne, dar ca sprijin, nu ca singur semn. */
.bifa-lista {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 20px;
  border: 1.5px solid var(--linie); background: var(--card);
  font-family: var(--font-corp); font-size: 12px; color: var(--text-slab);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.bifa-lista input { margin: 0; cursor: pointer; }
.bifa-lista:hover { border-color: var(--albastru); }
.bifa-lista.activ {
  border-color: var(--albastru); background: var(--albastru-slab);
  color: var(--text); font-weight: 650;
}
.bifa-lista.oprit { opacity: .45; cursor: default; }
.bifa-lista.oprit:hover { border-color: var(--linie); }

/* Filtrele din capul tabelului: aceeași înălțime pe toată linia, ca rândul să
   se citească drept. */
.util-filtru {
  width: 100%; max-width: 190px; padding: 5px 6px;
  border: 1.5px solid var(--linie); border-radius: 6px;
  background: var(--fundal); color: var(--text);
  font-family: var(--font-corp); font-size: 12.5px;
}
.util-filtru:focus { outline: none; border-color: var(--albastru); background: var(--card); }

/* Socoteala stă deasupra tabelului: în capul lui nu mai e loc, fiecare coloană
   își are filtrul ei. */
.util-socoteala {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; min-height: 22px;
}

/* ------------------------------------------------------- semnătura desenată */

.semnatura-fereastra {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 22, 30, .55); backdrop-filter: blur(2px);
  padding: 20px;
}
.semnatura-fereastra.ascuns { display: none; }
.semnatura-cutie {
  background: var(--card); border-radius: 14px; padding: 22px 24px 18px;
  width: min(560px, 100%); box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.semnatura-cutie h2 {
  margin: 0 0 6px; font-family: var(--font-titlu); font-size: 19px; color: var(--text);
}
.semnatura-nota {
  margin: 0 0 14px; font-family: var(--font-corp); font-size: 13px;
  color: var(--text-slab); line-height: 1.45;
}
/* Panza: fundal deschis și un chenar întrerupt, ca să se vadă unde se scrie.
   touch-action: none — altfel, pe ecran tactil, degetul ar derula pagina în loc
   să lase linie. */
.semnatura-panza {
  display: block; width: 100%; height: 170px;
  background: #fff; border: 2px dashed var(--linie); border-radius: 10px;
  cursor: crosshair; touch-action: none;
}
.semnatura-linie-jos {
  margin: 4px 2px 12px; font-family: var(--font-corp); font-size: 11px;
  color: var(--text-slab); text-align: right; letter-spacing: .3px;
}
.semnatura-actiuni { display: flex; align-items: center; gap: 8px; }
.semnatura-spatiu { flex: 1; }
.semnatura-actiuni .btn:disabled { opacity: .5; cursor: default; }

/* Semnătura din tabelul de utilizatori: mică, pe fundal alb, ca să se vadă
   tușul indiferent de tema aplicației. */
.util-semnatura {
  height: 26px; max-width: 120px; object-fit: contain;
  background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 1px 3px;
  vertical-align: middle;
}
.util-fara-semnatura { color: var(--text-slab); font-size: 12px; }

/* Pe documentul tipărit: semnătura stă deasupra liniei, iar numele sub ea. */
.print-semnatura-imagine {
  display: block; height: 34px; max-width: 150px; object-fit: contain;
  object-position: left bottom; margin-bottom: -4px;
}
.print-semnatura-nume { display: block; margin-top: 3px; font-weight: 700; color: #1d2a31; }

/* Cifra realizată: aceeași greutate ca „De produs", dar în verde — e singura
   coloană care spune ce s-a terminat, nu ce mai e de făcut. */
.realizat {
  font-weight: 700; color: var(--ok);
  font-variant-numeric: tabular-nums;
}

/* Modulul „Produs vs realizat". */
.stare-gata {
  display: inline-block; padding: 1px 8px; border-radius: 20px;
  background: var(--ok-fundal); color: var(--ok);
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
/* Bara de progres: se citește de la doi metri mai repede decât un procent. */
.progres {
  position: relative; display: inline-block; width: 84px; height: 15px;
  background: var(--fundal); border-radius: 8px; overflow: hidden;
  vertical-align: middle;
}
.progres-bara { position: absolute; inset: 0 auto 0 0; border-radius: 8px; }
.progres-putin { background: var(--critic); }
.progres-mediu { background: var(--urgent); }
.progres-gata { background: var(--ok); }
.progres-cifra {
  position: relative; display: block; text-align: center; line-height: 15px;
  font-size: 10.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; mix-blend-mode: luminosity;
}

/* Modulele de întreținere, jos, lipite de numele omului. Aceleași butoane ca
   sus, doar despărțite printr-o linie: se deschid de câteva ori pe lună și
   n-au ce căuta în drumul celor la care se revine de zeci de ori pe tură. */
.lateral-jos {
  flex: none; display: flex; flex-direction: column; gap: 1px;
  margin-top: auto; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 900px) {
  /* Pe ecran îngust bara laterală stă pe orizontală: acolo „jos" n-are sens,
     deci butonul se așază în rând cu celelalte. */
  .lateral-jos {
    flex-direction: row; margin-top: 0; padding-top: 0; border-top: none;
  }
}

/* ═══════════════════════════════════════════════════════════ pe telefon ══
 *
 * Aplicația a fost desenată pentru monitoarele din hală și pentru laptopul de
 * pe birou. Pe un telefon se schimbă trei lucruri deodată: lățimea (375 px în
 * loc de 1900), degetul în locul mausului (nu există „trecut peste", iar ce e
 * mai mic de 40 px nu se nimerește), și faptul că se citește ținut în mână, la
 * treizeci de centimetri, nu de la doi metri.
 *
 * Ce NU se schimbă: cifrele și coloanele. Un tabel tăiat pe telefon ar fi un
 * alt tabel decât cel de pe birou, iar doi oameni care se uită la „același"
 * ecran ar vedea altceva. Tabelul rămâne întreg și se derulează lateral, cu
 * prima coloană lipită de margine ca să se știe mereu despre ce rând e vorba.
 */
@media (max-width: 560px) {
  /* --- bara de sus: titlul pe un rând, butoanele pe altul --------------- */
  .bara { padding: 8px 12px; gap: 8px; }
  .bara-stanga { gap: 8px; min-width: 0; }
  .logo { height: 24px; }
  .separator-logo { display: none; }
  .bara h1 { font-size: 15px; }
  .prospetime { font-size: 10.5px; line-height: 1.3; }
  /* Pe telefon uneltele trec pe rândul lor, sub titlu: lângă siglă n-ar mai
     încăpea nici titlul, nici ele. */
  .bara-stanga { flex-wrap: wrap; }
  .bara-unelte { gap: 6px; }
  .bara-unelte .btn { min-height: 42px; padding: 8px 10px; font-size: 12.5px; }
  .bara-actiuni { width: 100%; flex-wrap: wrap; gap: 6px; }
  /* Butoanele împart rândul între ele și au înălțime de deget, nu de maus. */
  .bara-actiuni .btn { flex: 1 1 auto; min-height: 42px; padding: 8px 10px; font-size: 12.5px; }
  .clopotel { width: 42px; height: 42px; }

  /* --- marginile: 22 px de fiecare parte însemnau a opta parte din ecran -- */
  .modul-antet { padding: 12px 12px 0; }
  .modul-antet h2 { font-size: 17px; }
  .kpi { padding: 10px 12px 2px; gap: 7px;
         grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .tab-uri { padding: 10px 12px 0; }
  .taburi-principale { padding: 8px 12px 0; }
  .filtre { padding: 10px 12px; gap: 8px; }
  .filtre-bara { margin: 10px 12px 0; }
  main { padding: 0 12px 28px; }
  .banner { margin: 10px 12px 0; }
  .sectiune-descriere { margin: 8px 12px 0; }

  /* --- ținte de apăsat: nimic sub 36 px ------------------------------- */
  .chip, .tab, .tab-principal { min-height: 36px; }
  .comutator, .btn-text-mic { min-height: 32px; display: inline-flex; align-items: center; }
  .cautare { min-height: 40px; font-size: 16px; }   /* 16px: sub atât, iPhone-ul mărește pagina la atingere */

  /* --- tabelul: întreg, derulat lateral, cu prima coloană lipită ------- */
  .tabel-container { margin-top: 10px; border-radius: 8px; }
  .tabel { font-size: 12px; }
  .tabel th { padding: 8px 8px; font-size: 11px; }
  .tabel td { padding: 7px 8px; }
  .tabel thead th:first-child { position: sticky; left: 0; z-index: 3; }
  .tabel tbody td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--card);
    box-shadow: 1px 0 0 var(--linie);
  }
  .tabel tbody tr:nth-child(even) td:first-child {
    background: color-mix(in srgb, var(--albastru-slab) 45%, var(--card));
  }

  /* --- bara laterală, pe orizontală: numele omului la capătul rândului -- */
  .lateral { padding: 6px 0; gap: 0; }
  .lateral-jos { flex-direction: row; margin: 0; padding: 0; border-top: none; }
  .lateral-cine {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 6px 12px; border-top: none;
    border-left: 1px solid rgba(255,255,255,.14);
  }
  .cine-functie { display: none; }
  .cine-nume { font-size: 11.5px; }
  .cine-iesi { margin: 0; padding: 8px 12px; min-height: 38px; }
  .lateral-versiune { display: none; }

  /* --- ferestrele care se ridică peste pagină -------------------------- */
  .versiune-noua { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; }
  .versiune-noua-actiuni { flex-wrap: wrap; }
  .versiune-noua-actiuni .btn { flex: 1 1 auto; min-height: 42px; }
  .login-cutie { padding: 22px 18px; }
  .login-cutie input { min-height: 44px; font-size: 16px; }
  .semnatura-cutie { padding: 16px 14px 14px; }
  .semnatura-panza { height: 200px; }        /* mai înaltă: se semnează cu degetul */
  .semnatura-actiuni { flex-wrap: wrap; }
  .semnatura-actiuni .btn { flex: 1 1 auto; min-height: 44px; }
  .semnatura-spatiu { display: none; }
  .notificari-panou { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; }
}

@media (max-width: 560px) {
  /* Săgeata de filtrare din capul coloanei era de 16 pe 14 pixeli: se nimerește
     cu vârful mausului, nu cu degetul. Pe telefon crește la cât se poate apăsa
     fără să se ceară a doua încercare. */
  .th-filtru { padding: 7px 9px; font-size: 10px; margin-left: 4px; }

  /* Panoul de filtrare se ridică din marginea de jos, ca o foaie: pe un ecran
     îngust n-are unde să se agațe de capul coloanei fără să iasă din pagină. */
  .panou-filtru {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
    min-width: 0; max-width: none; max-height: 70vh; overflow-y: auto;
    border-radius: 12px; border-top-width: 4px;
  }
}

@media (max-width: 560px) {
  /* Cât ocupă antetul până la primul rând de date.
   *
   * Pe laptop, bara de sus, titlul, explicația, căsuțele și filtrele iau o
   * treime din ecran și rămâne destul. Pe telefon luau aproape jumătate, iar
   * cifra pentru care s-a deschis aplicația ajungea sub degetul mare. Deci:
   * explicația modulului se retrage (titlul spune destul cuiva care tocmai a
   * apăsat pe el), iar căsuțele se aliniază pe un singur rând care se trage cu
   * degetul, în loc să se așeze pe două-trei rânduri.
   */
  .modul-antet p { display: none; }
  .modul-antet { padding: 10px 12px 0; }

  .kpi {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    padding: 8px 12px 4px; gap: 7px;
    scroll-snap-type: x proximity;
  }
  .kpi-card { flex: 0 0 auto; min-width: 132px; scroll-snap-align: start; padding: 8px 10px; }
  .kpi-valoare { font-size: 22px; }
  .kpi-detaliu { white-space: normal; }

  .bara-actiuni .btn { min-height: 40px; }
  .taburi-principale { overflow-x: auto; flex-wrap: nowrap; }
  .tab-uri { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
}

@media (max-width: 560px) {
  /* Bara de sus nu mai stă lipită: pe un ecran de 812 px, 148 din ei ținuți
     permanent de antet înseamnă că lista se citește printr-o fantă. Se ia cu
     pagina în sus, iar ce rămâne lipit e capul tabelului — acolo scrie ce
     înseamnă cifrele de sub deget. */
  .bara { position: static; }
}

@media (max-width: 560px) {
  /* Butonul de intrare: cât un deget, ca și câmpul de PIN de deasupra lui. */
  .login-buton { min-height: 46px; }

  /* Monitorul din secție e desenat ca să se citească de la doi metri, cu litere
     socotite din înălțimea rândului. Pe un telefon ținut în mână, aceleași
     litere nu încap pe lățime: numărul comenzii curge afară din ecran. Aici se
     retrag la o mărime de citit de aproape, iar utilajul se rupe pe două
     rânduri în loc să fie tăiat.
     Nu e ecranul pentru care s-a făcut pagina asta — dar când coordonatorul o
     deschide din mers pe telefon, trebuie să vadă tot, nu jumătate. */
  .monitor-comanda { font-size: 26px; }
  .monitor-utilaj  { font-size: 15px; white-space: normal; }
  .monitor-zile    { font-size: 22px; }
  .monitor-loc     { font-size: 24px; }
  .monitor-rand { padding: 0 10px; }
  .monitor-cap { padding: 6px 10px; }
  .monitor-titlu { font-size: 15px; }
  .monitor-gol { font-size: 15px; padding: 16px 10px; }
  .monitor-bara { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 560px) {
  /* Filtrele monitorului — categorie, gestiune, filială — se așezau pe un rând
     care nu încăpea: gestiunile singure fac 427 px pe un ecran de 375. Se rup
     pe mai multe rânduri, ca oriunde altundeva pe telefon. */
  .monitor-grup { flex-wrap: wrap; max-width: 100%; }
  .monitor-bara { align-items: flex-start; }
}

@media (max-width: 900px) {
  /* Derularea laterală a tabelului, pe ecran tactil.
   *
   * `overscroll-behavior-x: contain` oprește gestul să treacă mai departe la
   * browser: fără el, cine trage tabelul spre dreapta și ajunge la capăt
   * declanșează „înapoi" și pierde pagina. */
  .tabel-container, .kpi, .tab-uri, .taburi-principale, .lateral {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 900px) {
  /* Când bara de module stă pe orizontală — și pe tabletă, nu doar pe telefon —
     numele omului merge la capătul rândului, nu într-un bloc de o sută de
     pixeli înălțime care umflă toată fâșia. */
  .lateral-jos { flex-direction: row; margin: 0; padding: 0; border-top: none; }
  .lateral-cine {
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
    padding: 6px 14px; border-top: none;
    border-left: 1px solid rgba(255,255,255,.14);
  }
  .cine-functie { display: none; }
  .cine-iesi { margin: 0; padding: 8px 14px; min-height: 38px; }
  .lateral-versiune { display: none; }
}

/* Rotitorul mic, pentru locul gol al unui tabel care încă se aduce. */
.rotitor-mic {
  display: inline-block; width: 22px; height: 22px; margin: 0;
  border-width: 2.5px; vertical-align: middle;
}

/* ------------------------------------------- ce filtre poartă lista tipărită */

/* O foaie ajunge pe masa cuiva care n-a fost de față când s-a apăsat butonul.
   Ce schimbă prioritatea se scrie apăsat, în chenar; restul, alături, cu litera
   obișnuită. Amândouă alb-negru: foaia iese la o imprimantă de hală. */
.print-filtre {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; font-size: 10px; color: #55636b;
}
.print-filtru-tare {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; line-height: 1.6;
  border: 1.5px solid #003349; color: #003349; background: #fff;
}
.print-filtru-tare.critic { background: #003349; color: #fff; }
.print-filtru-tare.pe-comenzi { border-style: dashed; }
.print-filtru-slab { color: #55636b; }

/* Semnătura stă sub nume, cum se semnează o hârtie: scrii cine ești, și
   dedesubt semnezi. */
.print-semnatura-imagine { margin: 2px 0 0; object-position: left top; }

/* ------------------------------------------------ lățimile fâșiilor, sus */

/* La semifabricate lățimea nu e un filtru între altele: e prima întrebare a
   celui care caută ceva în hală. De aceea butoanele stau la vedere, sub
   tab-urile mari, nu în panoul care se pliază. */
.latimi-bara {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 22px 0;
}
.latimi-titlu {
  font-family: var(--font-titlu); font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-slab);
  margin-right: 4px;
}
.latime-chip { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .latimi-bara { padding: 8px 12px 0; overflow-x: auto; flex-wrap: nowrap; }
  .latime-chip { flex: 0 0 auto; }
}

/* Ce pleacă la cealaltă filială, în panoul de feliere: aceeași cifră ca pe
   etichetă, ca să nu existe două adevăruri pentru aceeași fâșie. */
.det-parte-filiale {
  color: var(--albastru); font-weight: 650;
}
@media (prefers-color-scheme: dark) { .det-parte-filiale { color: var(--text); } }

/* Lățimea pe care schema o cere, dar din care nu se produce nimic acum: fâșiile
   ei merg pe raft. Se scrie, ca să nu pară că lipsește ceva din listă. */
.det-doar-raft {
  color: var(--text-slab); font-style: italic; font-size: 12px;
}
/* Ce n-a încăput în tăierea asta și rămâne pentru următoarea. */
.det-ramase {
  margin-left: 6px; font-size: 11px; color: var(--text-slab); white-space: nowrap;
}

/* ------------------------------------------------------- modulul Stoc setup */

/* Câte praguri sunt așezate din aplicație, pe tab. */
.ss-puse {
  margin-left: 6px; font-size: 10.5px; font-weight: 700;
  color: var(--ok); letter-spacing: .2px;
}
/* Casetele de scris din tabel: cât o cifră, nu cât o coloană. */
.ss-camp {
  width: 84px; text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--font-corp); font-size: 13px;
  padding: 4px 6px; border: 1px solid var(--linie); border-radius: 5px;
  background: var(--card); color: var(--text);
}
.ss-camp:focus { outline: none; border-color: var(--albastru); }
/* Rândul tocmai salvat clipește o dată: fără semnul ăsta, cine schimbă o cifră
   și pleacă mai departe n-are de unde ști dacă s-a scris. */
.ss-salvat td { background: var(--ok-fundal); transition: background .6s; }
.ss-sursa { white-space: nowrap; }
.filtre-gestiuni { padding-top: 0; }
.filtru-titlu {
  font-family: var(--font-titlu); font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-slab);
}
.ss-mai-mult { display: flex; justify-content: center; padding: 12px 0; }
/* Pe telefon caseta are inaltime de deget, nu de maus - se scrie in ea cu
   degetul mare, in hala, nu cu mausul la birou. */
@media (max-width: 560px) {
  .ss-camp { width: 76px; min-height: 40px; font-size: 15px; }
}

/* Filtrul care taie lista în două: ce trece prin mașinile noastre și ce doar
   stă pe raft. Se vede mai apăsat decât celelalte bife — după el se caută. */
.ss-comutator-tare span { font-weight: 700; color: var(--albastru); }
@media (prefers-color-scheme: dark) { .ss-comutator-tare span { color: var(--text); } }

/* Nota de lângă bifa de sus: spune unde au plecat celelalte filtre. */
.ss-nota { font-size: 12px; color: var(--text-slab); }
/* Casetele de ales din capul tabelului, la Stoc setup: aceleași ca la
   utilizatori, doar că unele stau pe coloane de cifre și se aliniază la dreapta. */
#stoc-setup-modul .util-cauta-rand .num .util-filtru { text-align: right; }
#stoc-setup-modul .util-cauta-rand th { vertical-align: top; }
/* Pe telefon și filtrele din cap au înălțime de deget, ca și casetele de scris
   de sub ele: modulul se folosește și din hală, nu doar de la birou. */
@media (max-width: 560px) {
  #stoc-setup-modul .util-cauta-rand .util-filtru,
  #stoc-setup-modul .util-cauta-rand .util-cauta { min-height: 40px; font-size: 14px; }
}

/* Așteptarea din Stoc setup: rotița plus un rând de text, ca la „Produs vs
   realizat". O pagină goală se citește ca „nu merge", nu ca „se încarcă". */
.ss-asteapta {
  display: flex; align-items: center; gap: 12px;
  padding: 40px 22px; color: var(--text-slab); font-size: 14px;
}
.ss-asteapta .rotitor-mic { margin: 0; }
.ss-asteapta-rau { color: var(--critic); }
.ss-semn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 2px solid var(--critic); font-weight: 700;
}

/* Graficul "produs vs realizat": cate o pereche de bare pe felie. Bara de
   sus e cat e de facut, cea de jos cat s-a facut - una peste alta, ca sa se
   vada dintr-o privire cat lipseste, nu doar cat s-a facut. */
.grafic-antet { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.gr-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.gr-rand { display: grid; grid-template-columns: minmax(120px, 200px) 1fr minmax(150px, auto); gap: 10px; align-items: center; }
.gr-nume { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-bare { display: flex; flex-direction: column; gap: 3px; }
.gr-bara { height: 10px; border-radius: 5px; min-width: 2px; transition: width .2s; }
.gr-defacut { background: var(--albastru-slab); }
.gr-realizat { background: var(--ok); }
.gr-cifre { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; font-size: 12px; }
.gr-proc { font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-proc.ok { color: var(--ok); }
.gr-proc.mediu { color: var(--urgent); }
.gr-proc.slab { color: var(--critic); }
@media (max-width: 640px) { .gr-rand { grid-template-columns: 1fr; gap: 4px; } .gr-cifre { justify-content: flex-start; } }

/* Semnul de langa timp: de la utilaj sau doar de la ambalare. Doua nuante,
   nu doua culori tari - cifra e cea care conteaza, semnul doar o explica. */
.fasii-utilaj { background: var(--albastru-slab); color: var(--albastru); }
.fasii-ambalare { background: var(--albastru-slab); color: var(--text-slab); }