/* Tema „dale": dale colorate, tinte mari de atins, gandita pt ecranul POS 1024x768.
   TOT ce e aici sta sub .ui-dale — modul standard ramane neatins. */
:root {
  /* familia RECE — modulele de admin */
  --dl-c1: #0e7c66; --dl-c2: #1565c0; --dl-c3: #00838f; --dl-c4: #2e7d32;
  --dl-c5: #4527a0; --dl-c6: #37474f; --dl-c7: #00695c; --dl-c8: #283593;
  /* familia CALDA — actiunile rapide (fostele butoane doar-iconita) */
  --dl-w1: #ef6c00; --dl-w2: #c62828; --dl-w3: #f9a825; --dl-w4: #d84315;
  --dl-w5: #ad1457; --dl-w6: #6d4c41;
}
/* ── shell admin: sidebar ascuns, bara sus cu Home ── */
.ui-dale .admin .side { display: none; }
/* adminul e GRID cu doua coloane (sidebar 260px + main); fara sidebar, in dale
   trecem pe O coloana cu doua randuri: bara dale SUS, continutul dedesubt */
.ui-dale .admin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.dl-top { display: none; }   /* in modul standard bara dale nu exista */
.ui-dale .dl-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: #1f2530; color: #fff; position: sticky; top: 0; z-index: 40; }
.ui-dale .dl-top .dl-user { margin-left: auto; font-size: 13px; opacity: .85; }
/* numele OMULUI care a deschis administrarea sta apasat; contul terminalului ramane
   alaturi, mai stins — el spune „de pe ce aparat", nu „cine" (29.07.2026) */
.ui-dale .dl-top .dl-user b { opacity: 1; font-weight: 800; }
.ui-dale .dl-top .dl-user .dl-cont { opacity: .7; }
.ui-dale .dl-home-btn { background: #0e7c66; color: #fff; border: 0; border-radius: 10px;
  padding: 10px 16px; font-size: 16px; font-weight: 800; cursor: pointer; }
/* ── Home cu dale: grila UNIFORMA pe tot ecranul ── */
.ui-dale .dl-home { padding: 10px 12px 12px; height: calc(100vh - 136px); box-sizing: border-box;
  overflow-y: auto; display: flex; flex-direction: column; }
.ui-dale .dl-dale { display: grid; flex: 1; min-height: 0; gap: 10px;
  grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; }
/* CAUTAREA IN ADMIN, ADUSA IN MODUL DALE (29.07.2026): in dale sidebar-ul e ascuns, deci
   caseta de cautare din el disparea — singura functie de admin ne-accesibila prin dale.
   O punem pe Home-ul dale, deasupra grilei; rezultatele PLUTESC peste dale (position
   absolute), ca sa nu impinga grila. Refoloseste cautaAdmin/cautaRezultate/cautaDeschide. */
.ui-dale .dl-cauta { position: relative; flex: 0 0 auto; margin-bottom: 10px; }
.ui-dale .dl-cauta > input { width: 100%; box-sizing: border-box; min-height: 50px; font-size: 17px;
  padding: 10px 16px; border-radius: 12px; border: 2px solid var(--line); background: #fff; }
.ui-dale .dl-cauta-rez { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden auto;
  max-height: 62vh; box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.ui-dale .dl-cauta-rez a { display: block; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--line); }
.ui-dale .dl-cauta-rez a:last-child { border-bottom: 0; }
.ui-dale .dl-cauta-rez a:active, .ui-dale .dl-cauta-rez a:hover { background: var(--green-light, #e3f2ea); }
.ui-dale .dl-cauta-rez a b { display: block; font-size: 15.5px; font-weight: 800; }
.ui-dale .dl-cauta-rez a small { color: var(--muted); font-size: 12.5px; }
.ui-dale .dl-cauta-gol { display: block; padding: 12px 16px; color: var(--muted); font-size: 14px; }
.ui-dale .dl-dala { border: 0; border-radius: 14px; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 12px; text-align: left; min-height: 86px; }
.ui-dale .dl-dala .dl-ic { font-size: 26px; line-height: 1; }
.ui-dale .dl-dala b { font-size: 15px; font-weight: 800; line-height: 1.15; }
.ui-dale .dl-dala:active { filter: brightness(1.15); }
.ui-dale .dl-dala-info { font-size: 12px; opacity: .92; font-weight: 600; }
/* dala centrala MARE catre Ecran POS: 2x2 in mijlocul grilei */
.ui-dale .dl-dala-pos { grid-column: 3 / span 2; grid-row: 2 / span 2;
  align-items: center; justify-content: center; text-align: center;
  background: #0b5d4d !important; }
.ui-dale .dl-dala-pos .dl-ic { font-size: 52px; }
.ui-dale .dl-dala-pos b { font-size: 24px; }
/* pe ecran ingust (telefon in mod dale) grila curge, dala POS trece pe rand intreg */
@media (max-width: 900px) {
  .ui-dale .dl-home { height: auto; }
  .ui-dale .dl-dale { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(86px, auto); }
  .ui-dale .dl-dala-pos { grid-column: 1 / span 3; grid-row: auto; }
}
/* ══════════════════════════════════════════════════════════════════════════════
   ADMINUL IN STIL DALE (28.07.2026, cerut de proprietar)
   „daca e deja comutat pe stilul cu dale, ar trebui si interfetele din admin sa fie
    in stil touch cu dale... e folosit pe POS, tablete, telefoane, deci adaptabil"

   DE CE DOAR CSS, si nu markup rescris: adminul are 21 de sectiuni. Rescrise una cate
   una ar fi insemnat 21 de ocazii de a rupe ceva ce merge, pentru un castig VIZUAL.
   Toate poarta insa aceleasi clase (.adm-cutie, .adm-cap, .adm-rand, .ps-head, .rep-*),
   deci un strat de stil le prinde pe toate deodata — si, daca ceva arata prost, se
   corecteaza aici, nu in logica. Modul standard ramane neatins: totul e sub `.ui-dale`.

   Trei masuri sunt de principiu, nu de gust:
     - tinta de atins ≥ 48px (degetul, nu cursorul);
     - nimic sub 14px (POS-ul se citeste in picioare, de la o jumatate de metru);
     - o singura coloana pe telefon, doua pe tableta, grila pe ecranul POS.
   ══════════════════════════════════════════════════════════════════════════════ */

/* --- tinte de atins --- */
.ui-dale .admin button { min-height: 48px; font-size: 15px; border-radius: 12px; padding: 10px 16px; }
.ui-dale .admin button.mic, .ui-dale .admin .ghost.mic { min-height: 40px; font-size: 14px; }
.ui-dale .admin input, .ui-dale .admin select, .ui-dale .admin textarea {
  min-height: 48px; font-size: 16px; border-radius: 12px; padding: 10px 14px;
}
/* 16px la input NU e estetica: sub atat, iOS mareste singur pagina la focus si aruncă
   asezarea — apoi omul ramane cu ecranul zoomat si nu stie ce a facut */
.ui-dale .admin input[type=checkbox], .ui-dale .admin input[type=radio] {
  min-height: 0; width: 24px; height: 24px;
}

/* --- textul: nimic prea mic pentru un ecran privit din picioare --- */
.ui-dale .admin .muted { font-size: 14px; }
.ui-dale .admin .mic, .ui-dale .admin .muted.mic { font-size: 13.5px; line-height: 1.45; }
.ui-dale .admin h2 { font-size: 21px; }
.ui-dale .admin h3 { font-size: 17px; }

/* --- cutiile devin CARDURI, cu banda colorata la stanga (limbajul dalelor) --- */
.ui-dale .admin .adm-cutie,
.ui-dale .admin .rep-box,
.ui-dale .admin .conn-box,
.ui-dale .admin .bk-card {
  border-radius: 16px; padding: 16px 18px; margin-top: 14px;
  border: 1px solid #e6e1db; box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border-left: 6px solid var(--dl-c1);
}
.ui-dale .admin .adm-cap,
.ui-dale .admin .conn-box > h2 {
  font-size: 17px; font-weight: 800; letter-spacing: .1px; margin-bottom: 4px;
}
/* culori pe rand, ca doua carduri alaturate sa nu se citeasca drept unul singur */
.ui-dale .admin .adm-cutie:nth-of-type(3n+2) { border-left-color: var(--dl-c2); }
.ui-dale .admin .adm-cutie:nth-of-type(3n+3) { border-left-color: var(--dl-c3); }

/* --- randurile de comenzi: pe ecran ingust fiecare buton pe latimea lui --- */
.ui-dale .admin .adm-rand { gap: 12px; margin-top: 14px; }
.ui-dale .admin .adm-rand input,
.ui-dale .admin .adm-rand select { padding: 10px 14px; font-size: 16px; }

/* --- antetul de pagina: pe ingust se aseaza pe verticala, nu se inghesuie --- */
.ui-dale .admin .ps-head { gap: 14px; }
.ui-dale .admin .ps-head h2 { font-size: 21px; }
.ui-dale .admin .ps-head .muted { font-size: 14px; }

/* --- cifrele mari (rapoarte) sa se vada de la distanta --- */
.ui-dale .admin .rep-card b { font-size: 26px; }
.ui-dale .admin .rep-card small { font-size: 12px; }
.ui-dale .admin .rep-grid { gap: 14px; }

/* --- randurile dese de tabel: mai aerisite, ca sa se poata atinge --- */
.ui-dale .admin .rep-row { padding: 12px 0; font-size: 14.5px; }
.ui-dale .admin .trm-rand { padding: 12px 0; gap: 8px; }

/* --- mesajele de salvare: vizibile, nu o soapta gri --- */
.ui-dale .admin .save-msg, .ui-dale .admin .conn-msg { font-size: 14.5px; font-weight: 700; }

/* ── TABELELE GRELE: produse (12 coloane) si utilizatori (29.07.2026) ──────────
   Sunt cele mai folosite ecrane din admin si singurele ramase nefolosibile cu degetul:
   12 coloane strivite pe un POS de 1024 inseamna campuri de 40px, imposibil de nimerit.

   NU le facem carduri: fara etichete, „58.00" langa „12" nu mai spune nimic, iar
   etichetele ar cere rescris markup-ul in 22 de locuri. Le lasam TABEL — forma potrivita
   pentru comparat preturi pe verticala — dar:
     - se deruleaza pe orizontala cu degetul, fara sa se striveasca;
     - PRIMA coloana (numele produsului) ramane lipita in stanga, altfel derulezi si nu mai
       stii al cui e randul;
     - campurile devin cat un deget.                                                     */
.ui-dale .admin .ptable, .ui-dale .admin .utable {
  overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
}
/* +160px fata de 1040: coloana „Denumire meniu" (11.08.2026). Fara cresterea asta, pe
   ecranul mic coloanele s-ar strivi in loc sa se deruleze pe orizontala. */
.ui-dale .admin .pthead, .ui-dale .admin .ptrow { min-width: 1200px; }
.ui-dale .admin .ptrow { padding: 10px 4px; }
.ui-dale .admin .ptrow input { min-height: 44px; font-size: 15px; padding: 8px 10px; }
.ui-dale .admin .pthead { font-size: 12.5px; padding: 12px 4px; }
/* numele produsului / utilizatorului ramane la vedere cat derulezi in lateral */
.ui-dale .admin .pthead > :first-child,
.ui-dale .admin .ptrow > :first-child,
.ui-dale .admin .uthead > :first-child,
.ui-dale .admin .utrow > :first-child {
  position: sticky; left: 0; z-index: 2; background: #fff;
  box-shadow: 6px 0 8px -6px rgba(0,0,0,.12);
}
.ui-dale .admin .pthead > :first-child { background: #faf8f6; }
/* utilizatori: randurile respira, iar butoanele raman unul sub altul si aici */
.ui-dale .admin .uthead, .ui-dale .admin .utrow { min-width: 860px; padding: 12px 14px; }
.ui-dale .admin .u-actiuni > button { min-height: 44px; }

/* ── TABLETA: doua coloane, cardurile curg ── */
@media (max-width: 1100px) {
  .ui-dale .admin .rep-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── TELEFON: o singura coloana, butoanele pe toata latimea ──
   Pe un telefon, doua butoane alaturate au ~140px fiecare: se apasa gresit. Unul sub
   altul, pe toata latimea, nu se mai poate greși. */
@media (max-width: 700px) {
  .ui-dale .admin .rep-grid,
  .ui-dale .admin .conn-grid { grid-template-columns: 1fr; }
  .ui-dale .admin .ps-head { flex-direction: column; align-items: stretch; }
  .ui-dale .admin .ps-head-btns { flex-wrap: wrap; }
  .ui-dale .admin .ps-head-btns button,
  .ui-dale .admin .adm-rand button { flex: 1 1 100%; }
  .ui-dale .admin .adm-rand input,
  .ui-dale .admin .adm-rand select { flex: 1 1 100%; min-width: 0; }
  /* randurile-tabel se desfac pe verticala: pe 360px, trei coloane inseamna text taiat */
  .ui-dale .admin .rep-row { grid-template-columns: 1fr; gap: 4px; }
  .ui-dale .admin .rep-row span { white-space: normal; }
  .ui-dale .admin .adm-cutie,
  .ui-dale .admin .rep-box,
  .ui-dale .admin .conn-box { padding: 14px; border-radius: 14px; }
}

.ui-dale .admin-main { padding-top: 6px; }
/* ── ecranul de comanda: coloana de dale-unelte la dreapta grilei ── */
.dl-unelte { display: none; }
.ui-dale .dl-unelte { display: grid; grid-template-columns: 1fr; gap: 6px;
  align-content: start; width: 120px; }
.ui-dale .dl-unelte .dl-dala { min-height: 56px; padding: 8px; border-radius: 10px; }
.ui-dale .dl-unelte .dl-dala b { font-size: 12.5px; }
.ui-dale .dl-unelte .dl-dala .dl-ic { font-size: 18px; }
/* dalele de ACTIUNI RAPIDE (familia calda) — accent subtil ca sa se distinga de module */
.ui-dale .dl-dala-unealta { box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); }