/* 26.5.29: varianta pentru mobil (functionalitatea „aspect_mobil”). Clasele pe <html> le pune JavaScript/mobil.js:
   html.mobil   = telefon (latime <= 760 px la aspectul „automat”, sau mereu la aspectul „mobil”);
   html.tableta = tableta (761 - 1024 px, aspect „automat”);  html.atingere = ecran tactil (butoane mai mari).
   Cu aspectul „calculator” sau cu functionalitatea oprita nu se aplica nimic. */

/* ---------- comune telefon + tableta ---------- */
html.mobil #maincont > table.background, html.tableta #maincont > table.background { width: 100% !important; }
html.mobil img, html.tableta img { max-width: 100%; height: auto; }
html.mobil #maincont [style*="width:"], html.tableta #maincont [style*="width:"],
html.mobil #maincont [style*="width: "], html.tableta #maincont [style*="width: "] { max-width: 100%; box-sizing: border-box; }
/* tabelele largi (liste, rezultate, matrici) se deruleaza orizontal in loc sa iasa din ecran */
html.mobil .grid-view, html.tableta .grid-view { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* table.items ramane tabel (umple .grid-view, care se deruleaza); ca bloc nu mai umplea latimea pe tableta */
html.mobil .grid-view table.items, html.tableta .grid-view table.items { width: 100%; }
html.mobil table.items:not(.grid-view table), html.mobil .tabel-rezultate, html.mobil .matrice-scroll, html.mobil .tabel-probe,
html.tableta table.items:not(.grid-view table), html.tableta .tabel-rezultate { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
html.mobil table.mobil-lat, html.tableta table.mobil-lat { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }   /* pus de mobil.js */
html.mobil input[type="text"], html.mobil input[type="password"], html.mobil input[type="email"], html.mobil input[type="number"],
html.mobil select, html.mobil textarea, html.tableta select, html.tableta textarea { max-width: 100%; box-sizing: border-box; }
html.atingere input[type="submit"], html.atingere input[type="button"], html.atingere button { min-height: 36px; }
/* legaturile-buton (Detalii / Modifica ...): textul centrat pe verticala in butonul mai inalt; specificitatea peste regula din pagina
   html:not([data-stil="clasic"]) .grid-view a.anchor_but (display: inline-block) */
html.atingere a.buton, html.atingere a.anchor_but, html.atingere:not(.x) .grid-view a.anchor_but { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 34px; vertical-align: middle; }
html.mobil #tema-eveniment-banner a.ascunde, html.tableta #tema-eveniment-banner a.ascunde { right: 4px; }   /* × bannerului de eveniment iesea din ecran */
/* butoanele-iconita din coloana de actiuni a listelor (nomenclatoare, clienti, produse ...: vizualizare / editare / stergere / activ): pe ecran tactil
   o zona de atingere de 34 x 34 px cu chenar discret, iconita ramane de 18 px; intre butoane 4 px. Doar legaturile cu iconita (a:has(> img)) -
   butoanele cu text (Comenzi: „Detalii” / „Modifica”, anchor_but) raman cum erau */
html.atingere .grid-view table.items td > a:has(> img):is(.view, .update, .delete, .enable, .disable),
html.atingere .grid-view table.items td.button-column > a:has(> img) {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 34px; min-height: 34px; margin: 2px;
	border: 1px solid #d3dae2; border-radius: 7px; background: #f7f9fb; vertical-align: middle; -webkit-tap-highlight-color: rgba(0,0,0,.08); }
html.atingere .grid-view table.items td > a:has(> img):is(.view, .update, .delete, .enable, .disable):active,
html.atingere .grid-view table.items td.button-column > a:has(> img):active { background: var(--accent-deschis, #edf5e6); border-color: var(--accent, #5e9a35); }
html.atingere .grid-view table.items td > a:is(.view, .update, .delete, .enable, .disable) > img, html.atingere .grid-view table.items td.button-column > a > img { width: 18px; height: 18px; }
/* pe telefon coloana butoanelor-iconita ramane lipita in dreapta cand tabelul se deruleaza - doar cand e ULTIMA coloana si are iconite */
html.mobil .grid-view table.items td.button-column:last-child:has(> a > img),
html.mobil .grid-view table.items:has(td.button-column:last-child > a > img) th.button-column:last-child {
	position: sticky; right: 0; z-index: 1; background-color: #fff; box-shadow: -4px 0 6px -4px rgba(0,0,0,.25); }
html.mobil .grid-view table.items:has(td.button-column:last-child > a > img) th.button-column:last-child { background-color: var(--accent, #5e9a35); }
html.atingere input[type="checkbox"], html.atingere input[type="radio"] { width: 20px; height: 20px; }

/* ---------- tableta ---------- */
/* tabelele de asezare ale paginii devin blocuri si pe tableta (antetul ramane pe un rand), ca tabelele late sa se deruleze in loc sa lateasca pagina */
html.tableta #maincont > table.background, html.tableta #maincont > table.background > tbody, html.tableta #maincont > table.background > tbody > tr,
html.tableta #maincont > table.background > tbody > tr > td { display: block; width: auto !important; height: auto !important; box-sizing: border-box; }
html.tableta .antet-luminos, html.tableta .antet-intunecat { max-width: 55vw; }
html.tableta nav.bara-admin { flex-basis: 200px; }

/* ---------- telefon ---------- */
html.mobil body { font-size: 14px; -webkit-text-size-adjust: 100%; min-width: 0 !important; }
/* tabelele de asezare ale paginii (antet / meniu / continut / subsol) devin blocuri: un tabel se lateste dupa continutul cel mai lat si ar lati tot ecranul */
html.mobil #maincont > table.background, html.mobil #maincont > table.background > tbody, html.mobil #maincont > table.background > tbody > tr,
html.mobil #maincont > table.background > tbody > tr > td, html.mobil #maincont > table.background > tbody > tr:first-child table,
html.mobil #maincont > table.background > tbody > tr:first-child table > tbody, html.mobil #maincont > table.background > tbody > tr:first-child table tr,
html.mobil #maincont > table.background > tbody > tr:first-child table td { display: block; width: auto !important; height: auto !important; box-sizing: border-box; }
/* antetul: doar sigla, mai mica; bannerul cu echipa ascuns */
html.mobil .antet-luminos, html.mobil .antet-intunecat { display: none !important; }
html.mobil #maincont > table.background > tbody > tr:first-child > td { height: auto !important; padding-top: 4px !important; padding-bottom: 2px !important; }
html.mobil #maincont > table.background > tbody > tr:first-child table td + td { display: none !important; }   /* celula bannerului */
html.mobil .logo-ica-luminos, html.mobil .logo-ica-intunecat { width: 150px !important; height: auto !important; }
/* meniul de sus: ascuns sub butonul ☰ Meniu; deschis = lista verticala, submeniurile la atingere */
.buton-meniu-mobil { display: none; }
html.mobil .buton-meniu-mobil { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; padding: 8px 14px; border: 1px solid var(--accent, #5e9a35);
	border-radius: 8px; background: var(--accent, #5e9a35); color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; }
html.mobil #mainmenu { display: none; }
html.mobil.meniu-mobil-deschis #mainmenu { display: block; }
html.mobil #nav-container, html.mobil #nav-bar, html.mobil #nav { width: auto !important; height: auto !important; float: none !important; background: none !important; }
html.mobil #nav { margin: 0; padding: 0; border: 1px solid #d3dae2; border-radius: 8px; overflow: hidden; background: #fff !important; }
html.mobil #nav li { float: none !important; display: block; width: auto !important; position: static !important; border-bottom: 1px solid #e6ebf0; background: #fff; }
html.mobil #nav li a { display: block; float: none !important; width: auto !important; padding: 11px 14px !important; height: auto !important; line-height: 1.3 !important; color: #263238 !important; background: none !important; font-size: 15px; }
html.mobil #nav li a span { background: none !important; padding: 0 !important; }
html.mobil #nav > li > a { font-weight: bold; }
html.mobil #nav li ul { display: none !important; position: static !important; width: auto !important; visibility: visible !important; left: auto !important; top: auto !important;
	margin: 0; padding: 0 0 4px 14px; border: 0; background: #f6f8fa !important; box-shadow: none !important; }
html.mobil #nav li.deschis > ul { display: block !important; }
/* sageata submeniului: stilul modern o are deja (tema.css, span:after); doar la stilul clasic */
html.mobil[data-stil="clasic"] #nav li:has(> ul) > a > span::after { content: " \25BE"; color: #7a8792; }
html.mobil[data-stil="clasic"] #nav li.deschis:has(> ul) > a > span::after { content: " \25B4"; }
/* bara Aspect si calea (breadcrumbs) */
/* randul de sus: „☰ Meniu” in stanga, „Aspect” (+ Coloane / Reseteaza filtrele) in dreapta, pe acelasi rand; #selector-tema urca deasupra meniului deschis */
html.mobil #maincont td:has(> #mainmenu) { display: flex !important; flex-direction: column; }
html.mobil #maincont td:has(> #mainmenu) > #selector-tema { order: -1; }
html.mobil .selector-tema { float: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin: 4px 0 6px; }
html.mobil .selector-tema > .buton-meniu-mobil { margin: 0 auto 0 0; padding: 6px 12px; font-size: 15px; }
/* cand mai sunt si Coloane / Reseteaza filtrele (listele) si ecranul e ingust: primul rand „☰ Meniu” ... „Aspect”, dedesubt Reseteaza / Coloane la dreapta */
@media (max-width: 439px) {
	html.mobil .selector-tema > #loc-coloane:has(> *) { order: 3; flex-basis: 100%; display: flex; justify-content: flex-end; }
	html.mobil .selector-tema .coloane-grid { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
	html.mobil .selector-tema .coloane-grid > .buton-bara { margin: 0 !important; }
}

html.mobil .selector-tema > a, html.mobil .selector-tema > span > a { margin: 0 !important; }
html.mobil #panou-tema { right: 0; left: auto; width: min(92vw, 300px); }
html.mobil .breadcrumbs { font-size: 12px; overflow-wrap: anywhere; }
/* meniul de administrare din stanga: strans implicit pe telefon (butonul „Meniul Admin” il arata, deasupra continutului) */
html.mobil div.bara-admin-cadru { display: block; }
html.mobil nav.bara-admin { position: static; max-height: none; margin-bottom: 10px; }
/* paginile cu meniul Operatii (div.container flex: .span-19 continutul + .span-5 meniul): un element flex are min-width auto = cat tabelul cel mai lat;
   pe telefon una sub alta (Operatii dedesubt), pe tableta doar min-width 0 - tabelele se deruleaza in interiorul lor */
html.mobil div.container { display: block !important; width: auto !important; }
html.mobil div.container > .span-19, html.mobil div.container > .span-5, html.mobil div.container > .last { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; }
html.tableta div.container > * { min-width: 0; }
/* caseta Operatii (#sidebar, tema.css: padding 20px 16px 20px 0) pe telefon: aceleasi margini ca si continutul (#content, 20 px), nu mai lata decat pagina */
/* continutul (#content, padding 20 px din tema) si caseta Operatii pe toata latimea ecranului (cerut: marginile sunt spatiu util) */
html.mobil #content { padding-left: 0 !important; padding-right: 0 !important; }
/* celulele paginii (padding 5 / 10 px): 5 px egal pe ambele parti */
html.mobil #maincont > table.background > tbody > tr > td { padding-left: 5px !important; padding-right: 5px !important; }
html.mobil #sidebar { box-sizing: border-box; width: auto !important; padding: 6px 0 0 !important; }
html.mobil #sidebar .portlet { box-sizing: border-box; width: auto !important; max-width: 100%; margin: 0 0 10px !important; }
/* tableta ingusta (pana la 900 px): caseta Operatii nu mai incape langa continut - una sub alta, ca pe telefon, cu aceleasi margini */
@media (max-width: 900px) {
	html.tableta div.container { display: block !important; width: auto !important; }
	html.tableta div.container > .span-19, html.tableta div.container > .span-5, html.tableta div.container > .last { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; }
	html.tableta #content { padding-left: 0 !important; padding-right: 0 !important; }
	html.tableta #maincont > table.background > tbody > tr > td { padding-left: 5px !important; padding-right: 5px !important; }
	html.tableta #sidebar { box-sizing: border-box; width: auto !important; padding: 6px 0 0 !important; }
	html.tableta #sidebar .portlet { box-sizing: border-box; width: auto !important; max-width: 100%; margin: 0 0 10px !important; }
}
/* sectiunile plutitoare din admin.css (float / inline-block) se latesc dupa continut: pe telefon una sub alta, cat ecranul, cu derulare proprie */
html.mobil div.sectiune, html.mobil div.verificare_comanda_sectiune, html.mobil div.sectiune_inline { float: none !important; display: block; max-width: 100%;
	box-sizing: border-box; margin-left: 0; margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* titlurile: mai mici pe telefon (titlurile produselor din Aloca analisti / Rezultate ocupau tot ecranul) */
html.mobil #maincont h1 { font-size: 24px; }
html.mobil #maincont h2, html.mobil #maincont div.label_border { font-size: 15px; line-height: 1.35; }
/* formulare pe o coloana */
html.mobil .form .row, html.mobil div.form div.row { width: auto !important; float: none !important; }
html.mobil .form label, html.mobil div.form label { display: block; float: none !important; width: auto !important; text-align: left !important; }
html.mobil .form input[type="text"], html.mobil .form select, html.mobil .form textarea,
html.mobil div.form input[type="text"], html.mobil div.form select, html.mobil div.form textarea { width: 100% !important; }
/* detaliile (detail-view): eticheta deasupra valorii */
html.mobil table.detail-view, html.mobil table.detail-view tbody, html.mobil table.detail-view tr { display: block; width: 100% !important; }
html.mobil table.detail-view th, html.mobil table.detail-view td { display: block; width: auto !important; text-align: left !important; }
html.mobil table.detail-view th { padding-bottom: 0; border-bottom: 0; }
/* subsolul si ferestrele peste pagina */
html.mobil #maincont > table.background > tbody > tr:nth-last-child(-n+2) > td { font-size: 9px !important; }
html.mobil .ui-dialog { max-width: 96vw !important; left: 2vw !important; }

/* ---------- Comanda noua / Modifica comanda pe telefon (01.11 14:40, semnalat: „se scaleaza mai mic decat ar incapea") ----------
   fieldset are implicit min-width: min-content - se lateste dupa cel mai lat rand si lateste toata pagina; grafica noua (#comanda-form.cn2) pe o coloana,
   eticheta deasupra campului, bara de butoane de jos mai compacta */
html.mobil fieldset { min-width: 0; max-width: 100%; box-sizing: border-box; }
html.mobil #comanda-form.cn2 { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; width: auto !important; }
html.mobil #comanda-form.cn2 > div[data-cn] { grid-column: 1 / -1 !important; overflow: visible; }
html.mobil #comanda-form.cn2 > div[data-cn="observatii"] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
html.mobil #comanda-form.cn2 fieldset, html.mobil #comanda-form.cn2 .cn-receptie { padding: 10px 12px !important; }
html.mobil #comanda-form.cn2 .cn-receptie > div.sectiune.form { flex-basis: 100% !important; }
html.mobil #comanda-form.cn2 div.subsectiune { flex-wrap: wrap; gap: 2px 8px; }
html.mobil #comanda-form.cn2 div.subsectiune > div[style*="width"] { width: auto !important; }
html.mobil #comanda-form.cn2 div.label-170, html.mobil #comanda-form.cn2 div.label-190 { flex: 0 0 100% !important; width: auto !important; }
html.mobil #comanda-form.cn2 .errorMessage { margin-left: 0 !important; }
html.mobil #comanda-form.cn2 input[type="text"], html.mobil #comanda-form.cn2 select, html.mobil #comanda-form.cn2 textarea { max-width: 100% !important; box-sizing: border-box; }
html.mobil #comanda-form.cn2 select, html.mobil #comanda-form.cn2 textarea, html.mobil #comanda-form.cn2 input[type="text"]:not([size]) { width: 100% !important; }
html.mobil body:has(#comanda-form.cn2) #produse li { padding-left: 44px; }
html.mobil body:has(#comanda-form.cn2) #produse fieldset { padding: 10px 10px !important; }
html.mobil body:has(#comanda-form.cn2) .cn-actiuni { padding: 6px 8px !important; }
/* bara de butoane (Adauga produs / Produs nou din AI / Salveaza / Verifica / Tipareste): grila care se potriveste latimii ecranului
   (2-3 butoane pe rand, cat incap de cel putin 96 px), butoanele umplu coloana, textul se micsoreaza cu ecranul si trece pe 2 randuri daca nu incape;
   fara grafica noua (cn2) la fel */
html.mobil .cn-actiuni { width: auto !important; box-sizing: border-box; }
/* toate butoanele aceeasi marime: coloane egale (3 pe rand, 2 pe ecrane sub 360 px), randuri egale (grid-auto-rows: 1fr) si butonul cat celula */
html.mobil .cn-actiuni > div { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch;
	gap: 6px !important; margin: 0 !important; }
@media (max-width: 359px) { html.mobil .cn-actiuni > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.mobil .cn-actiuni > div > input, html.mobil .cn-actiuni > div > button, html.mobil .cn-actiuni > div > a {
	box-sizing: border-box; width: 100% !important; min-width: 0; min-height: 40px; height: 100% !important; margin: 0 !important; padding: 6px 4px !important;
	white-space: normal; line-height: 1.2; text-align: center; font-size: clamp(11px, 3.4vw, 14px) !important; }
html.mobil .cn-actiuni #PasulUrmator { margin-left: 0 !important; }
/* butoanele rotunde Chat / BUG (fixe, jos-dreapta) acopereau bara: deasupra ei (--bara-jos = inaltimea barei, din mobil.js) */
html.mobil body:has(.cn-actiuni) #chat-buton { bottom: calc(var(--bara-jos, 0px) + 12px) !important; }
html.mobil body:has(.cn-actiuni) #bug-buton { bottom: calc(var(--bara-jos, 0px) + 17px) !important; }