/* ASEZAREA ECRANULUI DE COMANDA — reguli pe INSUSIRI, nu pe aranjari (vezi js/aranjare.js).
   Fiecare aranjare pune pe <body> cateva atribute `data-ar-*`; aici stilizam fiecare
   insusire O SINGURA DATA. Asa cele 50 de aranjari ies din ~16 reguli, si fiecare regula
   se poate verifica separat.

   Structura pe care lucram:
     .order-body                (grid)
       .order-left              = bonul (`.lines`) + panoul de butoane (`.pad`)
       .order-right             = alegatorul de produse

   LECTIA DIN PRODUCTIE (26.07.2026): `.lines` are `flex:1` si `.pad` are `flex-shrink:0`.
   Cand coloana bonului e stramta pe inaltime, lista se prabuseste la 0 si panoul iese
   din coloana, peste produse. De aceea, AICI:
     - `.lines` primeste o inaltime minima (nu mai poate ajunge la 0), si
     - `.order-left` deruleaza pe verticala (deci panoul ramane mereu accesibil).
   `overflow: hidden` pe `.order-left` sta in style.css si e plasa de siguranta. */

@media (min-width: 761px) {

  /* ── REGULA DE CAPATAI ───────────────────────────────────────────────────
     Panoul de butoane trebuie sa incapa INTOTDEAUNA, fara derulare: ospatarul nu are
     voie sa deruleze ca sa ajunga la „Numerar" (proprietarul, 26.07.2026). Deci:
       - `.pad` nu se micsoreaza si nu se deruleaza (ramane cum e in style.css);
       - `.lines` primeste TOT restul si se deruleaza doar EA, cand comanda e lunga;
       - coloana bonului NU deruleaza — altfel butoanele ar fugi de sub deget.
     Asezarile „una peste alta" au fost scoase tocmai fiindca nu respectau regula asta. */
  .order-left               { overflow: hidden; }
  .order-body .lines        { min-height: 90px; }
  .order-body .product-grid { min-height: 120px; }

  /* ── doua coloane: bonul si produsele, mereu una langa alta ─────────────── */
  .order-body { grid-template-columns: var(--ar-col, 360px 1fr); grid-template-rows: 1fr; }

  /* ── UNDE STA BONUL ─────────────────────────────────────────────────────── */
  /* stanga = ordinea fireasca din DOM, nu e nevoie de nimic */
  body[data-ar-bon="dreapta"] .order-left  { order: 2; border-right: 0; border-left: 1px solid var(--line); }
  body[data-ar-bon="dreapta"] .order-right { order: 1; }

  /* ── CAT DE LATA e coloana bonului ──────────────────────────────────────── */
  body[data-ar-marime="ingust"] .order-body { --ar-col: 270px 1fr; }
  body[data-ar-marime="normal"] .order-body { --ar-col: 360px 1fr; }
  body[data-ar-marime="lat"]    .order-body { --ar-col: 460px 1fr; }
  body[data-ar-marime="egal"]   .order-body { --ar-col: 1fr 1fr; }
  /* cand bonul e in DREAPTA, latimea lui trece pe a doua coloana */
  body[data-ar-bon="dreapta"][data-ar-marime="ingust"] .order-body { --ar-col: 1fr 270px; }
  body[data-ar-bon="dreapta"][data-ar-marime="normal"] .order-body { --ar-col: 1fr 360px; }
  body[data-ar-bon="dreapta"][data-ar-marime="lat"]    .order-body { --ar-col: 1fr 460px; }

  /* ── MARIMEA BUTOANELOR: insusirea care da cele mai multe produse pe bon ──
     Panoul are 5 randuri. Cu butoane normale cere ~400px; cu butoane mici, ~290px —
     adica bonul castiga ~110px, cam doua produse in plus vizibile. */
  body[data-ar-butoane="mic"] .pad button { height: clamp(36px, 7vh, 54px); font-size: clamp(10px, 1.6vh, 13px); padding: 4px 3px; }
  body[data-ar-butoane="mic"] .pad        { gap: 5px; }

  /* ── TREI ZONE: bonul singur, butoanele si meniul separat ─────────────────
     `.order-left` dispare ca si cutie (`display: contents`), deci bonul si panoul ajung
     zone de sine statatoare in grila. Ordinea lor vizuala vine din `order`. */
  body[data-ar-zone="3"] .order-left { display: contents; }
  body[data-ar-zone="3"] .ol-bon {
    background: var(--card); border-right: 1px solid var(--line);
    min-height: 0; overflow: hidden;
  }
  /* panoul devine o COLOANA: doua butoane pe rand, incepand de sus. Cele „mari" si cea
     „lata" ocupa tot randul — altfel ar sparge coloana ingusta. */
  /* Panoul pe coloana are 11 randuri (12 butoane obisnuite in 2 coloane + 5 care ocupa
     randul intreg). La 54px pe buton cerea 670px si nu incapea pe un ecran POS de 768px —
     adica ar fi trebuit derulat ca sa ajungi la „Numerar". La 44px cere ~540px si incape
     cu loc de rezerva. Regula ramane: butoanele se vad TOATE, fara derulare. */
  /* Pe coloana panoul are 11 randuri, nu 5 — deci minimul unui rand trebuie sa fie mai
     mic decat in asezarea obisnuita, altfel pe un ecran de 600px ultimele butoane ies
     din ecran. 11 randuri × ~26px incap si acolo, iar pe ecrane mari cresc pana la 48px. */
  body[data-ar-zone="3"] .pad {
    grid-template-columns: repeat(2, 1fr); align-content: start; gap: 4px;
    /* `1fr` ca maxim, nu `auto`: panoul umple toata coloana, deci butoanele CRESC cand
       e loc, in loc sa ramana la minim si sa lase un gol mare sub „Mixt" (26.07.2026). */
    grid-auto-rows: minmax(clamp(26px, 4.2vh, 48px), 1fr);
    padding: 6px; border-right: 1px solid var(--line);
    background: var(--card);
  }
  body[data-ar-zone="3"] .pad .dala-mare,
  body[data-ar-zone="3"] .pad .dala-lata { grid-column: 1 / -1; }
  /* Un buton care ramane SINGUR pe rand lasa un gol urat langa el. Se intampla cand
     urmatorul buton ocupa randul intreg, deci nu mai are cu cine sa se aseze in pereche.
     Il lasam sa ia tot randul — si arata mai bine, si e o tinta mai mare pentru deget.
     (26.07.2026) */
  body[data-ar-zone="3"] .pad button:has(+ .dala-mare),
  body[data-ar-zone="3"] .pad button:has(+ .dala-lata),
  body[data-ar-zone="3"] .pad button:last-child { grid-column: 1 / -1; }
  /* pe coloana sunt 11 randuri: butoanele isi impart inaltimea coloanei si se micsoreaza
     singure cat e nevoie, deci incap toate indiferent de ecran */
  body[data-ar-zone="3"] .pad button     { height: auto; min-height: 0; font-size: clamp(10px, 1.5vh, 13px); padding: 4px 3px; }

  /* latimile: zona de MENIU ia restul, celelalte doua au latime fixa.
     Depinde doar de UNDE sta meniul (primul / la mijloc / ultimul). */
  body[data-ar-zone="3"][data-ar-ordine^="prod"] .order-body        { --ar-col: 1fr 320px 320px; }
  body[data-ar-zone="3"][data-ar-ordine$="prod"] .order-body        { --ar-col: 320px 320px 1fr; }
  body[data-ar-zone="3"][data-ar-ordine="bon-prod-pad"] .order-body,
  body[data-ar-zone="3"][data-ar-ordine="pad-prod-bon"] .order-body { --ar-col: 320px 1fr 320px; }

  /* ordinea celor trei zone */
  body[data-ar-zone="3"][data-ar-ordine="bon-pad-prod"] .ol-bon { order: 1; }
  body[data-ar-zone="3"][data-ar-ordine="bon-pad-prod"] .pad { order: 2; }
  body[data-ar-zone="3"][data-ar-ordine="bon-pad-prod"] .order-right { order: 3; }

  body[data-ar-zone="3"][data-ar-ordine="bon-prod-pad"] .ol-bon { order: 1; }
  body[data-ar-zone="3"][data-ar-ordine="bon-prod-pad"] .order-right { order: 2; }
  body[data-ar-zone="3"][data-ar-ordine="bon-prod-pad"] .pad { order: 3; }

  body[data-ar-zone="3"][data-ar-ordine="pad-bon-prod"] .pad { order: 1; }
  body[data-ar-zone="3"][data-ar-ordine="pad-bon-prod"] .ol-bon { order: 2; }
  body[data-ar-zone="3"][data-ar-ordine="pad-bon-prod"] .order-right { order: 3; }

  body[data-ar-zone="3"][data-ar-ordine="pad-prod-bon"] .pad { order: 1; }
  body[data-ar-zone="3"][data-ar-ordine="pad-prod-bon"] .order-right { order: 2; }
  body[data-ar-zone="3"][data-ar-ordine="pad-prod-bon"] .ol-bon { order: 3; border-right: 0; border-left: 1px solid var(--line); }

  body[data-ar-zone="3"][data-ar-ordine="prod-bon-pad"] .order-right { order: 1; }
  body[data-ar-zone="3"][data-ar-ordine="prod-bon-pad"] .ol-bon { order: 2; }
  body[data-ar-zone="3"][data-ar-ordine="prod-bon-pad"] .pad { order: 3; border-right: 0; }

  body[data-ar-zone="3"][data-ar-ordine="prod-pad-bon"] .order-right { order: 1; }
  body[data-ar-zone="3"][data-ar-ordine="prod-pad-bon"] .pad { order: 2; }
  body[data-ar-zone="3"][data-ar-ordine="prod-pad-bon"] .ol-bon { order: 3; border-right: 0; }

  /* ── MARIMEA TIGLELOR de produs ─────────────────────────────────────────── */
  /* `--coloane-produse` (Task 6, 27.07.2026): aceeasi variabila ca in style.css -- daca
     e setata explicit, tine si aici numarul de coloane, indiferent de marimea tiglei. */
  body[data-ar-grila="mica"] .product-grid    { grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(min(112px, 100%), 1fr)); gap: 6px; }
  body[data-ar-grila="mica"] .product         { min-height: 62px; font-size: 13px; }
  body[data-ar-grila="mare"] .product-grid    { grid-template-columns: repeat(var(--coloane-produse, auto-fill), minmax(min(210px, 100%), 1fr)); gap: 12px; }
  body[data-ar-grila="mare"] .product         { min-height: 104px; font-size: 17px; }

  /* ── PANOUL DE BUTOANE deasupra listei ──────────────────────────────────── */
  /* `.order-left` e flex pe coloana, deci e destul `order` — lista ramane cea care
     se intinde, panoul isi pastreaza inaltimea lui */
  body[data-ar-pad="sus"] .pad { order: -1; padding-top: 6px; }
}

/* ── MINIATURILE din ecranul „Personalizare" ─────────────────────────────────
   Desenate din culorile temei ACTIVE (var(--green) etc.), ca la schimbarea paletei
   sa se recoloreze TOATE instantaneu, fara sa fie redesenate. */
.pz-mini {
  display: flex; gap: 3px; padding: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  height: 58px; overflow: hidden;
}
.pz-mini.coloana { flex-direction: column; }
.pz-mini i { display: block; border-radius: 3px; position: relative; }
.pz-mini .z-bon  { background: var(--green); }
.pz-mini .z-prod { background: var(--green-light); border: 1px solid var(--green); }
/* panoul de butoane, sugerat cu doua dungi in interiorul zonei bonului */
.pz-mini .z-bon.pad-sus::after,
.pz-mini .z-bon.pad-jos::after {
  content: ''; position: absolute; left: 12%; right: 12%; height: 26%;
  background: repeating-linear-gradient(90deg, var(--card) 0 3px, transparent 3px 7px);
  opacity: .8; border-radius: 1px;
}
.pz-mini .z-bon.pad-sus::after { top: 8%; }
.pz-mini .z-bon.pad-jos::after { bottom: 8%; }
/* tigle de produs, sugerate cu un caroiaj din culoarea temei */
.pz-mini .z-prod.g-mica { background-image: repeating-linear-gradient(90deg, var(--green) 0 2px, transparent 2px 7px),
                                            repeating-linear-gradient(0deg, var(--green) 0 2px, transparent 2px 7px); }
.pz-mini .z-prod.g-mare { background-image: repeating-linear-gradient(90deg, var(--green) 0 3px, transparent 3px 18px),
                                            repeating-linear-gradient(0deg, var(--green) 0 3px, transparent 3px 18px); }

/* ── Ecranul „Personalizare" ──────────────────────────────────────────────── */
.pz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr)); gap: 10px; }
.pz-card {
  background: var(--card) !important; color: var(--text) !important;
  border: 2px solid var(--line) !important; border-radius: 12px !important;
  padding: 8px !important; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
}
.pz-card.on { border-color: var(--green) !important; box-shadow: 0 0 0 3px var(--green-light); }
.pz-card b { font-size: 13px; font-weight: 800; line-height: 1.2; }
/* „2 coloane" / „3 coloane" — se vede din prima cate zone are aranjarea, fara sa numeri
   dreptunghiurile din miniatura (26.07.2026) */
.pz-badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  background: var(--green-light); color: var(--green); font-size: 10px; font-weight: 800;
  vertical-align: middle; }
.pz-card small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.pz-pal { display: flex; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.pz-pal i { flex: 1; display: block; }
.pz-titlu { margin: 18px 0 8px; font-size: 14px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
/* Bara de jos a Personalizarii: butonul de inchidere a fost mutat aici din coltul din
   dreapta sus, unde se suprapunea peste butonul de inchidere al aplicatiei de Windows
   si se apasa gresit (26.07.2026). Ramane lipita jos, deci se ajunge la ea fara sa
   derulezi pana la capatul listei de 50. */
.pz-jos { position: sticky; bottom: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 22px; background: var(--card); border-top: 1px solid var(--line); }
.pz-salveaza { min-height: 48px; padding: 10px 26px; font-size: 16px; font-weight: 800; }
.pz-titlu:first-of-type { margin-top: 0; }