:root {
  /* Paleta implicita LUMINOASA (Cuisine Verde). Temele o suprascriu la runtime. */
  --green: #1f7a4d;
  --green-dark: #14603b;
  --green-light: #e3f2ea;
  --bg: #f4f9f6;
  --card: #ffffff;
  --line: #e2e8e5;
  --text: #16261e;
  --muted: #5d6b64;
  --busy: #e0792e;
  --accent: #2563eb;
  /* suprafete neutre pentru butoane utilitare (independente de tema) */
  --surface: #eef0f2;
  --surface-2: #e2e6ea;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  background: var(--bg); color: var(--text);
  /* SELECTIA DE TEXT E PERMISA (30.07.2026): userul trebuie sa poata copia nume de
     calculator, IP-uri, coduri etc. din admin/diagnoza. Doar tap-target-ele (butoane,
     dale, taste, produse) raman neselectabile — regula de mai jos + regulile POS
     specifice existente (.product, .lines, vkbd, drag). */
  /* REINCARCAREA PRIN TRAGERE DE SUS, OPRITA (28.07.2026). Pe Android, tragand in jos
     cand esti deja sus, Chrome reincarca pagina — in mijlocul unei comenzi asta inseamna
     comanda pierduta. Paza statea pe grila de produse (`overscroll-behavior: contain`),
     dar acolo bloca si derularea normala catre restul paginii, ceruta de proprietar. Mutata
     aici, face DOAR ce trebuie: opreste reincarcarea, nu si derularea. */
  overscroll-behavior-y: contain;
}
#app { height: 100vh; }
/* Ecranul POS (mese): coloana de viewport care NU se derulează la nivel de pagina.
   Fara asta, topbar-ul (care se pliaza pe 2 randuri sub 1280px) + .tables-zone-wrap
   depaseau 100vh si aparea o bara de derulare EXTERIOARA chiar daca mesele incap. */
.pos { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.muted { color: var(--muted); }
.error { color: #fca5a5; }
.center { display: flex; align-items: center; justify-content: center; height: 60vh; font-size: 16px; }
/* SERVERUL NU RASPUNDE. `.center` aseaza pe rand; aici avem trei lucruri unul SUB altul
   (titlul, indrumarea, butonul), deci intoarcem coloana. Textul se centreaza fiindca pe
   telefon indrumarea trece pe doua randuri si aliniata la stanga ar arata rupta. */
.server-jos { flex-direction: column; gap: 12px; text-align: center; padding: 0 24px; }
.server-jos p { margin: 0; }
.server-jos-titlu { font-size: 18px; font-weight: 800; }

/* ---------- Login ---------- */
.login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--card); padding: 32px; border-radius: 16px; width: 320px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.14);
}
.login-logo {
  width: 56px; height: 56px; border-radius: 12px; background: var(--green);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px;
  margin: 0 auto 4px;
}
.login-card h1 { font-size: 20px; margin: 0; text-align: center; }
.login-card p { margin: 0 0 8px; text-align: center; }
.login-card input {
  padding: 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-size: 16px;
}
/* mesele din plan (.masa-plan) NU sunt butoane verzi: au lemnul/starea lor */
/* `.op-badge` (numele operatorului) e scutit: are pastila lui ALBA cu textul in culoarea
   operatorului. Fara exceptie, regula asta (specificitate 0,3,1) ii punea fundal VERDE
   peste albul din `.op-badge` (0,1,0) => nume colorat pe verde, ilizibil. */
.login-card button, .pos button:not(.table-cell):not(.masa-plan):not(.op-badge),
.order .topbar button:not(.op-badge) {
  padding: 14px; border: 0; border-radius: 10px; font-size: 16px; font-weight: 700;
  background: var(--green); color: #fff; cursor: pointer;
}
.login-card button:disabled { opacity: .6; }

/* ---------- POS shell ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--green); color: #fff;
  /* `wrap` ramane doar ca PLASA DE SIGURANTA (nimic nu iese din ecran). In mod normal
     nu se pliaza: sub 1280px butoanele raman doar cu iconita si incap pe UN rand. */
  flex-wrap: wrap;
}
.brand { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.brand-badge {
  background: rgba(255,255,255,.2); border-radius: 8px; padding: 4px 8px; font-size: 14px;
}
.loc-switch { display: flex; gap: 6px; margin-left: 8px; }
.loc-switch button {
  background: rgba(255,255,255,.15); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 600;
}
.loc-switch button.active { background: #fff; color: var(--green); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* insigna operatorului: langa titlu, deci ramane pe randul 1 cand bara se pliaza */
.top-operator { display: flex; align-items: center; gap: 8px; }
/* Butoanele din bara de sus, COMPACTE. Specificitate egala cu regula generica
   `.pos button:not(...)` (0,3,1) => castiga fiindca vine mai jos in fisier. */
/* DALE CU TEXT, FARA EMOTICOANE (25.07.2026, cerinta proprietarului: „nu stie lumea ce
   sunt" iconitele). Textul e SINGURUL continut al dalei si ramane vizibil pe ORICE
   ecran — inainte, pe telefon, textul se ascundea si ramaneau doar emoji-urile. */
.pos .topbar button:not(.op-badge),
.order .topbar button:not(.op-badge) { padding: 8px 12px; border-radius: 8px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1.15; }
.topbar .btxt { font-size: 14px; font-weight: 700; }
.top-user { font-size: 13px; }
/* CEASUL din coltul barei (24.10.2026): ora mare, ziua si data mici alaturi; ora casei de marcat
   intr-o pastila, rosie cand casa e departe de ora reala. Cifre de latime egala, ca ora sa nu tremure. */
.ceas-pos { display: flex; align-items: center; gap: 7px; white-space: nowrap; line-height: 1.1; flex: 0 0 auto; }
.ceas-ora { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.ceas-data { font-size: 12px; font-weight: 600; opacity: .9; }
.ceas-casa { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 7px;
  background: rgba(255,255,255,.14); text-align: center; font-variant-numeric: tabular-nums; }
.ceas-casa.rau { background: #c62828; color: #fff; font-weight: 800; }
/* Sub 1280px bara se pliaza oricum pe doua randuri (pe 1024x768 al doilea rand statea
   pe jumatate gol), deci textul doar se micsoreaza. */
@media (max-width: 1280px) {
  .top-user { display: none; }
  .pos .topbar button:not(.op-badge),
  .order .topbar button:not(.op-badge) { padding: 6px 10px; min-height: 40px; }
  .topbar .btxt { font-size: 13px; font-weight: 700; }
  .topbar { gap: 6px 8px; padding: 5px 10px; }
  .brand { font-size: 16px; }
}
/* Pe telefon textul RAMANE (fara el dalele ar fi goale) — doar mai strans. */
@media (max-width: 820px) {
  .pos .topbar button:not(.op-badge),
  .order .topbar button:not(.op-badge) { padding: 6px 8px; min-height: 38px; }
  .topbar .btxt { font-size: 12px; }
}
.top-right .ghost { background: rgba(0,0,0,.2); }
/* Butonul „i in cerc" — ajutor contextual pe ecranele operationale (Proiect 2, task 4):
   mic, rotund, discret, in coltul barei — nu concureaza cu butoanele de lucru. Specificitate
   ridicata inadins (0,4,1), ca sa castige in fata regulilor generice de mai sus, inclusiv
   in cele doua media query-uri (1280px/820px) care restrang padding/min-height pe TOATE
   butoanele barei. */
.pos .topbar button.pos-info-btn,
.order .topbar button.pos-info-btn {
  width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; font-size: 14px; font-weight: 700;
  font-style: italic; line-height: 1; flex: 0 0 auto;
}

/* ---------- Mese (salon) — mese elegante cu scaune ---------- */
/* Grila NU mai are inaltimea ecranului (cand erau mai multe zone, prima impingea
   restul sub ecran, cu spatii uriase). Derularea e pe invelisul de zone; numarul de
   coloane si marimea pictogramei vin CALCULATE din tables.js (--tcols/--icoh), ca
   TOATE mesele + zonele sa incapa pe un singur ecran, indiferent de rezolutie. */
.tables-grid {
  display: grid; grid-template-columns: repeat(var(--tcols, 6), 1fr);
  gap: 6px; padding: 2px 0 6px; align-content: start;
}
/* Mese = carduri ALBE cu masa+scaune desenate in culoarea temei. Ocupata = accent "busy". */
.table-cell {
  position: relative; background: var(--card); border: 1px solid var(--line); cursor: pointer;
  padding: 4px 3px 3px; display: flex; flex-direction: column; align-items: center; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.table-cell:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); transform: translateY(-2px); }
.table-cell:active { transform: scale(.97); }
.table-cell.busy { border-color: var(--busy); background: var(--card); }
/* pictograma vedere laterala: disc tint deschis + silueta in culoarea temei */
.dine-svg { width: 100%; height: auto; max-height: var(--icoh, 96px); }
.dine-bg { fill: var(--green-light); transition: fill .15s; }
.table-cell.busy .dine-bg { fill: #fbeadb; }
.dine-fg rect { fill: var(--green); }
.dine-fg circle { fill: var(--green); }
.dine-fg path { stroke: var(--green); fill: none; }
.table-cell.busy .dine-fg rect { fill: var(--busy); }
.table-cell.busy .dine-fg circle { fill: var(--busy); }
.table-cell.busy .dine-fg path { stroke: var(--busy); }
/* Aceleasi culori si in PREVIZUALIZAREA din „Personalizare", unde masa nu sta intr-un
   `.table-cell`: acolo starea „ocupat" se marcheaza direct pe <svg>. */
.dine-svg.busy .dine-bg { fill: #fbeadb; }
.dine-svg.busy .dine-fg rect { fill: var(--busy); }
.dine-svg.busy .dine-fg circle { fill: var(--busy); }
.dine-svg.busy .dine-fg path { stroke: var(--busy); }
/* Stilul SCHEMATIC (contur): aceleasi forme, dar doar conturate — masa se vede ca un
   desen tehnic, nu ca o silueta plina. */
.dine-fg.dine-contur rect,
.dine-fg.dine-contur circle { fill: none; stroke: var(--green); stroke-width: 3; }
/* Formele GOALE dinauntrul mesei (farfurii, pahare): conturate cu culoarea fondului, ca
   sa se vada peste blatul plin — altfel ar fi un bloc de aceeasi culoare, invizibil. */
.dine-fg .dine-gol rect,
.dine-fg .dine-gol circle { fill: var(--green-light); stroke: var(--green); stroke-width: 2; }
.table-cell.busy .dine-fg .dine-gol rect,
.table-cell.busy .dine-fg .dine-gol circle,
.dine-svg.busy .dine-fg .dine-gol rect,
.dine-svg.busy .dine-fg .dine-gol circle { fill: #fbeadb; stroke: var(--busy); }
.table-cell.busy .dine-fg.dine-contur rect,
.table-cell.busy .dine-fg.dine-contur circle,
.dine-svg.busy .dine-fg.dine-contur rect,
.dine-svg.busy .dine-fg.dine-contur circle { stroke: var(--busy); }

/* NUMARUL MESEI: cerc ALB cu cifra mare si contur in culoarea starii —
   numarul e cel mai important lucru de pe masa, se vede de la distanta */
/* Marimile s-au mai strans pe 25.07.2026: pe 1024x768, cu 20 de mese pe zona, tiglele
   nu incapeau si ramaneau doua bare de derulare in dreapta.
   ACTUALIZARE 25.07 (seara): cauza reala a barelor era containerul (.tables-zone-wrap avea
   calc(100vh - 56px) cu bara pe 2 randuri) — reparat sus, la .pos/.tables-zone-wrap. Aici a
   ramas doar o strangere USOARA ceruta de proprietar ("mai reduce un pic datele meselor"):
   36px cerc / 21px cifra. Cifra ramane citeata de la distanta. */
.tlabel {
  margin-top: -12px; position: relative; z-index: 1;
  min-width: 36px; height: 36px; padding: 0 7px; box-sizing: border-box;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: #fff; border: 3px solid var(--green); color: var(--green);
  font-size: 21px; font-weight: 900; line-height: 1;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);
}
.table-cell.busy .tlabel { border-color: var(--busy); color: var(--busy); }
.table-cell.nota-emisa .tlabel { border-color: #2563eb; color: #2563eb; }
.table-cell.rezervata .tlabel { border-color: #f59e0b; color: #b45309; }
.ttotal {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface); padding: 1px 8px; border-radius: 20px; letter-spacing: .2px;
}
.ttotal.on { color: #fff; background: var(--busy); }

@media (max-width: 780px) { .tables-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Ecran comanda ---------- */
.order { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.order-total { font-weight: 800; font-size: 18px; }
/* min-height:0 e OBLIGATORIU: fara el, un copil flex creste dupa continut in loc
   sa deruleze, si impinge butoanele in afara ecranului cand comanda e lunga. */
.order-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px 1fr; overflow: hidden; }
/* `overflow: hidden` e OBLIGATORIU, nu cosmetic: coloana bonului are lista (`.lines`,
   flex:1) si panoul de butoane (`.pad`, flex-shrink:0). Cand inaltimea e stramta — de
   ex. la asezarile pe verticala din „Personalizare" — lista se prabuseste la 0, iar
   panoul, care nu se micsoreaza, IESE din coloana si se suprapune peste produse
   (bug vazut in productie pe 26.07.2026). Cu `hidden`, nimic nu mai scapa afara. */
.order-left { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--card); border-right: 1px solid var(--line); }
/* Invelisul bonului (selectie + lista + bacsis + trimitere). Exista ca sa putem desparti
   bonul de panoul de butoane la asezarile cu trei zone; in rest se poarta exact ca
   inainte — se intinde si lasa panoul la inaltimea lui. */
.ol-bon { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
/* Lista e cea care CEDEAZA spatiu (panoul de butoane nu): `flex: 1 1 0` + o inaltime
   minima mica, apoi se deruleaza. Asa butoanele raman intregi, iar comanda lunga se
   derulează — invers ar fi insemnat butoane strivite, care nu se mai pot apasa. */
.lines {
  flex: 1 1 0; min-height: 60px; overflow-y: auto; overflow-x: hidden; padding: 8px;
  -webkit-overflow-scrolling: touch;   /* derulare cu degetul, cu inertie */
  overscroll-behavior: contain;        /* nu "trage" si pagina de dedesubt */
  touch-action: pan-y;
}
/* Randul din bon se STRANGE pe ecrane mici (26.07.2026): pe un ecran scund, un font si
   un spatiu fixe insemnau 4-5 produse vizibile si derulare pentru rest. Cu marimi legate
   de inaltimea ecranului, pe ecranul mare raman ca inainte (15px), iar pe unul mic scad
   pana la 12px — adica se vad cu 3-4 produse mai mult. Lista are oricum derulare, dar
   scopul e sa fie nevoie de ea cat mai rar. */
.line { display: grid; grid-template-columns: clamp(26px, 3.6vh, 34px) 1fr auto;
  gap: clamp(5px, 1vh, 8px); align-items: center;
  padding: clamp(5px, 1.3vh, 10px) 8px; border-radius: 8px; cursor: pointer;
  font-size: clamp(12px, 2vh, 15px); }
.line:hover { background: rgba(0,0,0,.04); }
.line.sel { background: var(--green); color: #fff; }
.line.sel .q { background: rgba(255,255,255,.25); }
.line .q { text-align: center; font-weight: 800; background: var(--green-light); border-radius: 6px; padding: 2px 0; }
.line .p { font-weight: 700; }
.center-sm { text-align: center; padding: 24px; }
.actions { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.actions button { background: var(--surface); color: var(--text); padding: 14px 6px; }
.actions button:hover { background: var(--surface-2); }
.actions .pay { background: var(--green); color: #fff; }
.actions .pay:hover { background: var(--green-dark); }
.msg { padding: 8px; text-align: center; color: var(--muted); }
.order-right { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.search { margin: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 16px; }
.cats { display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto; }
.cats button { white-space: nowrap; background: var(--card); color: var(--text); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); }
.cats button.active { background: var(--green); color: #fff; border-color: var(--green); }
/* Grila de produse + sagetile de derulare intr-o coloana proprie in dreapta
   (NU peste produse — ca sa nu acopere si sa nu duca la apasari gresite).
   `--coloane-produse` (Task 6, 27.07.2026): variabila CSS setata din order.js DOAR cand
   posByLocation.coloaneProduse e configurat explicit (2-8) -- vezi stilColoaneProduse().
   Neasezata (implicit), `var(..., auto-fill)` cade pe EXACT valoarea de azi -- niciun
   terminal care n-a atins setarea asta nu vede vreo schimbare. */
.grid-wrap { flex: 1; min-height: 0; display: flex; position: relative; }
/* CAPATUL LISTEI: dunga verde care se aprinde cand grila s-a terminat (28.07.2026).
   Rostul ei e sa raspunda la o intrebare pe care degetul si-o pune: „s-a terminat lista,
   sau s-a blocat aplicatia?". De aici incolo, tragerea misca pagina intreaga.
   `pointer-events: none` — e un semn, nu un buton: nu are voie sa fure atingerea
   produsului de dedesubt. */
.grid-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(to top, var(--green, #1f7a4d), rgba(31,122,77,0));
  opacity: 0; transition: opacity .18s ease; pointer-events: none; border-radius: 0 0 8px 8px;
}
.grid-wrap.la-capat::after { opacity: 1; height: 10px; box-shadow: 0 0 14px rgba(31,122,77,.55); }
@media (prefers-reduced-motion: reduce) { .grid-wrap::after { transition: none; } }
.product-grid {
  flex: 1; min-height: 0; overflow-y: auto; display: grid;
  grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(min(150px, 100%), 1fr)); gap: 10px; padding: 10px; align-content: start;
  /* DERULAREA TRECE MAI DEPARTE LA PAGINA cand grila s-a terminat (28.07.2026, cerut de
     proprietar): „cand ajunge la ultimul produs sa traga de pagina in sus si in jos".
     Era `overscroll-behavior: contain`, adica exact opusul — degetul se oprea in gol la
     capatul listei si pagina nu se mai misca, desi sub grila mai era comanda si butoanele.
     `contain` bloca insa si reincarcarea prin tragere de sus (pull-to-refresh) — un reload
     in mijlocul unei comenzi ar fi pierdut-o. De aia paza aia s-a mutat pe <body> (vezi
     acolo): pagina nu se mai poate reincarca din greseala, dar derularea curge normal. */
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; touch-action: pan-y;
  scroll-behavior: smooth;
}
/* Sagetile ▲▼ din dreapta grilei au fost SCOASE pe 25.07.2026: ocupau o coloana de
   ~74px pe un ecran de 1024 si faceau acelasi lucru pe care-l face acum tragerea —
   pui degetul sau mouse-ul in grila si tragi (vezi tragereIncepe/Misca/Gata din order.js). */
.product-grid { cursor: grab; }
.product-grid:active { cursor: grabbing; }
/* Tigla de produs se strange si ea pe ecrane scunde (vezi `.sectile`) — altfel pe un
   ecran de 600px intrau 3 randuri de produse in loc de 5. */
.product { display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(54px, 10.5vh, 74px); text-align: left; min-width: 0;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  padding: clamp(6px, 1.3vh, 10px); border-radius: 10px; cursor: pointer; }
.product:hover { border-color: var(--green); }
.product .pn { font-weight: 600; font-size: clamp(12px, 1.9vh, 14px); overflow-wrap: anywhere; }
/* `white-space: nowrap` a fost o greseala (26.07.2026): la dalele meniului zilei textul
   e lung („27.00 RON · adauga direct") si, nerupt, iesea din dala peste numele produsului.
   Se rupe pe randuri; doar numarul in sine nu are voie sa se despartă. */
.product .pp { color: var(--green-dark); font-weight: 800; align-self: flex-end;
  max-width: 100%; overflow-wrap: anywhere; text-align: right; }
/* Categoriile ca butoane mari (nivel 1) + bara de intoarcere/cautare (nivel 2). */
.cattile { min-height: clamp(58px, 12vh, 84px); }
.cattile .pn { font-size: clamp(13px, 2.1vh, 16px); font-weight: 800; }
.cattile .pp { color: var(--muted); font-weight: 700; font-size: 12px; align-self: flex-start; }
.cattile:hover { border-color: var(--green); background: var(--green-light); }
/* „Toate produsele" — prima tigla din sectie, usor evidentiata */
.cattile.toate { border-style: dashed; border-color: var(--green); }
.cattile.toate .pn { color: var(--green-dark); }
/* Raportul „Vanzari gestiuni": interval + previzualizare ca bon termic */
.rg-interval { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.rg-interval label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.rg-pre {
  font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; line-height: 1.35;
  background: #fff; border: 1px solid var(--border, #ddd); border-radius: 8px;
  padding: 12px 14px; max-height: 340px; overflow: auto; white-space: pre;
}
.cat-bar { display: flex; align-items: center; gap: 10px; padding: 8px; flex-wrap: wrap; }
/* butonul de intoarcere e cel mai apasat din navigare -> tinta MARE pentru deget */
.cat-bar .cat-back {
  white-space: nowrap; flex: 0 0 auto;
  min-height: 54px; padding: 10px 20px; font-size: 17px; font-weight: 800;
  border: 2px solid var(--green, #1f7a4d); border-radius: 11px;
  background: var(--green-light, #eaf6ef); color: var(--green, #1f7a4d);
}
.cat-bar .cat-back:active { background: var(--green, #1f7a4d); color: #fff; }
/* Acasa: sare direct la cele 3 sectiuni principale (Bar / Bucatarie / Meniul zilei) */
.cat-bar .cat-home {
  flex: 0 0 auto; min-height: 54px; min-width: 58px; padding: 8px 12px; font-size: 22px;
  border: 2px solid var(--green, #1f7a4d); border-radius: 11px;
  background: var(--green, #1f7a4d); color: #fff; line-height: 1;
}
.cat-bar .cat-home:active { filter: brightness(.9); }
.cat-titlu { font-size: 18px; font-weight: 800; flex: 0 0 auto; }
.cat-bar .search { flex: 1; min-width: 120px; margin: 0; min-height: 54px; }
/* Tabel de discount: valori rapide (chips) mari pentru deget */
.disc-grup { margin-bottom: 12px; }
.disc-titlu { font-weight: 800; font-size: 14px; margin-bottom: 7px; color: var(--muted); }
.disc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.disc-chip { min-height: 52px; min-width: 76px; padding: 8px 16px; font-size: 17px; font-weight: 800;
  border: 2px solid var(--line); border-radius: 11px; background: var(--card); color: var(--text); cursor: pointer; }
.disc-chip.sel { border-color: var(--green); background: var(--green); color: #fff; }
.disc-sau { display: inline-block; }
/* Nivel 1: sectiunile principale mari (Bucatarie / Bar / Meniul zilei). */
/* `min(200px, 100%)` in loc de `200px`: cand coloana produselor e mai INGUSTA de 200px
   (se intampla la asezarile cu trei zone sau pe ecrane mici), o coloana fixa de 200px
   iese din container si textul dalei se taie — „56 produ…". Cu `min()`, dala nu poate
   fi niciodata mai lata decat locul in care sta. Inaltimea si textul scad si ele odata
   cu ecranul, ca la butoanele de comanda. (26.07.2026) */
.grid-sectiuni { grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(min(200px, 100%), 1fr)); }
.sectile { min-height: clamp(76px, 17vh, 130px); }
.sectile .pn { font-size: clamp(15px, 2.7vh, 21px); }
.sectile .pp { font-size: clamp(11px, 1.7vh, 13px); }
/* Meniul zilei — evidentiat (foarte folosit), al treilea buton. */
.sectile.mz { background: var(--green); border-color: var(--green); color: #fff; }
.sectile.mz .pp { color: rgba(255,255,255,.85); }
.sectile.mz:hover { background: var(--green-dark); }
/* Produsele SUPLIMENTARE din Meniul zilei (deserturi individuale, ciorbă delivery...):
   roz plin „de desert", texte albe — se deosebesc dintr-o privire de tiglele verzi.
   `.pp` primeste pastila roz-inchis (suprascrie pastila VERDE din regula generala
   `.product .pp { background: var(--green) }` de mai jos — altfel pretul iesea ilizibil). */
.sectile.mz.mz-extra { background: #fff; border: 2px solid #d6679e; color: #b3446c; }
.sectile.mz.mz-extra .pn { color: #b3446c; }
.product.sectile.mz.mz-extra .pp { color: #b3446c; background: #fbe9f2; }
.sectile.mz.mz-extra:hover { background: #fdf4f8; }

/* ---------- Ecran plata ---------- */
.pay-wrap { height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.pay-card { background: var(--card); border-radius: 16px; padding: 28px; width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,.14); border: 1px solid var(--line); }
.pay-head { font-size: 15px; color: var(--muted); }
.pay-total { font-size: 30px; margin: 8px 0 16px; }
.pay-received, .pay-change { font-size: 20px; margin: 6px 0; }
.pay-change { font-size: 22px; margin: 12px 0 4px; }
.pay-change b { color: var(--busy); font-size: 26px; }
/* Casuta "Primit de la client": elementul principal — scrii direct suma. */
.pay-primit-camp { display: block; margin: 16px 0 4px; }
.pay-primit-titlu { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.pay-primit-box { position: relative; display: flex; align-items: center; }
.pay-primit-input { width: 100%; padding: 16px 92px 16px 16px; font-size: 30px; font-weight: 800;
  color: var(--text); background: var(--surface); border: 2px solid var(--accent); border-radius: 12px; outline: none; }
.pay-primit-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.pay-primit-unit { position: absolute; right: 16px; font-size: 16px; font-weight: 700; color: var(--muted); pointer-events: none; }
.pay-primit-x { position: absolute; right: 56px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text); font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.pay-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.pay-keys button { padding: 16px; background: var(--surface); color: var(--text); border: 0; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; }
.pay-keys button:hover { background: var(--surface-2); }
.pay-keys .exact { background: var(--accent); color: #fff; grid-column: span 3; }
.pay-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 10px; }
.pay-actions button { padding: 16px; border: 0; border-radius: 10px; font-size: 17px; font-weight: 700; cursor: pointer; }
.pay-actions .ghost2 { background: var(--surface); color: var(--text); }
.pay-actions .confirm, .pay-card .confirm { background: var(--green); color: #fff; padding: 16px; border: 0; border-radius: 10px; font-size: 17px; font-weight: 800; cursor: pointer; width: 100%; }
.pay-card.done { text-align: center; }
.ok-badge { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; font-size: 40px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }

/* ================= ADMIN (stil Cuisine, ca appul vechi) ================= */
.admin { display: grid; grid-template-columns: 260px minmax(0,1fr); height: 100vh; background: #f6f5f3; color: #171717; }
.side { background: #171717; color: #e7e5e4; display: flex; flex-direction: column; padding: 14px 12px; gap: 6px; overflow: auto; }
.side-logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.side-logo .logo-badge { width: 40px; height: 40px; border-radius: 10px; background: #b64032; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.side-logo small { display: block; color: #a8a29e; font-size: 11px; }
.side-logo .side-ver { color: #d6d3d1; font-weight: 600; cursor: pointer; }
/* ================= KDS — ECRANUL DE BUCATARIE / BAR =================
 * Tema INCHISA intentionat (sta aprins toata ziua langa imprimanta), text mare
 * (se citeste din picioare), cartonase colorate dupa cat asteapta comanda. */
.kds { min-height: 100vh; background: #101418; color: #e7e5e4; display: flex; flex-direction: column; }
.kds-bara { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #171c22; border-bottom: 1px solid #2a3138; flex-wrap: wrap; }
.kds-inapoi, .kds-tab {
  min-height: 46px; padding: 8px 16px; border-radius: 10px; font-weight: 800; font-size: 15px;
  border: 1px solid #3a424b; background: #222932; color: #e7e5e4; cursor: pointer;
}
.kds-tab.on { background: var(--green); border-color: var(--green); color: #fff; }
.kds-nr { background: rgba(255,255,255,.25); border-radius: 20px; padding: 1px 9px; margin-left: 4px; }
.kds-spacer { flex: 1; }
.kds-ceas { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 0 6px; }
.kds-msg { margin: 8px 12px 0; color: #fbbf24; }
.kds-grila {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px; padding: 12px; align-content: start; flex: 1; overflow-y: auto;
}
.kds-card { background: #1b222a; border: 2px solid #2a3138; border-left-width: 8px; border-radius: 12px; display: flex; flex-direction: column; }
.kds-card.tarziu { border-color: #b45309; background: #241d12; }
.kds-card.foarteTarziu { border-color: #dc2626; background: #2a1414; }
.kds-card.eroare { border-color: #7c3aed; }
.kds-card.gata { opacity: .75; border-color: #14532d; }
.kds-card header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #2a3138; }
.kds-masa { font-size: 20px; }
.kds-timp { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kds-card.tarziu .kds-timp { color: #fbbf24; }
.kds-card.foarteTarziu .kds-timp { color: #f87171; }
.kds-card ul { list-style: none; margin: 0; padding: 8px 12px; flex: 1; }
.kds-card li { padding: 5px 0; font-size: 17px; line-height: 1.35; border-bottom: 1px dashed #2a3138; }
.kds-card li:last-child { border-bottom: none; }
.kds-cant { color: #6ee7b7; margin-right: 2px; }
.kds-nota { display: block; color: #fbbf24; font-size: 13.5px; }
.kds-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid #2a3138; }
.kds-cine { color: #8b949e; }
.kds-gata {
  min-height: 48px; padding: 8px 22px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--green); color: #fff; font-weight: 800; font-size: 16px;
}
.kds-gata:active { transform: scale(.96); }
.kds-undo { background: #374151; }
.kds-gol { grid-column: 1 / -1; text-align: center; color: #8b949e; font-size: 18px; margin-top: 40px; }

/* butonul hamburger apare DOAR pe telefon (vezi media query) */
.side-burger {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; font-size: 20px; border-radius: 9px;
  border: 1px solid #3f3f46; background: #262626; color: #e7e5e4; cursor: pointer;
}
/* cautarea prin administrare, in capul meniului lateral */
.side-cauta { position: relative; margin: 2px 0 4px; }
.side-cauta input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 9px;
  border: 1px solid #3f3f46; background: #262626; color: #e7e5e4; font-size: 13px;
}
.side-cauta input::placeholder { color: #78716c; }
.side-cauta-rez {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: #262626; border: 1px solid #3f3f46; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.side-cauta-rez a { display: block; padding: 8px 11px; cursor: pointer; border-bottom: 1px solid #333; }
.side-cauta-rez a:last-child { border-bottom: none; }
.side-cauta-rez a:hover { background: #3f3f46; }
.side-cauta-rez a b { display: block; font-size: 13px; color: #e7e5e4; }
.side-cauta-rez a small { display: block; color: #a8a29e; font-size: 11px; margin-top: 1px; }
.side-cauta-gol { display: block; padding: 9px 11px; color: #a8a29e; font-size: 12px; }
.side nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.side nav a { padding: 11px 12px; border-radius: 9px; color: #d6d3d1; cursor: pointer; font-size: 14px; }
.side nav a:hover { background: #262626; }
.side nav a.on { background: #262626; color: #fff; font-weight: 600; }
.side-user { margin-top: auto; padding: 12px; background: #262626; border-radius: 10px; }
.side-user small { display: block; color: #a8a29e; font-size: 11px; }
.side-out { padding: 11px 12px; border-radius: 9px; color: #d6d3d1; cursor: pointer; margin-top: 6px; }
.side-out:hover { background: #7f1d1d; color: #fff; }

.admin-main { overflow: auto; padding: 18px 22px; }
.admin-top { display: flex; justify-content: space-between; align-items: flex-start; }
.admin-top h1 { font-size: 22px; margin: 0; }
.admin-top .muted { color: #786f69; font-size: 13px; margin: 2px 0 0; }
.loc-switch { display: flex; gap: 6px; background: #fff; padding: 4px; border-radius: 10px; border: 1px solid #e2dcd6; }
.loc-switch button { background: transparent; color: #171717; padding: 8px 16px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.loc-switch button.active { background: #b64032; color: #fff; }

/* auto-fit, nu un numar fix de coloane: modulele se adauga in timp (erau 9 coloane
   fixe pentru 11 module) si interfata trebuie sa mearga si pe tableta/telefon. */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 16px 0; }
.mod { border: 0; border-radius: 12px; color: #fff; padding: 14px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.mod-letter { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.mod-label { font-size: 12px; font-weight: 700; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid #e2dcd6; border-radius: 12px; padding: 12px 14px; }
.stat small { color: #786f69; font-size: 12px; }
.stat b { display: block; font-size: 20px; margin-top: 2px; }
.stat.green b { color: #147348; font-size: 15px; }

.prod-section { background: #fff; border: 1px solid #e2dcd6; border-radius: 14px; padding: 16px; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ps-head h2 { margin: 0; font-size: 18px; }
.ps-head .muted { color: #786f69; font-size: 13px; margin: 2px 0 0; }
.ps-head-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.save-msg { background: #d8ffd9; color: #147348; padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 13px; }
.btn-light { padding: 9px 14px; border: 1px solid #e2dcd6; border-radius: 9px; background: #fff; color: #171717; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-light:hover { background: #f6f5f3; }
.btn-dark { padding: 9px 14px; border: 0; border-radius: 9px; background: #171717; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-dark:hover { background: #333; }
.verif-banner { display: flex; align-items: center; gap: 20px; background: #fff8e6; border: 1px solid #f2e2b8; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.verif-banner b { font-size: 14px; }
.verif-stat { text-align: center; }
.verif-stat small { display: block; color: #9a8a5a; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.verif-stat b { font-size: 16px; color: #7a5c12; }
.ps-search { width: 100%; padding: 12px 14px; border: 1px solid #e2dcd6; border-radius: 10px; margin: 12px 0; font-size: 15px; background: #faf9f8; }

/* ===== Cautare inteligenta (statistici + cuvinte-cheie), jos in Produse ===== */
.cauta-stat { margin-top: 22px; border-top: 2px dashed #e2dcd6; padding-top: 16px; }
.cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cs-head h3 { margin: 0; font-size: 16px; }
.cs-head .muted { margin: 3px 0 0; max-width: 70ch; }
.cs-head-act { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.cs-head-act select { padding: 8px 10px; border: 1px solid #e2dcd6; border-radius: 8px; background: #fff; }
.cs-eroare { color: #b45309; font-size: 13px; margin: 8px 0; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.cs-card { border: 1px solid #e8e3dd; border-radius: 12px; padding: 12px 14px; background: #faf9f8; min-width: 0; }
.cs-card h4 { margin: 0 0 8px; font-size: 14px; }
.cs-card h4 small { font-weight: 400; }
.cs-rand { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #f0ece7; min-width: 0; }
.cs-rand:first-of-type { border-top: 0; }
.cs-term { font-weight: 700; font-size: 13.5px; }
.cs-nr { font-variant-numeric: tabular-nums; color: #6b7280; font-size: 12.5px; }
.cs-mic { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cs-zero { color: #dc2626; font-weight: 600; }
.cs-btn, .cs-sug-btn { margin-left: auto; border: 1px solid #cbd5e1; background: #fff; border-radius: 8px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cs-btn:hover, .cs-sug-btn:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.cs-x { margin-left: auto; border: 0; background: #fde8e8; color: #dc2626; border-radius: 7px;
  width: 26px; height: 26px; cursor: pointer; font-weight: 800; flex-shrink: 0; }
.cs-x:hover { background: #dc2626; color: #fff; }
.cs-sug { margin-top: 14px; }
.cs-sug h4 { margin: 0 0 8px; font-size: 14px; }
.cs-sug-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-sug-btn { margin-left: 0; }
.cs-manual { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid #f0ece7; }
.cs-manual select, .cs-manual input { padding: 8px 10px; border: 1px solid #e2dcd6; border-radius: 8px; background: #fff; }
.cs-manual input { flex: 1; min-width: 140px; }
@media (max-width: 760px) { .cs-grid { grid-template-columns: 1fr; } }
.ps-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ps-cats button { background: #f4f1ee; border: 1px solid #e2dcd6; color: #171717; padding: 7px 12px; border-radius: 20px; font-size: 13px; cursor: pointer; }
.ps-cats button.active { background: #171717; color: #fff; border-color: #171717; }
.ptable { border-top: 1px solid #eee; }
/* 13 coloane: a treia e „Denumire meniu" (11.08.2026), adaugata dupa „Nume POS". Cele doua
   pseudonime stau lipite ca sa se vada dintr-o privire diferenta dintre ele (scurt pentru
   buton / lung pentru vitrina). Numarul de coloane de aici TREBUIE sa fie acelasi cu cel
   din .pthead si .ptrow (js/screens/admin.js) — altfel randul se desincronizeaza de antet. */
.pthead, .ptrow { display: grid; grid-template-columns: minmax(140px,2fr) minmax(90px,1fr) minmax(110px,1.4fr) 80px minmax(100px,1.2fr) 72px 56px 64px 64px 60px 56px 112px 34px; gap: 6px; align-items: center; }
.ing-cell { display: inline-flex; gap: 4px; align-items: center; }
.posonly-btn { border: 1px solid #e2dcd6; background: #faf8f6; border-radius: 8px; padding: 6px 4px; cursor: pointer; font-size: 14px; filter: grayscale(1); opacity: .5; }
.posonly-btn.on { filter: none; opacity: 1; background: #eef7ee; border-color: #bfdcbf; }
.pthead { padding: 10px 4px; font-size: 11px; color: #786f69; font-weight: 700; letter-spacing: .5px; }
.ptrow { padding: 6px 4px; border-top: 1px solid #f0ede9; }
.ptrow input { width: 100%; padding: 8px 8px; border: 1px solid #e2dcd6; border-radius: 8px; font-size: 13px; background: #fff; }
.avail { padding: 8px 6px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 12px; background: #e7e5e4; color: #78716c; }
.avail.on { background: #d8ffd9; color: #147348; }
.del { padding: 8px 0; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 13px; background: #fbe4e4; color: #c0392b; }
.del:hover { background: #f5c6c6; }
.soon { background: #fff; border: 1px solid #e2dcd6; border-radius: 14px; padding: 40px; text-align: center; text-transform: capitalize; }

/* selector teme in admin Configurari */
.cfg-section { background: #fff; border: 1px solid #e2dcd6; border-radius: 14px; padding: 20px; }
.cfg-section h2 { margin: 0 0 2px; font-size: 18px; }
.themes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.theme-card { background: #faf9f8; border: 2px solid #e2dcd6; border-radius: 12px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.theme-card:hover { border-color: #b64032; }
.theme-card.on { border-color: #147348; background: #f0fdf4; }
.theme-swatches { display: flex; gap: 4px; }
.theme-swatches span { width: 100%; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); }
.theme-name { font-weight: 700; font-size: 14px; color: #171717; }
.theme-check { font-size: 12px; font-weight: 700; color: #786f69; }
.theme-card.on .theme-check { color: #147348; }

/* ---- Rapoarte ---- */
.seg { padding: 8px 14px; border: 1px solid #e2dcd6; border-radius: 9px; background: #fff; color: #78716c; font-weight: 700; font-size: 13px; cursor: pointer; }
.seg.on { background: #171717; color: #fff; border-color: #171717; }
.rep-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.rep-card { background: #fff; border: 1px solid #eee7e1; border-radius: 12px; padding: 14px 16px; }
.rep-card small { display: block; color: #9a8f88; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
/* din ce se compune cifra — ca sa nu mai fie nevoie sa creada nimeni un numar pe cuvant
   (29.07.2026, dupa numerarul negativ din ecranul Fiscal) */
.rep-card .rep-mic { display: block; margin-top: 4px; color: #9a8f88; font-size: 11.5px; font-style: normal; line-height: 1.4; }
.rep-card b { font-size: 22px; color: #171717; }
.rep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rep-box { background: #fff; border: 1px solid #eee7e1; border-radius: 12px; padding: 14px 16px; }
.rep-box h3 { margin: 0 0 8px; font-size: 14px; }
.rep-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #f4f1ee; font-size: 13px; }
.rep-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-row i { color: #9a8f88; font-style: normal; font-size: 12px; }
.rep-row b { color: #147348; font-variant-numeric: tabular-nums; }
.rep-empty { padding: 10px 0; }

/* ---- Fiscal ---- */
.fisc-dev { display: flex; align-items: center; gap: 10px; background: #eef6ff; border: 1px solid #cfe4fb; border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.fisc-ops { display: flex; flex-wrap: wrap; gap: 20px; margin: 6px 0 18px; }
.fisc-cash, .fisc-reports { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fisc-cash input { width: 130px; padding: 9px 10px; border: 1px solid #e2dcd6; border-radius: 9px; font-size: 14px; }
.fisc-rapid { display: inline-flex; gap: 6px; }
.fisc-rapid button { padding: 9px 12px; font-weight: 700; }
.fisc-h { margin: 6px 0 8px; font-size: 14px; }
.op-list { background: #fff; border: 1px solid #eee7e1; border-radius: 12px; overflow: hidden; }
/* Ultima coloana era fixa la 30px — cat un „✕". Butonul „✓ A ieșit totuși" intra
   in ea si se taia. Acum se intinde dupa continut, iar eticheta se poate ingusta
   (minmax(0,1fr) — fara el, `1fr` refuza sa coboare sub latimea textului si
   impinge butonul in afara randului). */
.op-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid #f4f1ee; font-size: 13px; }
.op-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-cancel { padding: 6px 8px; font-size: 12px; }
.lang-row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.lang-btn { padding: 9px 16px; border: 1px solid #e2dcd6; border-radius: 9px; background: #fff; color: #171717; font-weight: 700; font-size: 13px; cursor: pointer; }
.lang-btn.on { background: #171717; color: #fff; border-color: #171717; }

/* ---- Configurari: Conexiuni (casa de marcat) ---- */
.conn-box { background: #faf9f8; border: 1px solid #e2dcd6; border-radius: 12px; padding: 16px; margin-top: 14px; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.conn-grid label { display: block; font-size: 12px; font-weight: 700; color: #57534e; }
.conn-grid input { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid #e2dcd6; border-radius: 9px; font-size: 14px; font-weight: 400; box-sizing: border-box; }
/* listele derulante din grila (retea/USB la imprimante, 02.10.2026): ca un camp, pe latimea coloanei —
   fara asta, un nume lung de imprimanta Windows latea lista peste coloana vecina */
.conn-grid select { display: block; width: 100%; min-width: 0; margin-top: 5px; padding: 9px 10px; border: 1px solid #e2dcd6; border-radius: 9px; font-size: 14px; font-weight: 400; box-sizing: border-box; }
.conn-type-toggle { display: flex; gap: 6px; margin-top: 5px; }
.conn-type-toggle button { flex: 1; padding: 9px 8px; border: 1px solid #e2dcd6; border-radius: 9px; background: #fff; color: #171717; font-weight: 700; font-size: 12px; cursor: pointer; }
.conn-type-toggle button.on { background: #35ad9d; color: #fff; border-color: #35ad9d; }
.conn-usb-info { background: #fff3d6; color: #6b4d00; border-radius: 9px; padding: 10px 12px; font-size: 13px; margin: 14px 0 0; line-height: 1.5; }
.conn-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
/* Raportul Z automat (02.10.2026): bifa, cele patru campuri si randurile de stare venite din punte */
.conn-zauto { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e2dcd6; }
.conn-zauto-bifa { display: flex; align-items: center; gap: 10px; font-weight: 700; min-height: 44px; cursor: pointer; }
.conn-zauto-bifa input { width: 22px; height: 22px; flex: none; }
.conn-zauto-stare { font-size: 13px; margin-top: 6px; line-height: 1.45; color: #4a4a4a; }
.conn-zauto-stare.conn-msg-eroare { color: #b3261e; font-weight: 600; }
.op-row:first-child { border-top: 0; }
.op-badge { text-align: center; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.op-badge.ok { background: #d8ffd9; color: #147348; }
.op-badge.err { background: #fbe4e4; color: #c0392b; }
.op-badge.wait { background: #fff3d6; color: #a06a00; }
.op-time { font-size: 12px; }

/* ---- Utilizatori ---- */
.utable { background: #fff; border: 1px solid #eee7e1; border-radius: 12px; overflow: hidden; margin-top: 12px; }
/* coloana „Conectat" (29.07.2026) intre nume si rol: are nevoie de latime, fiindca sub
   starea online/offline sta randul mic cu aparatul, magazinul si IP-ul */
/* ultima coloana e a butoanelor (Intra ca / Editeaza), asezate unul sub altul: la 110px
   textul se taia. 140px il incape intreg (29.07.2026). */
.uthead, .utrow { display: grid; grid-template-columns: 1.1fr 1.4fr 1.7fr 90px 100px 140px; gap: 10px; align-items: center; padding: 10px 14px; }
.u-prez { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.u-prez b { font-size: 12.5px; font-weight: 800; }
.u-prez .prez-on { color: var(--green, #1f7a4d); }
.u-prez .prez-off { color: #9aa2ad; }
.u-prez small { font-size: 11.5px; overflow-wrap: anywhere; line-height: 1.35; }
/* pe telefon tabelul de utilizatori se stramteaza: prezenta ramane, dar pe un rand propriu */
@media (max-width: 760px) {
  .uthead, .utrow { grid-template-columns: 1fr 1fr 78px 128px; }
  .uthead span:nth-child(3), .u-prez { grid-column: 1 / -1; }
}
.uthead { font-size: 11px; color: #786f69; font-weight: 700; letter-spacing: .5px; }
.utrow { border-top: 1px solid #f4f1ee; font-size: 14px; }
.u-user { font-weight: 700; }
.u-role { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; background: #e7e5e4; color: #57534e; }
.u-role.role-admin { background: #e7ddff; color: #6b3ecc; }
.u-edit { padding: 6px 12px; }
.user-modal { position: fixed; inset: 0; background: rgba(20,16,14,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.user-form { background: #fff; border-radius: 16px; padding: 22px; width: 360px; max-width: 92vw; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.user-form h3 { margin: 0 0 14px; }
.user-form label { display: block; font-size: 12px; font-weight: 700; color: #57534e; margin-bottom: 12px; }
.user-form input:not([type=checkbox]), .user-form select { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid #e2dcd6; border-radius: 9px; font-size: 14px; font-weight: 400; }
.user-form .u-check { display: flex; align-items: center; gap: 8px; }
.user-form .u-check input { width: auto; margin: 0; }
.uf-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ---- Tastatura virtuala (echipamente POS fara tastatura fizica) ---- */
.vkbd {
  /* PESTE dialogurile de confirmare (z 2600): inainte fundalul dialogului acoperea
     tastatura si tastele nu raspundeau la atingere cand scriai motivul anularii */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
  background: #f0f1f3; border-top: 1px solid #c9ccd1; box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  padding: 5px 6px 6px; display: none; flex-direction: column; gap: 4px;
  user-select: none; -webkit-user-select: none;
  /* MARIME + POZITIE (28.07.2026), printr-o SINGURA transformare. Nu schimbam asezarea
     (left/right/bottom raman): asa randurile de taste nu se pot rupe la mutare, iar
     implicit (--vk-s:1, --vk-x/y:0) arata exact ca inainte. `bottom center` ca origine
     inseamna ca la micsorare ramane lipita de baza si centrata — cum a fost ceruta. */
  --vk-s: 1; --vk-x: 0px; --vk-y: 0px;
  transform: translate(var(--vk-x), var(--vk-y)) scale(var(--vk-s));
  transform-origin: bottom center;
  touch-action: none;   /* altfel degetul deruleaza pagina in loc s-o mute */
}
.vkbd.trage { transition: none; box-shadow: 0 -6px 32px rgba(0,0,0,.32); }
/* bara de sus: manerul de mutare + lupa */
.vk-bara { display: flex; align-items: center; gap: 6px; padding: 0 2px 2px; }
.vk-mut { cursor: grab; color: #8a9099; font-size: 15px; letter-spacing: 2px; padding: 0 4px; }
.vkbd.trage .vk-mut { cursor: grabbing; }
.vk-proc { font-size: 12px; font-weight: 700; color: #57606a; min-width: 38px; text-align: center; }
.vk-ctl {
  min-width: 34px; height: 26px; border: 1px solid #c4c8ce; border-radius: 7px;
  background: #fff; color: #171717; font-size: 16px; font-weight: 700; cursor: pointer;
}
.vk-ctl:active { background: var(--green, #1f7a4d); color: #fff; }
.vk-reset { margin-left: auto; font-size: 14px; color: #57606a; }
.vkbd.show { display: flex; }
.vk-row { display: flex; gap: 4px; justify-content: center; }
.vk-key {
  flex: 1 1 0; min-width: 30px; max-width: 92px; height: 40px;
  border: 1px solid #c4c8ce; border-radius: 8px; background: #fff; color: #171717;
  font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.vk-key:active { background: var(--green, #1f7a4d); color: #fff; transform: translateY(1px); }
.vk-space { flex: 6 1 0; max-width: none; font-size: 14px; color: #57606a; }
.vk-wide { flex: 3 1 0; max-width: none; }
.vk-fn { background: #e6e8ec; }
.vk-fn.on { background: var(--green, #1f7a4d); color: #fff; }
.vk-close { background: #e6e8ec; color: #57606a; flex: 2 1 0; max-width: none; font-size: 14px; }
.vk-ok { background: var(--green, #1f7a4d); color: #fff; flex: 2 1 0; max-width: none; font-size: 15px; }
.vkbd .vk-row .vk-key { min-height: 40px; }
.conn-msg { font-size: 13px; font-weight: 700; color: #147348; }
.conn-msg.conn-msg-eroare { color: #b3261e; }   /* refuz sau validare (02.10.2026), nu „salvat" */
.conn-box h2 { margin: 0 0 2px; font-size: 18px; }
.conn-box h3 { font-size: 14px; }
.conn-tp-label { display: block; font-size: 12px; font-weight: 700; color: #57534e; margin: 12px 0 4px; }
.conn-testprint { display: flex; gap: 8px; align-items: center; }
.conn-testprint input { flex: 1; padding: 9px 10px; border: 1px solid #e2dcd6; border-radius: 9px; font-size: 14px; }
.conn-testprint button { white-space: nowrap; }

/* ---- Bare de derulare vizibile si late (ecran tactil, fara mouse) — scrollbar-tactil ---- */
.lines, .product-grid, .cats, .admin-main, .ptable, .op-list, .utable {
  scrollbar-width: thick;              /* Firefox */
  scrollbar-color: var(--green) var(--surface);
}
.lines::-webkit-scrollbar,
.product-grid::-webkit-scrollbar,
.cats::-webkit-scrollbar,
.admin-main::-webkit-scrollbar { width: 14px; height: 14px; }
.lines::-webkit-scrollbar-track,
.product-grid::-webkit-scrollbar-track,
.cats::-webkit-scrollbar-track,
.admin-main::-webkit-scrollbar-track { background: var(--surface); border-radius: 8px; }
.lines::-webkit-scrollbar-thumb,
.product-grid::-webkit-scrollbar-thumb,
.cats::-webkit-scrollbar-thumb,
.admin-main::-webkit-scrollbar-thumb {
  background: var(--green); border-radius: 8px; border: 3px solid var(--surface); min-height: 44px;
}
.lines::-webkit-scrollbar-thumb:active,
.product-grid::-webkit-scrollbar-thumb:active { background: var(--green-dark); }

/* ---- Mod casa TEST / PRODUCTIE + resetare teste + sincronizare (Admin -> Fiscal) ---- */
.mode-box { border-radius: 12px; padding: 14px 16px; margin: 12px 0; border: 2px solid; }
.mode-box.test { background: #f0fbf3; border-color: #9fdcb4; }
.mode-box.prod { background: #fdf0f0; border-color: #e9a3a3; }
.mode-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mode-head b { font-size: 15px; }
.mode-head p { margin: 2px 0 0; font-size: 12px; max-width: 620px; }
.mode-toggle { display: flex; gap: 6px; flex-shrink: 0; }
.mode-toggle button {
  padding: 10px 14px; border: 1px solid #d6cfc9; border-radius: 9px; background: #fff;
  color: #57534e; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.mode-toggle button.on { background: #147348; color: #fff; border-color: #147348; }
.mode-toggle button.on.danger { background: #c0392b; border-color: #c0392b; }
.mode-state { margin-top: 10px; font-size: 13px; font-weight: 700; }
.sync-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f6f5f3; border: 1px solid #e2dcd6; border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.sync-on { color: #147348; font-weight: 700; }
.sync-off { color: #c0392b; font-weight: 700; }
.reset-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fffaf0; border: 1px solid #f0dfb8; border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.reset-box p { margin: 2px 0 0; font-size: 12px; max-width: 640px; }
.btn-danger { padding: 10px 16px; border: 0; border-radius: 9px; background: #c0392b; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn-danger:hover { background: #a33125; }
.btn-danger:disabled { opacity: .6; }

/* ---- Ecran selectie magazin (dupa logare) ---- */
.loc-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.loc-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px; width: 100%; max-width: 760px; box-shadow: 0 20px 50px rgba(0,0,0,.10); }
.loc-head { text-align: center; margin-bottom: 22px; }
.loc-head h1 { margin: 0 0 4px; font-size: 24px; color: var(--text); }
.loc-head p { margin: 0; font-size: 14px; }
.loc-msg { text-align: center; padding: 30px 0; font-size: 15px; }
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.loc-item {
  display: flex; align-items: center; gap: 12px; padding: 18px 16px; cursor: pointer;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px; text-align: left;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.loc-item:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.loc-item:active { transform: scale(.98); }
.loc-badge {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
}
.loc-name { font-weight: 700; font-size: 16px; color: var(--text); }
.loc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.loc-change { background: rgba(0,0,0,.18) !important; color: #fff !important; font-size: 12px !important; }

/* ---- Administrare magazine ---- */
.mtable { background: #fff; border: 1px solid #eee7e1; border-radius: 12px; overflow: hidden; margin-top: 12px; }
.mthead, .mtrow { display: grid; grid-template-columns: 1.6fr 1.2fr 110px 130px; gap: 10px; align-items: center; padding: 10px 14px; }
.mthead { font-size: 11px; color: #786f69; font-weight: 700; letter-spacing: .5px; }
.mtrow { border-top: 1px solid #f4f1ee; font-size: 14px; }
.m-name { font-weight: 700; }
.m-id { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.acc-table { background: #fff; border: 1px solid #eee7e1; border-radius: 12px; overflow-x: auto; }
.acc-head, .acc-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(auto-fit, minmax(90px, 1fr)) 150px; gap: 8px; align-items: center; padding: 10px 14px; }
.acc-head { font-size: 11px; color: #786f69; font-weight: 700; letter-spacing: .5px; }
.acc-row { border-top: 1px solid #f4f1ee; font-size: 13px; }
.acc-col { text-align: center; }
.acc-col input[type=checkbox] { width: 20px; height: 20px; cursor: pointer; }
.acc-user { display: flex; flex-direction: column; }
.acc-user small { font-size: 11px; }
.acc-reset { padding: 5px 10px; font-size: 11px; }

/* ---- Butoane de fereastra (doar in aplicatia Windows, care ruleaza fara rama) ---- */
.win-ctrl { position: fixed; top: 0; right: 0; z-index: 3000; display: flex; }
.win-btn {
  width: 44px; height: 30px; border: 0; cursor: pointer; font-size: 13px; line-height: 1;
  background: rgba(0,0,0,.22); color: #fff; transition: background .12s;
}
.win-btn:hover { background: rgba(0,0,0,.45); }
.win-close:hover { background: #c0392b; }
/* lasam loc butoanelor ca sa nu treaca peste continutul din bara de sus */
body.in-aplicatie .top-right { padding-right: 140px; }
body.in-aplicatie .admin-top { padding-right: 140px; }
/* De cand ferestrele se deschid pe TOT ecranul, „✕"-ul lor ajungea exact sub butonul de
   inchidere al aplicatiei de Windows — se apasa gresit si se inchidea tot POS-ul
   (26.07.2026). In aplicatie, capul ferestrei se retrage de la margine, ca cele doua
   „✕" sa nu mai fie unul peste altul. In browser nu e nevoie, deci nu se schimba nimic. */
body.in-aplicatie .modal-cap { padding-right: 150px; }
body.in-aplicatie .cl-cap { padding-right: 150px; }
body.in-aplicatie .cl-cap .cl-x { right: 108px; }
.brand-loc { font-size: 12px; font-weight: 600; opacity: .8; background: rgba(255,255,255,.18); padding: 3px 9px; border-radius: 20px; margin-left: 4px; }
/* versiunea aplicatiei, mereu la vedere in bara de sus; data apare la hover/click */
.brand-ver { font-size: 11px; font-weight: 600; opacity: .75; background: rgba(255,255,255,.14); padding: 3px 8px; border-radius: 20px; margin-left: 4px; letter-spacing: .02em; white-space: nowrap; cursor: pointer; }

/* ---- Import produse din fisier (CSV / XML / JSON / WooCommerce) ---- */
.modal-fundal { position: fixed; inset: 0; background: rgba(20,16,14,.45); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.modal-cutie { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.25); display: flex; flex-direction: column; max-height: 90vh; }
/* min-height:0 pe corp: fara el, corpul creste dupa continut si impinge butoanele
   in afara ferestrei cand fisierul are multe randuri cu probleme. */
.import-cutie { width: 720px; max-width: 96vw; }
.modal-cap { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #eee7e1; flex-shrink: 0; }
.modal-cap h3 { margin: 0; font-size: 17px; }
.import-corp { padding: 20px 22px; overflow-y: auto; min-height: 0; flex: 1; }
.modal-actiuni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.drop-zona { border: 2px dashed #d6cec6; border-radius: 14px; padding: 34px 20px; text-align: center; transition: border-color .15s, background .15s; }
.drop-zona.peste { border-color: var(--green); background: var(--surface); }
.drop-mare { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.drop-zona .muted { margin: 6px 0; }
.drop-mic { font-size: 12px; margin-top: 12px !important; }
.fisier-buton { display: inline-block; cursor: pointer; }

.import-ajutor { margin-top: 18px; font-size: 13px; color: #57534e; }
.import-ajutor ul { margin: 8px 0 0; padding-left: 18px; }
.import-ajutor li { margin-bottom: 5px; }

.import-sursa { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.link-btn { background: none; border: none; color: var(--green); text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }

.import-mapare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.map-rand { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; align-items: center; }
.map-rand label { font-size: 12px; font-weight: 700; color: #57534e; }
.map-rand select { padding: 7px 8px; border: 1px solid #e2dcd6; border-radius: 8px; font-size: 13px; background: #fff; }
.map-exemplu { grid-column: 2; font-size: 11px; font-style: italic; }
.oblig { color: #d93636; margin-left: 2px; }

.import-implicite { display: flex; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0ebe6; }
.import-implicite label { font-size: 12px; font-weight: 700; color: #57534e; display: flex; align-items: center; gap: 6px; }
.import-implicite input { padding: 6px 8px; border: 1px solid #e2dcd6; border-radius: 8px; font-size: 13px; font-weight: 400; width: 110px; }

.import-rezumat { display: flex; gap: 16px; margin: 16px 0 10px; font-size: 13px; flex-wrap: wrap; }
.import-rezumat .atentie, td.atentie { color: #b45309; }
.import-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.import-tabel th { text-align: left; font-size: 11px; text-transform: uppercase; color: #78716c; padding: 6px 8px; border-bottom: 1px solid #eee7e1; }
.import-tabel td { padding: 6px 8px; border-bottom: 1px solid #f5f1ed; }
.import-probleme { margin-top: 12px; font-size: 13px; }
.import-probleme summary { cursor: pointer; color: #b45309; }
.import-probleme ul { margin: 8px 0 0; padding-left: 18px; color: #78716c; font-size: 12px; }

.import-mod { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0ebe6; display: flex; flex-direction: column; gap: 8px; }
.import-mod label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; cursor: pointer; }
.import-avertisment { margin-top: 10px; }

.import-gata { text-align: center; padding: 34px 22px; }
.gata-bifa { width: 54px; height: 54px; border-radius: 50%; background: var(--green); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.import-gata h4 { margin: 0 0 12px; font-size: 18px; }
.gata-lista { list-style: none; padding: 0; margin: 0 0 14px; font-size: 14px; }
.gata-lista li { margin-bottom: 4px; }
.import-gata .modal-actiuni { justify-content: center; }

@media (max-width: 700px) {
  .import-mapare { grid-template-columns: 1fr; }
  .import-implicite { flex-direction: column; gap: 10px; }
}

/* ---- Panoul de actiuni POS (4 randuri x 5, ca in appul vechi) ---- */
/* PANOUL SE ADAPTEAZA, NU SE TAIE (26.07.2026, cerinta proprietarului: „ar trebui
   micsorate sa incapa fara derulare acolo unde nu incap").
   Reteta:
     - `flex: 0 1 auto` + `min-height: 0` => panoul POATE sa se micsoreze sub inaltimea
       continutului lui (fara `min-height: 0` un element flex refuza sa scada sub el);
     - `grid-auto-rows: minmax(0, 1fr)` => randurile impart inaltimea ramasa, oricat ar fi;
     - butoanele au `min-height: 0` si marime de text legata de inaltimea ecranului.
   Asa, pe un ecran mic butoanele devin mai scunde si mai marunte, dar se vad TOATE —
   in loc sa ramana mari si sa iasa jumatate din ele in afara ecranului. */
/* PANOUL SE ADAPTEAZA, DAR ARE O LIMITA (26.07.2026).
   Prima incercare l-a lasat sa se micsoreze oricat (`flex: 0 1 auto` + randuri `1fr`):
   cum lista comenzii cere si ea spatiu, panoul ajungea strivit la cateva zeci de pixeli
   si butoanele deveneau nefolosibile. Acum:
     - randurile au un MINIM legat de inaltimea ecranului (38px pe un ecran scund,
       pana la 74px pe unul mare) — deci butonul ramane mereu de apasat cu degetul;
     - panoul NU se micsoreaza sub atat (`flex: 0 0 auto`);
     - LISTA e cea care cedeaza si se deruleaza, fiindca ea poate.
   Asa panoul incape intreg pe orice ecran, fara sa devina inutilizabil. */
.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  flex: 0 0 auto; grid-auto-rows: minmax(clamp(38px, 8.2vh, 74px), auto); padding-top: 8px; }
/* dalele apasate des (Gata/Numerar/Card/Nota de plata) — dubla latime, usor de nimerit */
.pad .dala-mare { grid-column: span 2; font-weight: 800; }
/* 'Predare masa' — singura pe ultimul rand, pe toata latimea (fara gol in grila) */
.pad .dala-lata { grid-column: 1 / -1; }
.pad button {
  /* `min-height: 0` + inaltime PREFERATA prin `height` — butonul incearca 74px, dar cedeaza
     cand nu e loc (vezi comentariul de la `.pad`). Textul scade odata cu inaltimea
     ecranului, ca sa ramana citet fara sa iasa din buton. */
  /* butonul umple randul lui din grila (randul are minimul de mai sus) */
  min-height: 0; height: 100%;
  padding: 6px 4px; border: none; border-radius: 8px;
  background: var(--green); color: #fff; font-weight: 700; line-height: 1.12;
  font-size: clamp(11px, 1.8vh, 14.5px);
  cursor: pointer; text-align: center; overflow: hidden;
  /* PLASA DE SIGURANTA A TEXTULUI. Corpul de litera potrivit pe fiecare dala se socoteste in
     js/text-in-dale.js (masurat, nu ghicit). Aici raman cele doua reguli care nu tin de
     socoteala si care NU au voie sa lipseasca:
       - `overflow-wrap: break-word` — un cuvant mai lat decat dala (germanul „Verkaufshinweis")
         se RUPE, nu se taie. Fara ea, `overflow: hidden` de mai sus il ciuntea sec, fara nici
         macar trei puncte: pe 1440x900 se pierdeau 47px din 114 si nimeni nu vedea ca lipsesc.
         E si scutul limbii care se adauga maine, inainte sa apuce cineva sa o masoare.
       - `hyphens: auto` — unde browserul ARE dictionarul de silabe, ruperea vine cu cratima
         („Verkaufs-hinweis") in loc de taietura oarba la mijloc de cuvant. Nu ne BAZAM pe el:
         Chrome fara cap din acest depozit nu-l are, si nici WebView-ul de pe Android nu e sigur
         ca-l are. Incaperea o garanteaza masuratoarea si regula de mai sus; asta doar infrumuseteaza. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.pad button:hover { background: var(--green-dark); }
.pad button:active { transform: translateY(1px); }
/* "Plata" e singurul evidentiat (fostul "Gata") */
.pad button.ready { background: #6ab023; }
.pad button.ready:hover { background: #5c9a1e; }
/* Cand produsul selectat are deja reducere, butonul de discount se face rosu si
   scrie „Anulare discount": acelasi buton, cealalta fata. */
.pad button.buton-anulare { background: #dc2626; }
.pad button.buton-anulare:hover { background: #b91c1c; }

/* CULORI PE GRUPE DE INTELES in panoul ospatarului (26.07.2026). Panoul era tot verde,
   deci fiecare eticheta trebuia CITITA. Acum mana merge dupa culoare, iar butoanele
   distructive sar in ochi. Clasele vin din CULORI_DALE (order.js). */
.pad button.dl-rosu { background: #c0392b; }            /* anulare produs / anulare vanzare */
.pad button.dl-rosu:hover { background: #a33325; }
.pad button.dl-mov { background: #6a3fa0; }             /* combina / separa vanzarea */
.pad button.dl-mov:hover { background: #59348a; }
.pad button.dl-albastru { background: #1b5e9c; }        /* INCASAREA: numerar / card / mixt */
.pad button.dl-albastru:hover { background: #164e82; }
/* „Nota de plata" — SINGURUL buton alb din panou: pasul dinaintea incasarii, se gaseste
   instant. Aratat ca o TASTA 3D de tastatura (cerut 26.07.2026): conturul gri se pierdea
   pe fundalul deschis, iar relieful il face de neconfundat printre dalele plate.
   Reteta: fundal cu degrade (lumina sus), contur NEGRU, o dunga alba interioara sus si
   „talpa" groasa dedesubt. La apasare talpa se subtiaza si tasta coboara — deci se si
   SIMTE apasarea, nu doar se vede. */
.pad button.dl-alb {
  background: linear-gradient(#ffffff, #e9e9e9);
  color: #111; font-weight: 800;
  border: 2px solid #111;
  box-shadow: inset 0 2px 0 #fff, inset 0 -1px 0 #d2d2d2, 0 4px 0 #9a9a9a, 0 6px 8px rgba(0,0,0,.25);
  transform: translateY(-2px);
  transition: transform .06s, box-shadow .06s;
}
.pad button.dl-alb:hover { background: linear-gradient(#ffffff, #f4f4f4); }
.pad button.dl-alb:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 0 #fff, inset 0 -1px 0 #d2d2d2, 0 1px 0 #9a9a9a, 0 2px 4px rgba(0,0,0,.22);
}

/* ================= ADAPTIV: tableta + telefon (inclusiv portret) =================
   Pe ecranul mare comanda e pe 2 coloane (bon | produse). Pe ecrane mici cele doua
   coloane nu incap una langa alta -> panoul de produse iesea in afara ecranului
   (se vedea doar cu derulare pe orizontala). Aici trecem pe o SINGURA coloana, pe
   verticala, ca sa se vada TOATE elementele, si pe telefon in portret. */
@media (max-width: 1024px) {
  .order-body { grid-template-columns: 300px 1fr; }
  .product-grid { grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(120px, 1fr)); }
}

@media (max-width: 760px) {
  /* Bara de sus se PLIAZA pe mai multe randuri in loc sa fie taiata la margine
     (pe ecranul de mese are si Istoric / user / Admin, nu incap pe un rand). */
  .topbar { gap: 8px 12px; padding: 8px 10px; flex-wrap: wrap; }
  .brand { font-size: 15px; gap: 6px; }
  .order-total { font-size: 15px; }
  .top-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; }
  .loc-switch { flex-wrap: wrap; }

  /* MESE — bara de sus stransa pe telefon (28.07.2026, cerut de proprietar: „nu pe doua
     randuri; micsoreaza-le, fontul sau paddingurile"). Titlul (POS · Mese · <magazin> · v) isi
     ia randul lui (flex-basis 100%), iar butoanele se string cat sa incapa. La OSPATAR (4
     butoane: nume, lacat, Vânzările mele, Personalizare) intra pe UN rand; la ADMIN (multe
     unelte: Rapoarte, Editează Meniul Zilei, Editare produse, Personalizare) se pliaza pe
     doua randuri in loc sa fie TAIATE — de aceea NU fortam `nowrap` (fortarea scotea
     „Rapoarte" din ecran, cerinta „butonul rapoarte nu se vede pe mobil"). Scop DOAR pe
     ecranul de mese (.pos); ecranul de comanda (.order) nu se atinge. */
  .pos .topbar { gap: 6px; padding: 6px 8px; }
  .pos .topbar .brand { flex-basis: 100%; }
  .pos .top-operator, .pos .top-right { min-width: 0; gap: 6px; }
  .pos .topbar button:not(.op-badge) { padding: 6px 8px; min-height: 38px; }
  .pos .topbar .btxt { font-size: 11px; white-space: nowrap; }
  .pos .op-badge { padding: 5px 9px; }
  .pos .op-badge b { font-size: 12px; }

  /* „Blochează" → LACĂT pe telefon (28.07.2026, cerut de proprietar: „fa-l lacat emoji mai
     mare"). Nu e important pe telefon cat pe POS, deci economisim latime pe rand. Textul se
     strange la 0 (nu `display:none` — ramane in DOM, iar butonul are `title="Blocheaza"`),
     lacatul vine din ::after, MARE. Exceptie punctuala de la „fara emoticoane": ceruta
     explicit, doar aici, doar pe mobil. */
  .pos .op-lock .btxt { font-size: 0; }
  /* Inaltimea e FIXATA la fel ca a celorlalte butoane (28.07.2026: „butonul de lacăt și
     chenarul cu fundal alb să nu fie mai înalt decât restul"). Emoji-urile isi aduc cutia lor
     de rand, mai inalta decat textul de 11px, si umflau butonul; `line-height` egal cu
     inaltimea taie exact problema asta. */
  .pos .op-lock { height: 38px; padding: 0 12px; }
  .pos .op-lock::after { content: '🔒'; font-size: 19px; line-height: 38px; }

  /* BUTOANELE CURG UNUL DUPA ALTUL, fara goluri (28.07.2026, cerut de proprietar: „de ce apar
     așa cu goluri, să ocupe maxim 2 rânduri"). Vinovatul era `margin-left:auto` +
     `justify-content:flex-end` de pe .top-right: fiecare rand rupt se lipea de marginea
     DREAPTA, lasand gauri in stanga si impingand „Personalizare" singura pe al treilea rand.
     Pe telefon le lasam sa curga de la stanga, in continuarea grupului de operator. */
  /* UN SINGUR SIR DE BUTOANE, nu doua cutii (29.07.2026, a doua incercare).
     Prima oara am aliniat la stanga si am scos `margin-left:auto` — si tot au ramas trei
     randuri cu goluri. Motivul: `.top-operator` si `.top-right` sunt doua cutii flex DIFERITE.
     Fiecare se pliaza singura, deci nu pot imparti niciodata acelasi rand: operatorul isi ia
     un rand, uneltele alt rand, si fiecare lasa loc gol la capat. Nicio aliniere nu repara
     asta, fiindca `justify-content` aranjeaza doar INAUNTRUL unei cutii.
     `display: contents` desfiinteaza cele doua cutii (nu si butoanele din ele): butoanele
     devin copii directi ai barei si curg unul dupa altul, umpland randul pana la capat.
     Se aplica pe ambele ecrane — si mese (.pos), si comanda (.order), unde golul era si mai
     vizibil fiindca uneltele erau impinse in dreapta. */
  .pos .topbar .top-operator, .pos .topbar .top-right,
  .order .topbar .top-operator, .order .topbar .top-right { display: contents; }
  /* banii raman in dreapta, cum s-a cerut („doar numele operatorului si banii in dreapta") */
  .order .topbar .order-total { margin-left: auto; }
  .pos .topbar { row-gap: 6px; }

  /* Taburile de zona (Salon / Terasă) CENTRATE pe telefon (28.07.2026, cerut de proprietar). */
  .zone-tabs { justify-content: center; }

  /* Corpul devine o coloana care se DERULEAZA CA O PAGINA (cerut 25.07.2026). Pana acum
     era impartit fix 44% produse / 56% bon+butoane, fiecare cu derulare interna. Pe
     telefon, panoul de 20 de butoane umplea singur cei 56%, iar lista comenzii (.lines)
     ramanea strivita la ~0px — produsele comandate nu se vedeau deloc. Acum fiecare zona
     isi ia inaltimea din continut, iar telefonul deruleaza tot corpul: produsele comenzii
     se vad intregi, panoul de actiuni sta sub ele. */
  .order-body { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .order-right { order: 1; flex: 0 0 auto; min-height: 0; border-bottom: 3px solid var(--line); }
  .order-left { order: 2; flex: 0 0 auto; min-height: 0; border-right: none; }
  /* lista comenzii se intinde cat are nevoie (nu mai are fereastra ei de derulare) */
  .lines { flex: none; max-height: none; overflow: visible; }
  .grid-wrap { display: block; }
  /* alegatorul de produse ramane compact (derularea lui), ca sa nu impinga bonul + Gata
     departe in josul paginii cand e deschisa o categorie cu multe produse */
  .product-grid { max-height: 60vh; }

  .search { margin: 8px; padding: 10px; }
  .cats { padding: 0 8px 6px; }
  .product-grid { grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(92px, 1fr)); gap: 8px; padding: 8px; }
  .product { min-height: 56px; }

  .lines { padding: 6px; }
  .line { font-size: 14px; padding: 8px 6px; }

  /* Cele 20 de butoane raman 5 pe rand (ca pe ecranul mare), doar mai mici. */
  .pad { gap: 6px; padding: 6px 6px 8px; }
  .pad button { min-height: 58px; font-size: 12.5px; padding: 6px 3px; }

  /* Ecranul de plata incape pe telefon (nu mai are latime fixa de 420px). */
  .pay-wrap { align-items: flex-start; overflow-y: auto; padding: 10px; }
  .pay-card { width: 100%; max-width: 460px; margin: 0 auto; padding: 18px; }
  .pay-total { font-size: 24px; }
  .pay-primit-input { font-size: 26px; padding: 14px 84px 14px 14px; }
}

@media (max-width: 480px) {
  .tables-grid { grid-template-columns: repeat(3, 1fr); }
}

/* marcajele de pe linia din bon */
.line-marcaje { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.mk { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 1px 5px; border-radius: 8px; letter-spacing: .3px; }
.mk-protocol { background: #ede9fe; color: #6d28d9; }
.mk-pachet { background: #dbeafe; color: #1d4ed8; }
.mk-platou { background: #fef3c7; color: #92400e; }
.mk-disc { background: #dcfce7; color: #15803d; }
/* Reducerea MANUALA e un buton: o atingi ca sa o scoti, daca s-a pus din greseala.
   Aceeasi bulina verde, dar cu ✕ si contur, ca sa se vada ca e apasabila; la atingere
   vireaza pe rosu — semnul universal de „scot / anulez". Cea automata (happy hour)
   ramane bulina simpla, ca nu se scoate de mana. */
.mk-disc-x { background: #dcfce7; color: #15803d; border: 1px solid #86efac; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; font-family: inherit; line-height: 1.35;
  -webkit-appearance: none; appearance: none; }
.mk-disc-x .mk-x { font-size: 8px; opacity: .7; }
.mk-disc-x:hover, .mk-disc-x:active { background: #dc2626; color: #fff; border-color: #dc2626; }
.mk-disc-x:hover .mk-x, .mk-disc-x:active .mk-x { opacity: 1; }
.mk-hh { background: #fef3c7; }   /* 🍻 reducere automata happy hour */

/* Happy hour — editorul de intervale din Configurări */
.hh-activ { display: block; margin: 6px 0 10px; }
.hh-regula { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--border, #d9d4ca); }
.hh-regula label { display: flex; flex-direction: column; gap: 3px; font-size: .85em; }
.hh-regula input { min-width: 90px; }
.hh-regula .hh-cat { flex: 1; min-width: 180px; }
.hh-regula .hh-cat input { width: 100%; }
.hh-zile { display: flex; gap: 3px; }
.hh-zi { min-width: 34px; padding: 7px 4px; border: 1px solid var(--border, #cfc9be); border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }
.hh-zi.on { background: #15803d; border-color: #15803d; color: #fff; font-weight: 600; }
.line.protocol .n { opacity: .75; }
.pret-vechi { color: #a8a29e; font-size: 11px; margin-right: 5px; font-weight: 400; }
.line-nota { display: block; font-size: 11px; color: #78716c; font-style: italic; }

.rand-bacsis, .rand-descriere { flex-shrink: 0; padding: 6px 10px; font-size: 13px; border-top: 1px solid var(--line); }
.rand-descriere { font-style: italic; color: #78716c; }

.meta-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px;
  background: rgba(255,255,255,.22); font-size: 11px; font-weight: 700; vertical-align: middle; }

/* ---- Ferestrele din POS ---- */
.pos-modal { width: 420px; max-width: 94vw; }
.modal-corp { padding: 18px 22px 20px; overflow-y: auto; min-height: 0; }
.camp-mare { width: 100%; font-size: 30px; font-weight: 800; text-align: center; padding: 12px;
  border: 2px solid var(--green); border-radius: 10px; }
.camp-text { width: 100%; padding: 10px; border: 1px solid #e2dcd6; border-radius: 9px; font-size: 14px; font-family: inherit; }
.camp-eticheta { display: block; font-size: 12px; font-weight: 700; color: #57534e; margin-bottom: 12px; }
.camp-eticheta input, .camp-eticheta select { width: 100%; margin-top: 5px; padding: 9px 10px;
  border: 1px solid #e2dcd6; border-radius: 9px; font-size: 15px; font-weight: 400; }
.mic { font-size: 12px; }

/* nota de plata */
.nota { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--surface); }
.nota h4 { margin: 0 0 2px; }
.nota-tabel { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.nota-tabel td { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.nota-tabel .dr { text-align: right; white-space: nowrap; }
.nota-total { display: flex; justify-content: space-between; margin: 4px 0; font-size: 15px; }

@media print {
  /* la tiparirea notei nu are ce cauta restul interfetei */
  body * { visibility: hidden; }
  .nota, .nota * { visibility: visible; }
  .nota { position: absolute; left: 0; top: 0; width: 100%; border: none; }
  .modal-fundal { background: #fff; }
}

/* ---- Copie de siguranta (admin) ---- */
.bk-avertisment { background: #fef3c7; border: 1px solid #fcd34d; color: #78350f; padding: 12px 14px;
  border-radius: 10px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.bk-msg { display: block; margin-bottom: 12px; }
.bk-carduri { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; }
.bk-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; }
.bk-card h4 { margin: 0 0 4px; font-size: 14px; }
.bk-card p { margin: 0 0 10px; font-size: 12px; }
.bk-card button, .bk-card .bk-desc { margin-right: 6px; margin-bottom: 6px; }
.bk-desc { display: inline-block; text-decoration: none; }
.bk-titlu { margin: 0 0 8px; font-size: 14px; }
.bk-tabel { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bk-tabel th { text-align: left; font-size: 11px; text-transform: uppercase; color: #78716c;
  padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.bk-tabel td { padding: 8px 10px; border-bottom: 1px solid #f5f1ed; }
.bk-fel { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 7px;
  border-radius: 8px; background: #e0f2fe; color: #075985; }
.bk-fel.man { background: #dcfce7; color: #15803d; }

/* versiunea aplicatiei (doar in aplicatia Windows, nu in browser) */
.ver { opacity: .7; font-size: 11px; }

/* ================= ADMIN PE TABLETA SI TELEFON =========================
 * POS-ul ramane pe rezolutia fixa a terminalului (1024x768); adminul trebuie sa
 * fie folosibil si de pe telefon — de acolo se uita patronul la rapoarte.
 * Tastatura virtuala ramane dezactivata in admin: pe mobil, cea nativa e cea buna.
 */
@media (max-width: 900px) {
  /* bara laterala devine o banda sus, derulabila pe orizontala */
  .admin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  /* bara de sus COMPACTA: sigla + cautare + hamburger; meniul se desfasoara IN JOS
     la apasarea pe ☰ (banda derulanta orizontala era enervanta pe telefon) */
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px;
          padding: 8px 10px; overflow: visible; }
  .side-logo { flex-shrink: 0; }
  .side-logo small { display: none; }
  .side-burger { display: inline-flex; order: 3; margin-left: auto; }
  .side-cauta { flex: 1 1 120px; margin: 0; order: 2; min-width: 110px; }
  .side-cauta input { padding: 8px 9px; font-size: 13px; }
  .side-cauta-rez { position: fixed; left: 10px; right: 10px; top: 56px; }
  .side nav { display: none; }
  .side.deschis nav {
    display: flex; flex-direction: column; width: 100%; order: 5;
    margin: 4px 0 2px; gap: 2px;
  }
  .side nav a { padding: 12px; font-size: 14.5px; border-radius: 8px; }
  .side-user { display: none; }          /* numele userului se vede si sus in pagina */
  .side-out { display: none; }
  .side.deschis .side-out { display: block; width: 100%; order: 6; padding: 12px; }

  .admin-main { padding: 12px; }
  .admin-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-top h1 { font-size: 19px; }
  .loc-switch { overflow-x: auto; }
  .modules { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .mod { padding: 10px 4px; }
  .mod-label { font-size: 11px; }
  .ps-head { flex-direction: column; }
  .ps-head-btns { flex-wrap: wrap; }

  /* Tabelele au multe coloane: le lasam sa deruleze IN cutia lor, nu sa impinga
     pagina. Fara asta, jumatate din tabel e inaccesibil pe telefon. */
  .prod-section, .user-section, .mag-section, .bk-section, .fisc-section, .rep-section { padding: 10px; }
  .prod-section, .user-section, .mag-section, .bk-section, .fisc-section, .rep-section { overflow-x: auto; }
  /* Tabelul isi pastreaza latimea minima si DERULEAZA in cutia lui. Fara min-width,
     coloanele s-ar strange pana devin ilizibile; fara overflow pe cutie, ultima
     coloana ramane TAIATA (verificat: "Disponibil" era inaccesibil pe tableta). */
  .prod-section table, .user-section table, .mag-section table,
  .bk-section table, .fisc-section table, .rep-section table { min-width: 640px; }
}

/* ---- TELEFON: totul pe O COLOANA, cu tile-uri adevarate ----
 * Pe telefon nu are rost sa inghesuim 4 coloane de patratele: devine ilizibil si
 * greu de nimerit cu degetul. Modulele devin tile-uri pe toata latimea (pastila cu
 * litera in stanga, denumirea langa ea), unul sub altul. Totul pe o coloana.
 */
@media (max-width: 560px) {
  .modules { grid-template-columns: 1fr; gap: 8px; }
  .mod { flex-direction: row; align-items: center; justify-content: flex-start;
         gap: 12px; padding: 14px 16px; min-height: 58px; text-align: left; }
  .mod-letter { width: 34px; height: 34px; flex-shrink: 0; font-size: 15px; }
  .mod-label { font-size: 15px; }

  .stats { grid-template-columns: 1fr; gap: 8px; }
  /* statistica devine o linie compacta: eticheta stanga, valoarea dreapta —
     altfel 5 carduri inalte umplu tot ecranul si ascund continutul */
  .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px; }
  .stat b { margin-top: 0; font-size: 17px; text-align: right; }
  .stat.green b { font-size: 14px; }

  .bk-carduri { grid-template-columns: 1fr; }
  .import-mapare { grid-template-columns: 1fr; }
  .import-cutie, .pos-modal { width: 100%; }
  .modal-cap h3 { font-size: 15px; }
  .side nav a { font-size: 12px; padding: 8px; }
  .ps-head-btns { width: 100%; }
  .ps-head-btns button { flex: 1; }
  .loc-switch { width: 100%; }
  .loc-switch button { flex: 1; white-space: nowrap; }
}

/* ---- Bonuri: istoric + previzualizare + retiparire ---- */
.bon-per { align-items: center; margin: 10px 0 12px; }
.bon-total { margin-left: auto; font-size: 13px; color: #57534e; }
.bon-cauta { max-width: 260px; margin: 0; }
/* lista stanga / bonul in dreapta — ospatarul cauta si vede pe acelasi ecran */
.bon-doua { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.bon-lista { overflow-x: auto; }
.bon-rand { cursor: pointer; }
.bon-rand:hover td { background: var(--surface); }
.bon-rand.sel td { background: var(--surface-2, #eef5f1); }
.bon-stare { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 8px; }
.st-fiscalized { background: #dcfce7; color: #15803d; }
.st-pending { background: #fef3c7; color: #92400e; }
.st-error { background: #fee2e2; color: #991b1b; }
.bon-detaliu { position: sticky; top: 0; }
.bon-gol { padding: 30px 0; text-align: center; }
.bon-fiscal { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
/* Originea vanzarii (aparat / retea / cale): se citeste, nu sare in ochi. Eticheta
   apare DOAR cand ceva iese din tipar — vanzare din afara retelei sau bon urcat dupa
   ce puntea a lucrat offline; daca ar aparea pe fiecare rand, n-ar mai insemna nimic. */
.bon-orig-cel { color: #57534e; max-width: 180px; }
.bon-orig-sem { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  padding: 1px 5px; border-radius: 8px; background: #fef3c7; color: #92400e; margin-left: 4px; }
.bon-origine { margin-top: 6px; }

@media (max-width: 900px) { .bon-doua { grid-template-columns: 1fr; } .bon-detaliu { position: static; } }
@media print {
  body * { visibility: hidden; }
  .bon-detaliu .nota, .bon-detaliu .nota * { visibility: visible; }
  .bon-detaliu .nota { position: absolute; left: 0; top: 0; width: 100%; border: none; }
  /* evidenta noastra, nu treaba clientului: copia de bon nu poarta IP-uri si aparate */
  .bon-detaliu .bon-origine, .bon-detaliu .bon-origine * { visibility: hidden; }
}

/* ---- Sectii: ce merge la bar (Configurari) ---- */
.cfg-titlu { margin: 22px 0 4px; font-size: 15px; padding-top: 16px; border-top: 1px solid var(--line); }
.sect-actiuni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.sect-actiuni .btn-dark { margin-left: auto; }
.sect-grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.sect-bif { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; cursor: pointer; font-size: 13px; }
.sect-bif:hover { border-color: var(--green); }
/* bifat = bar. Culoare diferita ca sa se vada dintr-o privire cine unde merge. */
.sect-bif.on { background: #eff6ff; border-color: #93c5fd; }
.sect-bif input { margin: 0; }
.sect-bif span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sect-unde { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 2px 6px;
  border-radius: 7px; background: #f5f5f4; color: #78716c; flex-shrink: 0; }
.sect-bif.on .sect-unde { background: #dbeafe; color: #1d4ed8; }
@media (max-width: 560px) { .sect-grila { grid-template-columns: 1fr; } .sect-actiuni .btn-dark { margin-left: 0; width: 100%; } }

/* plata pe card cu terminal standalone (nu-l comandam noi) */
.card-standalone { background: #eff6ff; border: 1px solid #93c5fd; color: #1e3a8a;
  padding: 12px 14px; border-radius: 10px; margin: 10px 0; font-size: 14px; line-height: 1.5; }
.card-standalone small { display: block; margin-top: 6px; color: #3b5bdb; font-size: 12px; }

/* Trimiterea la sectii — actiunea cea mai frecventa dupa luarea comenzii */
.trimite-sectii { flex-shrink: 0; width: 100%; margin-top: 8px; padding: 13px; border: 0;
  border-radius: 9px; background: #6ab023; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
.trimite-sectii:hover { background: #5c9a1e; }
.trimite-sectii:disabled { opacity: .6; cursor: default; }
/* linia deja trimisa: se vede ca a plecat, ca sa nu se intrebe ospatarul */
.line.trimisa .n::after { content: ' ✓'; color: #6ab023; font-weight: 800; }

/* Tiparirea raportului (inchiderea zilei / contabilitate) */
.rep-print-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
@media print {
  /* implicit ascundem tot; fiecare ecran tiparibil isi arata partea lui */
  body * { visibility: hidden; }
  .rep-section, .rep-section * { visibility: visible; }
  .rep-section { position: absolute; left: 0; top: 0; width: 100%; }
  .rep-print-bar { display: none; }   /* butonul n-are ce cauta pe hartie */
  .rep-box { break-inside: avoid; }
}

/* ---- Administrarea categoriilor (adauga / redenumeste / sterge) ---- */
.ps-cats .cat-nr { opacity: .55; font-size: 10px; margin-left: 4px; font-weight: 700; }
.ps-cats .cat-add { border-style: dashed; font-weight: 700; }
/* Grupul „Meniul zilei" din bara de filtre: un chip-parinte care se desface in sub-chip-uri. */
.ps-cats .cat-mz-grup { font-weight: 700; }
.ps-cats .cat-mz-sageata { font-size: 10px; opacity: .6; margin-left: 2px; }
.ps-cats .cat-mz-sub { background: #ece7e1; font-size: 12px; }
.ps-cats .cat-mz-sub::before { content: "└ "; opacity: .45; }
.cat-bara { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px;
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.cat-bara .btn-light { padding: 5px 11px; font-size: 12px; }
/* stergerea e dezactivata cat timp categoria are produse — se vede, nu esueaza dupa click */
.cat-sterge:disabled { opacity: .45; cursor: not-allowed; }
/* celula de categorie: lista, nu text liber */
.prod-section select { width: 100%; padding: 7px 8px; border: 1px solid #e2dcd6; border-radius: 8px;
  font-size: 13px; background: #fff; }

/* ---- Diagnostic: log de erori de pe server ---- */
.diag-section { padding-bottom: 20px; }
.diag-rand { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 8px; background: var(--card); }
.diag-rand.diag-fatal, .diag-rand.diag-exceptie { border-left-color: #d64545; }
.diag-rand.diag-http500 { border-left-color: #e07b1a; }
.diag-rand.diag-client { border-left-color: #7c3aed; }
.diag-rand.diag-warning { border-left-color: #caa53d; }
.diag-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.diag-nivel { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.diag-fatal .diag-nivel, .diag-exceptie .diag-nivel { color: #d64545; }
.diag-http500 .diag-nivel { color: #e07b1a; }
.diag-client .diag-nivel { color: #7c3aed; }
.diag-warning .diag-nivel { color: #b4922a; }
.diag-cand { color: var(--muted); }
.diag-act { font-family: ui-monospace, monospace; }
.diag-mesaj { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; margin-top: 4px;
  word-break: break-word; white-space: pre-wrap; }
.diag-unde { font-size: 11px; margin-top: 2px; }

/* Jurnalul tehnic al publicarilor (18.08.2026). E un LOG, deci se citeste ca un log:
   monospatiat, un rand per fapta, cu o dunga de culoare pe decizie — ca ochiul sa gaseasca
   „esuat" printre o suta de „apel" fara sa citeasca tot. */
.jt-lista { border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  max-height: 420px; overflow: auto; padding: 6px 0; }
.jt-rand { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  padding: 3px 12px; border-left: 3px solid transparent; word-break: break-word; white-space: pre-wrap; }
.jt-rand.jt-esuat { border-left-color: #d64545; color: #b03030; }
.jt-rand.jt-poarta { border-left-color: #caa53d; }
.jt-rand.jt-reusit { border-left-color: #3d9a5b; }
.jt-rand.jt-pornit { border-left-color: #7c3aed; }
.jt-rand.jt-apel { border-left-color: var(--line); color: var(--muted); }

/* DIAGNOZA LA DISTANTA (30.07.2026). Prefix dd-, nu diag-: `diag-` e al listei de erori
   de server, care e alta sectiune si ramane neatinsa. */
.dd-card { border: 1px solid #e6e9ee; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.dd-card.off { opacity: .6; }
.dd-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dd-bec { font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.dd-bec.viu { background: #e7f6ec; color: #14632f; }
.dd-bec.mort { background: #fdecec; color: #8c1c1c; }
.dd-mic { font-size: 12px; color: #6b7280; margin-left: auto; }
.dd-butoane { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-rez { margin-top: 10px; font-size: 13px; }
.dd-rez pre { background: #f6f7f9; padding: 8px; border-radius: 6px; overflow: auto; max-height: 320px; }
.dd-eroare { color: #8c1c1c; margin-left: 8px; }
.dd-acr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.dd-acr select { padding: 8px 10px; border: 1px solid #e2dcd6; border-radius: 8px; background: #fff; max-width: 320px; }
.dd-token { font-family: monospace; font-size: 14px; word-break: break-all; background: #fff8e1; padding: 10px; border-radius: 6px; }

/* ---- Istoric operatiuni ---- */
.ist-filtre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.ist-filtre input, .ist-filtre select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 13px; }
.ist-cauta { flex: 1; min-width: 220px; }
.ist-data { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.ist-data input { font-size: 12px; }
.ist-nr { margin: 0 0 8px; font-size: 12px; }
.ist-rand { display: grid; grid-template-columns: 150px 150px 96px 1fr; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ist-rand:hover { background: rgba(0,0,0,.03); }
.ist-cand { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ist-cine { font-weight: 700; }
.ist-zona { justify-self: start; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 20px; }
.zbadge-pos { background: #e3f2ea; color: #1f7a4d; }
.zbadge-admin { background: #eae6f7; color: #6d3ec7; }
.ist-ce { word-break: break-word; }
@media (max-width: 820px) {
  .ist-rand { grid-template-columns: 1fr; gap: 2px; padding: 8px 10px; }
  .ist-cand { font-size: 11px; }
}

/* ---- Istoric in interfata POS (overlay pentru operatori) ---- */
.istoric-modal { width: min(680px, 94vw); }
.istoric-modal .modal-corp { display: flex; flex-direction: column; min-height: 0; }
.istoric-modal .search { margin: 0 0 10px; flex-shrink: 0; }
.istoric-lista { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 60vh; }
.ist-rand-pos { padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ist-sus { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 2px; }
.ist-rand-pos .ist-cine { font-weight: 700; color: var(--text); }
.ist-rand-pos .ist-cand { color: var(--muted); }

/* ---- Conexiuni: cautare in retea + instructiuni ---- */
.conn-scan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.scan-chip { cursor: pointer; background: var(--green-light); color: var(--green-dark); font-weight: 700;
  padding: 5px 10px; border-radius: 20px; font-size: 13px; border: 1px solid var(--green); font-family: ui-monospace, monospace; }
.scan-chip:hover { background: var(--green); color: #fff; }
.conn-help-toggle { display: inline-block; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; margin: 6px 0; }
.conn-help { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 10px 6px; margin: 4px 0 10px; font-size: 13px; line-height: 1.5; }
.conn-help ol { margin: 4px 0; padding-left: 22px; }
.conn-help li { margin-bottom: 6px; }

/* ============ OPERATORI (login PIN + proprietate mese) ============ */
.op-overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(15,23,42,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.op-card { background: var(--card, #fff); color: var(--text, #171717); border-radius: 18px;
  width: 340px; max-width: 96vw; padding: 16px 20px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.op-cap { display: flex; align-items: center; justify-content: space-between; }
.op-titlu { font-size: 20px; font-weight: 800; }
.op-x { border: none; background: transparent; font-size: 20px; cursor: pointer; color: var(--muted); }
.op-sub { color: var(--muted); margin: 2px 0 10px; font-size: 14px; }
.op-dots { display: flex; gap: 14px; justify-content: center; margin: 4px 0 6px; }
.op-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line, #cbd5e1); }
.op-dots span.on { background: var(--green, #1f7a4d); border-color: var(--green, #1f7a4d); }
.op-mesaj { min-height: 22px; text-align: center; }
.op-err { color: #dc2626; font-weight: 700; }
.op-ok { color: var(--green, #1f7a4d); font-weight: 800; }
.op-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.op-pad button { height: 58px; font-size: 24px; font-weight: 800; border: 1px solid var(--line, #cbd5e1);
  border-radius: 12px; background: var(--surface, #f6f7f9); color: var(--text, #171717); cursor: pointer; }
.op-pad button:active { background: var(--green, #1f7a4d); color: #fff; }
.op-pad .op-clear { background: #e6e8ec; font-size: 20px; }
.op-empty { visibility: hidden; }
.op-hint { color: var(--muted); font-size: 12px; margin-top: 10px; text-align: center; }
/* „Intra pe telefon" (29.07.2026): codul QR se deseneaza pe fundal ALB indiferent de tema —
   camerele citesc prost un cod inchis la culoare, iar temele intunecate exista. */
.op-qr { display: flex; justify-content: center; padding: 12px; }
.op-qr img { width: min(260px, 60vw); height: auto; image-rendering: pixelated;
  background: #fff; padding: 10px; border-radius: 12px; }
/* „Gata! Cosmina s-a conectat" — confirmarea de pe POS, mare si verde: se citeste de la un
   metru, ca omul sa nu mai scaneze o data degeaba (29.07.2026) */
.op-ok-mare { text-align: center; font-size: 19px; font-weight: 800; color: var(--green, #1f7a4d);
  margin: 18px 0 6px; line-height: 1.4; }
.op-qr-buton {
  display: block; width: 100%; margin-top: 14px; min-height: 46px; border-radius: 10px;
  border: 1px solid var(--line, #e2dcd6); background: var(--surface, #f6f7f9);
  color: var(--text, #171717); font-size: 14px; font-weight: 700; cursor: pointer;
}

/* Iesirea din fundatura: apare in poarta de operator DOAR cand PIN-ul nu merge. Discreta
   dinadins — nu e o actiune de zi cu zi, ci scaparea cuiva care altfel ramane inchis afara. */
.op-cont-buton {
  display: block; width: 100%; margin: 10px 0 0; padding: 10px 12px;
  background: transparent; border: 1px solid var(--linie, #d6d6d6); border-radius: 10px;
  color: var(--text-slab, #5b6672); font-size: 14px; cursor: pointer;
}
.op-cont-buton:hover { background: rgba(0,0,0,.04); }
/* Confirmare stilata (inlocuieste confirm() nativ) — butoane mari, touch */
.cfm-overlay { position: fixed; inset: 0; z-index: 2600; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.cfm-card { background: var(--card, #fff); color: var(--text, #171717); border-radius: 16px;
  width: 440px; max-width: 96vw; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.cfm-mesaj { font-size: 17px; font-weight: 600; line-height: 1.4; white-space: pre-line; margin: 2px 0 14px; }
.cfm-input { width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 13px 14px; font-size: 16px;
  border: 1px solid var(--line, #cbd5e1); border-radius: 10px; background: var(--card, #fff); color: var(--text, #171717); }
.cfm-actiuni { display: flex; gap: 12px; }
.cfm-actiuni button { flex: 1; min-height: 60px; font-size: 17px; font-weight: 800; border-radius: 12px; cursor: pointer; border: 2px solid var(--line, #cbd5e1); }
.cfm-nu { background: var(--surface, #f6f7f9); color: var(--text, #171717); }
.cfm-da { background: var(--green, #1f7a4d); color: #fff; border-color: var(--green, #1f7a4d); }
.cfm-da:active, .cfm-nu:active { transform: translateY(1px); }
/* Confirmarea cu NUMELE MESEI mare (18.10.2026): la trimiterea la bucatarie/bar si la protocol.
   Numele se citeste de la un brat distanta, iar "Da, Masa 26" e butonul mare (doua treimi). */
.cfm-mare { font-size: 44px; font-weight: 900; line-height: 1.1; text-align: center; margin: 0 0 8px;
  letter-spacing: .01em; overflow-wrap: anywhere; }
.cfm-cu-mare .cfm-mesaj { text-align: center; }
.cfm-cu-mare .cfm-actiuni button { min-height: 72px; font-size: 20px; }
.cfm-cu-mare .cfm-actiuni .cfm-da { flex: 2; }
/* Numele mesei MARE in antetul ecranului de comanda (18.10.2026): pe 17.10 comanda a ajuns de
   doua ori pe masa vecina. Pastila alba cu text inchis, vizibila pe orice culoare a barei. */
.order .brand .masa-mare { font-size: 30px; font-weight: 900; line-height: 1.1; padding: 2px 14px;
  border-radius: 10px; background: #fff; color: #111827; white-space: nowrap; }
@media (max-width: 760px) {
  .order .brand .masa-mare { font-size: 24px; padding: 2px 10px; }
  .cfm-mare { font-size: 36px; }
}
/* Dala ascunsa (Anulare vanzare la ospatar): locul ramane, butonul nu se vede si nu se apasa */
.pad button.dala-ascunsa { visibility: hidden; pointer-events: none; }
/* Badge operator in bara de sus (numele MARE) */
/* Badge operator: fundal ALB, pastila rotunjita, conturul + textul in culoarea operatorului
   (opStyle din tables.js seteaza color+borderColor pe culoarea lui; verde ca implicit). */
.op-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 16px; font-weight: 800;
  border: 2px solid var(--green, #1f7a4d); border-radius: 999px; background: #fff; color: var(--green, #1f7a4d); cursor: pointer; }
.op-badge .op-ic { font-size: 18px; }
.op-lock { font-size: 18px; }
/* Numele operatorului pe masa + proprietate */
.table-cell { position: relative; }
.top-op { font-size: 11px; font-weight: 800; color: var(--op-color, var(--muted)); margin-top: 1px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Masa ALTUI ospatar, vazuta de un ospatar obisnuit (seful le vede pe toate normal):
   se estompeaza ca sa nu ceara atingere. Culoarea se spala cu un VAL alb PESTE dala,
   NU cu `opacity` pe buton: opacity creeaza un grup, deci ar sterge si numele
   proprietarului — iar numele trebuie sa ramana citet, el spune de ce masa nu e a ta. */
.table-cell.altul { opacity: 1; border-style: dashed; cursor: not-allowed; }
.table-cell.altul::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.62); pointer-events: none; z-index: 1; }
.table-cell.altul .top-op { position: relative; z-index: 2; color: #b45309; }
/* Lista bonurilor din „Raportul zilei": lunga cat o tura, deci se deruleaza ea singura,
   ca previzualizarea raportului de deasupra sa ramana la vedere. */
.xgest-bonuri { max-height: 34vh; overflow-y: auto; }
/* ECRANUL „RAPOARTE" — dale COLORATE cu NUMELE raportului, fara iconite, ca interfata
   cu dale din admin (cerinta 26.07.2026). Culorile vin din paleta din ui-dale.css
   (--dl-c1..c8 reci pt rapoarte, --dl-w* calde pt unelte) — ui-dale.css e mereu
   incarcat, deci variabilele exista si in modul standard.
   `!important` pe fundal: regula generica `.pos button:not(...)` are specificitate
   (0,4,1) si altfel vopseste TOATE dalele in verdele temei. */
.rap-modal { width: min(980px, 96vw); }
/* Casa de marcat, sus in ecranul de rapoarte: cele doua actiuni de zi cu zi */
.rap-fiscal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; }
.rap-fiscal button { min-height: 44px; padding: 10px 18px; font-weight: 800; }
.rap-dale { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rap-dala {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  min-height: 86px; padding: 12px 14px; text-align: left; cursor: pointer;
  color: #fff !important; border: 0; border-radius: 14px;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.rap-dala b { font-size: 15px; font-weight: 800; line-height: 1.25; }
.rap-dala small { font-size: 11.5px; color: rgba(255,255,255,.88); font-weight: 600; }
.rap-dala:hover { box-shadow: 0 4px 12px rgba(0,0,0,.18); transform: translateY(-2px); }
.rap-dala:active { transform: scale(.98); filter: brightness(1.15); }
/* rapoartele: familia RECE, ciclata — vecinii nu au niciodata aceeasi culoare */
.rap-dale .rap-dala:nth-child(8n+1) { background: var(--dl-c1) !important; }
.rap-dale .rap-dala:nth-child(8n+2) { background: var(--dl-c2) !important; }
.rap-dale .rap-dala:nth-child(8n+3) { background: var(--dl-c3) !important; }
.rap-dale .rap-dala:nth-child(8n+4) { background: var(--dl-c4) !important; }
.rap-dale .rap-dala:nth-child(8n+5) { background: var(--dl-c5) !important; }
.rap-dale .rap-dala:nth-child(8n+6) { background: var(--dl-c6) !important; }
.rap-dale .rap-dala:nth-child(8n+7) { background: var(--dl-c7) !important; }
.rap-dale .rap-dala:nth-child(8n+8) { background: var(--dl-c8) !important; }
/* UNELTELE sefului (Bani in sertar / Bonuri / Istoric), mutate aici din bara
   (26.07.2026): familia CALDA, ca actiunile rapide din admin — se vad ca-s altceva
   decat rapoartele de sub ele. */
.rap-unelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 12px; }
.rap-unelte .rap-dala { box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); }
/* Randul de jos al panoului „Instrumente": personalizarea, despartita de dalele de
   lucru printr-o linie. Nu e o operatiune de tura, e o preferinta aleasa o data. */
.rap-jos { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Raportul de gestiuni: PRIMUL de tot si vizibil altfel decat restul uneltelor (29.07.2026,
   cerut de proprietar) — e cel mai scos raport din tura. Ocupa doua coloane cand incap, ca
   ochiul sa cada pe el inainte de orice. */
.rap-dala.rap-u0 { background: var(--green, #1f7a4d) !important; grid-column: span 2; }
@media (max-width: 520px) { .rap-dala.rap-u0 { grid-column: span 1; } }
.rap-dala.rap-u1 { background: var(--dl-w1) !important; }
.rap-dala.rap-u2 { background: var(--dl-w5) !important; }
.rap-dala.rap-u3 { background: var(--dl-w6) !important; }
/* „Rapoarte clasice" / „Administrare clasica" — turcoazul temei clasice, ca sa se vada
   din hub ca duc in aceeasi lume (suplimentara, doar pentru admin) */
.rap-dala.rap-u4 { background: #0f766e !important; }
.rap-dala.rap-u5 { background: #115e59 !important; }
/* „Ce nu s-a sincronizat" (09.08.2026): caramiziu de VERIFICARE, nu rosu de alarma —
   panoul e o unealta de control, iar de cele mai multe ori nu are nimic de raportat. */
.rap-dala.rap-u6 { background: #9a3412 !important; }
.rap-dala.rap-dosar { outline: 2px dashed rgba(255,255,255,.35); outline-offset: -5px; }
/* cartela cu banii inca neincasati (mese deschise): cifra rosie, langa total */
.rx-card.rx-card-rosu b { color: #c23b3b; }

/* Panoul „ce nu s-a sincronizat": trei dale de sumar + listele de sub ele. Doar citire. */
.ns-sect { display: flex; flex-direction: column; gap: 12px; }
.ns-sumar { margin-bottom: 0; }
.ns-sumar .rap-dala { cursor: default; }
.ns-sumar .rap-dala:hover { transform: none; box-shadow: none; }
.ns-d1 { background: var(--dl-w6, #b45309) !important; }
.ns-d2 { background: #b91c1c !important; }
.ns-d3 { background: #9a3412 !important; }
.ns-msg { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 10px;
  padding: 10px 14px; margin: 0; font-weight: 700; }
.ns-curat { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 10px;
  padding: 10px 14px; margin: 0; font-weight: 600; }
.ns-card { margin: 0; }
.ns-grav { border-color: #fcd34d; background: #fffbeb; }
.ns-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.ns-tabel td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.ns-tabel tr:first-child td { border-top: 0; }
.ns-ora { white-space: nowrap; color: #786f69; width: 1%; }
.ns-suma { white-space: nowrap; text-align: right; font-weight: 800; }
.ns-stare { white-space: nowrap; color: #786f69; }
/* butonul de eliberare a mesei deja incasate: la capatul randului, discret, cu text */
.ns-act { white-space: nowrap; text-align: right; width: 1%; }
.ns-act .btn-light { padding: 4px 10px; font-size: 12px; }
.ns-jos { margin: 0; }
@media (max-width: 560px) {
  .ns-tabel, .ns-tabel tr, .ns-tabel td { display: block; width: auto; }
  .ns-suma, .ns-act { text-align: left; }
  .ns-tabel td { border-top: 0; padding: 2px 0; }
  .ns-tabel tr { border-top: 1px solid var(--line); padding: 6px 0; }
}
@media (max-width: 760px) { .rap-dale, .rap-unelte { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* Meniul zilei fara varianta completata azi (ex. zilele fara V2): dala ramane la locul
   ei (operatorul stie ca exista), dar se vede din priviri ca nu e de apasat. Apasata,
   spune "Azi nu exista varianta N de meniu" in loc sa adauge o linie goala. */
.product.mz-indisponibil { border-style: dashed; cursor: not-allowed; filter: grayscale(1); opacity: .55; }
.product.mz-indisponibil .pp { font-style: italic; }
/* Nota de plata emisa: masa albastra */
.table-cell.nota-emisa { border-color: #2563eb; box-shadow: inset 0 0 0 2px #2563eb; }
.top-nota { font-size: 11px; font-weight: 800; color: #2563eb; margin-top: 1px; }
.avert-masa { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 10px;
  padding: 10px 14px; margin: 8px 12px 0; font-weight: 700; text-align: center; }
/* Fara legatura cu serverul: datele afisate vin din copia locala (pot fi vechi) */
/* „un bon nu a iesit pe casa" (29.07.2026): galben de atentie, nu rosu de panica — vanzarea e
   inregistrata, doar bonul fiscal lipseste, si se rezolva cat timp omul e inca in local. */
/* „probezi pe contul altcuiva" — mov, ca sa nu semene cu celelalte bannere (galben = bon
   nefiscalizat, rosu = fara legatura). Sta sus, peste tot, si nu se poate inchide: singura
   iesire e butonul care pune sesiunea la loc. */
.banner-proba {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; background: #efe6ff; border-bottom: 2px solid #b9a3e3;
  color: #4a2f7a; padding: 8px 14px; font-weight: 800; font-size: 13.5px;
}
.banner-proba button {
  min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #b9a3e3;
  background: #fff; color: #4a2f7a; font-weight: 800; font-size: 13px; cursor: pointer;
}
/* Butoanele de pe randul unui utilizator („Intră ca…" / „Editează"): UNUL SUB ALTUL, la fel
   de late, aliniate la dreapta (29.07.2026 — proprietarul: „nu prea sunt aranjate pe mobil si
   nici pe PC"). Erau pe flex-wrap, deci se rupeau cand nu incapeau si ieseau de latimi diferite,
   ba unul langa altul, ba unul sub altul, dupa lungimea textului. */
.u-actiuni { display: grid; gap: 6px; justify-items: stretch; align-content: start; }
.u-actiuni > button { width: 100%; white-space: nowrap; min-height: 36px; padding: 0 12px; }
/* „Intră ca…" e o unealta de proba, nu o actiune de zi cu zi: ramane mai discreta decat
   „Editează", ca sa nu fie apasata din reflex. */
.u-proba { opacity: .92; font-weight: 600; }
.banner-nefiscal {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: #fff4d6; border-bottom: 2px solid #e8c766; color: #6b4d05;
  padding: 10px 14px; font-weight: 800; font-size: 14px; cursor: pointer; text-align: center;
}
.banner-nefiscal:active { background: #ffeab3; }
.banner-offline { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: #fee2e2; color: #991b1b; border-bottom: 2px solid #fca5a5; padding: 9px 14px; font-weight: 800; }
.banner-offline .ghost { background: #fff; border: 1px solid #fca5a5; color: #991b1b; padding: 6px 14px; font-weight: 800; }
/* Palete de culoare in formularul de utilizator */
.uf-culori { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.uf-cul { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.uf-cul.sel { outline: 3px solid var(--text, #111); outline-offset: 1px; }
.uf-cul-none { background: #e5e7eb; color: #555; font-size: 11px; font-weight: 700; }
/* Editor Meniul zilei */
.mz-section h2 { margin: 0 0 4px; }
.mz-preturi { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 16px; }
.mz-preturi label { font-weight: 700; }
.mz-preturi input { width: 90px; margin: 0 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
/* Faza 2 desert: buton „din catalog" + hint cu prețurile deserturilor recunoscute. */
.mz-catalog-btn { margin-left: 8px; font-weight: 600; font-size: 12px; padding: 5px 10px; }
.mz-desert-pick { width: 100%; margin: 6px 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.mz-catalog-adauga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.mz-desert-hint { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 12px; }
.mz-desert-hint > span { color: #9a9a90; }
.mz-desert-hint > span.are { color: #1f5136; font-weight: 600; }
/* ziua saptamanii langa input-ul de data (cerinta 10.08) */
.mz-zi-data { margin-left: 8px; font-weight: 400; font-size: 13px; color: #8a6d1f; text-transform: capitalize; }
/* produse noi: deserturi citite care nu-s inca produs (cerinta 10.08) */
.mz-produse-noi { margin: 14px 0; padding: 12px 14px; border: 1px solid #e2c66b; background: #fbf6e6; border-radius: 10px; }
.mz-pn-cap { margin: 0 0 10px; font-size: 13px; color: #7a5d12; }
.mz-pn-rand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mz-pn-nume { flex: 1 1 200px; min-width: 160px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; }
.mz-pn-pret { width: 90px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; }
.mz-pn-hint { font-size: 12px; color: #9a6a1f; }
.mz-pn-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
/* biblioteca de fundaluri pt afis + video (cerinta 10.08) */
.mz-fundaluri { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.mz-fund-tit { margin: 0 0 8px; font-size: 15px; }
/* Descrierea postarii: camp LAT, pe toata latimea coloanei. Prima varianta il punea intr-un
   <label> alaturi de eticheta, si textarea sarea in dreapta, ingusta — un text de 100 de cuvinte
   se citea pe 6 caractere. Aici eticheta sta deasupra, ca la fundaluri. */
.mz-descriere { margin: 18px 0 10px; }
.mz-descriere-camp { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5;
  padding: 10px 12px; border: 1px solid var(--linie, #d8d3cc); border-radius: 8px; resize: vertical; }
.mz-descriere-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.mz-fund-bifa { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.mz-fund-gen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.mz-fund-grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.mz-fund-item { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.mz-fund-item img { width: 100%; display: block; }
.mz-fund-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: none;
             background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.mz-fund-x:hover { background: #991b1b; }
.mz-fund-item img { cursor: zoom-in; }
.mz-fund-mare { max-width: 92vw; padding: 12px; align-items: center; }
.mz-fund-mare img { max-width: 100%; max-height: 78vh; border-radius: 10px; display: block; }
.mz-fund-mare-act { margin-top: 10px; text-align: center; }
.mz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mz-col { display: flex; flex-direction: column; font-weight: 700; gap: 6px; }
.mz-col textarea { font: inherit; font-weight: 400; padding: 10px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; background: var(--card); color: var(--text); }
.mz-actiuni { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
/* CELE TREI BUTOANE ALE MENIULUI ZILEI (17.08.2026): starea zilei sta LANGA ele, nu ascunsa
   intr-un mesaj care dispare — o zi salvata dar nepublicata nu are voie sa se piarda tacut. */
.mz-stare-zi { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.mz-stare-zi.nesalvat { background: #fef3c7; color: #92400e; }
.mz-stare-zi.salvat-nepublicat { background: #dbeafe; color: #1e40af; }
.mz-stare-zi.publicat { background: #dcfce7; color: #166534; }
.mz-prev-cutie { max-width: 980px; width: 94vw; max-height: 90vh; overflow: auto; }
.mz-prev-stare { font-size: 13px; font-weight: 700; margin: 4px 0 10px; }
.mz-prev-stare.nesalvat { color: #92400e; }
.mz-prev-stare.salvat-nepublicat { color: #1e40af; }
.mz-prev-stare.publicat { color: #166534; }
.mz-prev-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr); gap: 16px; }
@media (max-width: 720px) { .mz-prev-grid { grid-template-columns: 1fr; } }
.mz-prev-poza img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; display: block; }
.mz-prev-text pre { white-space: pre-wrap; word-break: break-word; font: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; max-height: 40vh; overflow: auto; }
.mz-prev-probleme { margin: 6px 0 0; padding-left: 18px; color: #92400e; font-size: 13px; }
.mz-prev-act { display: flex; gap: 12px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.mz-afis-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.afis-detalii { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.afis-detalii label { font-weight: 700; font-size: 13px; }
.afis-detalii input { margin: 0 5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); width: 110px; }
.afis-detalii input[type=checkbox] { width: auto; }
.afis-adr input { min-width: 260px; width: 260px; }
.afis-detalii-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mz-ex { width: 72px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.afis-modal { max-width: 640px; width: 94vw; }
.afis-preview { max-height: 60vh; overflow: auto; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.afis-preview svg { width: 100%; height: auto; max-width: 420px; }
.afis-actiuni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
/* Zone in POS (grupare mese pe Terasa / Salon etc.) */
/* Inaltimea o da containerul flex .pos (topbar + rest), nu un calc(100vh - 56)
   hardcodat: cu 56 fix si topbar pe 2 randuri (~90px) aparea a doua bara. Acum
   wrap-ul ia exact spatiul ramas (flex:1) si se deruleaza doar daca mesele chiar
   nu incap. min-height:0 permite flex sa-l micsoreze sub continut. */
.tables-zone-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 6px 14px 10px; }
.zona-bloc { margin-bottom: 2px; }
.zona-titlu { font-size: 17px; font-weight: 800; margin: 2px 0 6px; padding-bottom: 4px;
  border-bottom: 2px solid var(--line, #e2dcd6); display: flex; align-items: baseline; gap: 4px; }
.zona-nr { font-size: 13px; font-weight: 600; color: var(--muted); }
/* Editor mese si zone (admin) */
.zone-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 14px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.zone-bulk input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.zb-nume { min-width: 180px; } .zb-nr { width: 90px; }
.mese-lista { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.masa-rand { display: flex; align-items: center; gap: 8px; }
.masa-rand input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.m-nume { flex: 2; min-width: 120px; } .m-zona { flex: 2; min-width: 100px; } .m-loc { width: 64px; }
.m-del { flex: 0 0 auto; }
/* capul listei de mese (etichete coloane) */
.masa-cap { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 0 2px; }
.masa-cap .m-loc { flex: 0 0 auto; }
.masa-cap .m-del-gol { width: 30px; flex: 0 0 auto; }
/* Definirea zonelor (per locatie) + dropdown zona per masa */
.mz-sub { margin: 18px 0 8px; font-size: 15px; font-weight: 800; }
.zone-def { display: flex; flex-direction: column; gap: 8px; }
.zone-rand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zone-rand input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.zd-nume { min-width: 200px; } .zd-nr { width: 80px; }
.m-zona-sel { flex: 2; min-width: 120px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; }
.sep-lat { max-width: 1020px; width: 96vw; }
/* capul ferestrei de separare: bara verde cu titlul in mijloc, ca dalele POS */
.sep-lat .modal-cap { background: var(--green,#1f7a4d); color:#fff; padding:10px 14px; }
.sep-lat .modal-cap h3 { flex:1; text-align:center; font-size:20px; font-weight:600; color:#fff; margin:0; }
.sep-lat .modal-cap .ghost { color:#fff; border-color:rgba(255,255,255,.5); background:transparent; }
/* Separare plata pe PLATITORI (fiecare plateste separat) */
.pl-taburi { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; align-items: stretch; }
.pl-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px;
  border: 2px solid var(--pc, var(--line, #cbd5e1)); border-radius: 12px; background: var(--card, #fff); color: var(--text); cursor: pointer; min-width: 110px; }
.pl-tab.on { background: var(--pc, var(--green, #1f7a4d)); color: #fff; }
.pl-nr { font-weight: 800; font-size: 14px; }
.pl-sum { font-size: 13px; font-weight: 700; }
.pl-add { min-width: 48px; font-size: 22px; font-weight: 800; border: 2px dashed var(--line, #cbd5e1);
  border-radius: 12px; background: var(--surface, #f6f7f9); color: var(--muted); cursor: pointer; }
.pl-lista { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.pl-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px;
  border: 1px solid var(--line, #cbd5e1); border-radius: 9px; background: var(--card, #fff); color: var(--text); font-weight: 600; cursor: pointer; }
.pl-item:active { transform: translateY(1px); }
.pl-bul { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800;
  font-size: 13px; display: flex; align-items: center; justify-content: center; }
.pl-nume { flex: 1; }
.pl-pret { font-weight: 800; white-space: nowrap; }
.uf-sterge { margin-right: auto; }
/* RAPORT X pe ecran (Rapoarte, admin): stil de bon fiscal, pentru comparatie cu casa */
.rfx { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin: 14px 0 18px; }
.rfx-bon { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; width: 420px; max-width: 100%; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.rfx-titlu { text-align: center; font-weight: 800; font-size: 15px; letter-spacing: 1px; }
.rfx-sub { text-align: center; color: #666; font-size: 11px; margin-bottom: 6px; }
.rfx-linie { border-top: 1px dashed #999; margin: 7px 0; }
.rfx-r { display: flex; justify-content: space-between; gap: 10px; padding: 1.5px 0; }
.rfx-r.rfx-mic { font-size: 11.5px; color: #666; }
.rfx-r.rfx-tot { font-weight: 800; font-size: 14px; }
.rfx-nota { max-width: 420px; }
/* Inventar sertar (diferenta numerar) */
.inv-sertar { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; width: 380px; max-width: 100%; }
.inv-sertar h3 { margin: 0 0 8px; font-size: 15px; }
.inv-sertar label { font-weight: 700; font-size: 13px; }
.inv-sertar input { width: 110px; margin: 0 6px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font-size: 16px; font-weight: 700; }
.inv-dif { margin: 10px 0 4px; font-size: 14px; }
.inv-dif.ok b { color: #16a34a; }
.inv-dif.minus b { color: #dc2626; }
.inv-dif.plus b { color: #b45309; }
/* Stoc si control */
.rep-row.stoc-jos { color: #dc2626; font-weight: 700; }
.ctrl-grup { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; line-height: 1.45; }
.ctrl-grup.ctrl-rau b { color: #dc2626; }
/* Raportul zilei in POS (operatori) */
.raport-modal { max-width: 560px; width: 94vw; }
.raport-modal .modal-corp { max-height: 74vh; overflow-y: auto; }
/* Raportul X gestiuni: modal mai lat + padding lateral ca textele/butoanele să nu fie lipite de margine.
   Antetul (modal-cap) se întinde pe toată lățimea prin margin negativ, restul conținutului stă inset. */
.xgest-modal { max-width: 720px; width: 96vw; padding: 0 18px 16px; }
.xgest-modal > .modal-cap { margin: 0 -18px; }
.xgest-modal > .rf-preview { max-height: 60vh; overflow: auto; }
.rz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.rz-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.rz-card small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.rz-card b { font-size: 16px; }
.rz-h { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.rz-rand { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.rz-rand span { flex: 1; } .rz-rand i { color: var(--muted); font-style: normal; font-size: 12px; } .rz-rand b { white-space: nowrap; }
/* PIN operator vizibil in lista de utilizatori (doar admin) */
.u-pin { display: inline-block; margin-left: 8px; font-family: ui-monospace, monospace; font-size: 12px;
  font-weight: 800; color: var(--green-dark, #14603a); background: var(--green-light, #eaf6ef);
  border: 1px solid var(--green, #1f7a4d); border-radius: 6px; padding: 1px 7px; letter-spacing: 1px; }
/* PIN-ul sta sub stelute (16.10.2026): in lista se apasa pe el, in fereastra de editare pe „Arata";
   amandoua cer confirmare. In camp stelutele le face -webkit-text-security (Chromium, WebView, Safari);
   unde nu exista, cifrele se estompeaza pana nu se mai pot citi. */
.u-pin-mascat { cursor: pointer; user-select: none; }
.u-pin-camp { display: flex; gap: 8px; align-items: center; }
.u-pin-camp input { flex: 1; min-width: 0; }
.u-pin-arata { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.u-pin-ascuns { -webkit-text-security: disc; }
@supports not (-webkit-text-security: disc) { .u-pin-ascuns { filter: blur(5px); } }
/* Blocat dupa incercari gresite (Admin -> Utilizatori, 01.10.2026): rosu = blocat acum,
   galben = a gresit de cateva ori. Caseta cu aparatele blocate la PIN sta deasupra listei. */
.u-blocat { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 1px 7px; }
.u-blocat-rosu { color: #fff; background: #c0392b; border: 1px solid #a93226; }
.u-blocat-galben { color: #6b4e00; background: #fff3c4; border: 1px solid #e0b100; }
.u-debloc { margin-left: 6px; padding: 2px 10px; font-size: 12px; }
.blocari-box { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e6b0aa; border-left: 4px solid #c0392b; border-radius: 10px; background: var(--card, #fdf2f1); color: var(--text, inherit); }
.blocari-box h3 { margin: 0 0 4px; font-size: 15px; }
.blocari-box p { margin: 0 0 8px; font-size: 13px; }
.blocari-rand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line, #f1d5d2); }
.blocari-nume { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.blocari-box .blocari-nota { margin: 8px 0 0; font-size: 12px; }

/* ============ MONITOR TOUCH CU REZOLUTIE MICA (ex. 1024x768) ============
   Plasate la SFARSITUL fisierului INTENTIONAT: trebuie sa bata regulile de baza
   (.pad button etc.), altfel butoanele raman mari si se ingramadesc pe ecrane mici. */
@media (min-width: 761px) and (max-width: 1180px) {
  .order-body { grid-template-columns: 340px 1fr; }
  .pad { gap: 5px; }
  .pad button { min-height: 56px; font-size: 12px; padding: 5px 3px; line-height: 1.12; }
  .cattile { min-height: 66px; }
  .cattile .pn { font-size: 14px; }
  .sectile { min-height: 92px; }
  .sectile .pn { font-size: 18px; }
  .product { min-height: 60px; }
  .product .pn { font-size: 13px; }
}
@media (max-height: 700px) {
  .pad button { min-height: 48px; font-size: 11.5px; padding: 4px 3px; }
  .cattile { min-height: 56px; }
  .sectile { min-height: 76px; }
  .product { min-height: 52px; }
  .line { padding: 6px 8px; font-size: 13.5px; }
  .trimite-sectii { padding: 8px; }
}

/* Rezultatul testului de conexiune/tiparire — VIZIBIL (inainte nu se afisa nicaieri). */
.conn-rezultat { margin: 8px 0 4px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); }

/* ---------- Editor ingrediente + drag&drop + Meniu tiparit ---------- */
.pt-nume { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pt-nume input { flex: 1; min-width: 0; }
.drag-h { cursor: grab; color: #b7ada5; font-size: 15px; padding: 2px; user-select: none; flex: 0 0 auto; }
.drag-h:active { cursor: grabbing; }
.ps-cats button.tras { opacity: .4; }
.ps-cats button[draggable="true"] { cursor: grab; }
.ing-btn { border: 1px solid #e2dcd6; background: #faf8f6; border-radius: 8px; padding: 6px 4px; cursor: pointer; font-size: 14px; opacity: .55; }
.ing-btn.are { opacity: 1; background: #eef7ee; border-color: #bfdcbf; }

.ing-modal { width: min(560px, 94vw); padding: 16px 18px; gap: 10px; overflow-y: auto; }
.ing-cap, .ing-rand { display: grid; grid-template-columns: 1fr 80px 44px 34px; gap: 6px; align-items: center; }
.ing-rand input[type="checkbox"] { width: 18px; height: 18px; justify-self: center; }
.mt-bifa { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.ing-cap { font-size: 11px; color: #786f69; font-weight: 700; letter-spacing: .5px; }
.ing-rand input { padding: 8px; border: 1px solid #e2dcd6; border-radius: 8px; font-size: 13px; }
.ing-lista { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; }
.ing-total { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.ing-eticheta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #5a524b; }
.ing-eticheta input, .ing-eticheta textarea { padding: 8px; border: 1px solid #e2dcd6; border-radius: 8px; font-size: 13px; font-weight: 400; font-family: inherit; }

.mt-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.mt-col { display: flex; flex-direction: column; gap: 8px; width: 460px; max-width: 100%; }
/* flex-wrap: pe telefon reglajele paginii (🔎 ↕ ⇕) nu incap pe UN rand —
   fara frangere, bara latea toata pagina si adminul se derula lateral */
.mt-bara { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; background: var(--surface, #fff); border: 1px solid var(--line, #e2dcd6); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.mt-ctl { display: inline-flex; align-items: center; gap: 4px; }
.mt-ctl button { border: 1px solid #e2dcd6; background: #faf8f6; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; line-height: 1; }
.mt-catlista { display: flex; flex-direction: column; gap: 4px; }
.mt-catrand { display: flex; align-items: center; gap: 8px; background: var(--surface, #fff); border: 1px solid var(--line, #e2dcd6); border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 600; }
.mt-catrand span { flex: 1; }
.mt-catrand button { border: 1px solid #e2dcd6; background: #faf8f6; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.mt-catrand button:disabled { opacity: .3; cursor: default; }
.mt-prev { overflow: hidden; border-radius: 4px; }
.mt-prev .mt-page { zoom: .55; box-shadow: 0 3px 14px rgba(0,0,0,.22); }

/* Ecran POS — primul buton din admin, evidentiat: pe acolo se intra la vanzare. */
.side nav a.nav-ecranpos { background: #16a34a; color: #fff; font-weight: 700; border-radius: 10px; margin-bottom: 8px; }
.side nav a.nav-ecranpos:hover { background: #12813b; color: #fff; }
.mt-plin { color: #dc2626; font-weight: 700; font-size: 12px; white-space: nowrap; }

/* Linkurile din care se genereaza codurile QR ale meniului tiparit */
.mt-linkuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 14px; align-items: end;
  background: var(--surface, #fff); border: 1px solid var(--line, #e2dcd6); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.mt-linkuri b { grid-column: 1 / -1; }
.mt-linkuri label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: #5a524b; }
.mt-linkuri input { padding: 7px 9px; border: 1px solid #e2dcd6; border-radius: 8px; font-size: 13px; font-weight: 400; }
.mt-linkuri small { grid-column: 1 / -1; }
.mt-plin-bara { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: #fee2e2; border: 1px solid #fca5a5; color: #b91c1c; font-weight: 700; font-size: 13px;
  border-radius: 10px; padding: 8px 12px; }
.mt-plin-bara button { border: 1px solid #b91c1c; background: #fff; color: #b91c1c; font-weight: 700;
  border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.mt-plin-bara button:hover { background: #b91c1c; color: #fff; }
.mt-global { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface, #fff); border: 1px solid var(--line, #e2dcd6); border-radius: 12px;
  padding: 10px 16px; margin-bottom: 14px; font-size: 13px; }
.mt-catrand .drag-h { flex: 0 0 auto; }
.mt-catrand button:disabled { opacity: .3; cursor: default; }
.mt-limitat { background: #e8f2f6; border: 1px solid #b9d8e2; color: #23617a; font-size: 12.5px; font-weight: 600;
  border-radius: 10px; padding: 7px 12px; }

/* Fisa rapida de inventar bauturi din Stoc si control */
.inv-bauturi { grid-column: 1 / -1; }
.inv-bt-cap, .inv-bt-rand { display: grid; grid-template-columns: minmax(180px,2fr) minmax(120px,1fr) 84px 84px 84px; gap: 8px; align-items: center; }
.inv-bt-cap { font-size: 11px; color: #786f69; font-weight: 700; letter-spacing: .5px; padding: 8px 4px 4px; }
.inv-bt-rand { padding: 4px; border-top: 1px solid #f0ede9; }
.inv-bt-rand input { width: 100%; padding: 7px 8px; border: 1px solid #e2dcd6; border-radius: 8px; font-size: 13px; background: #fff; }
.inv-bt-rand.stoc-jos .inv-bt-nume { color: #dc2626; font-weight: 700; }

/* ---------- Touch: tinte mai mari + confirmare vizuala mare ---------- */
/* butonul 1-tap "Suma exacta -> Finalizeaza" — cel mai folosit drum la plata */
.pay-exact-final { width: 100%; min-height: 62px; font-size: 19px; margin-top: 10px; border-radius: 12px; }
/* tastele de plata si actiunile principale, la marime de deget (>=56px) */
.pay-keys button { min-height: 56px; font-size: 18px; }
.pay-actions .confirm, .pay-actions .ghost2 { min-height: 58px; font-size: 17px; }
@media (min-width: 1200px) {
  .product { min-height: 64px; }
  .actions button { min-height: 54px; font-size: 15px; }
}
/* confirmarea mare care dispare singura (store.toast) */
#pos-toast { position: fixed; top: 18%; left: 50%; transform: translateX(-50%); z-index: 200;
  background: rgba(20, 83, 45, .96); color: #fff; font-size: 26px; font-weight: 800;
  padding: 22px 38px; border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  pointer-events: none; opacity: 0; }
#pos-toast.arata { animation: pos-toast-anim 1.6s ease forwards; }
@keyframes pos-toast-anim {
  0% { opacity: 0; transform: translateX(-50%) scale(.9); }
  12% { opacity: 1; transform: translateX(-50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(.98); }
}

/* ---- Glisare la stanga pe o linie din nota -> butonul "Sterge" (acelasi drum ca
   "Anulare produs": produsele trimise la sectii cer PIN de admin). Glisarea la
   dreapta / apasarea altei linii ascunde butonul. ---- */
.line { position: relative; }
.lines { user-select: none; -webkit-user-select: none; }   /* fara selectie de text la glisare */
.line-sterge { position: absolute; right: 4px; top: 4px; bottom: 4px; z-index: 2;
  background: #dc2626; color: #fff; border: 0; border-radius: 8px;
  font-weight: 800; font-size: 13px; padding: 0 16px; }
.line-sterge:hover { background: #b91c1c; }

/* ---- Apasare lunga pe un produs -> grila de cantitate rapida (x2..x10).
   user-select/touch-callout oprite ca tinerea apasata sa nu selecteze textul. ---- */
.product { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cr-grila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.cr-btn { min-height: 72px; font-size: 24px; font-weight: 800; border-radius: 12px;
  background: var(--green); color: #fff; border: 0; }
.cr-btn:hover { background: var(--green-dark); }

/* Mesajul de validare din fereastra de utilizator (cel din capul paginii e sub overlay). */
.uf-msg { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-top: 8px; }

/* Rolul de supervizor (sef de sala) — insigna proprie in lista de utilizatori. */
.u-role.role-supervisor { background: #fef3c7; color: #b45309; }

/* ---------- PLANUL SALII: mesele asezate ca in realitate ---------- */
/* Taburile de zona din POS (Salon / Terasa) — paginile separate, butoane sus. */
/* padding jos EGAL cu sus (28.07.2026, cerut de proprietar): taburile de zona au acum
   aceeasi respiratie deasupra si dedesubt, nu lipite de grila meselor. Centrarea lor se
   face pe telefon (vezi @media 760px) — pe ecranul mare raman aliniate cu grila. */
.zone-tabs { display: flex; gap: 8px; padding: 8px 14px; flex-wrap: wrap; flex-shrink: 0; }
.zone-tabs button { min-height: 48px; padding: 8px 22px; border-radius: 10px; font-size: 16px; font-weight: 800;
  background: var(--surface); color: var(--text); border: 2px solid var(--line); }
.zone-tabs button.on { background: var(--green); border-color: var(--green); color: #fff; }
.zone-tabs .zt-nr { font-weight: 600; opacity: .85; font-size: 13px; }

/* Planul propriu-zis: patratele fine de orientare, mesele pozitionate absolut. */
.plan-sala { position: relative; flex: 1; min-height: 0; margin: 10px 14px 12px; border-radius: 14px;
  border: 2px dashed var(--line); }
.plan-sala, .plan-canvas {
  background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 48px 48px; }
.masa-plan { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; background: var(--card); border: 3px solid #b6b0a8; color: var(--text);
  font: inherit; padding: 0; user-select: none; -webkit-user-select: none; touch-action: none; }
/* numarul mesei pe planul salii: acelasi cerc alb cu contur colorat, mare */
.masa-plan .mp-nume {
  min-width: clamp(30px, 4.2vw, 46px); height: clamp(30px, 4.2vw, 46px);
  padding: 0 6px; box-sizing: border-box;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: #fff; border: 3px solid var(--green-dark); color: var(--green-dark);
  font-weight: 900; font-size: clamp(17px, 2.4vw, 27px); line-height: 1;
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
}
.masa-plan.nota-emisa .mp-nume { border-color: #1d4ed8; color: #1d4ed8; }
.masa-plan.rezervata .mp-nume { border-color: #f59e0b; color: #b45309; }
.masa-plan .mp-total { font-size: clamp(9px, 1.1vw, 12px); color: var(--muted); }
.masa-plan.busy { background: var(--green); border-color: var(--op-color, var(--green-dark)); color: #fff; }
.masa-plan.busy .mp-total { color: #eaffea; }
.masa-plan.nota-emisa { background: #2563eb; border-color: #1d4ed8; }
.masa-plan.nota-emisa .mp-total { color: #dbeafe; }
/* acelasi val alb ca la tigle (vezi .table-cell.altul): masa altuia se spala,
   numele proprietarului ramane la fel de citet, deasupra valului */
.masa-plan.altul { opacity: 1; cursor: not-allowed; }
.masa-plan.altul::after { content: ''; position: absolute; inset: -3px; border-radius: inherit;
  background: rgba(255,255,255,.60); pointer-events: none; z-index: 1; }
.masa-plan.altul .scaun { opacity: .45; }
.masa-plan .mp-op { font-size: 10px; font-weight: 700; max-width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pe masa spalata, numele alb (de la .busy) ar deveni ilizibil -> pastila alba cu
   text ambra, aceeasi pereche de culori ca pe tigla si ca insigna de operator din bara */
.masa-plan.altul .mp-op { position: relative; z-index: 2; color: #b45309;
  background: rgba(255,255,255,.94); border-radius: 999px; padding: 1px 8px; }
.masa-plan .mp-nota { position: absolute; top: -9px; right: -9px; font-size: 15px; }
/* Scaun vazut de sus, ca in realitate: SEZUT patrat-rotunjit + SPATAR (bara mai
   lata de pe latura din afara). Rotirea vine din JS: fiecare scaun sta cu fata
   spre masa, deci spatarul cade mereu pe partea exterioara. */
.scaun { position: absolute; width: 12px; height: 12px; background: #a39a8e;
  border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.scaun::before { content: ''; position: absolute; left: -1px; right: -1px; top: -4px; height: 5px;
  border-radius: 2px; background: #7a7267; }
.masa-plan.busy .scaun { background: #3c7a4e; }
.masa-plan.busy .scaun::before { background: #1d4a2a; }
.masa-plan.nota-emisa .scaun { background: #60a5fa; }
.masa-plan.nota-emisa .scaun::before { background: #1e40af; }

/* Mesele din zona care inca nu au fost asezate pe plan (raman accesibile). */
.plan-rest { flex-shrink: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 14px 10px; }
.plan-rest-btn { min-height: 44px; padding: 6px 14px; border-radius: 10px; border: 2px solid var(--line);
  background: var(--card); color: var(--text); font-weight: 700; }
.plan-rest-btn.busy { background: var(--green); border-color: var(--green); color: #fff; }
/* masa altuia, in banda de neasezate: aici nu se scrie numele, deci ajunge estomparea */
.plan-rest-btn.altul { opacity: .5; border-style: dashed; cursor: not-allowed; }

/* Editorul din Admin -> Mese si zone. touch-action:none = degetul TRAGE masa, nu pagina. */
.plan-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
/* DIMENSIUNEA e a tuturor butoanelor din bara (tab-uri de zona + Salveaza/Goleste/Ecran),
   ca sa fie aliniate la aceeasi inaltime. CULORILE se dau DOAR tab-urilor simple — altfel
   `.plan-tabs button` (specificitate 0,1,1) suprascria `.btn-dark` (0,1,0): butonul „Salveaza
   planul" iesea deschis, iar la hover `.btn-dark:hover` (0,2,0) ii innegrea DOAR fundalul,
   textul ramanea inchis (var(--text)) => text negru pe fond negru, „se face negru" (bug
   raportat 29.07.2026). Cu `:not(...)`, btn-dark/btn-light isi pastreaza stilul si hover-ul. */
.plan-tabs button { min-height: 42px; padding: 6px 18px; border-radius: 10px; font-weight: 800; }
.plan-tabs button:not(.btn-dark):not(.btn-light) {
  background: var(--surface); color: var(--text); border: 2px solid var(--line); }
.plan-tabs button.on { background: var(--green); border-color: var(--green); color: #fff; }
/* FARA touch-action:none pe canvas: pe tableta, planul umple ecranul si bloca
   derularea paginii — nu mai ajungeai la butoane. Doar MESELE blocheaza derularea
   (au touch-action:none), ca sa poata fi trase; planul gol lasa pagina sa curga. */
.plan-canvas { position: relative; height: 58vh; min-height: 340px; border: 2px dashed var(--line); border-radius: 14px;
  background-color: var(--card); overflow: hidden; }
.plan-wrap { position: relative; }
.plan-tabs-spacer { flex: 1; }
/* Panoul mesei selectate — PLUTESTE peste plan, jos (vizibil si pe tableta). */
.plan-ctl-flotant { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); max-height: 62%; overflow-y: auto; }
.plan-ctl-cap { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.plan-ctl-cap .ghost { min-height: 40px; padding: 4px 14px; font-size: 16px; }
.plan-ctl-jos { display: flex; gap: 10px; align-items: center; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
.rot-btn { min-height: 40px; padding: 4px 12px; }
.masa-plan.edit { cursor: grab; }
.masa-plan.sel { outline: 3px solid #f59e0b; outline-offset: 2px; }
.plan-gol { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.plan-neasezate { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
/* copiile de siguranta la mese, cu data si butonul de readucere */
.mese-backups { margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mese-backups .mb-rand { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); }
.mese-backups .mb-rand:first-of-type { border-top: none; }
.plan-ctl { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; padding: 12px; margin: 8px 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.plan-ctl label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.plan-ctl input[type=range] { width: 130px; }
.plan-ctl select, .plan-ctl .m-loc { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.plan-ctl .m-loc { width: 70px; }
.plan-ctl-nume { font-size: 15px; }

/* Butoanele de aliniere verticala din editorul de meniu (starea activa). */
.mt-ctl button.on { background: var(--green); border-color: var(--green); color: #fff; }

/* Tragerea categoriilor cu degetul in editorul de meniu: manerul ⠿ nu lasa
   pagina sa se deruleze (ca sa poata trage), iar tinta de sub deget se vede. */
.drag-h { touch-action: none; }
.mt-tinta { outline: 2px dashed var(--green); outline-offset: 2px; border-radius: 6px; }

/* La tinerea apasata pe randul de categorie, tableta nu are voie sa selecteze text. */
.mt-catrand { user-select: none; -webkit-user-select: none; }

/* Randul subtire cu magazinele din admin (a inlocuit antetul mare cu statistici). */
.admin-loc-bar { margin: 10px 0 6px; width: fit-content; max-width: 100%; }
.admin-loc-bar .loc-change { color: #171717 !important; background: #eee7e0 !important; font-size: 15px !important; }

/* LINIA DE INSERARE la tragerea categoriilor: randul tinta se departeaza si o
   bara verde arata exact intre care categorii va intra cea lasata.
   Prin PADDING, nu margin: pe randurile astea marginea e neutralizata de ceva
   din cascada (verificat: si margin inline se calcula 0) — paddingul merge. */
.mt-catrand { position: relative; transition: padding .12s ease; }
.mt-catrand.mt-tinta-sus { padding-top: 19px; }
.mt-catrand.mt-tinta-sus::before { content: ''; position: absolute; left: 4px; right: 4px; top: 5px;
  height: 5px; border-radius: 3px; background: var(--green); }
.mt-catrand.mt-tinta-jos { padding-bottom: 19px; }
.mt-catrand.mt-tinta-jos::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 5px;
  height: 5px; border-radius: 3px; background: var(--green); }

/* Rapoartele pe roluri din POS: butoanele de casa (X/Z) pentru sef. */
.rz-fiscal { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.rz-fiscal button { min-height: 52px; padding: 8px 18px; font-weight: 700; }
.rz-fisc-msg { padding: 8px 10px; border-radius: 8px; background: #fef3c7; color: #92400e; font-size: 13px; font-weight: 600; }

/* Predarea mesei: butoanele cu ospatarii (culoarea fiecaruia pe margine). */
.pred-ops { display: flex; flex-direction: column; gap: 8px; }
.pred-op { min-height: 54px; border: 2px solid var(--line); border-left: 8px solid var(--pc, #57534e);
  border-radius: 10px; background: var(--card); color: var(--text); font-weight: 800; font-size: 15px; text-align: left; padding: 8px 14px; }
.pred-op.actual { opacity: .55; }
.pred-op small { font-weight: 600; color: var(--muted); }

/* Numerar serviciu din raportul sefului. */
.rz-suma { width: 120px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font-size: 15px; }

/* Mese REZERVATE: chihlimbariu, vizibil dintr-o privire. */
.masa-plan.rezervata { background: #fef3c7; border-color: #f59e0b; }
.masa-plan.rezervata .mp-total { color: #b45309; font-weight: 700; }
.masa-plan.rezervata .scaun { background: #d9b986; }
.masa-plan.rezervata .scaun::before { background: #b45309; }
.table-cell.rezervata .ttotal { color: #b45309; font-weight: 800; }
.table-cell.rezervata .dine-bg { fill: #fef3c7; }

/* Panoul plutitor din editorul planului sare SUS cand masa selectata e jos. */
.plan-ctl-flotant.sus { bottom: auto; top: 8px; }

/* ===== ECRAN COMPLET pentru planul salii: umple tot ecranul, fara meniul admin ===== */
.plan-editor.full {
  position: fixed; inset: 0; z-index: 2600; background: var(--surface, #f4f2ef);
  padding: 10px 14px; display: flex; flex-direction: column; overflow: hidden;
}
.plan-editor.full .plan-tabs { margin: 0 0 8px; }
.plan-editor.full .plan-wrap { flex: 1; display: flex; gap: 12px; min-height: 0; }
.plan-editor.full .plan-canvas { flex: 1; height: auto; min-height: 0; }
.plan-editor.full .plan-neasezate { margin: 8px 0 0; }
/* pe desktop, panoul mesei selectate sta ANDOCAT IN STANGA, nu peste plan */
@media (min-width: 900px) {
  .plan-editor.full .plan-ctl-flotant {
    position: static; order: -1; flex: 0 0 280px; width: 280px; align-self: stretch;
    /* nowrap OBLIGATORIU: cu wrap + inaltime fixa, coloana se rupea in DOUA coloane */
    overflow-y: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin: 0;
  }
  .plan-editor.full .plan-ctl-flotant label { width: 100%; justify-content: space-between; }
  .plan-editor.full .plan-ctl-flotant input[type=range] { flex: 1; width: auto; min-width: 0; }
  .plan-editor.full .plan-ctl-jos { justify-content: stretch; }
  .plan-editor.full .plan-ctl-jos button { flex: 1; }
}

/* ------- Editare produse: mutarea categoriilor cu drag ------- */
/* Bara verde arata INTRE care categorii va ateriza chip-ul tras.
   PADDING, nu margin: pe .mt-catrand marginile erau anulate de cascade,
   pastram acelasi truc si aici ca sa nu redescoperim problema. */
.ps-cats button { position: relative; }
.ps-cats button.cat-tinta-st { padding-left: 20px; }
.ps-cats button.cat-tinta-st::before {
  content: ''; position: absolute; left: 6px; top: 18%; bottom: 18%;
  width: 5px; border-radius: 3px; background: #22a06b;
}
.ps-cats button.cat-tinta-dr { padding-right: 20px; }
.ps-cats button.cat-tinta-dr::after {
  content: ''; position: absolute; right: 6px; top: 18%; bottom: 18%;
  width: 5px; border-radius: 3px; background: #22a06b;
}
.ps-cats button.cat-tinta-st, .ps-cats button.cat-tinta-dr {
  background: rgba(34, 160, 107, .14);
}
/* butonul "+ Produs nou" repetat sub lista (cel de sus nu se vede pe mobil) */
.ps-jos { margin-top: 10px; padding-bottom: 6px; }
.ps-jos .btn-light { min-height: 52px; padding: 10px 24px; font-weight: 700; }

/* ------- Selectare multipla pe liniile din nota ------- */
.sel-multi-rand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px; flex-wrap: wrap; }
.sel-multi-btn { min-height: 44px; padding: 8px 14px; font-weight: 700; border-radius: 10px; }
.sel-multi-btn.on { background: var(--green, #1f7a4d); color: #fff; border-color: var(--green, #1f7a4d); }
.line .line-bifa { font-size: 22px; line-height: 1; margin-right: 4px; color: var(--muted, #64748b); }
.line .line-bifa.on { color: var(--green, #1f7a4d); }
.line.bifata { outline: 2px solid var(--green, #1f7a4d); outline-offset: -2px; background: rgba(34, 160, 107, .10); }

/* ------- Configurari: chenar pe fiecare echipament ------- */
.echip { border: 2px solid var(--line, #cbd5e1); border-radius: 14px; padding: 12px 16px 16px; margin: 18px 0 0; min-width: 0; }
.echip legend { font-weight: 800; font-size: 16px; padding: 0 10px; }

/* ------- Canalul comenzii la pachet (Glovo / Bolt / telefon) ------- */
.meta-chip.chip-canal { background: #7c3aed; color: #fff; }

/* masa cu comanda de delivery: scuterul se vede din sala */
.masa-plan .mp-canal { position: absolute; top: 4px; left: 6px; font-size: 14px; }

/* ------- Tastatura virtuala deschisa: dialogurile urca sus ------- */
/* Dialogurile sunt fixe si centrate; scrollIntoView nu le poate misca, deci
   tastatura le acoperea campul de scris. Cand tastatura e vizibila, le aliniem sus. */
body:has(.vkbd.show) .cfm-overlay,
body:has(.vkbd.show) .modal-fundal { align-items: flex-start; padding-top: 4vh; }
/* ...si scurtam fereastra cat tastatura e sus, ca sa stea DEASUPRA tastelor. Corpul
   devine derulabil, iar campul focalizat e adus in vizor de keyboard.js (scrollIntoView).
   Fara asta, pe casa (1024x768) al doilea camp de discount („suma") ramanea sub taste. */
body:has(.vkbd.show) .modal-fundal .modal-cutie { max-height: 60vh; }
/* cand tastatura virtuala e deschisa, editorul meniului zilei primeste loc de derulare
   sub continut — altfel Desertul/preturile raman ACOPERITE si nu pot fi atinse
   (vazut pe terminal 26.07; tastatura centreaza singura campul focalizat) */
body:has(.vkbd.show) .mzp { padding-bottom: 48vh; }
/* la fel, pentru editorul de produse: campurile de jos (ex. „Mod de servire" din
   RETETAR) nu trebuie sa ramana sub tastatura. Mecanismul (spec §7): tastatura ocupa
   ~45-48% din inaltime; padding-ul da loc de derulare sub continut, iar keyboard.js
   aduce campul focalizat in vizor cu scrollIntoView(block:center). 48vh — ACEEASI
   valoare ca la .mzp de mai sus (300px era prea putin pe ecranele de 600p, unde
   inseamna jumatate de ecran dar tastatura e tot ~48%). */
body:has(.vkbd.show) .pep-editor { padding-bottom: 48vh; }

/* ------- Planul salii: mese mai realiste ------- */
/* Blatul: lemn (dungi translucide peste culoarea de baza, ca sa mearga si peste
   verde/albastru/culoarea aleasa de admin) + lumina din colt + umbra pe podea. */
.masa-plan {
  background-color: #c9a878;   /* lemn cald pentru masa libera fara culoare aleasa */
  color: #2d2416;
  border: 2px solid rgba(74, 50, 26, .55);
  background-image:
    radial-gradient(ellipse at 30% 22%, rgba(255,255,255,.30), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(90deg,
      rgba(80, 50, 20, .14) 0 2px, rgba(255,255,255,.06) 2px 5px,
      rgba(56, 33, 12, .10) 5px 13px, rgba(255,255,255,.04) 13px 17px);
  box-shadow: 0 6px 14px rgba(0,0,0,.30), inset 0 0 0 2px rgba(255,255,255,.10), inset 0 -6px 12px rgba(0,0,0,.14);
}
.masa-plan .mp-total { background: rgba(255,255,255,.85); color: #4a3524; padding: 0 6px; border-radius: 7px; font-weight: 700; }
.masa-plan.busy .mp-total, .masa-plan.nota-emisa .mp-total { background: rgba(0,0,0,.28); color: #fff; }
.masa-plan.busy, .masa-plan.nota-emisa { color: #fff; }
.masa-plan.rezervata .mp-total { background: rgba(0,0,0,.22); color: #fff; }
/* podeaua salii: nuanta calda, sa nu para o coala de matematica */
.plan-sala { background-color: #f4eee5; }

/* scaunele: perna rotunjita cu umbra, spatar bombat */
.scaun { width: 13px; height: 13px; border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, #bdb0a0, #96887a);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 3px rgba(0,0,0,.28); }
.scaun::before { left: -1px; right: -1px; top: -5px; height: 6px;
  border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #8b8071, #6e6355); }

/* OMUL de pe scaun cand masa e ocupata: cap (ten) + umeri (haina inchisa).
   Cate persoane a scris ospatarul la "Numar persoane"; fara numar = toate. */
.scaun.ocupat { background: linear-gradient(180deg, #6b543d, #55422e); }
.scaun.ocupat::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(circle at 50% 40%, #ecc7a2 0 3.1px, rgba(0,0,0,0) 3.5px),
    radial-gradient(ellipse 5.5px 4px at 50% 82%, #35281b 0 90%, rgba(0,0,0,0) 100%); }
.masa-plan.busy .scaun.ocupat { background: linear-gradient(180deg, #2f5f3e, #244a30); }
.masa-plan.nota-emisa .scaun.ocupat { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }

/* starea (verde/albastru/rezervata) foloseste background-SHORTHAND cu specificitate
   mai mare, care sterge textura — o repunem peste culoarea de stare */
.masa-plan.busy, .masa-plan.nota-emisa, .masa-plan.rezervata {
  background-image:
    radial-gradient(ellipse at 30% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.16) 0 2px, rgba(255,255,255,.07) 2px 5px,
      rgba(0,0,0,.10) 5px 13px, rgba(255,255,255,.04) 13px 17px);
  box-shadow: 0 6px 14px rgba(0,0,0,.30), inset 0 0 0 2px rgba(255,255,255,.12), inset 0 -6px 12px rgba(0,0,0,.18);
}

/* PLANUL SALII PE TELEFON (29.07.2026, proprietarul: „pe mobil scaunele ocupa tot, nu se
   mai vad numele/banii/liber-ocupat/bon emis"). Pe ecran ingust scaunele „realiste" (sezut
   + spatar + omul) sunt uriase fata de masa si acopera etichetele. Le reducem la niste
   PUNCTE mici (fara spatar, fara om) si marim textul de pe masa, ca informatia sa iasa in
   fata. Mesele se maresc din JS (stilPlan, ramura mobil). Starea ramane citeata: masa isi
   schimba culoarea (verde ocupat / albastru nota / chihlimbar rezervat), banii se vad pe
   pastila alba. Pe POS-ul touch (1024px) si pe desktop NU se schimba nimic. */
@media (max-width: 760px) {
  /* scaun = punct mic, discret */
  .masa-plan .scaun {
    width: 7px; height: 7px; border-radius: 50%;
    background: #b3a794; box-shadow: none;
  }
  .masa-plan .scaun::before { display: none; }          /* fara spatar */
  .masa-plan .scaun.ocupat::after { display: none; }    /* fara „omul" desenat */
  .masa-plan.busy .scaun { background: #2f6b43; }
  .masa-plan.nota-emisa .scaun { background: #3b82f6; }
  .masa-plan.rezervata .scaun { background: #d9b986; }
  /* etichetele de pe masa, mai mari si lizibile */
  .masa-plan .mp-nume { min-width: 40px; height: 40px; border-width: 3px; }
  .masa-plan .mp-total { font-size: 14px; font-weight: 800; }
  /* numele ospatarului INTREG, nu „Ari..." (29.07.2026, poza): pastila alba dimensionata
     dupa text, ca „Libera"/total — poate depasi latimea mesei, fara taiere cu puncte. */
  .masa-plan .mp-op {
    font-size: 12px; max-width: none; overflow: visible; text-overflow: clip;
    white-space: nowrap; background: rgba(255,255,255,.94); color: #4a3524;
    border-radius: 999px; padding: 1px 8px;
  }
  .masa-plan .mp-nota { font-size: 18px; }
}

/* ------- iPhone/iPad instalat pe ecranul principal (standalone) ------- */
/* marginile sigure: pe telefoanele cu decupaj (notch), continutul nu intra
   sub colturile rotunjite / bara de jos */
@media (display-mode: standalone) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ------- Alergeni & calorii ------- */
.nut-baza { margin-bottom: 16px; }
.nut-tabel .pthead, .nut-tabel .ptrow { grid-template-columns: 1.6fr 70px 70px 70px 70px 70px 70px 70px 1.4fr; display: grid; gap: 6px; align-items: center; }
.nut-tabel-prod .pthead, .nut-tabel-prod .ptrow { grid-template-columns: 1.8fr 80px 90px 80px 190px 110px 1.6fr; display: grid; gap: 6px; align-items: center; }
.nut-tabel { overflow-x: auto; }
.nut-cat h3 { margin: 18px 0 6px; }
.ptrow.nut-lipsa { background: #fffbeb; }   /* chihlimbar discret: are ingrediente estimate */
.nut-avert { color: #b91c1c; }
/* ingrediente cu valori ESTIMATE (media) — discret, nu alarmant */
.nut-estimat { color: #92700c; font-style: italic; }
@media (max-width: 900px) {
  .nut-tabel .pthead, .nut-tabel .ptrow { grid-template-columns: 1.4fr 56px 56px 56px 56px 56px 56px 56px 1.2fr; }
  .nut-tabel-prod .pthead, .nut-tabel-prod .ptrow { grid-template-columns: 1.4fr 60px 70px 60px 150px 90px 1.3fr; }
}

/* ------- Statistici avansate (Rapoarte) ------- */
.av-card { margin-bottom: 16px; }
.av-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.av-cap h4 { margin: 0; }
.av-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.av-h { margin: 12px 0 6px; font-size: 14px; }
.av-ore { display: flex; align-items: flex-end; gap: 6px; padding: 6px 2px 2px; overflow-x: auto; }
.av-ora { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 34px; }
.av-ora .av-bara { width: 22px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #2f9e63, #1f7a4d); box-shadow: inset 0 2px 0 rgba(255,255,255,.25); }
.av-ora .av-val { font-size: 10px; color: var(--muted); font-weight: 700; }
.av-ora small { font-size: 11px; color: var(--muted); }
.av-doua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .av-doua { grid-template-columns: 1fr; } }
.av-plus { color: #15803d; font-weight: 800; }
.av-minus { color: #b91c1c; font-weight: 800; }

/* sagetile de ordonare a produselor in categorie (sigure pe touch) */
.ord-btns { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 4px; }
.ord-btn { width: 26px; height: 20px; line-height: 1; font-size: 11px; padding: 0;
  border: 1px solid var(--line, #cbd5e1); border-radius: 5px; background: var(--surface, #f6f7f9); cursor: pointer; }
.ord-btn:active { background: var(--green, #1f7a4d); color: #fff; }

/* ── GRAFICE RAPOARTE (SVG scris de mana, fara librarie) ───────────────────
   Inspirat de dashboardul POS, dar redus la ce chiar se citeste dintr-o
   privire: tendinta pe zile + structura pe categorii. */
.gr-card { background: var(--card, #fff); border: 1px solid var(--line, #eee7e1); border-radius: 14px; padding: 14px 16px 10px; margin: 14px 0; }
.gr-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.gr-cap h4 { margin: 0; font-size: 15px; }
.gr-total { text-align: right; }
.gr-total b { font-size: 20px; display: block; line-height: 1.15; }
.gr-total small { font-size: 11px; }
.gr-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.gr-ghid { stroke: var(--line, #eee7e1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gr-linie { fill: none; stroke: var(--accent, #2f9e63); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr-pct { fill: var(--card, #fff); stroke: var(--accent, #2f9e63); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gr-pct:hover { fill: var(--accent, #2f9e63); }
.gr-axa { display: flex; justify-content: space-between; margin-top: 4px; }
.gr-axa span { font-size: 10px; color: var(--muted, #9a8f88); }
.dif-plus { color: #2f9e63; font-weight: 700; }
.dif-minus { color: #c2603a; font-weight: 700; }

/* inelul pe categorii */
.gr-inel-rand { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; flex-wrap: wrap; }
.gr-inel { width: 118px; height: 118px; flex: none; transform: rotate(-90deg); }
.gr-inel-fond { fill: none; stroke: var(--line, #eee7e1); stroke-width: 5; }
.gr-felie { fill: none; stroke-width: 5; }
.gr-inel-nr, .gr-inel-txt { transform: rotate(90deg); transform-origin: 21px 21px; text-anchor: middle; }
.gr-inel-nr { font-size: 5.5px; font-weight: 800; fill: var(--text, #171717); }
.gr-inel-txt { font-size: 2.4px; fill: var(--muted, #9a8f88); text-transform: uppercase; letter-spacing: .18px; }
.gr-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.gr-legenda li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 2px 0; }
.gr-legenda i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.gr-legenda b { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .gr-svg { height: 120px; }
  .gr-axa span:nth-child(even) { display: none; }
  .gr-inel { width: 96px; height: 96px; }
}

/* Meniul zilei: compozitia (felurile) sub linia din nota + pe ecranul de comanda */
.line-feluri, .nota-feluri { display:block; color:#6b7280; font-size:.78em; line-height:1.25; }
.nota-feluri { font-style:italic; }
/* Ecranul „Combina variantele": lista de preparate cu +/- mari (touch) */
.comb-lista { display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; margin:.4rem 0; }
.comb-rand { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  min-height:52px; padding:10px 14px; border:2px solid #e5e7eb; border-radius:12px; background:#fff;
  cursor:pointer; text-align:left; font-size:15px; }
.comb-rand.ales { border-color:#16a34a; background:#f0fdf4; }
.comb-rand:disabled { opacity:.45; cursor:default; }
.comb-bif { min-width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:18px; font-weight:800; color:#9ca3af; }
.comb-rand.ales .comb-bif { background:#16a34a; color:#fff; }
.comb-nume { flex:1; font-weight:600; }
.comb-ctl { display:flex; align-items:center; gap:10px; }
.comb-b { width:44px; height:44px; border-radius:10px; border:1px solid #d1d5db; background:#f9fafb;
  font-size:22px; line-height:1; font-weight:700; cursor:pointer; }
.comb-b:disabled { opacity:.4; cursor:default; }
.comb-n { min-width:22px; text-align:center; font-size:18px; font-variant-numeric:tabular-nums; }

/* Separare plata: CHENARE pe platitor (produsele lui, in culoarea lui) */
.pl-chenare { display:flex; flex-direction:column; gap:10px; max-height:56vh; overflow-y:auto; margin:.5rem 0; }
.pl-chenar { border:2px solid var(--pc); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; }
.pl-chenar.activ { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--pc); }
.pl-chenar-cap { display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:var(--pc); color:#fff; padding:9px 12px; font-weight:700; font-size:15px; }
.pl-chenar-cap small { font-weight:600; opacity:.85; }
.pl-chenar-tot { font-variant-numeric:tabular-nums; }
.pl-chenar-lista { display:flex; flex-direction:column; gap:6px; padding:8px; }
.pl-uprod { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%;
  min-height:46px; padding:8px 12px; border:none; border-left:6px solid var(--pc);
  border-radius:8px; background:#f6f7f9; cursor:pointer; text-align:left; font-size:15px; }
.pl-uprod { background: color-mix(in srgb, var(--pc) 12%, #fff); }
.pl-uprod:active { filter:brightness(.96); }
.pl-uprod-nume { font-weight:600; }
.pl-uprod-pret { font-variant-numeric:tabular-nums; color:#374151; }
.pl-chenar-gol { margin:4px; color:#9ca3af; font-style:italic; font-size:.85em; text-align:center; }

/* Compozitia meniului zilei: ALB pe linia selectata (fundal verde) — altfel invizibila */
.line.sel .line-feluri, .line.sel .line-nota { color: rgba(255,255,255,.9); }

/* ================== SEPARARE VANZARE (stil dale) ==================
   Se atinge cu degetul, in mijlocul serviciului, pe o tableta tinuta cu o mana.
   De aici vin toate marimile: tigla e cat o buricul degetului mare (min 96px
   inaltime), textul se citeste de la lungimea bratului, iar tiglele stau in
   GRILA — pe latime incap 3-4 produse, deci o nota obisnuita se vede toata,
   fara derulare. Lista pe verticala arata mai „ordonat", dar pune ospatarul sa
   deruleze exact cand se grabeste. */
.sep2 { display:flex; gap:14px; align-items:stretch; margin:.35rem 0 .8rem; }
.sep2-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.sep2-cap { margin:0 0 6px; text-align:center; font-size:16px; font-weight:600; color:#4b5563; }
.sep2-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(122px, 1fr));
  gap:6px; align-content:start; padding:8px; min-height:38vh; max-height:44vh; overflow-y:auto;
  border:1px solid #cfd4d9; border-radius:6px; background:#fff; }
/* rama verde cand masa-tinta e aleasa: coloana din dreapta „are unde sa duca" */
.sep2-col.activ .sep2-grid { border-color:var(--green,#1f7a4d); box-shadow:0 0 0 2px rgba(31,122,77,.15); }
.sep2-tigla { display:flex; flex-direction:column; justify-content:center; gap:4px;
  min-height:96px; padding:8px 6px; border:none; border-radius:2px; background:var(--green,#1f7a4d);
  color:#fff; cursor:pointer; text-align:center; }
.sep2-tigla:active { filter:brightness(.92); }
.sep2-nume { font-weight:600; font-size:14px; line-height:1.2; overflow-wrap:anywhere; }
.sep2-qty { font-size:13px; opacity:.95; }
.sep2-gol { grid-column:1/-1; margin:auto; color:#9ca3af; font-style:italic; font-size:.9em; text-align:center; padding:16px; }

/* Masa si banii, pereche-pereche: coloana stanga = de unde pleaca, dreapta = unde ajunge.
   Aceeasi asezare ca tiglele de deasupra, ca ochiul sa nu caute a doua oara. */
.sep-info { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:.2rem 0 .6rem; }
.sep-fisa { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sep-fisa small { font-size:12.5px; color:#6b7280; }
.sep-fisa b { font-size:22px; font-weight:600; color:#111827; overflow-wrap:anywhere; }
.sep-fisa b.sep-gol { font-size:16px; font-weight:500; color:#9ca3af; font-style:italic; }

/* Butoanele mari de final: rosu = renunt, verde = duc produsele pe masa aleasa. */
/* Pe ecranul casei (1024x768) fereastra de separare are multe tigle (produse + mese
   libere) si trece de 90vh; butonul „✓ Gata" cadea sub marginea de jos si trebuia sa
   derulezi ca sa separi. Il fixam jos: tiglele deruleaza in spate, „Gata" si „✕" raman
   mereu vizibile. Verificat la 1024x768 cu 12 produse + 12 mese. */
.sep-actiuni { display:flex; justify-content:flex-end; gap:10px;
  position:sticky; bottom:0; z-index:2; margin:.6rem -22px 0; padding:12px 22px;
  background:var(--card,#fff); border-top:1px solid var(--line,#eee7e1); }
.sep-ren, .sep-ok { min-height:62px; border:none; border-radius:4px; color:#fff;
  font-size:20px; font-weight:600; cursor:pointer; }
.sep-ren { min-width:120px; background:#e8695c; }
.sep-ok { min-width:200px; background:var(--green,#1f7a4d); }
.sep-ok:disabled { background:#c8cdd2; cursor:default; }
.sep-ren:active, .sep-ok:not(:disabled):active { filter:brightness(.92); }

@media (max-width: 760px) {
  .sep2 { gap:8px; }
  .sep2-grid { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); min-height:30vh; max-height:34vh; }
  .sep2-tigla { min-height:78px; }
  .sep2-cap { font-size:13.5px; }
  .sep-fisa b { font-size:18px; }
  .sep-ok { min-width:130px; }
  .sep-ren { min-width:74px; }
}

/* Aranjare POS (Functia 2 B) */
.ap-section { max-width: 920px; }
.ap-bara { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:.6rem 0; }
.ap-msg { color:#16a34a; font-size:.9em; }
.ap-h3 { margin:1rem 0 .4rem; }
.ap-cats { display:flex; flex-direction:column; gap:8px; }
.ap-cat { border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.ap-cat-cap { display:flex; align-items:center; gap:8px; padding:6px 8px; background:#f6f7f9; }
.ap-ord { display:inline-flex; gap:2px; }
.ap-ord .ghost { padding:2px 8px; }
.ap-nume { flex:1; min-width:110px; padding:6px 8px; }
.ap-sect { border:1px solid #d1d5db; background:#fff; border-radius:8px; padding:5px 10px; cursor:pointer; white-space:nowrap; }
.ap-sect.bar { background:#eaf3ff; border-color:#93c5fd; }
.ap-nr { min-width:22px; text-align:center; font-weight:700; color:#6b7280; }
.ap-cat-prod { display:flex; flex-wrap:wrap; gap:5px; padding:8px; }
.ap-chip { background:#eef2f7; border:1px solid #e2e8f0; border-radius:999px; padding:3px 10px; font-size:.85em; }
.ap-add { align-self:flex-start; margin-top:2px; }
.ap-produse { display:flex; flex-direction:column; gap:2px; max-height:50vh; overflow-y:auto; border:1px solid #eee; border-radius:10px; padding:8px; }
.ap-prand { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 6px; border-bottom:1px solid #f1f5f9; }
.ap-pn { flex:1; }
.ap-psel { min-width:160px; padding:5px 8px; }

/* Import postere meniul zilei (PDF/OCR) */
.mz-import { border:1px solid #e5e7eb; border-radius:10px; padding:8px 12px; margin:.6rem 0; background:#fafafa; }
.mz-import summary { cursor:pointer; font-weight:700; padding:4px 0; }
.mz-import-btn { display:inline-block; cursor:pointer; }
.mz-import-prog, .mz-import-msg { margin-left:10px; font-size:.9em; color:#6b7280; }
.mz-import-lista { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.mz-import-card { display:flex; gap:14px; align-items:flex-start; border:1px solid #e5e7eb; border-radius:10px; padding:10px; background:#fff; }
.mz-import-img { width:150px; max-height:210px; object-fit:contain; border:1px solid #eee; border-radius:6px; background:#f6f2e7; }
.mz-import-poze { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; }
.mz-import-gen { display:flex; align-items:center; justify-content:center; text-align:center; color:#6b7280; font-size:.85em; height:210px; }
.mz-import-sursa { width:60px; max-height:80px; object-fit:contain; border:1px solid #e5e7eb; border-radius:4px; opacity:.8; background:#fff; }
.mz-import-sursa-et { font-size:.72em; color:#9ca3af; }
.mz-import-det { flex:1; display:flex; flex-direction:column; gap:8px; }
.mz-import-data { display:flex; align-items:center; gap:8px; font-weight:600; }
.mz-import-warn { color:#dc2626; font-weight:600; font-size:.85em; }
.mz-import-det textarea { width:100%; resize:vertical; }

.mz-import-prog2 { margin-top:14px; padding-top:10px; border-top:1px dashed #e5e7eb; }
.mz-prog-rez { list-style:none; padding:0; margin:8px 0 0; font-size:.88em; }
.mz-prog-rez li { padding:3px 0; color:#166534; }
.mz-prog-rez li.bad { color:#b91c1c; }

.mz-import-vv { display:flex; gap:10px; }
.mz-import-vv label { flex:1; display:flex; flex-direction:column; font-weight:600; font-size:.88em; gap:3px; }
.mz-import-vv textarea { resize:vertical; }
.mz-import-des { display:flex; align-items:center; gap:8px; font-weight:600; font-size:.88em; }
.mz-import-des input { flex:1; }

.mz-import-cap { display:flex; flex-direction:column; font-weight:600; font-size:.88em; gap:3px; }
.mz-import-cap textarea { resize:vertical; font-weight:400; }
.mz-import-cap .mic { align-self:flex-start; font-size:.85em; padding:2px 8px; }
.mz-prog-rez li { display:flex; flex-direction:column; gap:2px; padding:6px 0; border-bottom:1px solid #f1f5f9; color:#166534; }
.mz-prog-rez li.bad { color:#b91c1c; }
.mz-prog-l { font-size:.9em; word-break:break-word; }

.mz-prog-btn { font-size:1.02em; padding:12px 18px; }

.mz-prand-act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.mz-prand-act .mic { padding:6px 12px; }
.mz-prand-rez { display:flex; flex-direction:column; gap:2px; margin-top:4px; font-size:.85em; color:#166534; }
.mz-prand-rez.bad { color:#b91c1c; }
/* Ecranul „Mesaje" din admin: scriere + evidenta pe fiecare destinatar */
.msg-nou { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin: 12px 0 20px; }
.msg-camp { display: block; font-weight: 700; }
.msg-camp textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px;
  border: 1px solid #d1d5db; border-radius: 9px; font-size: 15px; }
.msg-catre, .msg-valab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.msg-catre .u-check.sters { opacity: .45; }
.msg-activ { margin-left: 6px; font-size: 12px; font-weight: 700; color: #15803d;
  background: #dcfce7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.msg-act-admin { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.msg-rand { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.msg-rand-cap { display: flex; align-items: flex-start; gap: 10px; }
.msg-rand-cap b { flex: 1; }
.msg-mic { font-size: 12px; color: #6b7280; white-space: nowrap; }
.msg-stari { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.msg-stare { font-size: 13px; color: #92400e; }
.msg-stare.citit { color: #15803d; }
.msg-raspuns-txt { display: block; margin-left: 20px; color: #374151; font-style: italic; }

/* MESAJ de la admin, aratat dupa introducerea codului. Acopera tot ecranul (operatorul
   nu ajunge la mese pana nu apasa „Am inteles"). Randat la radacina aplicatiei, deci NU
   mosteneste stilul butoanelor din `.pos` — le stilizam complet aici. */
.msg-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(15, 40, 28, .72); }
.msg-card { background: #fff; border-radius: 18px; padding: 26px 28px; width: min(680px, 100%);
  max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.msg-cap { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.msg-de-la { font-size: 17px; font-weight: 800; color: var(--green, #1f7a4d); }
.msg-nr { margin-left: auto; font-size: 13px; font-weight: 700; color: #6b7280;
  background: #f3f4f6; border-radius: 999px; padding: 4px 10px; }
.msg-text { font-size: 30px; line-height: 1.3; font-weight: 700; color: #111827; margin: 0 0 10px;
  white-space: pre-wrap; word-break: break-word; }
.msg-cand { font-size: 13px; color: #6b7280; margin: 0 0 18px; }
.msg-raspuns textarea { width: 100%; box-sizing: border-box; font-size: 17px; padding: 12px;
  border: 2px solid #cbd5e1; border-radius: 10px; margin-bottom: 14px; }
.msg-raspuns textarea:focus { outline: none; border-color: var(--green, #1f7a4d); }
.msg-act { display: flex; gap: 12px; }
.msg-act button { flex: 1; min-height: 64px; font-size: 18px; font-weight: 800; border-radius: 12px;
  cursor: pointer; border: 2px solid var(--green, #1f7a4d); }
.msg-act .msg-ok { background: var(--green, #1f7a4d); color: #fff; }
.msg-act .msg-rasp { background: #fff; color: var(--green, #1f7a4d); flex: 0 0 auto; padding: 0 22px; }
.msg-act button:disabled { opacity: .6; }
@media (max-width: 520px) {
  .msg-text { font-size: 24px; }
  .msg-act { flex-direction: column; }
  .msg-act .msg-rasp { padding: 0; }
}

/* Soldul de pe butonul din bara: ramane vizibil si cand butoanele sunt doar cu iconita */
.bani-btn .bani-sold { margin-left: 6px; background: rgba(255,255,255,.22); border-radius: 999px;
  padding: 2px 8px; font-size: 13px; font-weight: 800; white-space: nowrap; }
/* Situatia banilor, in fereastra „Bani in casa" */
.bani-sit { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; background: #f9fafb; }
.bani-rand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 15px; }
.bani-rand b { font-variant-numeric: tabular-nums; }
.bani-total { font-weight: 800; border-bottom: 1px dashed #d1d5db; padding-bottom: 6px; margin-bottom: 4px; }
.bani-sertar { border-top: 2px solid var(--green, #1f7a4d); margin-top: 6px; padding-top: 6px;
  font-weight: 800; color: var(--green, #1f7a4d); font-size: 17px; }

.bani-raport { display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed #e5e7eb; flex-wrap: wrap; }
.bani-raport button { padding: 12px 16px; font-weight: 700; }

/* Bani in casa (POS, doar sef): camp mare + sume rapide din 10 in 10 */
.bani-modal { max-width: 440px; }
.bani-suma { width:100%; box-sizing:border-box; font-size:2.4rem; font-weight:800; text-align:center;
  padding:14px 10px; border:2px solid #cbd5e1; border-radius:12px; }
.bani-suma:focus { outline:none; border-color:#16a34a; }
.bani-rapid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.bani-rapid button { padding:16px 0; font-size:1.15rem; font-weight:700; }
.bani-act { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.bani-act button { padding:18px 6px; font-size:1.02rem; font-weight:700; }
@media (max-width:420px) { .bani-act { grid-template-columns:1fr; } }

.mz-import-avert { background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px; padding:8px 12px; margin:0 0 10px; font-size:.9rem; }
.mz-prog-lista { margin-top:16px; border-top:1px dashed #e5e7eb; padding-top:12px; }
.mz-prog-zi { border:1px solid #e5e7eb; border-radius:10px; padding:8px 12px; margin:6px 0; background:#fff; }
.mz-prog-zi.azi { border-color:#16a34a; background:#f0fdf4; }
/* WRAP, altfel butonul de sters iese din ecran pe telefon (19.08.2026, reclamat: „cum sterg
   meniurile deja programate" — butonul exista, dar nu se putea ajunge la el). Randul poarta data,
   pana la patru buline de stare si doua butoane; pe un ecran de 390px nu au unde incapea pe un
   singur rand, iar fara wrap ULTIMUL element (cosul) e cel impins afara. */
.mz-prog-cap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mz-prog-cap b { margin-right:auto; }
.mz-prog-istoric { margin-top:12px; }
.mz-prog-istoric summary { cursor:pointer; color:#6b7280; font-size:.9rem; }
.mz-prog-zi.trecut { opacity:.6; background:#f9fafb; }
.mz-prog-badge { font-size:.8em; background:#eef2f7; border-radius:999px; padding:2px 8px; }
.mz-prog-feluri { display:flex; flex-wrap:wrap; gap:12px; margin-top:5px; font-size:.9em; color:#374151; }

/* Potrivirea cu casa de marcat: gauri in numerotarea bonurilor fiscale */
.fisc-verif { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e2dcd6; }
.fisc-verif-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.fisc-verif-rez { margin-top: 10px; font-size: 14px; }
.fisc-verif-rez p { margin: 6px 0; }
.verif-rau { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 8px 10px; }
.verif-bun { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 8px; padding: 8px 10px; }
.verif-nefisc { margin-top: 8px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; }
.verif-rand { font-size: 13px; color: #92400e; }
.verif-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 8px; padding: 8px 10px; }
.fisc-casa-rez { margin-top: 10px; font-size: 14px; }
.fisc-casa-rez p { margin: 6px 0; }
.raportx { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 12px; background: #fff; margin: 8px 0; max-width: 460px; }
.rx-rand { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.rx-rand b { font-variant-numeric: tabular-nums; }
.rx-total { font-weight: 800; font-size: 16px; border-bottom: 1px dashed #d1d5db; padding-bottom: 6px; margin-bottom: 4px; }
.rx-anul { color: #92400e; }
.fisc-verif-mare button { padding: 14px 20px; font-size: 15px; font-weight: 800; }
.diag { border-radius: 12px; padding: 12px 14px; margin: 12px 0; border: 1px solid; }
.diag h4 { margin: 0 0 8px; font-size: 15px; }
.diag ul { margin: 0; padding-left: 18px; }
.diag li { margin: 5px 0; font-size: 14px; line-height: 1.45; }
.diag-ok { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.diag-atentie { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.diag-problema { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.dg-cheie { font-weight: 700; }
.dg-info { opacity: .85; }

/* --- Bonuri: perioada fiscala + bonurile care n-au iesit pe casa de marcat --- */
.bon-znota { margin: -4px 0 10px; line-height: 1.5; }
.bon-avert { background: #fffbeb; border: 1px solid #fde68a; color: #78350f;
  border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
/* Emiterea unui bon fiscal e o actiune cu urmari (ANAF) — arata ca atare, nu ca
   un buton oarecare de tiparire. */
.btn-emite { background: #b91c1c; color: #fff; border: 1px solid #991b1b; font-weight: 700;
  border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.btn-emite:hover { background: #991b1b; }
.btn-emite:disabled { opacity: .6; cursor: default; }

/* ================== BONURI STORNATE ==================
   Un bon stornat trebuie sa se vada ca stornat de la un metru, altfel cineva il
   citeste ca vanzare si cauta banii in sertar. De-aia: text taiat in lista,
   eticheta rosie langa masa si o banda peste nota, nu doar o insemnare discreta. */
/* in istoric: omul care a apasat, iar sub el, marunt, contul terminalului */
.ist-cont { display: block; font-weight: 400; font-size: 10.5px; color: #9ca3af; }
/* aparatul actiunii (21.10.2026): nume si IP sub om; restul la trecerea cu mouse-ul */
.ist-aparat { display: block; font-weight: 400; font-size: 10.5px; color: #6b7280; overflow-wrap: anywhere; }

.eticheta-storno { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #b91c1c; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  vertical-align: middle; }
.bon-rand.stornat td { color: #9ca3af; }
.bon-rand.stornat td b { text-decoration: line-through; }
.bon-stornat-sumar { display: block; color: #b91c1c; font-weight: 600; font-size: 11.5px; }
.banda-storno { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #fef2f2;
  border: 1px solid #fecaca; color: #991b1b; font-weight: 800; letter-spacing: .02em; }
.banda-storno small { display: block; font-weight: 500; letter-spacing: 0; margin-top: 3px; }
.nota-stornata { opacity: .92; }
/* Rosu, dar NU „cel mai apasat buton de pe ecran": incadrat, nu plin — se apasa rar. */
.btn-storno { background: #fff; color: #b91c1c; border: 2px solid #b91c1c; font-weight: 700; }
.btn-storno:hover { background: #b91c1c; color: #fff; }
.btn-storno:disabled { opacity: .55; cursor: default; }

/* Bonurile deschise DIN POS: fereastra mare, ca lista si nota sa incapa alaturi. */
.bonuri-modal { width: 1100px; max-width: 96vw; }
.bonuri-modal .modal-corp { max-height: 82vh; overflow-y: auto; }
@media (max-width: 900px) { .bonuri-modal .bon-doua { grid-template-columns: minmax(0, 1fr); } }
.bani-dedecand { margin: 6px 2px 12px; line-height: 1.45; }
.bani-avert { background: #fffbeb; border: 1px solid #fde68a; color: #78350f;
  border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.op-corect { font-size: 12px; padding: 4px 10px; white-space: nowrap; }

/* Operatiuni fiscale pe ecran ingust: randul de 5 coloane nu incape pe telefon —
   se rupe in doua, cu ora pe randul ei si butonul intreg, nu taiat. */
@media (max-width: 760px) {
  .op-row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
  .op-label { flex: 1 1 auto; white-space: normal; }
  .op-time { flex: 1 0 100%; order: 9; }
  .op-corect { order: 8; }
}
/* Raportul zilei: bara de navigare intre perioade (perioada fiscala <-> zile inchise) */
.rz-nav { display: flex; align-items: center; gap: 10px; padding: 8px 14px 2px; }
.rz-nav-mij { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.rz-nav-mij b { font-size: 15px; text-transform: capitalize; }
.rz-nav > button { font-size: 26px; line-height: 1; padding: 2px 14px; min-width: 46px; }
.rz-nav > button:disabled { opacity: .3; cursor: default; }
.fisc-cor .fisc-verif-bar { flex-wrap: wrap; gap: 8px 12px; }
.fisc-cor .fisc-verif-bar input { padding: 7px 9px; border: 1px solid #e2dcd6; border-radius: 8px; }
.fisc-cor .op-row { grid-template-columns: 90px minmax(0, 1fr) auto auto 34px; }
/* copia unui Raport Z din jurnal (25.10.2026): lista Z-urilor si rezultatul in lista de operatii */
.fisc-zcopii .fisc-verif-bar input { padding: 7px 9px; border: 1px solid #e2dcd6; border-radius: 8px; }
.zcopii-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 320px; overflow-y: auto; }
.zcopii-rand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
.zcopii-nr { font-weight: 600; min-width: 92px; }
.zcopii-rand .btn-light { margin-left: auto; padding: 6px 12px; }
.op-label .op-sub { display: block; font-size: 12px; opacity: .8; white-space: normal; }
.op-label .op-sub-err { color: #b3261e; opacity: 1; }

/* --- Separare prin mutare pe altă masă: nota cu bife + planul sălii --- */
.sepm { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 14px; align-items: start; }
.sepm-nota { background: #fff; border: 1px solid #eee7e1; border-radius: 12px; padding: 8px; max-height: 56vh; overflow: auto; }
.sepm-cap { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 8px; font-size: 14px; }
.sepm-linie { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  width: 100%; text-align: left; padding: 10px 8px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; font-size: 14px; cursor: pointer; }
.sepm-linie:hover { background: #f7f4f1; }
.sepm-linie.ales { background: #eaf5ef; border-color: #b8dcc7; font-weight: 600; }
.sepm-bifa { font-size: 17px; line-height: 1; }
.sepm-nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sepm-plan { min-width: 0; }
.sepm-canvas { max-height: 56vh; }
/* masa care POATE primi produsele iese in fata; ocupatele raman vizibile, dar stinse */
.sepm-canvas .masa-plan.sepm-liber { cursor: pointer; }
.sepm-canvas .masa-plan[disabled] { opacity: .38; cursor: not-allowed; }
@media (max-width: 900px) {
  .sepm { grid-template-columns: 1fr; }
  .sepm-nota, .sepm-canvas { max-height: 34vh; }
}
.sepm-linie { display: block; padding: 0; }
.sepm-tap { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 8px; align-items: center;
  width: 100%; text-align: left; padding: 10px 8px; border: 0; background: transparent; font-size: 14px; cursor: pointer; }
.sepm-cant { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 10px 9px 34px; }
.sepm-cant button { min-width: 36px; height: 32px; border: 1px solid #b8dcc7; background: #fff;
  border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer; }
.sepm-cant button:disabled { opacity: .35; cursor: default; }
.sepm-cant b { font-size: 13px; min-width: 78px; text-align: center; }

/* Separare: linia cu numerele meselor libere, sub cele doua coloane.
   Fara plan si fara zone — ospatarul stie numerele, ii trebuie butoane, nu o harta. */
.sepm-mese { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px;
  max-height: 21vh; overflow-y: auto; }
.sepm-masa { min-width: 96px; min-height: 58px; padding: 8px 16px; border: 1px solid #d9d2cb;
  background: #fff; border-radius: 8px; font-size: 17px; font-weight: 600; cursor: pointer; }
.sepm-masa:hover { background: #f3f7f4; }
.sepm-masa.on { background: #1f6f4a; border-color: #1f6f4a; color: #fff; }
.sep2-col.activ { border-color: #1f6f4a; }
/* masa OCUPATA la separare (24.10.2026): se poate alege, dar se vede ca nota ei primeste produsele in plus */
.sepm-masa.ocupata { background: #fdf3e7; border-color: #d99a4e; }
.sepm-masa.ocupata.on { background: #b86e1c; border-color: #b86e1c; color: #fff; }
.sepm-ocupata { display: block; font-size: 12px; font-weight: 600; opacity: .85; }
.sep-fisa .sepm-ocupata { display: inline; margin-left: 6px; }

/* ================== CUTII ÎN ADMIN ==================
   Reclamatie reala: „nu se intelege de unde incepe o setare si unde se termina".
   Setarile stateau lipite una de alta, despartite doar de un titlu.
   O cutie per rubrica: rama subtire, titlu propriu, spatiu in jur. Aceleasi valori
   pentru TOATE containerele care existau deja (conn-box, rep-box, fisc-verif...),
   ca sa nu para trei aplicatii diferite pe acelasi ecran. */
.adm-cutie,
.cfg-section .conn-box,
.fisc-verif,
.rep-box {
  background: #fff;
  border: 1px solid #e6ded6;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
}
.adm-cap,
.cfg-section .conn-box > h2,
.fisc-verif > b:first-child {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #16261e;
}
/* randul de actiuni al unei cutii: butoane si campuri pe acelasi rand, care se rup
   frumos pe telefon in loc sa iasa din ecran */
.adm-rand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.adm-rand input, .adm-rand select {
  padding: 9px 11px; border: 1px solid #e2dcd6; border-radius: 9px; font-size: 14px;
}
/* titlurile numerotate (Zone / Mese / Plan, Categorii POS / Produse) devin capete de
   cutie, nu simple randuri de text pierdute intre continuturi */
.adm-cutie > .mz-sub:first-child,
.adm-cutie > .ap-h3:first-child,
.adm-cutie > .cfg-titlu:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .adm-cutie, .cfg-section .conn-box, .fisc-verif, .rep-box { padding: 13px 13px; border-radius: 12px; }
}

/* ================== BONURI CITITE DIN JURNALUL CASEI ==================
   Textul se arata ASA CUM L-A TIPARIT CASA, cu font fix: e o dovada, nu o
   prelucrare de-a noastra. Cine se uita trebuie sa poata compara cu hartia. */
.jurnal-cutie { margin-top: 12px; }
.jd-bon { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; margin: 8px 0; background: #fff; }
.jd-bon.jd-gol { opacity: .7; }
.jd-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jd-suma { margin-left: auto; font-size: 16px; }
.jd-adus { color: #15803d; font-weight: 700; font-size: 12.5px; }
.jd-text { margin: 6px 0 0; padding: 8px; background: #f8f7f5; border-radius: 8px;
  font: 12px/1.35 ui-monospace, Consolas, monospace; white-space: pre-wrap; max-height: 240px; overflow: auto; }

/* Socoteala diferentei, pe randuri — „cat" inaintea lui „de ce". */
.dg-socoteala { width: 100%; max-width: 520px; margin: 6px 0 10px; border-collapse: collapse; font-size: 13.5px; }
.dg-socoteala td { padding: 4px 6px; border-bottom: 1px dotted #d8d3cd; }
.dg-socoteala td.dr { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dg-socoteala tr.dg-final td { border-top: 2px solid #9ca3af; border-bottom: none;
  padding-top: 7px; font-weight: 700; font-size: 15px; }

/* «DE CE» — cauza fiecarui bon in plus, cu fapta potrivita ei */
.dg-decee { margin: 2px 0 10px; padding: 8px 10px; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 8px; font-size: 13.5px; }
.jd-cauza { margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fafafa; }
.jd-cauza p { margin: 4px 0 8px; font-size: 12.5px; line-height: 1.45; }
.jd-cauza.jd-dublu { background: #fef2f2; border-color: #fecaca; }
.jd-cauza.jd-vanzare-directa { background: #eff6ff; border-color: #bfdbfe; }
.jd-cauza.jd-fara-valoare { background: #f8fafc; }

/* Lista de terminale: becul de stare, modul, si restul datelor pe un rand */
.trm-rand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid #eee7e1; }
.trm-rand.off { opacity: .55; }
/* „de ce nu tipareste": pe rand propriu, sub restul — e o propozitie, nu o eticheta.
   Verde cand totul merge, galben de atentie cand chiar e ceva de facut (29.07.2026). */
.trm-diag { flex-basis: 100%; font-size: 12.5px; color: #16794a; line-height: 1.45; }
.trm-diag.rau { color: #8a5b00; background: #fff8e6; border: 1px solid #f2e2b8;
  border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.trm-bec { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.trm-bec.on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.trm-bec.off { background: #cbd5e1; }
.trm-nume { min-width: 130px; }
.trm-mod { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.trm-mod.fiscal { background: #dcfce7; color: #14532d; }
.trm-mod.test { background: #fee2e2; color: #991b1b; }
.trm-ales { padding: 2px 8px; border-radius: 999px; background: #fef9c3; color: #713f12;
  font-size: 11.5px; font-weight: 700; }
.trm-alege { padding: 3px 9px; font-size: 12px; }
.dubl-rand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 2px;
  border-top: 1px dotted #e5e7eb; }
.jd-recom { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; }

/* ================== INCHIDEREA ZILEI ================== */
.inch-cutie { border-left: 4px solid #6366f1; }
.inch-pas { display: flex; gap: 10px; padding: 10px 6px; border-top: 1px solid #eee7e1; }
.inch-pas:first-of-type { border-top: none; }
.inch-bec { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; }
.inch-gata .inch-bec { background: #16a34a; }
.inch-atentie .inch-bec { background: #d97706; }
.inch-blocat .inch-bec { background: #b91c1c; }
.inch-info .inch-bec { background: #64748b; }
.inch-corp { flex: 1; min-width: 0; }
.inch-corp b { font-size: 14px; }
.inch-corp p { margin: 3px 0 6px; font-size: 12.5px; line-height: 1.5; color: #374151; }
.inch-gata .inch-corp p { color: #6b7280; }
.inch-rand { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.inch-input { width: 130px; padding: 6px 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; }
.inch-btn { padding: 4px 12px; font-size: 12.5px; }
.inch-gata-tot { margin-top: 10px; padding: 10px; background: #dcfce7; border-radius: 8px;
  color: #14532d; font-weight: 700; }

/* ============================================================
   TILE-URI TOUCH UNIFICATE — „stil dale", peste tot in POS.
   O singura limba vizuala pentru butoanele mari care se ating cu degetul:
   aceeasi rotunjire, aceeasi umbra, acelasi raspuns la apasare. Informatia de pe
   tigla ramane neatinsa (nume + pret + marcajele produsului); se schimba doar felul
   in care arata si cum reactioneaza la deget.
   ============================================================ */

/* Grila: tigle mai late (ca la separare), ca sa incapa un nume intreg fara sa se
   inghesuie doua pe rand pe telefon. */
.product-grid {
  grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(158px, 1fr)); gap: 12px;
}

/* Tigla de PRODUS: numele sus, mare; pretul jos, ca o pastila verde — se citeste de
   la lungimea bratului, exact ca „1.00 BUC" de pe tiglele de separare. */
.product {
  min-height: 88px; justify-content: space-between; gap: 6px;
  border-radius: 14px; border: 1.5px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,38,30,.05);
  transition: transform .05s ease, box-shadow .12s ease, border-color .12s ease;
}
.product .pn { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.product .pp {
  align-self: flex-end; font-size: 15px; font-weight: 800; color: #fff;
  background: var(--green); border-radius: 999px; padding: 3px 12px; line-height: 1.3;
}
.product:hover { border-color: var(--green); box-shadow: 0 3px 10px rgba(31,122,77,.14); }
/* Raspunsul la apasare — inima senzatiei „touch": tigla se infunda putin sub deget. */
.product:active, .cattile:active, .sectile:active,
.sep2-tigla:active, .sepm-masa:active, .disc-chip:active,
.cr-btn:active, .op-pad button:active {
  transform: scale(.965); filter: brightness(.97);
}

/* Categorii si sectiuni: aceeasi rotunjire si umbra ca produsele, ca sa para o familie. */
.cattile, .sectile {
  border-radius: 14px; border-width: 1.5px;
  box-shadow: 0 1px 2px rgba(16,38,30,.05);
  transition: transform .05s ease, box-shadow .12s ease, border-color .12s ease;
}
.cattile:hover, .sectile:hover { box-shadow: 0 3px 10px rgba(31,122,77,.14); }

/* Grilele din ferestre (cantitate rapida, discount, mese) — acelasi neam de butoane. */
.cr-btn, .disc-chip, .sepm-masa { border-radius: 14px; transition: transform .05s ease, filter .1s ease; }

/* Tiglele de separare capata si ele rotunjirea familiei (erau taiate la 2px). */
.sep2-tigla { border-radius: 14px; }

/* Pe telefon, tigle putin mai scunde ca sa incapa mai multe pe ecran, dar tot mari
   cat sa nu ratezi produsul vecin. */
@media (max-width: 760px) {
  .product-grid { grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(132px, 1fr)); gap: 9px; }
  .product { min-height: 74px; border-radius: 12px; }
  .product .pn { font-size: 14px; }
  .cattile, .sectile { border-radius: 12px; }
}

/* Discount: alegerea tintei (produsele alese vs toata masa) */
.disc-tinta { display: flex; gap: 8px; margin: 2px 0 12px; }
.disc-tab { flex: 1; min-height: 46px; border: 1.5px solid var(--line); background: var(--card);
  color: var(--text); border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .05s ease; }
.disc-tab.on { background: var(--green); border-color: var(--green); color: #fff; }
.disc-tab:disabled { opacity: .5; cursor: default; }
.disc-tab:active:not(:disabled) { transform: scale(.97); }

/* Ecrane SCUNDE (casa de la restaurant e un touch „POS EXPERT" 1024x768): fereastra
   de discount a crescut cu randul de tinta („pe produsele alese / toata masa") plus
   ajutoarele si depasea cu ~40px inaltimea utila, impingand butonul „Aplica" sub
   marginea de jos. Aici stringem spatiile ca sa incapa TOT fara sa derulezi, pe cei
   768px, fara sa atingem tabletele/monitoarele inalte. Tintele raman apasabile (≥44px). */
@media (max-height: 800px) {
  .disc-tinta { margin: 0 0 8px; }
  .disc-tab { min-height: 42px; }
  .disc-grup { margin-bottom: 8px; }
  .disc-titlu { margin-bottom: 4px; }
  .disc-chip { min-height: 44px; }
  .camp-eticheta { margin-bottom: 8px; }
  .pos-modal .modal-corp { padding-top: 12px; padding-bottom: 14px; }
}

/* Meniul zilei — poza programată + corecții FB de ultim moment */
.mz-prog-poza { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.mz-poza-thumb { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie, #d8dce0); cursor: zoom-in; }
.mz-poza-actiuni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mz-poza-file input { display: none; }

/* Terminale: bara de sus + starea online/offline + buton delogare */
.trm-bara { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.trm-stare { font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.trm-stare.on { background: #d1fae5; color: #065f46; }
.trm-stare.off { background: #eee; color: #888; }
.trm-out { font-size: 12px; padding: 4px 9px; margin-left: auto; }

/* Căutare inteligentă: „cu rezultat, fără click" (chihlimbariu, nu roșu ca „fără rezultat") */
.cs-neutru { color: #b7791f; }
/* Sugestii de sinonime: chip cu ＋ (adaugă) și ✕ (șterge) */
.cs-sug-chip { display: inline-flex; align-items: stretch; margin: 0 6px 6px 0; }
.cs-sug-chip .cs-sug-btn { margin: 0; border-radius: 8px 0 0 8px; }
.cs-sug-x { border: 1px solid var(--linie, #d8dce0); border-left: none; background: #fdecec; color: #c0392b;
  cursor: pointer; padding: 0 9px; border-radius: 0 8px 8px 0; font-size: 13px; }
.cs-sug-x:hover { background: #f9d5d5; }

/* Statistici — dimensiunile noi (terminal/zonă/secție×metodă) din rapoartele unificate */
.stat-ext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.stat-ext-card h5 { margin: 0 0 6px; font-size: 13px; opacity: .8; }
.stat-ext-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-ext-tab th, .stat-ext-tab td { padding: 4px 6px; border-bottom: 1px solid var(--linie, #e6e9ec); }
.stat-ext-tab th { text-align: left; font-size: 11px; text-transform: uppercase; opacity: .6; }
.stat-ext-tab th.d, .stat-ext-tab td.d { text-align: right; font-variant-numeric: tabular-nums; }
.stat-ext-tab .stat-ext-total td { font-weight: 700; border-top: 2px solid var(--linie, #cfd4d9); border-bottom: none; }

/* Afișaj „cine e logat" în admin: contul terminalului + operatorul pontat cu PIN */
.side-user .su-et { display: block; opacity: .6; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.side-user .su-et2 { margin-top: 8px; }
.side-user .su-op { display: block; color: #7c3aed; }
.side-user .su-op-gol { color: inherit; opacity: .5; font-weight: 500; }

/* Banner „notă emisă" pe ecranul de comandă (anunț la intrarea pe masă) */
.nota-banner {
  background: #1d4ed8; color: #fff; font-weight: 600; text-align: center;
  padding: 10px 14px; font-size: 15px; letter-spacing: .2px;
}

/* Avertizarea „masa pare deja încasată" (09.08.2026): PORTOCALIU, ca să nu se confunde cu
   anunțul albastru de mai sus — unul e o informație, celălalt e un semn de întrebare pe bani. */
.nota-banner.avertizare-incasata { background: #c2410c; }

/* Rapoarte unificate (#24) */
.rf-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.rf-lista { display: flex; flex-direction: column; gap: 6px; min-width: 240px; flex: 0 0 240px; }
.rf-lista button { text-align: left; padding: 10px 12px; border: 1px solid var(--linie, #d8dce0);
  background: var(--card, #fff); border-radius: 8px; cursor: pointer; font-size: 14px; }
.rf-lista button.on { background: var(--accent, #0aa); color: #fff; border-color: var(--accent, #0aa); }
.rf-lista button:disabled { opacity: .5; cursor: not-allowed; }
.rf-curand { font-size: 11px; opacity: .7; }
/* RAPOARTE: trei la vedere + dosarul cu restul (15.10.2026). Dosarul si butoanele de casa
   se citesc dintr-o privire; rapoartele din dosar intra putin, ca sa se vada ca-i apartin. */
.rf-lista button.rf-casa { font-weight: 600; }
.rf-lista button.rf-dosar { font-weight: 600; background: var(--fundal-2, #f3f5f7); }
.rf-lista button.rf-dosar.on { background: var(--fundal-2, #eef1f4); color: inherit; border-color: var(--linie, #d8dce0); }
.rf-lista button.rf-in-dosar { margin-left: 14px; font-size: 13px; }
.rf-unelte { display: flex; flex-direction: column; gap: 6px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--linie, #d8dce0); }
.rf-continut { flex: 1 1 380px; min-width: 320px; }
.rf-filtre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.rf-filtre label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.rf-filtre input[type=date] { padding: 6px 8px; border: 1px solid var(--linie, #d8dce0); border-radius: 6px; }
.rf-operatori { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.rf-operatori > .muted { flex-basis: 100%; margin-bottom: 2px; }   /* eticheta pe rând propriu -> chip-urile se aliniază de la stânga */
.rf-op-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; padding: 7px 14px 7px 11px;
  border: 1.5px solid #d8dce0; border-radius: 999px; cursor: pointer; background: #fff; color: #3a424e;
  transition: background .12s, border-color .12s, color .12s; user-select: none; }
.rf-op-chip input { position: absolute; opacity: 0; width: 0; height: 0; }   /* ascuns, dar comută la click pe chip */
.rf-op-chip::before { content: ''; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #c4cad2;
  flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }
.rf-op-chip:hover { border-color: #b6bcc4; }
.rf-op-chip.on { background: #eaf6ef; border-color: #1f7a4d; color: #155f3b; font-weight: 600; }
.rf-op-chip.on::before { content: '✓'; background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
/* butoanele de acțiune din modalul raportului (POS): grilă responsivă, să încapă TOATE pe orice ecran */
.xgest-modal .conn-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.xgest-modal .conn-actions button { width: 100%; margin: 0; }
.rf-preview { background: #0d1117; color: #e6edf3; padding: 14px 16px; border-radius: 8px;
  overflow-x: auto; font: 12px/1.45 monospace; white-space: pre; }
/* pe ecran POS mic, raportul grupat (5 coloane) e mai îngust -> font si mai mic ca sa NU derulezi orizontal */
.xgest-pre { font-size: 11px; line-height: 1.4; }
@media (max-width: 900px) { .rf-preview { font-size: 10.5px; } .xgest-pre { font-size: 10px; } }
.xgest-oper { margin: 6px 0 10px; }
/* preview VIZUAL (design) al raportului X gestiuni — pe ecran; A4/PDF folosesc același aspect */
.rx-preview { background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; padding: 16px 18px; max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
@media (max-width: 900px) { .rx-preview { padding: 12px; } }
/* Raport pe ECRAN COMPLET (buton ⛶) — se adaptează la orice rezoluție (mobil/PC/POS) */
.rx-full { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; flex-direction: column; }
.rx-full-bar { padding: 8px 12px; border-bottom: 1px solid #e6e9ee; display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.rx-full-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; }
.rx-full-body { width: 100%; margin: 0; }
@media (max-width: 600px) { .rx-full-scroll { padding: 10px; } }
.rf-msg { color: var(--accent, #0aa); font-size: 13px; }
/* pe ecran POS mic, lista trece deasupra continutului */
@media (max-width: 900px) { .rf-lista { flex-basis: 100%; } }

/* ============================================================================
   FERESTRE (modale) PE TOT ECRANUL — pe POS, nu doar pe telefon (cerut 25.07.2026)
   Pana acum ferestrele mari (Bonuri, Istoric, Bani, Rapoarte, Raportul zilei) se
   deschideau ca un popup ingust in mijloc; proprietarul le vrea pe tot ecranul, ca sa
   se citeasca de la distanta pe monitorul POS. Fundalul nu mai are padding, iar cutia
   umple viewportul. Dialogul de confirmare (.cfm-overlay) NU e vizat — ramane mic. */
.modal-fundal { padding: 0; }
.modal-cutie,
.modal-cutie.raport-modal,
.modal-cutie.rap-modal,
.modal-cutie.xgest-modal,
.modal-cutie.bonuri-modal,
.modal-cutie.istoric-modal,
.modal-cutie.bani-modal,
.modal-cutie.pos-modal {
  width: 100vw; max-width: 100vw;
  height: 100vh; height: 100dvh; max-height: 100dvh;
  border-radius: 0;
}
/* Ferestrele cu .modal-corp (Bonuri, Istoric, Bani, Rapoarte, Raportul zilei): antetul
   ramane fix sus, iar CORPUL umple restul inaltimii si isi deruleaza continutul — asa
   butoanele de jos raman mereu vizibile, nu se taie. */
.modal-cutie > .modal-corp { flex: 1; min-height: 0; max-height: none; }
/* xgest-modal (Raportul detaliat al zilei) NU are un .modal-corp: continutul (preview +
   lista de bonuri + butoane) curge direct in cutie. La 100dvh, fara derulare, butoanele
   de jos s-ar taia — deci cutia insasi deruleaza. Previewul isi pastreaza plafonul lui. */
.xgest-modal { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Cand tastatura virtuala e sus, regula ei (mai specifica, cu :has) ramane stapana:
   fereastra se strange la 60vh si urca — sa n-o acopere tastatura. */

/* ============================================================================
   BARA DE SUS: fiecare unealta = DALA ALBA (cerut 25.07.2026)
   Butoanele erau pictate verde de o regula de specificitate mare (.pos button:not(...)),
   deci pe bara verde se vedeau doar iconitele. Le facem dale albe cu umbra, ca dalele
   din restul POS-ului. op-badge (numele operatorului) are pastila lui, ramane neatins. */
.topbar .top-right .ghost,
.topbar .top-operator .ghost {
  background: #fff !important;
  color: #1f2530 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.22);
  border-radius: 10px;
}
.topbar .top-right .ghost .btxt,
.topbar .top-operator .ghost .btxt { color: #1f2530; }
.topbar .top-right .ghost:hover,
.topbar .top-operator .ghost:hover { background: #eef1f5 !important; }
.topbar .top-right .ghost:active,
.topbar .top-operator .ghost:active { background: #e4e8ee !important; }
/* soldul din sertar de pe dala „Bani" — pe alb, il facem verde ca sa se citeasca */
.topbar .bani-btn .bani-sold { color: var(--green, #1f7a4d); }

/* ============================================================================
   EDITORUL DE MENIUL ZILEI DIN POS (ecranul mz-editor) — scheletul (Task 8):
   antetul + banda de zile. Dalele de preparate vin in Task 9. Tinte de atingere
   de minim 44px, ca la orice dala din POS. */
/* COMPACT (cerinta 26.07): ecranul intra INTREG pe 1024x768, fara derulare de pagina.
   height+overflow:hidden tin butoanele de jos mereu pe ecran; cand un meniu are multe
   preparate, deruleaza DOAR coloana lui (min-height:0 + overflow-y pe .mzp-col). */
.mzp { height: 100vh; overflow: auto; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
.mzp-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.mzp-cap h2 { margin: 0; font-size: 18px; }
.mzp-x {
  min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-weight: 700; cursor: pointer;
}
.mzp-x:active { background: #eef1f5; }
.mzp-zile { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px; flex-shrink: 0; -webkit-overflow-scrolling: touch; }
.mzp-zi {
  /* flex: 0 0 auto e ESENTIAL: fara el, cand cele 14 zile nu incap, flexbox-ul le
     COMPRIMA (flex-shrink implicit 1) si butoanele se calca unele pe altele in loc
     sa curga in derularea orizontala a benzii (vazut pe POS-ul de 1024px, 26.07) */
  flex: 0 0 auto;
  min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--text);
  font-weight: 600; white-space: nowrap; cursor: pointer;
}
.mzp-zi.are { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.mzp-zi.on { background: var(--green); border-color: var(--green); color: #fff; }
.mzp-msg {
  /* TOAST pe mijlocul ecranului, dispare singur (watch pe msg) — mesajele lipite jos
     nu se observau (cerinta proprietarului, 26.07) */
  position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%);
  z-index: 95; max-width: 70vw; padding: 14px 22px; border-radius: 12px;
  background: rgba(20, 40, 30, .92); color: #fff; font-size: 17px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); pointer-events: none;
}

/* EDITORUL DE MENIUL ZILEI DIN POS (Task 9): dalele de preparate V1/V2/desert +
   bifa „La «Un fel la alegere»" + preturi. Tinte de atingere >=44px, fara emoji. */
/* min-height: zona de preparate nu are voie sa fie strivita la zero pe ecrane mici/zoom —
   sub pragul asta pagina redevine derulabila (overflow:auto pe .mzp), nu taie continut */
.mzp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 12px; flex: 1 1 auto; min-height: 220px; }
.mzp-jos { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 4px 12px 6px; flex-shrink: 0; }
.mzp-col { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--card); min-height: 0; overflow-y: auto; touch-action: pan-y; }
.mzp-col-cap { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.mzp-gol { color: var(--muted); font-style: italic; margin: 6px 0 10px; }
.mzp-fel { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
           margin-bottom: 8px; }
.mzp-fel input[type="text"], .mzp-fel input:not([type]) { min-height: 44px; width: 100%;
           padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
/* min-height aici, NU doar pe input: eticheta (label) e tinta reala de atins — un click
   oriunde in ea comuta bifa — iar .mzp-fel are align-items:center, care ar prabusi cutia
   la inaltimea continutului (bifa de 22px) daca n-ar avea propria ei inaltime minima. */
.mzp-bifa { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap;
            color: var(--text); min-height: 44px; }
.mzp-bifa input { width: 22px; height: 22px; flex-shrink: 0; }
.mzp-sterge { min-height: 44px; padding: 0 12px; border: 1px solid #e0c4c4; border-radius: 8px;
              background: #fdf3f3; font-size: 14px; cursor: pointer; }
.mzp-adauga { width: 100%; min-height: 44px; border: 1px dashed var(--line); border-radius: 10px;
              background: var(--card); color: var(--text); font-size: 16px; cursor: pointer; }
/* preturile pe 2x2, nu 4 pe verticala: castiga ~140px pe 768 de inaltime */
.mzp-preturi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; align-content: start; }
.mzp-preturi label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text); }
.mzp-preturi input { min-height: 44px; padding: 0 10px; border: 1px solid var(--line);
                     border-radius: 8px; font-size: 18px; }
@media (max-width: 820px) {
  .mzp-grid, .mzp-jos { grid-template-columns: 1fr; }
}

/* EDITORUL DE MENIUL ZILEI DIN POS (Task 10): bara de actiuni — tiparire A4 +
   salveaza-si-publica. Acelasi mecanism ca in administrare (dailyMenu.save / mz.articol
   / programeazaPostere), doar hainele sunt noi. Tinte de atingere >=44px. */
.mzp-actiuni { display: flex; align-items: center; gap: 12px; padding: 0 16px 16px; flex-wrap: wrap; }
.mzp-ex { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.mzp-ex input { min-height: 44px; width: 64px; padding: 0 8px; border: 1px solid var(--line);
                border-radius: 8px; font-size: 16px; text-align: center; }
.mzp-tipar {
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-weight: 700; cursor: pointer;
}
.mzp-tipar:active { background: #eef1f5; }
.mzp-ok {
  min-height: 44px; padding: 0 22px; border-radius: 10px; border: none;
  background: var(--green); color: #fff; font-weight: 700; cursor: pointer; margin-left: auto;
}
.mzp-ok:active { filter: brightness(0.92); }
.mzp-ok:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 820px) {
  .mzp-ok { margin-left: 0; width: 100%; }
}

/* Previzualizarea afisului (A4 / Facebook) din editorul de meniul zilei — overlay peste
   tot ecranul; SVG-ul isi pastreaza proportiile prin viewBox (meet), deci nu se deformeaza */
.mzp-prev { position: fixed; inset: 0; z-index: 80; background: rgba(20, 20, 20, .85);
            display: flex; flex-direction: column; padding: 10px 14px; }
.mzp-prev-cap { display: flex; align-items: center; justify-content: space-between;
                color: #fff; margin-bottom: 8px; gap: 12px; }
.mzp-prev-cap b { font-size: 16px; }
.mzp-prev-corp { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.mzp-prev-corp svg { width: 100%; height: 100%; }
/* anuntul discret al ciornei (se salveaza doar cand ceva chiar s-a schimbat) */
.mzp-ciorna { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
/* CELE TREI BUTOANE, in POS (17.08.2026) — starea zilei si previzualizarea de dinainte de
   publicare. Aceleasi cuvinte ca in Administrare: „salvat, nepublicat" / „modificari nesalvate". */
.mzp-stare-salvare { margin: 0 16px 6px; font-size: 14px; font-weight: 700; }
.mzp-stare-salvare.nesalvat { color: #92400e; }
.mzp-stare-salvare.salvat-nepublicat { color: #1e40af; }
.mzp-stare-salvare.publicat { color: #166534; }
.mzp-prev-pub { overflow: auto; }
.mzp-prev-stare { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.mzp-prev-pub-corp { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 16px; align-items: start; background: #fff; border-radius: 12px; padding: 14px; overflow: auto; }
@media (max-width: 820px) { .mzp-prev-pub-corp { grid-template-columns: 1fr; } }
.mzp-prev-poza img { width: 100%; height: auto; border-radius: 10px; display: block; }
.mzp-prev-rau { color: #991b1b; font-weight: 700; }
.mzp-prev-text h4 { margin: 10px 0 4px; }
.mzp-prev-text pre { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 14px;
  background: #f6f7f9; border-radius: 10px; padding: 10px; max-height: 34vh; overflow: auto; }
.mzp-prev-probleme { margin: 6px 0 10px; padding-left: 18px; color: #92400e; font-size: 14px; }
/* Autocompletare din baza de preparate memorate: lista apare SUB campul in care se scrie
   (niciodata peste el, ca sa nu ascunda ce tasteaza omul). .mzp-fel-camp e doar un wrapper
   de pozitionare — inputul isi pastreaza exact stilul de dinainte (selectorul de mai sus
   e pe descendent, nu pe copil direct, deci wrapper-ul nu strica nimic). */
.mzp-fel-camp { position: relative; }
.mzp-sug {
  /* IN FLUX, nu absolute: pozitionarea absoluta era TAIATA de overflow-ul coloanei si
     ajungea sub tastatura virtuala (vazut pe terminal, 27.07). In flux, lista impinge
     randurile si se deruleaza odata cu coloana. */
  margin: 2px 0 6px; padding: 4px; list-style: none; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 240px; overflow-y: auto;
}
.mzp-sug li { min-height: 44px; display: flex; align-items: center; padding: 0 10px;
              border-radius: 6px; font-size: 15px; cursor: pointer; }
.mzp-sug li:hover, .mzp-sug li:active { background: #eef1f5; }

/* Ecranul „Istoric preparate" (intretinerea bazei de sugestii) — acelasi limbaj vizual ca
   previzualizarea afisului de mai sus (overlay peste tot ecranul, antet identic). */
.mzp-hist { position: fixed; inset: 0; z-index: 80; background: rgba(20, 20, 20, .85);
            display: flex; flex-direction: column; padding: 10px 14px; }
.mzp-hist-cap { display: flex; align-items: center; justify-content: space-between;
                color: #fff; margin-bottom: 8px; gap: 12px; }
.mzp-hist-cap b { font-size: 16px; }
.mzp-hist-caut { min-height: 44px; padding: 0 12px; border: 1px solid var(--line);
                 border-radius: 8px; font-size: 16px; margin-bottom: 10px; }
.mzp-hist-corp { flex: 1; min-height: 0; overflow-y: auto; background: var(--card);
                 border-radius: 10px; padding: 6px 10px; }
.mzp-hist-gol { color: var(--muted); font-style: italic; text-align: center; padding: 24px 0; }
.mzp-hist-rand { display: flex; align-items: center; gap: 10px; padding: 10px 4px;
                 border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mzp-hist-rand:last-child { border-bottom: none; }
.mzp-hist-nume { flex: 1; min-width: 140px; font-weight: 600; color: var(--text); }
.mzp-hist-tip { font-size: 11px; padding: 4px 10px; border-radius: 20px; background: #eef1f5;
                color: var(--text); white-space: nowrap; }
.mzp-hist-info { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* alergenii/starea retetei sub numele preparatului, in Istoric preparate */
.mzp-hist-alg { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.mzp-hist-alg.lipsa { font-style: italic; }
.mzp-hist-btn { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line);
                background: #fff; color: var(--text); font-size: 14px; cursor: pointer; }
.mzp-hist-btn.sterge { border-color: #e0c4c4; background: #fdf3f3; }
.mzp-hist-btn.ok { border: none; background: var(--green); color: #fff; font-weight: 700; }
.mzp-hist-btn:disabled { opacity: .6; cursor: not-allowed; }
.mzp-hist-edit { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.mzp-hist-edit input { min-height: 44px; flex: 1; padding: 0 10px; border: 1px solid var(--line);
                        border-radius: 8px; font-size: 16px; }
/* Regenerează rețeta (AI) + editarea manuală a procedurii — pe rândul lat, sub restul
   informațiilor preparatului (flex-basis:100% îl trece pe rând nou, .mzp-hist-rand
   are deja flex-wrap:wrap). */
.mzp-hist-prep { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mzp-hist-prep-txt { min-height: 60px; padding: 8px 10px; border: 1px solid var(--line);
                      border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; }
.mzp-hist-prep-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* starea de publicare a zilei selectate — mereu vizibila deasupra actiunilor */
.mzp-stare { margin: 0; padding: 4px 14px; font-size: 13px; color: var(--muted); flex-shrink: 0; }
/* link "Vezi video" (Task #4) — videoul randat pe EDYPC pentru ziua selectata */
.mzp-video-link { margin-left: 10px; font-weight: 600; color: var(--accent, #1f5136); text-decoration: none; }
.mzp-video-link:hover { text-decoration: underline; }
/* titlul coloanei de bife sta SUS, o singura data — pe rand ramane doar bifa
   (eticheta repetata manca tot locul campului de produs; cerut 27.07) */
.mzp-col-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mzp-cap-bifa { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; margin-right: 52px; }

/* ============================================================================
   EDITARE PRODUSE DIN POS (ecranul produse-pos) — scheletul (Task 5): doar lista
   touch. Editorul plin ecran (editId != null) vine in Task 7-10. Acelasi tipar ca
   .mzp: pagina NU deruleaza — doar lista de produse (.pep-corp), ca butoanele de
   sus si de jos sa ramana mereu pe ecran, la 1024x768 SI la 1024x600.
   Lista NU are mecanism propriu de tragere (spre deosebire de .mzp-col): merge pe
   touch-action:pan-y (degetul adevarat) + ramane ELIGIBILA pentru tragerea globala
   cu mouse-ul din app.js (tragereGlobala) — nu apare in CU_MECANISM_PROPRIU. */
.pep { height: 100vh; overflow: hidden; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
.pep-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.pep-cap h2 { margin: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-cap-btns { display: flex; gap: 8px; flex-shrink: 0; }
.pep-btn {
  min-height: 44px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pep-btn:active { background: #eef1f5; }
/* butoanele de propunere (Task 9) sunt :disabled cat timp ingCatalog inca se incarca —
   acelasi tipar ca .btn-danger:disabled/.cat-sterge:disabled din restul fisierului */
.pep-btn:disabled { opacity: .5; cursor: default; }
.pep-x {
  min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-weight: 700; cursor: pointer;
}
.pep-x:active { background: #eef1f5; }
.pep-search {
  margin: 8px 12px 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 16px; flex-shrink: 0;
}
.pep-cats { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; flex-shrink: 0; -webkit-overflow-scrolling: touch; }
.pep-cat {
  min-height: 44px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-size: 13px; white-space: nowrap; cursor: pointer;
}
.pep-cat.on { background: #171717; color: #fff; border-color: #171717; }
/* Grupul „Meniul zilei" din bara POS: chip-parinte (bold) + sub-chip-uri (mai deschise). */
.pep-cat-mz { font-weight: 700; }
.pep-cat-mz-sub { background: #ece7e1; }
.pep-nota { margin: 0 0 10px; font-size: 12px; color: #6b6b6b; line-height: 1.4; }
.pep-corp { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; padding: 4px 12px 12px; }
.pep-rand {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px; min-height: 60px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
  cursor: pointer;   /* click pe rand = editare directa (Task 7) */
}
.pep-rand:active { background: #eef1f5; }
.pep-rand-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pep-rand-nume { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-rand-cat { font-size: 12px; color: var(--muted); }
.pep-rand-pret { font-size: 15px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.pep-rand-stare {
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 20px; white-space: nowrap;
  background: #e7e5e4; color: #78716c; flex-shrink: 0;
}
.pep-rand-stare.on { background: #d8ffd9; color: #147348; }
.pep-sterge {
  min-width: 44px; min-height: 44px; border-radius: 8px; border: 1px solid #e0c4c4;
  background: #fdf3f3; color: #a33; font-size: 16px; cursor: pointer; flex-shrink: 0;
}
.pep-gol { color: var(--muted); font-style: italic; text-align: center; padding: 24px 0; }
.pep-jos { display: flex; justify-content: center; padding: 8px 12px; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--card); }
.pep-msg { margin: 0; padding: 6px 14px; font-size: 13px; color: var(--muted); flex-shrink: 0; }

/* EDITORUL plin ecran (Task 7) — sectiunea ESENTIALE. Spre deosebire de lista (.pep-corp,
   care NU deruleaza pagina — doar lista interna), editorul INSUSI se deruleaza, ca .mzp:
   e o pagina cu mai multe subsectiuni (Esentiale/Ingrediente/Alergeni/Detalii/Retetar,
   Task 7-10), nu ecranul de vanzare care trebuie sa incapa fix pe un ecran. */
.pep-editor { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; padding: 4px 14px 24px; }
.pep-sect { margin-bottom: 22px; }
.pep-sect-tit {
  margin: 4px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.pep-camp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pep-camp label { font-size: 14px; font-weight: 600; color: var(--text); }
.pep-input {
  min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 18px; background: #fff; color: var(--text); width: 100%; box-sizing: border-box;
}
/* „Disponibil" e primul camp (spec §4), comutator MARE, salvare instanta — ca toggleAvail()
   din admin.js. Incidentul ABSOLUT din 26.07: comutatorul era coloana 9 din 11 si trecea
   neobservat; aici e imposibil de ratat. */
.pep-avail {
  min-height: 56px; width: 100%; border-radius: 12px; border: 2px solid var(--line);
  background: #e7e5e4; color: #78716c; font-size: 18px; font-weight: 800; cursor: pointer;
}
.pep-avail.on { background: #d8ffd9; border-color: #22a06b; color: #147348; }
.pep-avail:active { filter: brightness(0.96); }

/* INGREDIENTE (Task 8) — randuri {nume cu sugestii, grame, Decongelat, ✕}. Sugestiile
   ies din acelasi tipar VERIFICAT ca .mzp-fel-camp/.mzp-sug (meniu-zilei-pos.js): lista
   IN FLUX, nu absolute — pozitionarea absoluta era taiata de overflow-ul coloanei/paginii
   si ajungea sub tastatura virtuala (lectia 27.07, vezi .mzp-sug mai sus). */
.pep-ing-rand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pep-ing-nume { position: relative; flex: 1; min-width: 0; }
.pep-ing-sug {
  margin: 2px 0 0; padding: 4px; list-style: none; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 240px; overflow-y: auto;
}
.pep-ing-sug li { min-height: 44px; display: flex; align-items: center; padding: 0 10px;
                   border-radius: 6px; font-size: 15px; cursor: pointer; }
.pep-ing-sug li:hover, .pep-ing-sug li:active { background: #eef1f5; }
.pep-ing-grame { width: 76px; flex-shrink: 0; text-align: center; padding: 0 4px; }
.pep-ing-dec {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text);
  flex-shrink: 0; white-space: nowrap; min-height: 44px;
}
.pep-ing-dec input { width: 20px; height: 20px; }
.pep-ing-total { display: flex; align-items: center; gap: 12px; margin: 12px 0 18px; flex-wrap: wrap; }
.pep-btn-salveaza { width: 100%; }

/* ALERGENI SI E-URI (Task 9) — fiecare camp cu butonul lui de propunere ALATURI, pe acelasi
   rand (regula proprietarului: doua butoane de propunere pe UN rand ar ingesui, asa ca cele
   doua randuri — Alergeni si E-uri — stau STIVUITE, unul sub altul, nu unul langa altul). */
.pep-camp-rand { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.pep-camp-rand .pep-input { flex: 1; min-width: 220px; }
.pep-camp-rand .pep-btn { flex-shrink: 0; white-space: nowrap; }
.pep-textarea { min-height: 64px; padding: 10px 14px; resize: vertical; font: inherit; }

/* DETALII (Task 10) — camp cu camp, ca ESENTIALE. select-ul de Categorie mosteneste
   .pep-input (padding/bordura/inaltime); „Doar in POS" e comutator dedicat (togglePosOnly),
   ca .pep-avail de mai sus, dar NU la fel de mare — nu e campul incidentului ABSOLUT. */
.pep-posonly { min-height: 48px; font-size: 15px; }

/* RETETAR (Task 10) — mod de preparare/servire, textarea-uri (.pep-textarea, definit mai sus).
   Butonul unic de Salveaza al grupului (INGREDIENTE+ALERGENI SI E-URI+RETETAR) sta la finalul
   acestei sectiuni — .pep-btn-salveaza, definit mai sus, ramane neschimbat. */

/* AL CUI CALCULATOR SUNT SETARILE DE APARATE (30.07.2026). Semnalat de proprietar: de acasa,
   unde nu exista nicio casa de marcat, valorile COM2/baud/IP-uri pareau ale calculatorului
   din fata. Bannerul spune ale cui sunt; culoarea deosebeste „esti pe aparatul potrivit" de
   „te uiti de la distanta". */
.cfg-cui { border-radius: 10px; padding: 10px 12px; margin: 10px 0 14px; font-size: 13px; line-height: 1.5; }
.cfg-cui-aici { background: #e7f6ec; color: #14632f; border: 1px solid #bfe3cd; }
.cfg-cui-altundeva { background: #fff8e1; color: #6b4e00; border: 1px solid #f0dfa8; }
.cfg-cui b { display: inline; }
/* 02.10.2026: pe CE calculator esti (nume + restaurantul puntii), mare, ca sa se vada si
   dupa o reconectare AnyDesk pe alt calculator; rosu cand restaurantul ales sus e altul. */
.cfg-cui-pc { font-size: 14px; }
.cfg-cui-titlu { font-size: 20px; font-weight: 800; letter-spacing: .2px; margin-bottom: 4px; }
.cfg-cui-alt { background: #fdecea; color: #8b1d12; border: 2px solid #e5a49b; }
.cfg-cui-dif { margin-top: 6px; font-size: 13px; opacity: .9; }
.cfg-cui-dif-rand { display: block; font-family: ui-monospace, Consolas, monospace; }
.cfg-cui-dif-btn { margin-top: 6px; }

/* Terminal ACREDITAT dar care n-a dat niciun semn (30.07.2026). Nu e „offline" — e „codul a
   fost emis, Doctorul nu s-a instalat inca sau n-a pornit". Distinctia conteaza: altfel omul
   nu poate deosebi „instalarea a picat" de „calculatorul e stins", chiar intrebarea pentru
   care exista unealta. */
.dd-card.dd-fara-semn { border-style: dashed; background: #fbfbfd; }
.dd-card.dd-fara-semn .dd-bec { background: #eef0f4; color: #5b6472; }

/* Extra-optiuni premium (Faza 1, task 5): paywall pe sectiune + hub "Premium" — dala cu
   text, fara emoji (vezi js/screens/premium-paywall.js, js/screens/premium-hub.js).
   Continutul vizual e placeholder in Faza 1 — .pp-vizual ramane un bloc neted pana vin
   poze/copy reale. */
.premium-paywall { max-width: 560px; margin: 24px auto; padding: 24px; border: 1px solid #e5e0da; border-radius: 12px; background: #fbfaf8; text-align: center; }
.pp-vizual { height: 120px; border-radius: 10px; background: repeating-linear-gradient(45deg, #eee 0 10px, #f6f6f4 10px 20px); margin-bottom: 16px; }
.pp-titlu { margin: 0 0 6px; font-size: 20px; }
.pp-desc, .pp-explicatie { color: #786f69; font-size: 14px; margin: 4px 0; }
.pp-status { font-weight: 700; margin: 10px 0; }
.pp-cta { margin-top: 12px; }
.pp-trimis { margin-top: 12px; color: #14632f; font-weight: 600; }

.ph-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.ph-card { border: 1px solid #e5e0da; border-radius: 10px; padding: 14px; background: #fff; }
.ph-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ph-status { font-size: 12px; font-weight: 700; color: #6b4e00; }
.ph-status.ph-activ { color: #14632f; }
.ph-desc { color: #786f69; font-size: 13px; margin: 6px 0 10px; }

.banner-trial { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fdf6e3; border: 1px solid #e8d9a6; border-radius: 8px; padding: 8px 12px;
  margin-bottom: 10px; font-size: 13px; color: #6b4e00; }
.banner-trial .btn-light { padding: 5px 12px; font-size: 12px; }

/* „Detalii secțiune” — editor WYSIWYG (Proiect 2, task 2): comutator Vizual/HTML in stilul
   WordPress Classic, toolbar simplu deasupra unui contenteditable/textarea. */
.sd-cap-btns { display: flex; gap: 8px; align-items: center; }
.sd-eroare { color: #991b1b; font-weight: 700; margin: 0 0 10px; }
.sd-editor { display: flex; flex-direction: column; gap: 0; }
.sd-tabs { display: flex; gap: 2px; border-bottom: 1px solid #e2dcd6; }
.sd-tab { padding: 8px 16px; border: 1px solid #e2dcd6; border-bottom: none; border-radius: 8px 8px 0 0;
  background: #f6f5f3; color: #786f69; font-weight: 700; font-size: 13px; cursor: pointer; }
.sd-tab.activ { background: #fff; color: #171717; }
.sd-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: #f6f5f3;
  border: 1px solid #e2dcd6; border-top: none; }
.sd-toolbar button { min-width: 32px; padding: 6px 10px; border: 1px solid #e2dcd6; border-radius: 6px;
  background: #fff; color: #171717; font-size: 13px; cursor: pointer; }
.sd-toolbar button:hover { background: #f0efec; }
.sd-vizual, .sd-html { min-height: 280px; padding: 14px; border: 1px solid #e2dcd6; border-top: none;
  background: #fff; font-size: 14px; line-height: 1.5; }
.sd-vizual { outline: none; overflow-y: auto; }
.sd-vizual h2 { font-size: 19px; margin: 0 0 8px; }
.sd-vizual h3 { font-size: 16px; margin: 12px 0 6px; }
.sd-vizual p { margin: 0 0 10px; }
.sd-vizual ul, .sd-vizual ol { margin: 0 0 10px; padding-left: 22px; }
.sd-html { width: 100%; resize: vertical; font-family: ui-monospace, Consolas, monospace; box-sizing: border-box; }
.sd-editor-jos { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* „De ce n-a postat" pe ziua din Meniul zilei (13.08.2026): portocaliu ca avertizarea de
   masa deja incasata — e o informatie care cere o actiune, nu o stare normala. */
.mz-motiv { margin: 4px 0 2px; padding: 5px 8px; border-radius: 6px;
  background: #fff4e5; border: 1px solid #f0c9a0; color: #7a4a12; font-size: 12px; }
.mz-motiv span { display: block; }

/* Chip gri la starea pe canale a zilei (programat / urmeaza) — se deosebeste de cel plin (postat) */
.mz-prog-badge.gri { background: #f2f2f2; color: #777; border: 1px dashed #bbb; }
/* Cardul „Sectiuni premium" din Configurari (13.08.2026): gri, calm, cu buton de activare */
.premium-gri { margin: 8px 0 14px; padding: 12px 14px; border: 1px dashed #c9c9c9;
  border-radius: 8px; background: #f7f7f7; color: #555; }


/* Ce rapoarte pot scoate ospatarii (Configurari). Lista se deseneaza din registrul trimis de
   server, deci numarul de randuri nu e stiut dinainte — de aceea coloana, nu un rand fix. */
.rv-rapoarte { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--linie, #d6d6d6); border-radius: 10px; }
.rv-rapoarte > b { display: block; margin-bottom: 2px; }
.rv-rapoarte label { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
/* Avertismentul de la actiunile ireversibile: se citeste ca parte din rand, nu ca alarma. */
.rv-atentie { color: #b64032; font-size: 13px; }

/* Sectiunea Bilete (18.09.2026): pe telefon campurile nu ies din ecran, iar tabelele de vanzari
   devin carduri — fiecare rand un card, fiecare celula cu eticheta coloanei in fata (data-et). */
.bilete-sect input, .bilete-sect textarea, .bilete-sect select { max-width: 100%; }
.bilete-sect .adm-rand { flex-wrap: wrap; }
@media (max-width: 640px) {
  .bilete-sect .ev-poza { width: 64px !important; height: 64px !important; }
  .bilete-sect table.vanz-tabel thead { display: none; }
  .bilete-sect table.vanz-tabel, .bilete-sect table.vanz-tabel tbody,
  .bilete-sect table.vanz-tabel tr, .bilete-sect table.vanz-tabel td { display: block; width: 100%; }
  .bilete-sect table.vanz-tabel tr { border: 1px solid #e4dcc6; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
  .bilete-sect table.vanz-tabel td { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
    text-align: right !important; padding: 3px 0; border: 0; }
  .bilete-sect table.vanz-tabel td::before { content: attr(data-et); color: #777; font-weight: 600; text-align: left; flex: none; }
  .bilete-sect table.vanz-tabel td[data-et=""]::before { content: none; }
  .bilete-sect table.vanz-tabel td[data-et=""] { justify-content: flex-start; text-align: left !important; font-weight: 600; }
}

/* Starea unei plati de bilete (19.09.2026): verde = banii au intrat; rosu = s-au intors;
   gri = n-au intrat; galben = omul e acum pe pagina de card. */
.stv-insigna { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stv-ok { background: #e3f4e6; color: #1b5e20; }
.stv-inapoi { background: #fbe9e7; color: #b71c1c; }
.stv-nu { background: #eeeeee; color: #555; }
.stv-curs { background: #fff8e1; color: #8a6d00; }

/* Bilete vandute (19.09.2026): filtrele se infasoara pe telefon; cartelele si grupurile pe
   coloane cat incap, altfel una sub alta. */
.vanz-filtre { flex-wrap: wrap; gap: 8px; align-items: center; }
.vanz-filtre select, .vanz-filtre input { min-height: 38px; }
.vanz-cartele { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.vanz-cartela { background: #f6f2e7; border-radius: 8px; padding: 10px; }
.vanz-cartela > b { display: block; font-size: 24px; }
.vanz-cartela-rosie { background: #fbe9e7; }
.vanz-avert { background: #fff8e1; border-radius: 8px; padding: 8px 10px; }
.vanz-grupuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.vanz-grupuri h3, .bilete-sect h3 { margin: 14px 0 6px; }
.bilete-sect table.vanz-tabel { width: 100%; font-size: 14px; }

/* MASA CU ADAOS DE PRET (12.10.2026, ex. masa de livrare +20%): alta culoare pe tigla, eticheta
   „+20%" mare pe tigla si in antetul comenzii, linie la plata. Portocaliu = „alt pret aici". */
.table-cell.cu-adaos { border-color: #ea580c; box-shadow: 0 0 0 2px #ea580c inset; background: #fff4ec; }
.table-cell.cu-adaos .tlabel { border-color: #ea580c; color: #c2410c; }
.t-adaos { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 10px;
  background: #ea580c; color: #fff; font-size: 13px; font-weight: 900; }
.masa-plan.cu-adaos { outline: 3px solid #ea580c; outline-offset: 1px; }
.masa-plan .mp-adaos { font-size: 12px; font-weight: 900; color: #fff; background: #ea580c;
  border-radius: 8px; padding: 0 6px; line-height: 1.4; }
.meta-chip.chip-adaos { background: #ea580c; color: #fff; font-size: 17px; font-weight: 900;
  padding: 3px 12px; border-radius: 12px; }
.pay-adaos { margin: 4px 0; padding: 6px 10px; border-radius: 8px; background: #fff4ec;
  color: #c2410c; font-weight: 800; border: 1px solid #fdba74; }
.masa-rand .m-adaos, .masa-cap .m-adaos { width: 76px; flex: 0 0 auto; }
.adaos-btn { border: 1px solid #e2dcd6; background: #faf8f6; border-radius: 8px; padding: 6px 4px; cursor: pointer;
  font-size: 12px; font-weight: 800; opacity: .5; }
.adaos-btn.on { opacity: 1; background: #fff4ec; border-color: #fdba74; color: #c2410c; }