/* ═══════════════════════════════════════════════════════════════════════════════════
MENIURILE PE TELEFON — QuApp (20.09.2026). Aceeasi lucrare ca in TabaQ (19.09.2026),
cererea lui Stefan: „prea multe propozitii cu explicatii, meniuri care nu incap in ecranul
telefonului; nu trebuie sa se afiseze toate informatiile deodata, ascunde functii in butoane
care se deschid la apasare".
Regula pe scurt:
- explicatiile (ce face meniul, cum se foloseste, cum se socoteste) stau in butonul „?"
al meniului (public/js/help.js), nu pe ecran;
- pe ecran raman cifrele, lista si butoanele de lucru;
- ce se foloseste rar (filtre in plus, export, legende, detaliile unui rand) sta intr-un
buton care se deschide la atingere — DOAR pe telefon; pe ecranul mare totul ramane deschis;
- tot ce se apasa are cel putin 44 px inaltime.
Piesele comune sunt mai jos; fiecare grup de meniuri are sectiunea lui, la coada fisierului.
Fisierul se incarca DUPA styles.css, deci bate regulile de acolo la aceeasi specificitate.
═══════════════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────────────
0. PIESELE COMUNE
─────────────────────────────────────────────────────────────────────────────────── */
/* 0a. Antetul pe telefon: un singur rand [◀ Meniu][TITLUL MENIULUI ▾][?][🔔][⋯].
Inainte: sigla „QuApp", selectorul de divizie, numele contului, SOS, reincarcarea si iesirea
stateau toate in bara si ieseau din ecran pe dreapta (titlul meniului nu se mai vedea deloc).
Acum: sigla, numele contului si selectorul de divizie nu se mai vad in bara (divizia se alege
din „⋯"), iar titlul meniului ia latimea ramasa. Pe ecranul mare antetul arata ca inainte. */
@media (max-width: 768px) {
.topbar { gap:6px; padding:6px 8px; flex-wrap:nowrap; }
/* 20.09.2026: #divisionSelector NU se mai ascunde — alegerea diviziei trebuia sa treaca
intr-un buton „...", dar butonul acela nu a fost construit, iar adminul a ramas pe telefon
fara niciun comutator de divizie (reclamatia lui Stefan). Ramane in bara, compact. */
.topbar h1, .topbar .user { display:none !important; }
.topbar .back-to-menu-btn { min-height:40px; padding:.45rem .7rem; flex:0 0 auto; }
.topbar .tab-dropdown-wrap { flex:1 1 0; min-width:0; }
.topbar .tab-dropdown-btn {
width:100%; min-width:0; min-height:40px; padding:.3rem .5rem;
font-size:.78rem; line-height:1.15; letter-spacing:.2px;
white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;
}
.topbar #topbarHelpBtn { flex:0 0 auto; width:40px; height:40px; min-width:40px; min-height:40px; font-size:16px; }
.topbar .notif-wrap > button, .topbar > button { min-width:40px; min-height:40px; flex:0 0 auto; }
/* spatiul care impingea butoanele la dreapta nu mai are rost cand bara e plina */
.topbar .topbar-spatiu { flex:0 0 0 !important; width:0; }
/* „Reincarca" si „Iesi" sunt deja in lista de meniuri (.tab-menu-mobile-actions), deci pleaca din bara */
.topbar #btnReincarcaTopbar, .topbar .btn-logout-desktop { display:none !important; }
/* butoanele hartii se vad doar in meniurile cu harta (clasa are-harta pusa de index.html) */
body:not(.are-harta) .topbar .btn-toggle-map,
body:not(.are-harta) .topbar .btn-toggle-sidebar { display:none !important; }
/* lista de meniuri: de la marginea din stanga la cea din dreapta, cu derulare in ea */
.tab-dropdown-menu {
position:fixed; left:8px; right:8px; top:calc(var(--topbar-h, 52px) + 4px); transform:none;
min-width:0; max-width:none; max-height:calc(100vh - var(--topbar-h, 52px) - 16px);
}
}
/* 0b. „Ascunde lista" (bara de jos a hartii) are rost doar in meniurile cu harta; in rest lua
un rand intreg din ecran degeaba. */
@media (max-width: 768px) {
#mainLayout.map-hidden .mobile-sidebar-toggle-bar { display:none !important; }
}
/* 0c. Fereastra de ajutor „?" — aici stau acum explicatiile meniurilor. Pe telefon ia aproape tot
ecranul, antetul cu × ramane sus la derulare, × are 44 px, textul 14.5 px, iar derularea
ajunsa la capat nu trece in pagina de dedesubt. Antetul lipit merge pe orice ecran. */
#helpOverlay .modal-content > div:first-child {
position:sticky; top:0; z-index:1; background:var(--card); padding-top:2px;
}
@media (max-width: 768px) {
#helpOverlay .modal-content {
width:calc(100vw - 16px); max-width:none; max-height:92vh; max-height:92dvh;
overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
#helpOverlay #helpTitle { font-size:16px; line-height:1.3; }
#helpOverlay .modal-content > div:first-child > button { min-width:44px; min-height:44px; font-size:26px; }
#helpOverlay #helpBody { font-size:14.5px !important; line-height:1.55 !important; }
#helpOverlay #helpBody ul { padding-left:18px; }
#helpOverlay #helpBody li { margin-bottom:5px; }
}
/* 1. Sectiune strinsa pe telefon, deschisa la atingere.
...
Pe ecranul mare butonul nu se vede si sectiunea sta deschisa. Clicul il trateaza telefon.js. */
.tel-comuta { display:none; }
.tel-doar-telefon { display:none; }
@media (max-width: 768px) {
.tel-comuta {
display:flex; align-items:center; justify-content:space-between; gap:10px;
width:100%; min-height:44px; margin:8px 0; padding:10px 14px;
border:1px solid var(--border); border-radius:10px; background:var(--card2); color:var(--text);
font-size:14px; font-weight:700; text-align:left; cursor:pointer;
}
.tel-comuta::after { content:'▾'; opacity:.75; font-size:13px; }
.tel-comuta[aria-expanded="true"]::after { content:'▴'; }
/* varianta mica, in randul unui cartonas („Detalii") */
.tel-comuta.tel-comuta-mic { width:auto; display:inline-flex; margin:6px 0 0; padding:8px 12px; font-size:13px; font-weight:600; }
.tel-pliat:not(.tel-deschis) { display:none !important; }
.tel-doar-desktop { display:none !important; }
.tel-doar-telefon { display:block; }
}
/* 2. Tabel care pe telefon devine cartonase: fiecare rand = un cartonas, fiecare celula =
„eticheta ...... valoare". Eticheta vine din data-eticheta pe
*/
.tel-derulare { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 768px) {
.tel-derulare { max-height:72vh; overflow:auto; border:1px solid var(--border); border-radius:8px; }
.tel-derulare table thead th { position:sticky; top:0; z-index:2; background:var(--bg3); }
.tel-derulare table th:first-child, .tel-derulare table td:first-child { position:sticky; left:0; z-index:1; background:var(--card); }
.tel-derulare table thead th:first-child { z-index:3; }
}
/* 4. Eticheta scurta de stare (in locul casetelor cu fraze lungi). Explicatia intreaga sta in „?".
🧪 Probă — nu pleacă în Mentor */
.tel-eticheta {
display:inline-flex; align-items:center; gap:6px; margin:4px 0 8px; padding:4px 10px;
border:1px dashed rgba(255,209,102,.65); border-radius:999px; background:rgba(255,209,102,.10);
color:var(--warning); font-size:12px; font-weight:700; line-height:1.3;
}
/* 5. O singura linie scurta sub titlu (perioada, cate randuri) — nu fraze de explicatie. */
.tel-linie { margin:2px 0 8px; color:var(--text2); font-size:13px; line-height:1.35; }
/* 6. Fraza de explicatie care ramane pe ecranul mare si pleaca in „?" pe telefon.
Se pune pe blocul de text existent: class="tel-explicatie". */
@media (max-width: 768px) {
.tel-explicatie { display:none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════════════
SECTIUNILE GRUPELOR DE MENIURI. Fiecare lucrare scrie DOAR in sectiunea ei.
A = Operatiuni + Census · B = Vanzari · C = Performanta + Audit&Vizite · D = Financiar
E = Comunicare + Monitorizare · F = Contracte + Maspex + Cataloage · G = Rapoarte + Admin + Masina mea
═══════════════════════════════════════════════════════════════════════════════════ */
/* ──────────────── [A] Operatiuni + Census ──────────────── */
/* Meniurile: ziuaMea, agenda, censusBB, censusUrsus, catalogUrs, clientiNevizitati, livrariFir.
Masurat inainte pe telefon (390x844): Clienti Nevizitati 209 ecrane si 3179 elemente care ies
lateral, Catalog Best Foods 69 ecrane, Agenda 19,6 ecrane, Census BB 2151 si Census Ursus 2075
de tinte sub 44 px. Cifrele intregi: ~/quapp-telefon-masuri/masuri-grupa-A.md. */
/* A1. Lista lunga a unui meniu se deruleaza in cutia ei, nu in toata pagina. Census-ul face deja
asta de mult (max-height:60vh pe #cbClientList / #cuClientList); acum la fel planul zilei
din Agenda, clientii nevizitati si catalogul. Fara asta, adminul avea de derulat 209 ecrane
ca sa ajunga la capatul clientilor nevizitati. Niciun rand nu dispare. */
@media (max-width: 768px) {
#agendaClientList,
#nevizList,
#panel-catalogUrs #catRezultate-URS {
max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
border:1px solid var(--border); border-radius:10px; padding:6px;
}
}
/* A2. Pastilele de sortare (sortare-tabel.js le da 32 px) ajung la 44 px in meniurile grupei. */
@media (max-width: 768px) {
#panel-agenda .sortare-pastila,
#panel-censusBB .sortare-pastila,
#panel-censusUrsus .sortare-pastila,
#panel-catalogUrs .sortare-pastila,
#panel-clientiNevizitati .sortare-pastila { min-height:44px !important; }
}
/* A3. Ziua Mea: selectorul de depozit, filtrul si data raportului de pontaj si randul „Absenti (34)"
aveau 16-35 px. Ecranul e de un ecran inaltime, deci nu se strange nimic — doar se ingroasa. */
@media (max-width: 768px) {
#panel-ziuaMea :is(button, .btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), summary) { min-height:44px !important; }
#panel-ziuaMea details > summary { display:flex; align-items:center; }
}
/* A4. Agenda: cele patru butoane din fiecare cartonas de client (Vizita, Navigheaza, Detalii, Suna),
sagetile de zi, campul de data si selectorul de agent ajung la 44 px. Filtrele (stare, semafor,
sortare) stau strinse sub „⚙️ Filtre" (agenda.js), iar planul zilei se deruleaza in cutia lui
(A1), deci meniul incape in doua-trei ecrane in loc de 20. */
@media (max-width: 768px) {
#panel-agenda :is(button, .btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-agenda .agenda-card .actions button { min-height:44px !important; padding:6px 12px; }
#panel-agenda .agenda-card .actions { gap:8px; }
}
/* A5. Census BB + Census Ursus (modelul e sectiunea A1 din TabaQ): butoanele cartonaselor
(.chip-btn, 25-31 px), cautarile, selectoarele, capetele pliabile si bifele listelor de
filtre ajung la 44 px. Bifa insasi era de 13x13 px — se face 26x44, ca atingerea sa prinda
tot randul. Listele de bife se inalta, ca sa se vada mai multe randuri odata cu randul de
44 px. Filtrele stau strinse sub „⚙️ Filtre" (census-bb.js / census-ursus.js). */
@media (max-width: 768px) {
#panel-censusBB :is(button, .btn, .chip-btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), summary),
#panel-censusUrsus :is(button, .btn, .chip-btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), summary) { min-height:44px !important; }
#panel-censusBB .check-item,
#panel-censusUrsus .check-item { min-height:44px; }
#panel-censusBB .check-item input[type="checkbox"],
#panel-censusUrsus .check-item input[type="checkbox"] { width:26px; height:44px; flex:0 0 auto; margin:0 6px 0 0; }
#panel-censusBB .checklist,
#panel-censusUrsus .checklist { max-height:260px; }
#panel-censusBB details.panel > summary,
#panel-censusUrsus details.panel > summary { display:flex; align-items:center; }
}
/* A6. Catalog Best Foods: 107 cartonase cu poza de 280 px faceau 69 de ecrane. Pe telefon poza
scade la 150 px, cartonasul se strange, iar lista se deruleaza in cutia ei (A1). Preturile,
casutele de editare si butonul de salvare raman neatinse. Numai catalogul Best Foods —
catalogul Bergenbier e al altei grupe. */
@media (max-width: 768px) {
#panel-catalogUrs .cat-poza { height:150px !important; padding:8px !important; margin-bottom:10px !important; }
#panel-catalogUrs .cat-poza img { max-height:134px !important; }
#panel-catalogUrs .cat-poza-goala { height:110px !important; padding:0 !important; font-size:44px !important; display:flex; align-items:center; justify-content:center; }
#panel-catalogUrs .cat-card { padding:10px !important; }
#panel-catalogUrs :is(button, .btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
}
/* A7. Clienti Nevizitati: tabelul de 5 coloane si 3175 de randuri se latea la 565 px pe un ecran
de 390 (3179 de elemente ieseau lateral) si randurile apasabile aveau 43 px. Pe telefon
fiecare rand devine cartonas (piesa comuna 2), lista se deruleaza in cutia ei (A1), iar
sortarea — care statea in capul de tabel, ascuns de cartonase — se muta pe o bara de
pastile aratata doar pe telefon. Nicio coloana nu dispare. */
@media (max-width: 768px) {
#panel-clientiNevizitati :is(button, .btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-clientiNevizitati table.tel-carduri > tbody > tr { min-height:44px; }
/* celulele au stil scris in rand (padding:6px, text-align:center) — aici il batem, ca sa
iasa cartonasul „eticheta ...... valoare" */
#panel-clientiNevizitati table.tel-carduri > tbody > tr > td { padding:3px 0 !important; text-align:right !important; }
/* numele clientului si denumirea din acte stau una sub alta (intr-o celula-cartonas cele doua
ar sta una langa alta, pentru ca nu desparte doi copii de flex) */
#panel-clientiNevizitati table.tel-carduri > tbody > tr > td.tel-titlu { flex-direction:column; align-items:flex-start; text-align:left !important; gap:2px; }
#nevizList { overflow-x:hidden !important; }
/* cele trei cifre de sus incap pe un singur rand, nu pe doua */
#nevizSummary > div { display:grid !important; grid-template-columns:repeat(3,1fr); gap:8px !important; }
#nevizSummary > div > div { padding:10px 6px !important; }
}
/* A8. Livrarile clientilor mei: ecranul e deja gandit pentru telefon; raman doar fraza de sub
titlu (plecata in „?" prin tel-explicatie) si campurile de 40-42 px, duse la 44 in
livrari-fir.js. Aici doar plasa de siguranta. */
@media (max-width: 768px) {
#panel-livrariFir :is(button, .btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
}
/* ──────────────── [B] Vanzari ──────────────── */
/* Meniurile: comenzi, programeProducatori, obiective, focusSku, dashboardVanzari, istoricZilnic,
ranking, gtCentralizator, salesAll, targeteAgent, vanzariComparative, targeteAdmin.
Masurat la 390x844 INAINTE: vanzariComparative 531 de ecrane si 11.361 de tinte sub 44 px,
targeteAdmin 4,43 ecrane / 106 tinte / 41 elemente iesite lateral, obiective 2,47 ecrane /
23 tinte / 52 iesite lateral, ranking 2,77 ecrane. Explicatiile au plecat in „?" (help.js),
ce se foloseste rar sta in .tel-comuta/.tel-pliat, tabelele late in .tel-derulare.
Aici raman doar marimile: tot ce se apasa are cel putin 44 px, si nimic nu mai iese lateral.
Totul e sub @media (max-width: 768px) — pe ecranul mare nu se schimba nimic. */
/* B1. Tintele de 44 px, meniu cu meniu. Butoanele acestor module isi scriu padding-ul si
font-size-ul in atributul style (inline), deci regula are nevoie de !important. */
@media (max-width: 768px) {
#panel-comenzi button, #panel-comenzi .btn, #panel-comenzi select, #panel-comenzi input:not([type="checkbox"]):not([type="radio"]),
#panel-programeProducatori button, #panel-programeProducatori .btn, #panel-programeProducatori select,
#panel-obiective button, #panel-obiective .btn, #panel-obiective select, #panel-obiective input[type="month"], #panel-obiective input[type="file"],
#panel-focusSku button, #panel-focusSku .btn, #panel-focusSku select, #panel-focusSku input[type="month"],
#panel-dashboardVanzari button, #panel-dashboardVanzari .btn, #panel-dashboardVanzari select, #panel-dashboardVanzari input[type="month"],
#panel-istoricZilnic button, #panel-istoricZilnic .btn, #panel-istoricZilnic select, #panel-istoricZilnic input[type="date"], #panel-istoricZilnic input[type="month"],
#panel-ranking button, #panel-ranking .btn, #panel-ranking select, #panel-ranking input[type="month"],
#panel-gtCentralizator button, #panel-gtCentralizator .btn, #panel-gtCentralizator select, #panel-gtCentralizator input[type="month"], #panel-gtCentralizator input[type="file"],
#panel-salesAll button, #panel-salesAll .btn, #panel-salesAll select, #panel-salesAll input[type="month"], #panel-salesAll input[type="file"],
#panel-targeteAgent button, #panel-targeteAgent .btn, #panel-targeteAgent select, #panel-targeteAgent input[type="month"],
#panel-vanzariComparative button, #panel-vanzariComparative .btn, #panel-vanzariComparative select, #panel-vanzariComparative input[type="date"], #panel-vanzariComparative input[type="search"],
#panel-targeteAdmin button, #panel-targeteAdmin .btn, #panel-targeteAdmin select, #panel-targeteAdmin input:not([type="checkbox"]):not([type="radio"]) {
min-height:44px !important;
padding-top:8px !important; padding-bottom:8px !important;
font-size:14px !important;
}
/* inputurile de target (20 px inaltime, scrise cu style inline in module) intra si ele */
#panel-obiective input[type="number"], #panel-dashboardVanzari input[type="number"],
#panel-gtCentralizator input[type="number"], #panel-targeteAdmin input[type="number"] {
min-height:44px !important; padding:8px !important; font-size:14px !important;
}
}
/* Comenzi: 16px panel + 16px cos consumed 64px of a phone's width. Keep the
correction scoped here; desktop and other menus retain their existing spacing.
Inline desktop sizes require !important. Text inputs use 16px at normal scale. */
@media (max-width: 768px) {
#panel-comenzi { padding:8px; }
#panel-comenzi .cmd-pad { padding-left:4px !important; padding-right:4px !important; }
#panel-comenzi #cmdSold, #panel-comenzi #cmdLimita,
#panel-comenzi #cmdAmbalaje, #panel-comenzi #cmdComenziAzi { margin-left:4px !important; margin-right:4px !important; }
#panel-comenzi button, #panel-comenzi select,
#panel-comenzi input:not([type="checkbox"]):not([type="radio"]) { font-size:16px !important; min-width:0; max-width:100%; }
#panel-comenzi .cmd-filters { flex-wrap:wrap; }
#panel-comenzi #cmdClasa, #panel-comenzi #cmdSearch { flex:1 1 100%; width:100%; max-width:100% !important; }
#panel-comenzi .cmd-details { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; font-size:15px !important; }
#panel-comenzi #cmdClientInfo { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
#panel-comenzi #cmdClientInfo, #panel-comenzi #cmdClientRes,
#panel-comenzi #cmdTelefonicWrap, #panel-comenzi #cmdResult { font-size:15px !important; line-height:1.4; overflow-wrap:anywhere; }
#panel-comenzi #cmdStocInfo, #panel-comenzi #cmdRezumat { font-size:14px !important; line-height:1.4; }
#panel-comenzi .cmd-total-row { flex-wrap:wrap; }
#panel-comenzi #cmdTelefonic { flex-shrink:0; }
#panel-comenzi .cmd-choice-info { font-size:15px !important; }
#panel-comenzi .cmd-choice-name, #panel-comenzi .cmd-choice-price { font-size:16px; }
#panel-comenzi .cmd-choice-meta { font-size:15px !important; }
#panel-comenzi .cmd-choice-price, #panel-comenzi .cmd-choice-stock { display:block; overflow-wrap:anywhere; }
#panel-comenzi #cmdLines table { table-layout:fixed; }
#panel-comenzi #cmdLines th { font-size:14px; letter-spacing:0; overflow-wrap:anywhere; }
#panel-comenzi #cmdLines td { font-size:16px !important; white-space:normal !important; overflow-wrap:anywhere; }
#panel-comenzi #cmdLines td:first-child { width:auto !important; }
#panel-comenzi #cmdLines th:nth-child(2), #panel-comenzi #cmdLines th:nth-child(3) { width:88px; }
#panel-comenzi #cmdLines input[data-qty] { width:100% !important; }
#panel-comenzi .cmd-line-name { font-size:16px !important; line-height:1.35 !important; display:block !important; overflow:visible !important; -webkit-line-clamp:unset !important; }
}
/* B2. Bara de sub-file (Obiective / Vanzari toate / GT / Dashboard) — butoane de 29 px. */
@media (max-width: 768px) {
#obiective-subnav-bar { gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#obiective-subnav-bar button { min-height:44px; padding:8px 14px; font-size:14px; white-space:nowrap; }
}
/* B3. Vanzari comparative — meniul cel mai greu. Filtrele si actiunile unui client stau acum
in butoane (vezi vanzari-comparative.js); aici le dau marimea si le tin in ecran. */
@media (max-width: 768px) {
#panel-vanzariComparative .vc-filtre { flex-direction:column; align-items:stretch; }
#panel-vanzariComparative .vc-filtre label { width:100%; }
#panel-vanzariComparative .vc-filtre select,
#panel-vanzariComparative .vc-filtre input { width:100%; box-sizing:border-box; }
#panel-vanzariComparative .vc-bara { gap:6px; }
#panel-vanzariComparative .vc-bara input[type="search"] { flex:1 1 100%; min-width:0; }
#panel-vanzariComparative .chip-btn { min-height:44px; padding:8px 12px; font-size:13px; }
#panel-vanzariComparative .vc-comutator { width:100%; }
#panel-vanzariComparative .vc-comutator .btn { flex:1 1 0; }
/* cele 5 butoane ale unui client stau in .tel-pliat; deschise, sunt cat degetul */
#panel-vanzariComparative .vc-actiuni { flex-direction:column; align-items:stretch; }
#panel-vanzariComparative .vc-actiuni .btn { min-height:44px !important; padding:10px 12px !important; font-size:14px !important; }
#panel-vanzariComparative .tiny-actions .btn { min-height:44px; }
#panel-vanzariComparative .vc-mai { display:block; width:100%; min-height:44px; margin:10px 0 4px; font-size:14px; }
#panel-vanzariComparative .vc-card { padding:10px 12px; }
}
/* B4. Targete Admin — formularele in coloana, ca sa nu mai iasa nimic lateral (41 de elemente). */
@media (max-width: 768px) {
/* invelisul scris in modul are padding 16 px; pe 390 px mananca prea mult din latime */
#panel-targeteAdmin > div > div { padding:10px !important; }
#panel-targeteAdmin .card > div[style*="grid"] { grid-template-columns:1fr !important; }
#panel-targeteAdmin form { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
#panel-targeteAdmin form input, #panel-targeteAdmin form select { width:100% !important; box-sizing:border-box; }
#panel-targeteAdmin .tel-comuta { margin:4px 0; }
/* „1. Summary luna": cartonasele .kpi nu au stil nicaieri in styles.css, asa ca eticheta,
cifra si nota se lipeau intr-un singur rand („Linii vanzari00 agenti"). Le asez pe telefon;
pe ecranul mare raman exact cum erau. */
#panel-targeteAdmin .kpi {
display:flex; flex-direction:column; gap:2px; margin-bottom:8px; padding:10px 12px;
border:1px solid var(--border); border-radius:10px; background:var(--card2);
}
#panel-targeteAdmin .kpi label { font-size:12px; color:var(--text2); }
#panel-targeteAdmin .kpi b { font-size:18px; font-weight:800; }
#panel-targeteAdmin .kpi span { font-size:12px; color:var(--text2); }
}
/* B5. Obiective, GT si Vanzari toate — randurile de filtre si import nu mai ies din ecran. */
@media (max-width: 768px) {
#panel-obiective .obj-admin-panel input[type="file"],
#panel-gtCentralizator input[type="file"],
#panel-salesAll input[type="file"] { width:100%; box-sizing:border-box; }
#panel-salesAll #dashTableContainer { max-height:none; }
/* bifa „vs. luna anterioara" are 13 px; eticheta ei devine tinta de 44 px, caseta 24 px */
#panel-salesAll label { min-height:44px; display:inline-flex; align-items:center; gap:6px; }
#panel-salesAll input[type="checkbox"] { width:24px; height:24px; }
#panel-obiective #obiectiveAgents { grid-template-columns:1fr !important; }
}
/* B6. Focus SKU, Istoric zilnic, Clasament, Targetele mele, Comenzi, Programe — randuri
de butoane care incap in latimea ecranului, fara derulare pe orizontala a paginii. */
@media (max-width: 768px) {
#panel-focusSku .tel-pliat > div[style*="flex"] { flex-direction:column; align-items:stretch; }
#panel-istoricZilnic table { font-size:12px; }
#panel-ranking #rankingPopupBtn .btn { width:100%; }
#panel-targeteAgent h3 { font-size:15px; }
#panel-comenzi .cmz-nota { font-size:13px; }
#panel-programeProducatori button[data-filtru] { flex:1 1 45%; }
/* celulele apasabile din tabelele URS (targetele care se editeaza dintr-un click) au 26 px */
#panel-obiective table td[onclick] { height:44px; }
}
/* ──────────────── [C] Performanta + Audit & Vizite ──────────────── */
/* smartTargets · discounturi · comandaOptima · auditUrsus · vizite · rute · monitorizare-vizite */
/* [C] Smart Targets — 8 comenzi sub 44 px (luna, doua perechi cursor+cifra, trei butoane).
Caseta cu sursele si formula a plecat in „?" (tel-explicatie in smart-targets.js);
tabelul de targete, comparatia si istoricul stau in .tel-derulare. */
@media (max-width: 768px) {
#panel-smartTargets :is(button, select, input) { min-height:44px !important; }
#panel-smartTargets input[type="range"] { flex:1 1 120px; min-width:120px; }
#panel-smartTargets input[type="number"] { width:84px !important; }
#panel-smartTargets .btn { padding-left:12px; padding-right:12px; }
}
/* [C] Discounturi — pe ecranul mare cutia strinsa e transparenta, deci randul de filtre
arata exact ca inainte. Pe telefon se deschide la atingere si devine rand propriu. */
#dscFiltre { display:contents; }
@media (max-width: 768px) {
#dscFiltre.tel-deschis { display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
#panel-discounturi :is(button, select, input, label.btn) { min-height:44px !important; }
/* campul de fisier ascuns din „Incarca raport" nu trebuie inaltat */
#panel-discounturi label.btn > input[type="file"] { min-height:0 !important; }
#panel-discounturi label.btn { display:inline-flex; align-items:center; }
#panel-discounturi select, #panel-discounturi input[type="month"] { flex:1 1 140px; max-width:none !important; }
}
/* [C] Comanda Optima — 136 de comenzi sub 44 px (118 din tabelul claselor) si 429 px iesiti
lateral. Tabelul claselor devine fise; importul, configurarea, setarile de calcul si
filtrele stau strinse; nota cu sursele si formatul fisierului au plecat in „?". */
@media (max-width: 768px) {
#panel-comandaOptima :is(button, select, input) { min-height:44px !important; }
#panel-comandaOptima label:has(input[type="checkbox"]) { min-height:44px; align-items:center; }
#panel-comandaOptima label:has(input[type="checkbox"]) > input { width:22px; height:22px; min-height:22px !important; }
#panel-comandaOptima input[type="file"] { padding:8px; }
/* „Salveaza Tot" sta langa titlul claselor: pe telefon nu se rupe in doua randuri */
#panel-comandaOptima #coClassConfigSection .btn.ghost { white-space:nowrap; }
/* cutia claselor devine lista de fise: 30vh era pentru un tabel, nu pentru fise */
#panel-comandaOptima #coClassConfig { max-height:52vh !important; }
/* cartonasele cu cifrele de sus: doua pe rand, nu sase inghesuite */
#panel-comandaOptima #coKpiGrid { grid-template-columns:repeat(2, 1fr); }
/* selectoarele si casutele de cifre iau latimea randului, nu 60 px */
#panel-comandaOptima #coFiltre select { flex:1 1 140px; }
#panel-comandaOptima #coSetari input[type="number"] { width:96px !important; }
/* banda cu cifrele pe clase: 59 de cartonase, cate trei pe rand, faceau 1846 px (masurat).
Pe telefon stau pe un singur rand si se trag lateral — nu dispare niciunul. */
#panel-comandaOptima #coClassSummary > div { flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
#panel-comandaOptima #coClassSummary > div > div { flex:0 0 auto !important; min-width:120px; }
}
/* [C] Audit Ursus (ITOS) — primeste buton „?": cele noua reguli ale sezonului si randul cu
sursa au plecat acolo. Butoanele de intretinere aveau 7 px de sus si de jos. */
@media (max-width: 768px) {
#panel-auditUrsus :is(button, select, input) { min-height:44px !important; }
#panel-auditUrsus > div { padding:12px !important; }
#panel-auditUrsus .card { padding:12px !important; }
}
/* [C] Monitorizare vizite — primeste buton „?": formula punctajului a plecat acolo.
Tabelul de 8 coloane se trage lateral, cu capul si agentul lipite. */
@media (max-width: 768px) {
#panel-monitorizare-vizite :is(button, select, input) { min-height:44px !important; }
#panel-monitorizare-vizite #monViziteTable { max-height:70vh; }
}
/* [C] Vizite — 2402 targete sub 44 px: sapte butoane pe randul clientului x 200 de randuri,
488 de bife de 13 px si patru capete de filtru de 27 px. Pe telefon randul pastreaza
actiunea principala si „Navigheaza", restul intra sub „⋯ Mai multe". */
#viziteClientList .tiny-actions > .tel-pliat { display:contents; }
@media (max-width: 768px) {
#panel-vizite :is(button, select, input, .chip-btn, summary) { min-height:44px !important; }
#panel-vizite .tel-pliat.tel-deschis { display:flex; gap:4px; flex-wrap:wrap; width:100%; }
#panel-vizite summary { min-height:44px; display:flex; align-items:center; }
/* bifa ramane patrata; randul ei e targetul care se apasa */
#panel-vizite .check-item { min-height:44px; }
#panel-vizite .check-item > input { width:22px; height:22px; min-height:22px !important; flex:0 0 auto; }
/* cutia unui rand de client: butoanele ei se aseaza sub rand, nu peste el */
#panel-vizite .tiny-actions { gap:6px; }
#panel-vizite .tiny-actions > .tel-comuta-mic { margin:0; }
/* lista are derulatorul ei; capul de lista si cautarea raman deasupra */
#panel-vizite #viziteClientList { max-height:calc(100vh - 300px); }
}
/* [C] Rute — 5410 targete sub 44 px: „Sterge" (18x47) si „Navigheaza" (18x73) pe fiecare rand,
plus doua capete de filtru de 15 px. */
@media (max-width: 768px) {
#panel-rute :is(button, select, input, .chip-btn, summary) { min-height:44px !important; }
#panel-rute .tel-pliat.tel-deschis { display:flex; gap:6px; flex-wrap:wrap; width:100%; }
#panel-rute summary { min-height:44px; display:flex; align-items:center; }
/* pe randul de ruta cele doua butoane stau sub numele clientului, nu langa el */
#panel-rute #ruteList .client-item > div:first-child { flex-wrap:wrap; gap:6px; }
#panel-rute #ruteList { max-height:60vh; }
}
/* ──────────────── [D] Financiar ──────────────── */
/* 15 meniuri de bani: scadentar, incasari, setariTiparire, incasariTermene, topClienti,
riscFinanciar, monitorizareCoface, alertaFacturare, sedintaCredite, verificareClient,
planSaptamanal, discountControl, controlDeblocari, deblocariGm, oferte.
Masurat pe copie la 390x844 INAINTE: incasari 5,06 ecrane · sedintaCredite 2,50 ·
planSaptamanal 1,68 cu 20 de lucruri de apasat sub 44 px · incasariTermene 1,39 (un cap
pliant de 14 px) · controlDeblocari 1,38 · scadentar 12 lucruri mici · topClienti 2813
lucruri mici plus un tabel de 762 px · deblocariGm un tabel de 760 px intr-un ecran de 390.
Frazele de explicatie au plecat in „?" din modulele JS; aici raman doar marimile. */
/* D1. Tot ce se apasa in meniurile financiare tine cat un deget (44 px).
setariTiparire lipseste dinadins din lista: modulul lui isi scrie singur 44 px in
butoane, iar ecranul se vede doar in AllinPOS, nu in browser. */
@media (max-width: 768px) {
:is(#panel-scadentar, #panel-incasari, #panel-incasariTermene, #panel-topClienti,
#panel-riscFinanciar, #panel-monitorizareCoface, #panel-alertaFacturare,
#panel-sedintaCredite, #panel-verificareClient, #panel-planSaptamanal,
#panel-discountControl, #panel-controlDeblocari, #panel-deblocariGm, #panel-oferte)
:is(button, .btn, .btn.btn-sm, [role="button"], select, summary,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
div[onclick], th[onclick], td[onclick], tr[onclick]) {
min-height:44px;
}
/* legaturile scurte din randurile de text („schimba", „Sterge filtre") sunt si ele de apasat;
fara display nu s-ar inalta, fiindca stau in rand cu textul */
:is(#panel-scadentar, #panel-incasari, #panel-incasariTermene, #panel-topClienti,
#panel-riscFinanciar, #panel-monitorizareCoface, #panel-alertaFacturare,
#panel-sedintaCredite, #panel-verificareClient, #panel-planSaptamanal,
#panel-discountControl, #panel-controlDeblocari, #panel-deblocariGm, #panel-oferte)
a[href] {
display:inline-flex; align-items:center; min-height:44px;
}
}
/* D2. Incasari — ecranul de bani al agentului (era 5,06 ecrane). */
@media (max-width: 768px) {
/* nota lunga a listei „Langa mine" („Fara GPS: arat toti clientii cu sold, alfabetic...")
e explicatie, nu cifra: a plecat in „?"-ul Incasarilor. O scoatem de pe ecran DOAR in
meniul asta, fiindca modulul listei e folosit si de un meniu din alta grupa. */
#panel-incasari .cs-nota.cs-atentie { display:none; }
/* pastilele si capetele de sortare ale listei aveau 40 si 32 px */
#panel-incasari .cs-sort, #panel-incasari .sortare-pastila { min-height:44px; }
}
/* D3. Top Clienti — cartonasele pe patru coloane si tabelul de 11 coloane cu clientul lipit
la stanga. Acelasi model ca in TabaQ (19.09.2026). */
@media (max-width: 768px) {
/* sapte cartonase in patru coloane, nu sapte randuri; niciunul nu pleaca de pe ecran.
Latimile scrise in modul (min-width 100-180 px) se dau la o parte cu !important. */
.telD-top-rez {
display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr));
gap:6px !important; margin-bottom:10px !important;
}
.telD-top-rez > * {
min-width:0 !important; padding:8px 6px !important; text-align:center;
}
.telD-top-rez > * > * { overflow-wrap:anywhere; }
.telD-top-rez > .telD-top-val { grid-column:span 2; }
.telD-top-rez > .telD-top-avert { grid-column:1 / -1; text-align:left; }
/* selectoarele de filtru din capul tabelului aveau 20 px */
.telD-44 { min-height:44px; }
/* tabelul ramane intreg (toate cele 11 coloane) si se trage lateral in cutia lui:
capul sus, randul de filtre imediat sub el (era lipit la 28 px, sub un cap de 44 px
se ascundea), iar „Client" lipit la stanga cand tragi lateral. */
table.telD-top > thead > tr:first-child > th {
height:44px; white-space:nowrap; position:sticky; top:0; z-index:3; background:var(--surface);
}
table.telD-top > thead > tr:nth-child(2) > th {
position:sticky; top:44px; z-index:3; background:var(--surface);
}
table.telD-top > thead > tr:nth-child(2) { top:44px !important; }
table.telD-top > thead > tr:first-child > th:nth-child(3),
table.telD-top > tbody > tr:not([id]) > td:nth-child(3) {
position:sticky; left:0; z-index:4; background:var(--bg);
min-width:130px; max-width:150px; overflow-wrap:anywhere;
}
table.telD-top > thead > tr:first-child > th:nth-child(3) { background:var(--surface); }
table.telD-top > tbody > tr:not([id]) > td { height:44px; }
}
/* ──────────────── [D] sfarsit ──────────────── */
/* ──────────────── [E] Comunicare + Monitorizare ──────────────── */
/* Regula comuna a grupei: in QuApp panourile meniurilor sunt `#panel-`, iar butoanele
si campurile isi poarta marimea in `style="..."` pe element (padding si font, nu inaltime).
Un `min-height` din foaie e destul ca sa ridice tinta la 44 px, dar blocul de telefon din
styles.css scade padding-ul butoanelor (`.btn{padding:.5rem .8rem}`), asa ca se pune
`!important` pe selectorul mai precis al panoului. Bifele raman patratele mici de sistem —
tinta de 44 px e eticheta din jurul lor (acelasi tipar ca in TabaQ). */
/* E1. Anunturi. Inainte: 1.11 ecrane si 28 de tinte sub 44 px (12 butoane de cartonas la 18 px,
formularul de anunt nou si bara de filtre la 25-29 px, 4 pastile de sortare la 32 px).
Acum: formularul si filtrele stau in butoane care se deschid la atingere, iar lista de
anunturi incepe din primul ecran. Pe ecranul mare nimic nu se schimba. */
@media (max-width: 768px) {
#panel-anunturi :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-anunturi .sortare-pastila { min-height:44px !important; padding:10px 14px; }
#panel-anunturi label:has(input[type="checkbox"]) { display:inline-flex; align-items:center; min-height:44px; }
/* „Editeaza / Fixeaza / Sterge" din cartonas: raman trei, dar cu loc de deget */
#panel-anunturi .module-card .btn.small { padding:8px 12px !important; font-size:.78rem; }
}
/* E2. Sarcini. Inainte: 17 tinte sub 44 px (bara de filtre si rapoarte, chip-urile de vedere,
pastilele de sortare, randul de bifa „arata si anulate", randul „Sarcina noua" la 16 px).
Formularul era deja strins in el insusi; acum se strang si filtrele, iar chip-urile
„Toate / Primite de mine / Date de mine" raman la vedere, ca dupa ele se umbla des. */
@media (max-width: 768px) {
#panel-sarcini :is(button, .btn, .chip-btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-sarcini .sortare-pastila { min-height:44px !important; padding:10px 14px; }
#panel-sarcini label:has(input[type="checkbox"]) { display:inline-flex; align-items:center; min-height:44px; }
/* randul „Sarcina noua ... deschide" e un div cu onclick, deci nu-l prinde regula de butoane */
#panel-sarcini .module-card > div[onclick] { min-height:44px; }
/* tabla pe stari ramane cu derulare laterala, dar coloanele incap intr-un ecran de telefon */
#panel-sarcini #taskKanban > div { min-width:250px; }
}
/* E3. HELP SPV (escaladari) + Alerte client. Inainte: 11, respectiv 8 tinte sub 44 px — „Preiau"
si „Check-in & Rezolva" la 16 px, poza de check-in la 16 px, numele clientului apasabil la
16 px, filtrele la 25-27 px. Filtrele pleaca intr-un buton care se deschide la atingere. */
@media (max-width: 768px) {
:is(#panel-escaladari, #panel-alerteClient) :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
:is(#panel-escaladari, #panel-alerteClient) .sortare-pastila { min-height:44px !important; padding:10px 14px; }
:is(#panel-escaladari, #panel-alerteClient) .module-card .btn.small { padding:8px 12px !important; font-size:.78rem; }
/* poza de check-in: si cand fisierul lipseste (imagine rupta) ramane un patrat de deget */
#panel-escaladari .module-card img[onclick] { min-height:44px; min-width:44px; }
#panel-alerteClient .module-card strong[onclick] { display:inline-flex; align-items:center; min-height:44px; }
}
/* E4. Meniurile cu harta: GPS Live, Competitie, Audit frigidere, Expirare produse. Harta ramane;
lista de sub ea se trateaza ca in TabaQ (A1): tot ce se apasa are 44 px, iar uneltele
folosite rar (istoric, auto-improspatare, stergerea rutelor, exporturile, filtrele) stau in
butoane care se deschid la atingere. Inainte: 6, 8, 6 si 10 tinte sub 44 px. */
@media (max-width: 768px) {
:is(#panel-gps, #panel-competitie, #panel-auditFrigidere, #panel-expirareProduse)
:is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
:is(#panel-gps, #panel-competitie, #panel-auditFrigidere, #panel-expirareProduse) .sortare-pastila { min-height:44px !important; padding:10px 14px; }
:is(#panel-gps, #panel-competitie, #panel-auditFrigidere, #panel-expirareProduse) label:has(input[type="checkbox"]) { display:inline-flex; align-items:center; min-height:44px; }
:is(#panel-competitie, #panel-auditFrigidere, #panel-expirareProduse) .module-card .btn.small { padding:8px 12px !important; font-size:.78rem; }
/* cartonasele de sub harta: cele doua liste cu derulare proprie primesc mai mult ecran */
#panel-gps #gpsCards { max-height:none; }
}
/* E5. Promotii. Inainte: 2 tinte sub 44 px, dar fiecare campanie isi arata descrierea intreaga pe
ecran. Acum descrierea sta sub „📄 Descrierea campaniei" (piesa comuna tel-comuta), ca in
TabaQ (A5), iar butoanele campaniei ajung la 44 px. */
@media (max-width: 768px) {
#panel-promotii :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-promotii .sortare-pastila { min-height:44px !important; padding:10px 14px; }
}
/* E6. Beat Plan — cel mai incarcat meniu din aplicatie: 68 de tinte sub 44 px (50 de „+ Plan" la
18 px) si un calendar de SASE coloane pe un ecran de 390 px, adica fasii de ~60 px in care
nu incape un nume de client. Pe telefon calendarul se aseaza pe o coloana (o zi sub alta),
iar clientii fiecarei zile stau intr-un buton care se deschide la atingere; ziua de azi e
deschisa de la inceput. Grila e scrisa in `style="..."` din JS, deci trebuie `!important`. */
@media (max-width: 768px) {
#panel-beatPlan #bp-calendar { grid-template-columns:1fr !important; }
#panel-beatPlan #bp-calendar > div { min-height:0 !important; }
#panel-beatPlan :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-beatPlan .sortare-pastila { min-height:44px !important; padding:10px 14px; }
/* „+ Plan" din lista de neplanificati: ramane in randul clientului, dar cu deget */
#panel-beatPlan #bp-unplanned-list .btn.small { padding:8px 12px !important; font-size:.76rem; }
#panel-beatPlan #bp-unplanned-list { max-height:none; }
}
/* E7. Traseu Zilnic + Masini GPS (amandoua cu harta, amandoua fara „?" inainte). Lista vizitelor
din Traseu Zilnic devine cartonase (tel-carduri): numarul si ora sus, clientul pe titlu.
Inainte: 2, respectiv 5 tinte sub 44 px. */
@media (max-width: 768px) {
:is(#panel-traseuZilnic, #panel-flotaGps) :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
:is(#panel-traseuZilnic, #panel-flotaGps) .sortare-pastila { min-height:44px !important; padding:10px 14px; }
#panel-flotaGps label:has(input[type="checkbox"]) { display:inline-flex; align-items:center; min-height:44px; }
#panel-traseuZilnic table.tel-carduri > tbody > tr { min-height:44px; }
#panel-traseuZilnic #tzVisitsList, #panel-flotaGps #fgList { max-height:none; }
}
/* E8. Activitate Birou + Monitor Birou (amandoua fara „?" inainte). Jurnalul zilei devine
cartonase; configurarea conducerii din Monitor Birou sta intr-un buton care se deschide.
Inainte: 10 tinte sub 44 px la Activitate Birou (ziua, cele patru feluri de zi la 24 px,
orele, activitatea, „cu cine", „Salveaza") si doua fraze de explicatie in Monitor Birou. */
@media (max-width: 768px) {
:is(#panel-activitateBirou, #panel-birouMonitor) :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
:is(#panel-activitateBirou, #panel-birouMonitor) .sortare-pastila { min-height:44px !important; padding:10px 14px; }
/* felurile zilei (Birou / Teren / Mixt / Liber) stau unul langa altul, dar se pot apasa */
#panel-activitateBirou [data-tipzi] { min-height:44px !important; padding:8px 14px !important; }
#panel-activitateBirou table.tel-carduri > tbody > tr > td.tel-actiuni { justify-content:flex-start; gap:8px; }
/* fasia de zile a lunii din Monitor Birou: patratele raman, dar se pot nimeri cu degetul */
#panel-birouMonitor [data-zi] { min-width:26px; min-height:26px; }
}
/* E9. Alerte stoc (fara „?" inainte). Caseta de sub titlu avea patru randuri de explicatie si
manca un sfert din ecran: pleaca in „?", iar pe ecran ramane o linie scurta cu ora
improspatarii. Tabelul are 12 coloane si 1000 px latime — ramane tabel, in tel-derulare,
cu capul si prima coloana lipite. Inainte: 10 tinte sub 44 px. */
@media (max-width: 768px) {
#panel-alerteStoc :is(button, .btn, select, textarea, summary, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-alerteStoc summary { display:flex; align-items:center; }
#panel-alerteStoc label:has(input[type="checkbox"]) { display:inline-flex; align-items:center; min-height:44px; }
/* bulinele rosu/galben/urmarite filtreaza, deci sunt tinte, nu podoabe */
#panel-alerteStoc [data-as-nivel] { display:inline-flex; align-items:center; min-height:44px; }
#panel-alerteStoc [data-as-sari-clasa] { min-height:44px; }
#panel-alerteStoc .tel-derulare table th { min-height:44px; }
}
/* E10. Stocuri de marfa (fara „?" inainte). Paragraful de trei randuri de sub titlu pleaca in „?";
pe ecran ramane ora ultimei improspatari. Cele doua tabele (pe clase si pe articole cautate)
raman tabele, in tel-derulare. Inainte: 1 tinta sub 44 px (cautarea). */
@media (max-width: 768px) {
#panel-stocFirma :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
#panel-stocFirma .sortare-pastila { min-height:44px !important; padding:10px 14px; }
/* bulinele de depozit ascund/arata o coloana intreaga: tinte, nu etichete */
#panel-stocFirma [data-sf-gest] { display:inline-flex; align-items:center; min-height:44px; }
#panel-stocFirma [data-sf-clasa] { min-height:44px; }
}
/* ──────────────── [E] sfarsit ──────────────── */
/* ──────────────── [F] Contracte + Maspex + Cataloage ──────────────── */
/* Meniurile: contracteB2B, contracteB2C, clientNou, vanzariMaspex, obiectiveMaspex,
auditMaspex, catalogMaspex, catalogBb.
Masurat inainte (390x844, pe copie): contracteB2B 27 tinte sub 44 px, contracteB2C 14,
clientNou 5 in lista (plus formularul cu campuri de ~31 px), Maspex 1-6 pe ecran,
catalogMaspex 14,7 ecrane, catalogBb 100,2 ecrane si fara buton „?".
Ecranele acestea sunt scrise din JS cu stiluri in atributul style, deci acolo unde regula
de aici trebuie sa bata stilul scris in rand se foloseste !important. */
/* F1. Tot ce se apasa in cele trei meniuri de contracte si clienti noi: 44 px si litera de
16 px (sub 16 px telefonul mareste singur pagina cand intri in camp). */
@media (max-width: 768px) {
#panel-contracteB2B .chip-btn,
#panel-contracteB2C .chip-btn {
min-height: 44px; padding: 0 14px !important; font-size: 14px !important;
display: inline-flex; align-items: center;
}
#panel-contracteB2B .sortare-pastila,
#panel-contracteB2C .sortare-pastila,
#panel-clientNou .sortare-pastila {
min-height: 44px; padding: 8px 14px; font-size: 14px;
}
#panel-contracteB2B input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#panel-contracteB2B select,
#panel-contracteB2B textarea,
#panel-contracteB2C input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#panel-contracteB2C select,
#panel-contracteB2C textarea {
min-height: 44px; padding: 8px 12px !important; font-size: 16px !important;
}
/* bifele (GDPR): casuta nativa la 44 px iese un patrat alb urias pe tema inchisa, asa ca
ramane la 28 px, iar eticheta din jurul ei tine cele 44 px de apasat pe tot randul */
#panel-contracteB2B input[type="checkbox"],
#panel-contracteB2C input[type="checkbox"] {
width: 28px; height: 28px; min-height: 28px; accent-color: var(--accent); flex: 0 0 auto;
}
/* × de inchidere al ferestrelor (contract nou, detalii): avea 22x11 px */
#panel-contracteB2B dialog button:not(.btn),
#panel-contracteB2C dialog button:not(.btn) { min-width: 44px; min-height: 44px; font-size: 24px !important; }
#panel-contracteB2B label:has(> input[type="checkbox"]),
#panel-contracteB2C label:has(> input[type="checkbox"]) { min-height: 44px; align-items: center; }
/* bara de pastile „Sorteaza:" curge pe orizontala (componenta comuna): in panourile grupei
o lasam sa treaca pe randul urmator, ca sa nu ramana ultima pastila taiata la margine */
#panel-contracteB2B .sortare-bara,
#panel-contracteB2C .sortare-bara,
#panel-catalogBb .sortare-bara,
#panel-clientNou .sortare-bara,
#panel-vanzariMaspex .sortare-bara, #panel-obiectiveMaspex .sortare-bara,
#panel-auditMaspex .sortare-bara { flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 6px !important; }
/* butoanele si legaturile de descarcare de pe fiecare contract */
#panel-contracteB2B a.btn, #panel-contracteB2B button.btn, #panel-contracteB2B .btn.small,
#panel-contracteB2C a.btn, #panel-contracteB2C button.btn, #panel-contracteB2C .btn.small,
#panel-clientNou a.btn, #panel-clientNou button.btn, #panel-clientNou .btn.small {
min-height: 44px; padding: 10px 14px !important; font-size: 14px !important;
display: inline-flex; align-items: center; justify-content: center;
}
/* legaturile de descarcare stau cate una pe rand, ca sa nu se atinga cu degetul gresit */
#panel-contracteB2B a.btn, #panel-contracteB2C a.btn { flex: 1 1 100%; }
}
/* F2. Fereastra „Client nou" (cei 5 pasi) sta pe , nu in panoul meniului: campurile de
6 px padding aveau ~31 px. Acum au 44 px si litera de 16 px. */
@media (max-width: 768px) {
#cnOverlay input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#cnOverlay select,
#cnOverlay textarea {
min-height: 44px; padding: 8px 10px !important; font-size: 16px !important;
}
#cnOverlay input[type="file"] { min-height: 44px; font-size: 14px !important; }
#cnOverlay button, #cnOverlay .btn, #cnOverlay .btn.small {
min-height: 44px; padding: 10px 14px !important; font-size: 15px !important;
}
/* pasii 1 si 3 pun campurile cate doua-trei pe rand: pe telefon stau unul sub altul */
#cnOverlay div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
/* × de inchidere si × de pe fotografie raman rotunde, dar apasabile */
#cnOverlay #cnFotoPreview button { width: 44px !important; height: 44px !important; font-size: 20px !important; }
}
/* F3. Maspex — Vanzari, Obiective DN, Audit SKU: selectoarele de luna/gama/agent/nivel aveau
27 px, butonul „Import" 23 px, fisierul de import 36 px. */
@media (max-width: 768px) {
#panel-vanzariMaspex select, #panel-vanzariMaspex button, #panel-vanzariMaspex input,
#panel-obiectiveMaspex select, #panel-obiectiveMaspex button, #panel-obiectiveMaspex input,
#panel-auditMaspex select, #panel-auditMaspex button, #panel-auditMaspex input,
#panel-incentiveMaspex select, #panel-incentiveMaspex button {
min-height: 44px; padding: 8px 12px !important; font-size: 15px !important;
}
/* fiecare pereche eticheta + selector („Luna:", „Gama:", „Agent:", „Nivel:") pe randul ei:
eticheta cat ii trebuie, selectorul ia restul latimii, urmatoarea pereche trece mai jos */
#panel-vanzariMaspex div[style*="flex-wrap:wrap"] > label,
#panel-obiectiveMaspex div[style*="flex-wrap:wrap"] > label,
#panel-auditMaspex div[style*="flex-wrap:wrap"] > label { flex: 0 0 64px !important; margin-left: 0 !important; }
#panel-vanzariMaspex div[style*="flex-wrap:wrap"] > select,
#panel-obiectiveMaspex div[style*="flex-wrap:wrap"] > select,
#panel-auditMaspex div[style*="flex-wrap:wrap"] > select { flex: 1 1 calc(100% - 76px) !important; min-width: 0 !important; }
#panel-vanzariMaspex select, #panel-obiectiveMaspex select, #panel-auditMaspex select { flex: 1 1 auto; min-width: 120px; }
#panel-vanzariMaspex .sortare-pastila, #panel-obiectiveMaspex .sortare-pastila,
#panel-auditMaspex .sortare-pastila { min-height: 44px; padding: 8px 14px; font-size: 14px; }
/* eticheta „Luna:" / „Gama:" sta lipita de selectorul ei, nu pe un rand al ei */
#panel-auditMaspex label { align-self: center; margin-left: 0 !important; }
/* cifrele de sus (DRY / WET / RIO / TOTAL) stau cate doua pe rand, nu una sub alta */
#mspxSalesSummary > div, #mspxAuditSummary > div { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; }
}
/* F4. Catalog Maspex: 36 de pagini scanate una sub alta = 14,7 ecrane. Pe telefon devin un
index de rasfoit, cate trei pe rand; apasarea pe o pagina o deschide tot pe tot ecranul. */
@media (max-width: 768px) {
#mspxCatalogGrid > div { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
#mspxCatalogGrid > div > div > div { padding: 2px !important; font-size: 11px !important; }
#panel-catalogMaspex input, #panel-catalogMaspex button {
min-height: 44px; padding: 8px 12px !important; font-size: 15px !important;
}
#mspxCatalogViewToggle { min-height: 44px; padding: 8px 16px !important; font-size: 15px !important; }
/* imaginea marita: sagetile si × au 44 px */
#mspxCatalogOverlay button { min-width: 56px; min-height: 44px; }
#mspxCatalogOverlay > div[style*="top:12px"] { min-width: 44px; min-height: 44px; text-align: center; }
}
/* F5. Catalog Bergenbier: sute de produse cu poza de 280 px, unul sub altul = 100 ecrane.
Cautarea si filtrul de marca raman LIPITE sus (se cauta produsul, nu se deruleaza pana
la el), iar produsele stau cate doua pe rand, cu poza mica. Niciun produs nu se taie.
catalog.js deseneaza si catalogul Best Foods (meniul altei grupe), asa ca nu se atinge:
carligele de aici sunt identificatorii proprii ecranului Bergenbier (…-BB). */
@media (max-width: 768px) {
#catalogBbContent > div { padding: 8px !important; }
#catalogBbContent > div > h2 { font-size: 16px !important; margin: 0 0 2px !important; }
#catCifre-BB { font-size: 12px !important; margin-bottom: 6px !important; }
/* cautarea + marca, lipite sus */
#catalogBbContent div:has(> #catSearch-BB) {
position: sticky; top: 0; z-index: 5; margin: 0 0 8px !important;
padding: 6px 0 !important; background: var(--bg); gap: 6px !important;
}
#catSearch-BB { min-height: 44px; flex: 1 1 100% !important; min-width: 0 !important; padding: 10px 12px !important; }
#catBrand-BB { min-height: 44px; flex: 1 1 100% !important; min-width: 0 !important; padding: 10px 12px !important; }
#panel-catalogBb .sortare-pastila { min-height: 44px; padding: 8px 14px; font-size: 14px; }
#catSyncMentor-BB { min-height: 44px; padding: 10px 16px !important; font-size: 15px !important; }
/* casuta de pret (admin/spv) are latime proprie mare din nastere: fara min-width:0 ea
latea coloana cartonasului si grila iesea din ecran (masurat: 285 px pe coloana) */
#catalogBbContent input[type="number"] { min-height: 44px; font-size: 16px !important; padding: 8px 10px !important; min-width: 0 !important; width: 100% !important; }
#catalogBbContent .btn-pret-save { min-height: 44px; min-width: 52px; padding: 8px 12px !important; }
/* marca (h3) si grupul ei, strinse */
#catRezultate-BB > div { margin-bottom: 10px !important; }
#catRezultate-BB > div > h3 { font-size: 14px !important; margin: 8px 0 6px !important; padding-bottom: 4px !important; }
/* cartonasele: doua pe rand (minmax(0,…), altfel casuta de pret latea coloana) */
#catRezultate-BB > div > div:last-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; }
#catRezultate-BB > div > div:last-child > div { padding: 8px !important; border-radius: 8px !important; min-width: 0 !important; }
/* poza (sau chenarul gol) de la 280 px la 96 px */
#catRezultate-BB > div > div:last-child > div > div:first-child {
height: 96px !important; padding: 4px !important; margin-bottom: 6px !important; font-size: 34px !important;
}
#catRezultate-BB > div > div:last-child > div > div:first-child img { max-height: 86px !important; }
#catRezultate-BB > div > div:last-child > div > div:first-child > div { font-size: 11px !important; padding: 2px 6px !important; }
/* denumirea, codul si pretul */
#catRezultate-BB > div > div:last-child > div > div:nth-child(2) { font-size: 13px !important; margin-bottom: 2px !important; line-height: 1.25 !important; }
#catRezultate-BB > div > div:last-child > div > div:nth-child(3) { font-size: 11px !important; margin-bottom: 4px !important; }
/* codul produsului: la 13px ocupa doua randuri pe cartonasul ingust */
#catRezultate-BB > div > div:last-child > div > div:nth-child(3) code { font-size: 11px !important; padding: 2px 5px !important; }
#catRezultate-BB > div > div:last-child > div > div:last-child { padding-top: 6px !important; }
/* „Pret fara TVA (RON / sticla)" incape pe un rand, nu pe doua */
#catRezultate-BB > div > div:last-child > div > div:last-child > label {
font-size: 11px !important; margin-bottom: 2px !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#catRezultate-BB > div > div:last-child > div > div:last-child div[style*="font-size:24px"] { font-size: 15px !important; }
#catRezultate-BB > div > div:last-child > div > div:last-child div[style*="font-size:16px"] { font-size: 12px !important; }
/* casetele de stare (fara preturi / drepturile de admin) raman, dar scrise mic */
#catalogBbContent > div > div[style*="rgba(239,68,68"],
#catalogBbContent > div > div[style*="rgba(251,191,36"] { font-size: 12px !important; padding: 8px !important; margin-bottom: 8px !important; }
}
/* ──────────────── [G] Rapoarte + Admin + Masina mea ──────────────── */
/* Meniuri: raportZilnic, raportLunar, incarcareRapoarte, utilizatori, configurari,
problemeRaportate, activitateAgenti, masinaMea.
Masurat inainte (390x844): utilizatori 185 de targete sub 44 px si un tabel de 822 px;
incarcareRapoarte 2,54 ecrane; configurari 2,73 ecrane cu 3 fraze de explicatie;
activitateAgenti un tabel cu 373 de elemente iesite lateral; raportZilnic/raportLunar
tabele de 8 coloane stoarse la latimea ecranului. */
@media (max-width: 768px) {
/* G1. Tot ce se apasa are cel putin 44 px. Butoanele din tabele isi au stilul scris inline
(padding:3px 8px, font .73rem), iar `.btn`-urile primesc din styles.css padding mic pe
telefon — de aceea selectorul e pe panou si cu !important. */
:is(#panel-raportZilnic, #panel-raportLunar, #panel-incarcareRapoarte, #panel-utilizatori,
#panel-configurari, #panel-problemeRaportate, #panel-activitateAgenti, #panel-masinaMea)
:is(button, .btn, a.btn, select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) {
min-height:44px !important;
}
/* pastilele de sortare (sortare-tabel.js le da 32 px) si capetele de tabel apasabile */
:is(#panel-raportZilnic, #panel-raportLunar, #panel-utilizatori, #panel-problemeRaportate,
#panel-activitateAgenti) .sortare-pastila {
min-height:44px !important;
}
/* G2. Rapoartele (zilnic si lunar): tabelele isi iau latimea continutului si se deruleaza in
cutia lor — `width:100%` e scris inline pe tabel, deci trebuie batut cu !important.
Randurile de agent se apasa (deschid detaliul), deci si ele ajung la 44 px. */
#panel-raportZilnic .tel-derulare > table,
#panel-raportLunar .tel-derulare > table,
#panel-utilizatori .tel-derulare > table,
#panel-activitateAgenti .tel-derulare > table {
width:max-content !important; min-width:100%;
}
#dailyAgentHead > th, #dailyAgentBody > tr > td,
#monthlyAgentHead > th, #monthlyAgentBody > tr > td,
#monthlyMissingHead > th, #monthlyMissingBody > tr > td,
#usersTableHead > th, #usersTableBody > tr > td,
#actList .tel-derulare > table > thead > tr > th,
#actList .tel-derulare > table > tbody > tr > td {
height:44px;
}
/* sectiunea strinsa cu divizia si exportul: pe latimea ecranului, nu pe un rand ingust */
#rzFiltre.tel-deschis, #rlFiltre.tel-deschis, #uzFiltre.tel-deschis, #aaFiltre.tel-deschis {
flex-wrap:wrap; width:100%;
}
#rzFiltre > div, #rlFiltre > div { margin-left:0 !important; }
/* G3. Utilizatori: formularul de cont nou sta pe o singura coloana (grilele au
`grid-template-columns:1fr 1fr` scris inline). */
#panel-utilizatori .uf-rand { grid-template-columns:1fr !important; }
#panel-utilizatori #usersTableBody > tr > td { white-space:nowrap; }
/* G3b. Configurari: pe telefon sectiunile pornesc strinse, deci capul cardului e singurul
loc de apasat — masurat la 42 px, urcat la 44. */
#panel-configurari .cfg-cap { min-height:44px !important; }
/* G4. Activitate Agenti: o singura derulare, nu doua una in alta — cutia listei (max-height
scrisa inline) lasa locul cutiei tabelului, care tine capul si data lipite. */
#actList { max-height:none !important; overflow:visible !important; }
#actList .tel-derulare { max-height:72vh; }
#actList .tel-derulare > table > tbody > tr > td:last-child { max-width:200px; }
}
/* ──────────────── [I] Reparatiile de la integrare ────────────────
Doua locuri gasite abia dupa ce toate grupele si-au terminat partea, in fisiere folosite de
cate doua grupe deodata (deci pe care nicio grupa nu avea voie sa le atinga singura). */
/* I1. „Monitorizare vizite", lista de exceptii: randul era trei coloane pe acelasi rand
(semn · nume pe 100 px · motiv). Pe 390 px motivului ii ramanea o fasie de ~180 px si
se rupea in 3-4 randuri langa un nume care ocupa unul singur — 34 de agenti insemnau
3,10 inaltimi de telefon. Acum motivul trece SUB nume, pe toata latimea. */
@media (max-width: 768px) {
#panel-monitorizare-vizite #exceptiiPanel > div > div { flex-wrap:wrap; row-gap:2px; }
#panel-monitorizare-vizite #exceptiiPanel > div > div > span:nth-child(2) { min-width:0; }
#panel-monitorizare-vizite #exceptiiPanel > div > div:not(:first-child) > span:last-child {
/* motivul e scris cu style="flex:1" chiar in element, deci are nevoie de !important */
flex:1 0 100% !important; margin-left:26px; line-height:1.3;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════════
9. LIZIBILITATE SI LATIME PE TELEFON (20.09.2026)
Reclamatia lui Stefan dupa punerea in productie a lucrarii de mai sus, in aceeasi zi:
„ai facut meniurile mai inguste decat ecranul telefonului", „ai lasat un font fff mic
in toate meniurile", „nu mai pot selecta divizia".
Masurat live pe productie, in iframe 390x844, pe contul lui (admin), meniul Obiective:
- 552 elemente la 12 px, 100 la 12,48 px, 27 la 11,52 px, 12 la 10,4 px — fata de
doar 25 la 16 px. Aplicatia scrie ~2500 de font-size inline, aproape toate in rem
intre .65 si .85 — cu baza de 16 px toate cad sub pragul de citit pe telefon;
- continutul util masura 346 px din 384: .tab-panel tinea 16 px de margine pe fiecare
parte, peste care cardurile mai puneau 10 px.
Reparatia are trei piese. Baza rem urcata la 19 px ridica dintr-o data toate fonturile
scrise in rem (.72rem trece de la 11,5 la 13,7 px) fara sa atingem cele ~2500 de locuri
din JS; marginile .tab-panel scad la 8 px; fonturile scrise in px fix, care nu cresc cu
baza rem, se urca punctual. Dupa reparatie, in acelasi iframe: elementele sub 13 px din
Obiective au scazut de la ~690 la 12, continutul a urcat la 362 px, iar pe cele 10
meniuri probate (vizite, incasari, comenzi, salesAll, rute, sarcini, targeteAgent,
ranking, planSaptamanal, obiective) nu apare scroll orizontal de pagina si niciun
element nu iese din ecran fara un parinte care deruleaza.
═══════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* 9a. Baza rem — piesa care ridica tot textul scris in rem, dintr-un singur loc. */
html { font-size: 19px; }
/* 9b. Meniurile pe toata latimea ecranului: 8 px de margine in loc de 16. */
.tab-panel { padding-left: 8px !important; padding-right: 8px !important; }
/* 9c. Bara de sus: divizia se vede din nou, iar titlul meniului primeste restul latimii.
„◀ Meniu" ramane doar sageata (butonul isi pastreaza cei 40 px de atins), ca sa
incapa si comutatorul de divizie fara ca bara sa se rupa pe doua randuri. */
.topbar #divisionSelector { display:inline-flex !important; align-items:center; flex:0 0 auto; }
.topbar #divisionSelector select { min-height:40px; font-size:14px; padding:2px 4px; max-width:72px; }
.topbar #backBtn { font-size:0 !important; padding:0 !important; width:40px; min-width:40px; }
.topbar #backBtn::before { content:"\25C0"; font-size:15px; }
.topbar .tab-dropdown-btn {
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
overflow-wrap:normal !important; font-size:14px !important;
}
/* 9d. Fonturile scrise in px fix nu cresc cu baza rem. Cardurile de client din Comenzi
(.cs-*) lasau 179 din 260 de texte sub 13 px si dupa ridicarea bazei. */
.cs-pastila, .cs-lei { font-size:13px; }
.cs-sub, .cs-cip-s { font-size:13px; }
.cs-nume, .cs-cip-t { font-size:16px; }
.cs-nota, .cs-titlu { font-size:14px; }
}