/* ═══════════════════════════════════════════════════════════════════════════════════
   MENIURILE PE TELEFON (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 (MODULE_HELP din modules.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.

   Piesele comune sunt mai jos; fiecare grup de meniuri are sectiunea lui, mai jos in fisier.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* 0a. Antetul pe telefon: un singur rand [◀ Meniu][TITLUL MENIULUI ▾][🔔][🚨][⋯] (inainte: trei
       randuri, 135 px din 844). Sigla nu se mai vede in meniuri (e pe pagina principala), cautarea
       de meniu sta in lista care se deschide din titlu (.tab-cauta-in-lista), iar numele contului,
       Traseu si Propuneri stau in „⋯". Pe ecranul mare antetul arata ca inainte. */
@media (max-width: 768px) {
  .topbar { gap:6px; padding:6px 8px; }
  .topbar h1, .topbar #tabSearch, .topbar #userDisplay { display:none; }
  .topbar .back-to-menu-btn { min-height:40px; padding:.5rem .7rem !important; }
  .topbar .tab-dropdown-wrap { flex:1 1 0; min-width:0; justify-content:stretch; }
  .topbar .tab-dropdown-btn {
    width:100%; min-width:0; min-height:40px; padding:.3rem .5rem !important;
    font-size:.78rem; line-height:1.15; letter-spacing:.2px; white-space:normal; overflow-wrap:anywhere;
  }
  #btnNotif, #btnAlerts, #btnTopbarMore { min-width:40px; min-height:40px; }
  .tab-dropdown-menu {
    position:fixed; left:8px; right:8px; top:calc(var(--topbar-h, 52px) + 4px); transform:none;
    min-width:0; max-height:calc(100vh - var(--topbar-h, 52px) - 16px);
  }
  .tab-cauta-in-lista {
    width:calc(100% - 16px); margin:8px; padding:10px 12px; font-size:15px;
    border:1px solid var(--border); border-radius:8px; background:var(--bg2); color:inherit;
  }
  .tt-cont {
    padding:2px 6px 8px; border-bottom:1px solid var(--border);
    color:var(--text2); font-size:13px; font-weight:600; overflow-wrap:anywhere;
  }
}

/* 0b. Harta sta doar in meniurile care deseneaza pe ea (TABURI_CU_HARTA din app.js; decizia Stefan
       19.09.2026). Acolo, pe telefon, harta ia 40% si lista 60%; „Arată Harta" e un buton mic, nu o
       banda rosie; pe harta mare apare „Înapoi la listă". */
.tel-inapoi-lista { display:none; }
@media (max-width: 768px) {
  .map-container { height:40%; }
  .sidebar { height:60%; }
  #mobileSidebarClose { padding:6px 12px 0; }
  #btnCloseSidebar {
    min-height:40px; padding:8px 12px; font-size:13px; font-weight:700;
    background:var(--card2) !important; color:var(--text) !important; border:1px solid var(--border) !important;
  }
  .app-body.lista-ascunsa .tel-inapoi-lista {
    display:flex; align-items:center; justify-content:center; gap:6px;
    position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:1000;
    min-height:44px; padding:10px 18px; border:none; border-radius:22px;
    background:var(--accent); color:#fff; font-size:14px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.45);
  }
}

/* 0c. Fereastra de ajutor „?" — aici stau acum explicatiile meniurilor. Pe telefon: fereastra ia
       aproape tot ecranul, antetul cu X ramane sus la derulare, X-ul are 44 px, textul 14.5 px, iar
       derularea ajunsa la capat nu mai trece in pagina de dedesubt. Antetul lipit merge pe orice ecran
       (si pe ecranul mare, la un ajutor lung, X-ul pleca la derulare). */
.help-box-header { position:sticky; top:0; z-index:1; background:var(--card); border-radius:12px 12px 0 0; }
@media (max-width: 768px) {
  .help-overlay { padding:8px; }
  .help-box { max-height:92vh; max-height:92dvh; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .help-box-header { padding:6px 6px 6px 16px; }
  .help-box-header h3 { font-size:16px; line-height:1.3; }
  /* !important: regula de telefon din style.css (button {min-height:36px !important}) l-ar tine la 36 px */
  .btn-help-close { min-width:44px; min-height:44px !important; display:flex; align-items:center; justify-content:center; font-size:28px; }
  .help-box-body { padding:12px 16px 18px; font-size:14.5px; line-height:1.55; }
}

/* 0d. Bara de alarma a lead-urilor (managerii SIS, conducerea, adminul). Alarma ramane cum a decis
       Stefan (aprinsa, doar minimizare); pe telefon ocupa cel mult o treime din ecran (inainte:
       400-450 px din 844, in fiecare meniu), se deruleaza in ea, iar randurile se rup in loc sa
       iasa din ecran („minimizează" si „vezi" erau taiate pe dreapta).
       F01 (audit Codex 24.09.2026): si pe calculator bara are o limita — dupa „arată toate" (30 de
       puncte) crestea la 1.118 px pe un ecran de 900, iar ultimele puncte nu se mai vedeau. Regula
       de telefon vine dupa ea si castiga pe ecranul ingust. */
#leadAlarmBar { max-height:40vh; max-height:40dvh; overflow-y:auto; overscroll-behavior:contain; }
@media (max-width: 768px) {
  #leadAlarmBar { max-height:32vh; max-height:32dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  #leadAlarmBar > div { flex-wrap:wrap; row-gap:4px; }
}

/* 0e. „Mașina mea": butonul „?" al ecranului sta sus, pe un rand al lui, si e acolo in orice stare
       (se incarca, eroare, fara masina). Pe telefon are tinta de deget; pe ecranul mare ramane cat celelalte „?". */
.mm-antet { display:flex; justify-content:flex-end; margin:0 0 6px; }
@media (max-width: 768px) {
  /* !important: regula de telefon din style.css (.btn-help {width:36px;height:36px}) l-ar tine la 36 px */
  .mm-ajutor { min-width:44px; min-height:44px !important; width:44px; height:44px; font-size:18px; }
}

/* 1. Sectiune strinsa pe telefon, deschisa la atingere.
      <button type="button" class="tel-comuta" data-comuta="ID">⚙️ Filtre</button>
      <div id="ID" class="tel-pliat"> ... </div>
      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 <td>.
      <table class="tel-carduri"> ... <td class="tel-titlu">Nume client</td>
      <td data-eticheta="Sold" class="num">1.234,00</td> ... <td class="tel-ascuns">cod</td> */
@media (max-width: 768px) {
  table.tel-carduri, table.tel-carduri > tbody, table.tel-carduri > tbody > tr, table.tel-carduri > tbody > tr > td { display:block; width:100%; }
  table.tel-carduri > thead { display:none; }
  table.tel-carduri > tbody > tr {
    margin:0 0 8px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card);
  }
  table.tel-carduri > tbody > tr > td {
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    padding:3px 0; border:none; text-align:right; white-space:normal; overflow:visible; min-width:0;
  }
  table.tel-carduri > tbody > tr > td::before {
    content:attr(data-eticheta); flex:0 0 auto; max-width:55%;
    color:var(--text2); font-size:12px; font-weight:600; text-align:left;
  }
  table.tel-carduri > tbody > tr > td:not([data-eticheta])::before { content:none; }
  table.tel-carduri > tbody > tr > td.tel-titlu { justify-content:flex-start; text-align:left; font-size:15px; font-weight:700; overflow-wrap:anywhere; }
  table.tel-carduri > tbody > tr > td.tel-ascuns { display:none; }
  table.tel-carduri > tfoot, table.tel-carduri > tfoot > tr, table.tel-carduri > tfoot > tr > td { display:block; width:100%; }
}

/* 3. Tabel lat care ramane tabel (rapoarte cu multe coloane de cifre): se deruleaza in cutia lui,
      capul si prima coloana stau lipite. <div class="tel-derulare"><table>...</table></div> */
.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 proba (in locul casetelor galbene cu fraze lungi). Explicatia intreaga
      sta in „?". <span class="tel-proba">🧪 Probă — nu pleacă în Mentor</span> */
.tel-proba {
  display:inline-flex; align-items:center; gap:6px; margin:4px 0 8px; padding:4px 10px;
  border:1px dashed rgba(245,196,81,.65); border-radius:999px; background:rgba(245,196,81,.10);
  color:#f5c451; 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; }


/* ═══════════════════════════════════════════════════════════════════════════════════
   SECTIUNILE GRUPELOR DE MENIURI. Fiecare lucrare scrie DOAR in sectiunea ei.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ──────────────── [A] La client (Vizite, Vanzare, Incasare, Amanunt, Audit, Competitie, Promotii, Census) ──────────────── */

/* A1. Census Clienti Iasi + Vizite (listele de clienti de sub harta). Pe telefon tot ce se apasa are cel
       putin 44 px: butoanele din cartonase, antetul listei, filtrele, cautarea, capetele pliabile, randurile
       de bife. Blocul de telefon din style.css (r0902) pune `button { min-height:36px !important }`, deci
       si aici e nevoie de !important, pe un selector mai precis (panoul), ca sa ajunga la 44. */
@media (max-width: 768px) {
  :is([data-panel="censusUrsus"], [data-panel="vizite"]) :is(button, select, input[type="text"], input[type="search"], summary, .fcb-item, label:has(input[type="checkbox"])) { min-height:44px !important; }
  :is([data-panel="censusUrsus"], [data-panel="vizite"]) .btn-help { width:44px; height:44px; }
  /* eticheta din randul unei bife (legata de bifa prin for/id) ia inaltimea randului; randul pierde
     marginea de 4 px sus/jos, ca tot randul sa fie eticheta (44 px, nu 52 cu o fasie moarta) */
  :is([data-panel="censusUrsus"], [data-panel="vizite"]) .fcb-item label { line-height:44px; }
  :is([data-panel="censusUrsus"], [data-panel="vizite"]) .filter-checkbox-group .fcb-item { padding-top:0; padding-bottom:0; }
  /* bifa de selectie din cartonas: coloana din stanga, pe toata inaltimea cartonasului */
  :is([data-panel="censusUrsus"], [data-panel="vizite"]) .client-card .cc-check-wrap { width:44px; }
  :is([data-panel="censusUrsus"], [data-panel="vizite"]) .client-card.has-check { padding-left:48px; }
}

/* A2. Vanzare + Vanzare cu amanuntul (public/vanzare.js). Formular de lucru: campurile si butonul de
       trimitere raman la vedere; „?" si selectorul de agent al adminului ajung la 44 px, iar „Documentele zilei" (table.tel-carduri
       telA-docs) devine cartonase: numarul documentului sta deasupra felului lui, randurile fara linii
       (stilul inline al celulelor de pe ecranul mare se bate aici cu !important). */
@media (max-width: 768px) {
  :is([data-panel="vanzareAmanunt"], [data-panel="vanzare"]) .btn-help { width:44px; height:44px; }
  :is([data-panel="vanzareAmanunt"], [data-panel="vanzare"]) select.input { min-height:44px !important; }
  table.tel-carduri.telA-docs > tbody > tr > td.tel-titlu { flex-direction:column; align-items:flex-start; gap:2px; white-space:normal !important; }
  table.tel-carduri.telA-docs > tbody > tr > td { padding:3px 0 !important; border-bottom:none !important; }
  table.telA-docs button { min-height:44px !important; min-width:44px; }
}

/* A3. Vanzare + Incasare (public/vanzare.js, public/incasare.js — incasarea e montata si in cardul rosu
       al Vanzarii). Tot ce se apasa sau se completeaza ajunge la 44 px pe telefon: „‹ Alt client", filtrele
       de clasa, codul de bare, cautarea, cantitatea si discountul din cos, punctul de lucru, suma, butoanele
       de emitere si cele care deschid o sectiune strinsa. Bifele au regula lor (randul lor). */
@media (max-width: 768px) {
  :is([data-panel="vanzare"], [data-panel="incasare"]) :is(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
  [data-panel="incasare"] .btn-help { width:44px; height:44px; }
}

/* A4. Incasare: bifa de pe fiecare factura (26 px) sta intr-o eticheta (label.telA-bifa, public/incasare.js).
       Pe telefon eticheta e un patrat de 44 px; marginile negative o intind peste spatiul din jur, ca bifa
       sa stea exact unde era (randul nu creste). Atingerea oriunde in patrat bifeaza (nativ). Regula r0902
       din style.css `label:has(input[type="checkbox"]) { min-height:36px !important }` se bate cu un
       selector mai precis (.inc-fact > label...) si !important. */
.telA-bifa { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; }
@media (max-width: 768px) {
  .inc-fact > label.telA-bifa { min-width:44px; min-height:44px !important; margin:0 -9px; }
}

/* A5. Promotii (public/modules.js, renderPromotions): descrierea campaniei sta sub „📄 Descrierea campaniei"
       (piesa comuna tel-comuta). Tot ce se apasa ajunge la 44 px: „➕ Promoție Nouă", stergerea, activarea. */
@media (max-width: 768px) {
  [data-panel="promotii"] :is(button, .btn, .btn-sm, .btn-icon) { min-height:44px !important; min-width:44px; }
  [data-panel="promotii"] .btn-help { width:44px; height:44px; }
}

/* A6. Audit JTI si Competitie — Rapoarte: subtitlul auditului („Min. 4 audituri/lună") sta in „?".
       Tot ce se apasa ajunge la 44 px: butoanele, cautarea, selectoarele, poza raftului, bifele SKU-urilor. */
@media (max-width: 768px) {
  [data-panel="audit"] :is(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height:44px !important; }
  [data-panel="audit"] .audit-sku-item input[type="checkbox"] { width:44px; height:44px; }
  [data-panel="audit"] .audit-sku-item { min-height:48px; }
  [data-panel="audit"] .btn-help { width:44px; height:44px; }
  [data-panel="compRaport"] :is(button, select) { min-height:44px !important; }
  [data-panel="compRaport"] .btn-help { width:44px; height:44px; }
}



/* ──────────────── [A] sfarsit ──────────────── */




/* ──────────────── [B] La magazin SIS + Masina si marfa ──────────────── */

/* B1. SIS Competitie (sisComp). Pe cartonas, actiunile rare stau in „⋯ Mai mult"
       (<div class="tel-pliat telB-rand">). Pe ecranul mare sectiunea nu rupe randul de butoane:
       copiii ei curg in acelasi rand flex cu celelalte, deci cartonasul arata ca inainte. */
.telB-rand { display:contents; }
@media (max-width: 768px) {
  /* 44 px la tot ce se apasa in meniu; regula globala din style.css (36 px) are !important */
  [data-panel="sisComp"] .cc-actions button,
  [data-panel="sisComp"] .list-header .btn,
  [data-panel="sisComp"] .filter-actions .btn,
  [data-panel="sisComp"] .select-bar button { min-height:44px !important; padding:8px 12px; font-size:13px; }
  /* „📍 Găsește SIS Competiție în apropiere" (singurul .btn direct in sectiune) */
  [data-panel="sisComp"] .panel-section > .btn { min-height:44px !important; }
  [data-panel="sisComp"] .cc-actions .tel-comuta-mic { margin:0; }
  [data-panel="sisComp"] .list-header { flex-wrap:wrap; gap:6px; }
  #siscNearbyRadius { min-height:44px !important; min-width:88px; font-size:14px !important; }
  [data-panel="sisComp"] .client-card.has-check { padding-left:50px; }
  [data-panel="sisComp"] .client-card .cc-check-wrap { width:44px; }
  [data-panel="sisComp"] .client-list label:has(input[type="checkbox"]) { min-height:44px !important; font-size:13px !important; }
}

/* B2. Stoc SIS-uri (stocSisuri). Pe telefon randul magazinului se asaza pe verticala (numele,
       detaliile, starea): inainte starea statea pe un rand in dreapta si strivea numele. */
#stocSisuriContent label + .tel-proba { margin-left:8px; }
@media (max-width: 768px) {
  .telB-ss-rand { flex-direction:column; align-items:stretch !important; gap:4px !important; }
  .telB-ss-stare { white-space:normal !important; text-align:left !important; }
  #stocSisuriAgent { min-height:44px !important; font-size:14px; }
}

/* B3. Retur Magazin (returMagazin). Randul de articol tine −, cantitatea si + pe un singur rand
       (inainte plusul cadea sub caseta si fiecare articol lua doua randuri); liniile unui retur
       sunt cartonase (tel-carduri); bara de perioada sta sub „📅 Perioada". Stilurile puse in JS
       (padding, latimea casetei) se bat cu !important. */
#returMagazinContent label + .tel-proba { margin-left:8px; }
@media (max-width: 768px) {
  #returMagazinContent .input { min-height:44px !important; }
  .telB-rm-art th, .telB-rm-art td { padding-left:4px !important; padding-right:4px !important; }
  .telB-rm-pas { white-space:nowrap; }
  .telB-rm-btn { min-height:44px !important; min-width:44px; font-size:18px !important; }
  /* style.css da input[type="number"] min-height 36px !important, cu specificitate (0,1,1): aici trebuie mai mult */
  .telB-rm-art input.telB-rm-cant { min-height:44px !important; width:58px !important; font-size:16px; }
  .telB-rm-confirma { min-height:44px !important; width:100%; }
  .telB-rm-ridica { min-height:44px !important; }
}

/* B4. Propune magazin SIS (inrolareSis). Propunerile sunt cartonase (tel-carduri); in randul
       Semafor, eticheta ramane in stanga, culoarea si „🔍 Analiza" in dreapta, iar analiza
       deschisa ia tot randul de dedesubt. Casetele, rezultatele cautarii si trimiterea au 44 px. */
@media (max-width: 768px) {
  /* style.css da input.input:not(...):not(...) min-height 36px !important, cu specificitate (0,3,1): aici e nevoie de id */
  #inrolareSisContent .input { min-height:44px !important; }
  .telB-is-rez { min-height:44px; display:flex; align-items:center; }
  .telB-is-trimite { min-height:44px !important; width:100%; }
  /* randul cartonasului e flex cu space-between (piesa comuna 2), de aceea selectorul mai lung */
  .telB-is-sem { flex-wrap:wrap; }
  table.tel-carduri td.telB-is-sem { justify-content:flex-end; }
  table.tel-carduri td.telB-is-sem::before { margin-right:auto; }
  .telB-is-sem > .tel-pliat { flex-basis:100%; text-align:left; }
  #inrolareSisContent .telB-is-analiza { min-height:44px !important; margin:0; }
}

/* B5. Inchei Ziua (incheiZiua). Casetele Z-ului si butonul de salvare iau tot randul, cu 44 px
       (inainte 36 px, de latimi diferite, una sub alta); selectorul adminului are 44 px; documentele
       esuate si nelamurite sunt cartonase (tel-carduri), iar eroarea sta sub eticheta ei. */
#incheiZiuaContent label + .tel-proba { margin-left:8px; }
@media (max-width: 768px) {
  /* style.css da input.input:not(...):not(...) min-height 36px !important, cu specificitate (0,3,1): aici e nevoie de id */
  #incheiZiuaContent .input { min-height:44px !important; }
  /* latimea casetelor e pusa in JS (220 / 160 px), de aceea !important */
  #incheiZiuaContent .telB-iz-z > * { flex:1 1 100%; width:100% !important; min-height:44px !important; }
  table.tel-carduri td.telB-iz-err { display:block; text-align:left; }
  table.tel-carduri td.telB-iz-err::before { display:block; max-width:none; margin-bottom:2px; }
}

/* B6. Incarca Marfa (incarcaMarfa). Propunerea e un cartonas pe articol (tel-carduri + telB-im-prop):
       numele sus (clasa in dreapta), cele trei cifre pe un rand, apoi −, cantitatea si + pe tot
       randul; inainte tabelul avea 520 px si coloana „Cer" statea dincolo de marginea ecranului.
       Randul de motiv (peste propunere) sta lipit sub cartonasul lui. Liniile cererilor sunt
       cartonase; perioada sta sub „📅 Perioada". Stilurile puse in JS se bat cu !important. */
#incarcaMarfaContent label + .tel-proba { margin-left:8px; }
@media (max-width: 768px) {
  /* style.css da 36 px !important pe button / input / select (input.input cu specificitate (0,3,1)): aici e nevoie de id */
  #incarcaMarfaContent button, #incarcaMarfaContent input, #incarcaMarfaContent select { min-height:44px !important; }
  #imCautaArticol { width:100% !important; }
  .telB-im-trimite { width:100%; }
  /* celulele au padding si chenar puse in JS (S.td / S.tdR) */
  #incarcaMarfaContent table.tel-carduri > tbody > tr > td { padding:3px 0 !important; border:none !important; }
  table.tel-carduri.telB-im-prop > tbody > tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:10px; row-gap:6px; }
  table.tel-carduri.telB-im-prop > tbody > tr > td { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:2px; text-align:left !important; }
  table.tel-carduri.telB-im-prop > tbody > tr > td::before { max-width:none; }
  table.tel-carduri.telB-im-prop > tbody > tr > td.tel-titlu { grid-column:1 / 3; font-size:15px !important; }
  table.tel-carduri.telB-im-prop > tbody > tr > td.telB-im-clasa { align-items:flex-end; color:var(--text2) !important; font-size:12px !important; }
  table.tel-carduri.telB-im-prop > tbody > tr > td.telB-im-clasa::before { content:none; }
  table.tel-carduri.telB-im-prop > tbody > tr > td.telB-im-pas { grid-column:1 / -1; flex-direction:row; align-items:center; gap:8px; }
  table.tel-carduri.telB-im-prop > tbody > tr > td.telB-im-pas::before { margin-right:auto; }
  .telB-im-btn { min-width:44px; font-size:18px !important; }
  .telB-im-pas input { width:84px !important; font-size:16px; text-align:center !important; }
  /* randul de motiv: afisarea (ascuns / la vedere) o da JS-ul, inline */
  table.tel-carduri.telB-im-prop > tbody > tr.telB-im-motiv { display:block; margin:-9px 0 8px; border-top:none; border-radius:0 0 10px 10px; background:rgba(255,209,102,.14); }
  table.tel-carduri.telB-im-prop > tbody > tr.telB-im-motiv > td { display:block; background:none !important; }
}


/* B7. Lipsa in depozit (lipsuriDepozitSis). Pe telefon fiecare lipsa e un cartonas (tel-carduri +
       telB-ld): magazinul sus, apoi produsul, agentul (la manager), de cand lipseste si cele trei
       cifre; inainte tabelul avea 672 px si cifrele stateau dincolo de marginea ecranului. Capul de
       tabel (sortarea) nu se vede pe telefon, asa ca sortarea se alege din lista „Ordine". Pe
       calculator tabelul ramane cu capul si prima coloana lipite. Stilurile puse in JS se bat cu !important. */
.telB-ld-ordine { display:none; }
#lipsuriDepozitSisContent > .tel-proba { margin-top:10px; }
@media (max-width: 768px) {
  #lipsuriDepozitSisContent input, #lipsuriDepozitSisContent select { min-height:44px !important; }
  .telB-ld-ordine { display:block; width:100%; margin-top:8px; }
  /* cutia tabelului (S.cutie) avea derulare proprie de 70vh: cartonasele curg in pagina */
  .telB-ld-cutie { max-height:none !important; overflow:visible !important; border:none !important; }
  /* celulele au padding, chenar si prima coloana lipita puse in JS (S.td / S.prima) */
  #lipsuriDepozitSisContent table.tel-carduri > tbody > tr > td { position:static !important; padding:3px 0 !important; border:none !important; background:none !important; }
  #lipsuriDepozitSisContent table.tel-carduri > tbody > tr > td.tel-titlu { font-size:15px !important; }
}

/* B8. Inventarul masinii (inventarMasina, doar ecranul agentului). Fiecare articol e un cartonas
       (tel-carduri + telB-in): numele sus, „In aplicatie" si „Diferenta" pe un rand, apoi bifa
       „Corect" si caseta „Gasit"; totalul e un cartonas la final. Inainte tabelul statea intr-o
       cutie cu derulare proprie (60vh) si „Diferenta" iesea din ecran. Stilurile inline din JS
       (TD, TH, min-height 36/38 px) se bat cu !important. */
@media (max-width: 768px) {
  #inventarMasinaContent input[type=number], #inventarMasinaContent button { min-height:44px !important; }
  #inventarMasinaContent td label { min-height:44px !important; min-width:44px !important; }
  .telB-in-cutie { max-height:none !important; overflow:visible !important; border:none !important; }
  .telB-in-trimite { width:100%; }
  table.tel-carduri.telB-in > tbody > tr, table.tel-carduri.telB-in > tfoot > tr { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:12px; row-gap:4px; }
  table.tel-carduri.telB-in > tfoot > tr { border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--bg3); }
  table.tel-carduri.telB-in > tbody > tr > td, table.tel-carduri.telB-in > tfoot > tr > td {
    position:static !important; padding:3px 0 !important; border:none !important; background:none !important;
    display:flex; justify-content:space-between; align-items:center; gap:6px; text-align:left !important;
  }
  table.tel-carduri.telB-in > tfoot > tr > td[data-eticheta]::before { content:attr(data-eticheta); color:var(--text2); font-size:12px; font-weight:600; }
  table.tel-carduri.telB-in > tbody > tr > td.tel-titlu, table.tel-carduri.telB-in > tfoot > tr > td.tel-titlu { grid-column:1 / -1; display:block; font-size:15px; }
  table.tel-carduri.telB-in > tfoot > tr > td.tel-ascuns { display:none; }
  /* cifrele pe un rand (In aplicatie, Diferenta), ce completezi pe urmatorul (Corect, Gasit) */
  table.tel-carduri.telB-in > tbody > tr > td.im-dif { order:1; }
  table.tel-carduri.telB-in > tbody > tr > td:nth-child(3), table.tel-carduri.telB-in > tbody > tr > td:nth-child(4) { order:2; }
  .telB-in .im-gasit { width:96px !important; font-size:16px; }
}

/* B9. Stocul masinii (stocMasina). Tabelul de cifre (5 coloane, incape pe telefon) sta intr-o
       derulare cu capul lipit (tel-derulare); bannerul de proba e eticheta. Selectorul de agent
       (admin) are 44 px. */
@media (max-width: 768px) {
  #stocMasinaContent select { min-height:44px !important; }
}

/* ──────────────── [B] sfarsit ──────────────── */




/* ──────────────── [C] Clientii mei: bani si risc + Planul si anunturile ──────────────── */

/* C0. Antetul panoului pe UN rand (piesa grupei C; candidata la piesa comuna). Pe telefon
       .panel-header nu avea nicio regula: titlul statea pe un rand, iar „?" si butoanele de lucru
       cadeau dedesubt (~100 px), cu „?" de 36 px. Acum: [titlul, pe doua randuri daca trebuie][?][buton].
       <div class="panel-header telC-antet"><h3>..</h3><div class="panel-header-actions">..</div></div>
       (merge si pe un antet fara .panel-header: <div class="telC-antet"><h3>..</h3><button class="btn-help">)
       Inaltimea butoanelor: style.css are pe telefon `button { min-height:36px !important }`, deci
       44 px se scrie cu !important pe clasa. Pe ecranul mare nu se schimba nimic. */
@media (max-width: 768px) {
  .telC-antet { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; margin:0 0 8px; }
  .telC-antet > h3 { flex:1 1 auto; min-width:0; margin:0; font-size:16px; line-height:1.25; overflow-wrap:anywhere; }
  .telC-antet .panel-header-actions { flex:0 0 auto; max-width:72%; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
  .telC-antet .btn-help { width:44px; height:44px; min-height:44px !important; min-width:44px; font-size:18px; }
  .telC-antet .panel-header-actions .btn { min-height:44px !important; display:inline-flex; align-items:center; }
}

/* C1. Scadentar: lista de firme e data si ramane intreaga. Pe telefon cresc doar tintele mici din
       „Filtre birou" (randul care se deschide, bifa „Peste 1.000 de zile" — randul intreg e tinta —,
       selecturile si „Tabelul vechi"). */
@media (max-width: 768px) {
  #scfCauta, #scfSort { min-height:44px !important; }
  #scfBirou > summary { display:list-item; min-height:44px; padding:12px 0; }
  #scadFiltFoarteVechiWrap { min-height:44px !important; gap:8px !important; padding:0 6px; }
  #scadFiltFoarteVechi { width:22px; height:22px; }
  #scadentarFilters select { min-height:44px !important; }
  #scadentarFilters .btn { min-height:44px !important; }
}

/* C2. Clienti blocati: „Facturile (N)", butoanele de lucru („Cere deblocare", „Trimite cererea") si
       selectorul de agent al adminului au 44 px (min-height-ul piesei comune .tel-comuta e batut de
       `button { min-height:36px !important }` din style.css); in cartonasele istoricului celulele pierd
       chenarul si spatiul tabelului (stilul lor vine inline din credit-agent.js, de aceea !important). */
@media (max-width: 768px) {
  .tab-panel[data-panel="clientiBlocati"] .tel-comuta { min-height:44px !important; }
  .telC-buton { min-height:44px !important; }
  #clientiBlocatiContent select { min-height:44px !important; }
  #clientiBlocatiContent table.tel-carduri > tbody > tr > td { padding:3px 0 !important; border:none !important; }
}

/* C3. Sedinta de credite: tabelele biroului (promisiuni neonorate, detaliile managerului SIS,
       raportul lui Florin, raportul adminului) devin cartonase (tel-carduri). Piesa grupei C
       `telC-titlu-intai`: in cartonas titlul (clientul) urca primul, desi in tabel e a doua coloana
       (dupa semafor / agent). Campurile de lucru (telC-camp: observatia, statusul) stau sub eticheta,
       pe toata latimea, la 44 px si 16 px (sub 16 px telefonul mareste pagina la atingere). Stilurile
       celulelor vin inline din modules.js, de aceea !important. Fisele agentului (#sc_tabel_agent)
       raman cum erau; doar campurile lor primesc 44 px / 16 px, cum cerea deja sc_stil_agent, dar
       `select { min-height:36px !important }` din style.css ii batea statusul la 36 px. */
@media (max-width: 768px) {
  #sc_tabel_agent .sc-camp { min-height:44px !important; font-size:16px !important; }
  table.tel-carduri.telC-titlu-intai > tbody > tr { display:flex; flex-direction:column; }
  table.tel-carduri.telC-titlu-intai > tbody > tr > td.tel-titlu { order:-1; }
  #sedintaCrediteContainer table.tel-carduri > tbody > tr > td { padding:3px 0 !important; font-size:13px !important; }
  #sedintaCrediteContainer table.tel-carduri > tbody > tr > td.tel-titlu { font-size:15px !important; }
  #sedintaCrediteContainer table.tel-carduri > tbody > tr > td.telC-camp { display:block; text-align:left; }
  #sedintaCrediteContainer table.tel-carduri > tbody > tr > td.telC-camp::before { display:block; max-width:none; margin:0 0 4px; }
  #sedintaCrediteContainer td.telC-camp textarea, #sedintaCrediteContainer td.telC-camp select { width:100% !important; min-height:44px !important; box-sizing:border-box; font-size:16px !important; }
}

/* C4. Monitorizare Coface (tabloul, listele, fisa clientului; stilurile vin inline din
       coface-monitoring.js, de aceea !important). Tabloul: „?" nou si antetul pe un rand
       (telC-antet; titlul e un h2); cele 9 cartonase cu cifre stau cate 3 pe rand (telC-grila);
       numele firmelor din bannerul alertelor critice stau pe cel mult doua randuri (telC-scurt,
       piesa grupei C) — lista intreaga se deschide din banner, ca inainte. Listele devin cartonase
       (tel-carduri): clientul titlu, cu CUI-ul dedesubt (tinta de 44 px, deschide fisa); motivul
       pe toata latimea, fara randul „Motiv" deasupra — insigna de culoare sau textul alertei il
       explica singur (telC-bloc, piesa grupei C); bifa din listele biroului sta intr-o eticheta
       de 44 px (telC-bifa); cautarea sta pe un rand intreg. Fisa clientului: x-ul, randurile care
       se deschid si linkul au 44 px. */
@media (max-width: 768px) {
  #cofaceMonitoringContent > div { padding:12px !important; }
  #cofaceMonitoringContent .telC-antet { margin-bottom:12px !important; }
  #cofaceMonitoringContent .telC-antet > h2 { flex:1 1 auto; min-width:0; font-size:17px !important; line-height:1.25; overflow-wrap:anywhere; }
  #cofaceMonitoringContent button { min-height:44px !important; }
  #cofaceSearchInput { flex:1 1 100% !important; min-height:44px !important; font-size:16px !important; min-width:0 !important; }
  .telC-scurt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #cofaceMonitoringContent .telC-grila { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; }
  #cofaceMonitoringContent .telC-grila > div { padding:10px 8px !important; min-width:0; }
  #cofaceMonitoringContent .telC-grila > div > div:nth-child(1) { font-size:10px !important; letter-spacing:0 !important; overflow-wrap:anywhere; }
  #cofaceMonitoringContent .telC-grila > div > div:nth-child(2) { font-size:22px !important; margin:4px 0 2px !important; }
  #cofaceMonitoringContent .telC-grila > div > div:nth-child(3) { font-size:11px !important; line-height:1.25; }
  #cofaceMonitoringContent .telC-lista { background:none !important; border:none !important; }
  #cofaceMonitoringContent table.tel-carduri > tbody > tr > td { padding:3px 0 !important; }
  #cofaceMonitoringContent table.tel-carduri > tbody > tr > td.tel-titlu { display:block; min-height:44px; box-sizing:border-box; }
  table.tel-carduri > tbody > tr > td.telC-bloc { display:block; text-align:left; }
  table.tel-carduri > tbody > tr > td.telC-bloc::before { display:none; }
  .telC-bifa { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
  /* style.css pune pe telefon label:has(input[type="checkbox"]) { min-height:36px !important }
     (specificitate 0,1,2) si eticheta ramanea la 44x36: o bate doar o regula mai tare. */
  label.telC-bifa:has(> input[type]) { min-height:44px !important; }
  .telC-bifa > input { width:22px; height:22px; margin:0; }
  #cofaceMonitoringContent table.tel-carduri > tbody > tr > td:has(> .telC-bifa) { align-items:center; }
  #cofaceModalOverlay { padding:12px 8px !important; }
  #cofaceModalOverlay button { width:44px !important; height:44px !important; min-height:44px !important; }
  #cofaceModalOverlay summary { display:list-item; min-height:44px; padding:12px 0; box-sizing:border-box; }
  #cofaceModalOverlay a { display:inline-flex; align-items:center; min-height:44px; }
}

/* C5. Clienti inactivati ANAF: lista devine cartonase (tel-carduri, din app.js). Piesa grupei C
       `telC-sortare`: pe telefon antetul tabelului nu dispare, ci devine un rand de butoane de
       sortare (doar coloanele care sorteaza, cele cu onclick), ca sortarea pe coloana sa ramana si
       pe telefon. Randul de antet [titlu][?][Reincarca] si, dedesubt, cati clienti sunt. Filtrele
       (agent, cautare) au 44 px si litera de 16 px. */
@media (max-width: 768px) {
  .tab-panel[data-panel="anafInactivi"] .telC-antet { flex-wrap:wrap; }
  .tab-panel[data-panel="anafInactivi"] .telC-antet > h3 { flex-basis:0; }
  #anafInactiviCount { order:3; flex:1 1 100%; }
  .tab-panel[data-panel="anafInactivi"] .panel-filters select, .tab-panel[data-panel="anafInactivi"] .panel-filters input { min-height:44px !important; font-size:16px !important; }
  table.tel-carduri.telC-sortare > thead { display:block; margin:0 0 8px; }
  table.tel-carduri.telC-sortare > thead > tr { display:flex; flex-wrap:wrap; gap:6px; }
  table.tel-carduri.telC-sortare > thead th:not([onclick]) { display:none; }
  table.tel-carduri.telC-sortare > thead th[onclick] {
    display:inline-flex; align-items:center; min-height:44px; padding:0 12px; box-sizing:border-box;
    border:1px solid var(--border); border-radius:8px; background:var(--card); font-size:13px; white-space:nowrap;
  }
}

/* C6. Verificare CUI: lista era deja de cartonase (module-card). Antetul pe un rand (telC-antet),
       „Reia verificarea la ANAF" de 44 px (telC-buton, in modules.js); insignele (ANAF, GDPR) trec
       sub nume cand nu incap langa el; randul „cine a verificat si cand" la 12 px (nu avea marime si
       iesea mai mare decat restul cartonasului). */
@media (max-width: 768px) {
  #cuiList .mc-header { flex-wrap:wrap; justify-content:flex-start; gap:4px 8px; }
  #cuiList .mc-footer { font-size:12px; color:var(--text2); }
}

/* C7. Perioada stransa (Alerte client, Comunicare, Taskuri, Escaladari): selectorul de perioada
       (De la / Pana la / scurtaturile) lua trei randuri deasupra listei; implicit arata ultimele 30
       de zile si se schimba rar, deci pe telefon sta sub butonul „📅 Perioada" (tel-comuta, in
       index.html). Butonul si campurile au 44 px: style.css le tine la 36 (`button` si `input`
       cu !important), inclusiv min-height-ul piesei comune .tel-comuta. Datele la 16 px. */
@media (max-width: 768px) {
  .tab-panel[data-panel="alerteClient"] .tel-comuta, .tab-panel[data-panel="comunicare"] .tel-comuta, .tab-panel[data-panel="taskuri"] .tel-comuta, .tab-panel[data-panel="escaladari"] .tel-comuta { min-height:44px !important; }
  #alerteClientPerioada input, #alerteClientPerioada button, #comunicarePerioada input, #comunicarePerioada button, #taskuriPerioada input, #taskuriPerioada button, #escaladariPerioada input, #escaladariPerioada button { min-height:44px !important; }
  #alerteClientPerioada input, #comunicarePerioada input, #taskuriPerioada input, #escaladariPerioada input { font-size:16px !important; }
  /* cartonasele listelor (module-card): randul de jos („cine si cand") nu avea marime si iesea mai
     mare decat textul cartonasului; cosul (🗑️), „Rezolva" si filtrele de la Taskuri la 44 px */
  #announceList .mc-footer, #taskList .mc-footer, #escalationList .mc-footer, #alertList .mc-footer { font-size:12px; color:var(--text2); }
  #announceList .btn-icon, #taskList .btn-icon { min-width:44px; min-height:44px !important; }
  #taskList .mc-footer .btn, #escalationList .mc-footer .btn { min-height:44px !important; }
  #taskFilters select { min-height:44px !important; font-size:16px !important; }
}

/* C8. Risc financiar: antetul pe un rand (telC-antet); colapsabilul „Cum se calculeaza scorul de
       risc?" era dublura ajutorului si a iesit (cele 7 criterii stau in „?"); fraza despre incasari
       pe cel mult doua randuri (telC-scurt); cartonasele cu cifre cate 3 pe rand (telC-grila, in
       modules.js avea min-width 140-180 px inline). Lista (tabel de 11 coloane cu doua randuri de
       cap, intr-o cutie care taia pe dreapta) devine cartonase pe doua coloane, cu clientul titlu;
       atingerea cartonasului deschide detaliul, ca inainte. Capul tabelului (sortarea + filtrele
       Rest / % dep. ist. / Agent / Div) sta strans sub „⇅ Sortare și filtre" (tel-comuta, in
       modules.js); deschis, filtrele apar cu eticheta lor (data-eticheta pe th). Tintele la 44 px. */
@media (max-width: 768px) {
  .tab-panel[data-panel="riscFinanciar"] .tel-comuta { min-height:44px !important; margin:0 0 8px; }
  #riscFilters { padding:8px 0 !important; }
  #riscFilters select { flex:1 1 40%; min-width:0; }
  #riscList thead select, #riscFilters select, #riscFilters .btn { min-height:44px !important; font-size:16px !important; }
  #riscIncasariInfo { padding:4px 0 !important; }
  #riscSummary { padding:4px 0 !important; }
  #riscSummary .telC-grila { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; }
  #riscSummary .telC-grila > div { min-width:0 !important; padding:8px !important; overflow-wrap:anywhere; }
  #riscSummary .telC-grila > div:not([onclick]) { grid-column:1/-1; }
  /* suma totala (14.806.095,24 RON) nu incape pe o treime: ia doua coloane */
  #riscSummary .telC-grila > div:nth-child(4) { grid-column:span 2; }
  #riscList > div { max-height:none !important; overflow:visible !important; }
  #riscList thead > tr { position:static !important; }
  #riscList table.tel-carduri.telC-sortare > thead th:has(> select) { display:block; flex:1 1 40%; min-width:0; padding:0 !important; }
  #riscList table.tel-carduri.telC-sortare > thead th:has(> select)::before { content:attr(data-eticheta); display:block; font-size:12px; font-weight:600; color:var(--text2); text-align:left; margin:0 0 2px; }
  #riscList table.tel-carduri > tbody > tr:not([id]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; }
  #riscList table.tel-carduri > tbody > tr > td { padding:2px 0 !important; min-width:0; }
  #riscList table.tel-carduri > tbody > tr > td.tel-titlu { grid-column:1/-1; font-size:15px; }
  /* limita de credit are si procentul langa ea: pe jumatate de cartonas iesea pe dreapta */
  #riscList table.tel-carduri > tbody > tr:not([id]) > td:nth-child(7) { grid-column:1/-1; }
  /* adminul are ~1900 de clienti (422 de ecrane de cartonase): pe telefon se vad primii 50 (lista
     vine ordonata dupa scor, deci cei mai riscanti), restul la „Arata toti clientii (N)" */
  #riscList:not(.telC-toti) table.tel-carduri > tbody > tr:nth-child(n+101) { display:none !important; }
  #riscList.telC-toti .telC-toti-buton { display:none !important; }
  #riscList .telC-toti-buton { min-height:44px !important; width:100%; justify-content:center; margin:0 0 8px; }
  #riscList table.tel-carduri > tbody > tr > td.telC-bloc { grid-column:1/-1; padding:4px 0 !important; background:none !important; }
}

/* C9. Alerta facturare: „?" nou (telC-antet); pe telefon titlul ramane „Alerta Facturare" (restul
       titlului, telC-lung, e in „?"); cele sase cartonase cu cifre cate 3 pe rand (sumele pe doua
       coloane); clasamentul agentilor e inchis pe telefon (se deschide din rand) si e cartonase;
       lista (9 coloane) devine cartonase pe doua coloane, capul ei (sortare + agent) sta strans sub
       „⇅ Sortare și filtre", ca la Risc financiar. Tintele la 44 px. */
@media (max-width: 768px) {
  .tab-panel[data-panel="alertaFacturare"] .telC-lung { display:none; }
  #alertaFiltru, #alertaSummary, #alertaAgentRanking { padding-left:0 !important; padding-right:0 !important; }
  #alertaFiltru select { flex:1 1 100%; font-size:16px !important; }
  #alertaFiltru select, #alertaList thead select, #alertaAgentRanking summary, .tab-panel[data-panel="alertaFacturare"] .tel-comuta { min-height:44px !important; }
  #alertaAgentRanking summary { padding:12px 0 !important; box-sizing:border-box; }
  #alertaList thead select { font-size:16px !important; }
  .tab-panel[data-panel="alertaFacturare"] .tel-comuta { margin:0 0 8px; }
  #alertaSummary .telC-grila { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-auto-flow:dense; gap:8px !important; }
  #alertaSummary .telC-grila > div { min-width:0 !important; padding:8px !important; overflow-wrap:anywhere; }
  #alertaSummary .telC-grila > div:nth-child(4), #alertaSummary .telC-grila > div:nth-child(5) { grid-column:span 2; }
  #alertaList > div { max-height:none !important; overflow:visible !important; }
  #alertaList thead > tr { position:static !important; }
  #alertaList table.tel-carduri.telC-sortare > thead th:has(> select) { display:block; flex:1 1 100%; min-width:0; padding:0 !important; }
  #alertaList table.tel-carduri.telC-sortare > thead th:has(> select)::before { content:attr(data-eticheta); display:block; font-size:12px; font-weight:600; color:var(--text2); text-align:left; margin:0 0 2px; }
  #alertaList table.tel-carduri > tbody > tr:not([id]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; }
  #alertaList table.tel-carduri > tbody > tr > td, #alertaAgentRanking table.tel-carduri > tbody > tr > td { padding:2px 0 !important; min-width:0; }
  #alertaList table.tel-carduri > tbody > tr > td.tel-titlu { grid-column:1/-1; font-size:15px; }
  #alertaList table.tel-carduri > tbody > tr > td.telC-bloc { grid-column:1/-1; padding:4px 0 !important; background:none !important; }
  #alertaList td.telC-bloc > div { grid-template-columns:1fr !important; }
  #alertaAgentRanking table.tel-carduri > tbody > tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; }
  #alertaAgentRanking table.tel-carduri > tbody > tr > td.tel-titlu { grid-column:1/-1; }
  /* ~150 de alerte la birou (22 de ecrane): pe telefon primele 50 (CRITIC intai), restul la „Arata toti" */
  #alertaList:not(.telC-toti) table.tel-carduri > tbody > tr:nth-child(n+101) { display:none !important; }
  #alertaList.telC-toti .telC-toti-buton { display:none !important; }
  #alertaList .telC-toti-buton { min-height:44px !important; width:100%; justify-content:center; margin:0 0 8px; }
}

/* C10. Planul saptamanii: „?" nou (telC-antet, MODULE_HELP.planSaptamanal); subtitlul (telC-lung) si
       cele trei explicatii fixe (telC-explicatie, din plan-saptamanal.js) stau in „?". La
       „Angajamentele saptamanii" grila de doua coloane (minimuri 200 + 160 px, stil inline) iesea pe
       dreapta si „Rezultat asteptat" se vedea taiat: pe telefon angajamentul si rezultatul stau unul
       sub altul, fiecare pe toata latimea. Butoanele (◀ ▶, + activitate, FACUT/NEFACUT) si campurile
       au 44 px (stilul inline le tinea la 28-40), campurile au litera de 16 px. */
@media (max-width: 768px) {
  #planSaptamanalContent .telC-explicatie, .tab-panel[data-panel="planSaptamanal"] .telC-lung { display:none !important; }
  #planSaptamanalContent .telC-angajament { grid-template-columns:minmax(0,1fr) !important; }
  #planSaptamanalContent button, #planSaptamanalContent input, #planSaptamanalContent select { min-height:44px !important; }
  #planSaptamanalContent button { min-width:44px; }
  #planSaptamanalContent input, #planSaptamanalContent select, #planSaptamanalContent textarea { font-size:16px !important; }
}

/* C11. Activitate birou: „?" nou (telC-antet, MODULE_HELP.activitateBirou); fraza de sub titlu
       (telC-explicatie) sta in „?". Cele trei bife aveau 36 px (style.css), campurile si butoanele
       la fel: 44 px, litera de 16 px. Agregatul si istoricul devin cartonase (tel-carduri, din
       app.js): SPV-ul, respectiv data, e titlul; notele se vad intregi (in tabel erau taiate). */
@media (max-width: 768px) {
  .tab-panel[data-panel="activitateBirou"] .telC-explicatie { display:none !important; }
  #abForm label:has(> input[type="checkbox"]) { min-height:44px !important; }
  .tab-panel[data-panel="activitateBirou"] input, .tab-panel[data-panel="activitateBirou"] .btn { min-height:44px !important; }
  .tab-panel[data-panel="activitateBirou"] input, .tab-panel[data-panel="activitateBirou"] textarea { font-size:16px !important; }
  #abForm label:has(> input[type="checkbox"]) > input { min-height:0 !important; }
  #abList table.tel-carduri > tbody > tr > td { max-width:none !important; white-space:normal !important; overflow:visible !important; }
  #abList .telC-buton { min-width:44px; }
}

/* C12. Calendar: bara cu datele de vanzari (sase campuri, patru randuri deasupra titlului) sta
       stransa sub „ℹ️ Vânzări" (tel-comuta-mic in antet, langa „?"; pe ecranul mare bara ramane
       deschisa); antetul pe un rand (telC-antet). Filtrul de agent si sagetile lunii la 44 px. */
@media (max-width: 768px) {
  .tab-panel[data-panel="calendar"] .tel-comuta, #fCalAgent, #calMonthGrid .btn-icon { min-height:44px !important; }
  .tab-panel[data-panel="calendar"] .tel-comuta { margin:0; }
  #calMonthGrid .btn-icon { min-width:44px; }
  #fCalAgent { font-size:16px !important; }
  /* ziua aleasa: cautarea, filtrele UAT / localitate si butonul de intoarcere erau de 36 px */
  #calDayView input.filter-input, #calDayView select, #calDayView .btn-icon { min-height:44px !important; }
  #calDayView input.filter-input, #calDayView select { font-size:16px !important; }
}

/* C13. Fisa client (dialogul #fisaPartenerDialog): „?" nou langa „×" (MODULE_HELP.fisaClient); fraza
       „Fisa se face pe tot clientul" (telC-explicatie) sta in „?". „×", „?", „↻", „Descarca",
       „Inchide" si „Cere fisa" la 44 px; campurile la 44 px cu litera de 16 px (sub 16 px telefonul
       mareste pagina cand atingi campul). */
@media (max-width: 768px) {
  #fisaPartenerDialog .dialog-header { gap:8px; }
  #fisaPartenerDialog .dialog-header h3 { flex:1 1 auto; min-width:0; }
  #fisaPartenerDialog .dialog-close, #fisaPartenerDialog .btn-help { min-width:44px; min-height:44px !important; font-size:20px; }
  #fisaPartenerDialog .btn { min-height:44px !important; min-width:44px; }
  #fisaPartenerDialog .dialog-input { min-height:44px !important; font-size:16px !important; }
  #fisaPartenerDialog .telC-explicatie { display:none !important; }
  /* „Pana la" iesea pe dreapta din dialog: cele doua date impart randul, fara latime minima */
  #fisaPartenerDialog div:has(> #fpD1), #fisaPartenerDialog div:has(> #fpD2), #fpD1, #fpD2 { min-width:0; }
  #fpD1, #fpD2 { width:100%; box-sizing:border-box; padding-left:8px; padding-right:8px; }
}

/* ──────────────── [C] sfarsit ──────────────── */




/* ──────────────── [D] Rezultate ──────────────── */

/* D1. Butoanele si selectoarele de lucru din meniurile grupei au 44 px pe telefon (loc de deget).
       Clasa bate regula globala `button, select { min-height:36px !important }` din style.css
       (r0902 R7): acolo e selector de element, aici de clasa, amandoua cu !important. La casete
       de scris regula globala e `input:not([type])` / `input[type="text"]` (0,1,1), mai tare decat
       clasa singura, deci aici selectorul e mai lung (si fisierul se incarca dupa style.css). */
@media (max-width: 768px) {
  .telD-44, input.telD-44:not([type="checkbox"]):not([type="radio"]) { min-height:44px !important; }
}

/* D2. Programe producator — cartonasul POS al agentului (table.tel-carduri.telD-pos): la vedere
       ce se urmareste zilnic; clientul TIG, ruta, targetul propus, codul EBS si decontarea JTI
       (.telD-detaliu) apar dupa „Detalii" (telefon.js pune .tel-deschis pe randul numit in
       data-comuta). Spatiul si linia fiecarui rand vin din stilul scris in JS pentru tabelul de pe
       ecranul mare, deci aici trebuie !important ca sa nu umfle cartonasul.
       Universul adminului / managerilor (table.telD-univers, in .tel-derulare): butoanele unui POS
       stau pe un rand, altfel coloana se strange la latimea unui buton si randul creste la 150 px;
       progresul si bonusul (trei randuri scurte) au latimea lor, altfel se rup cuvant cu cuvant.
       Registrul programelor (telD-registru): numele programului sus pe cartonas.
       La „Mapări" (telD-ruta), numele rutei sta pe randul lui (latimea minima de 160 px vine din
       stilul scris in JS) si agentul + „Salvează" dedesubt, altfel butonul se taie la 390 px. */
@media (max-width: 768px) {
  table.telD-univers td > div { flex-wrap:nowrap !important; }
  table.telD-univers td[data-eticheta="Progres"], table.telD-univers td[data-eticheta="Bonus estimat"] { min-width:190px; }
  table.telD-pos > tbody > tr:not(.tel-deschis) .telD-detaliu { display:none !important; }
  table.telD-pos > tbody > tr > td { padding:4px 0 !important; border-bottom:none !important; }
  table.telD-pos > tbody > tr > td.tel-titlu { justify-content:space-between; align-items:center; gap:8px; }
  table.telD-pos > tbody > tr > td.tel-titlu .tel-comuta-mic { flex:0 0 auto; margin:0; }
  table.telD-pos > tbody > tr > td > div { min-width:0; }
  table.telD-registru > tbody > tr { display:flex; flex-direction:column; }
  table.telD-registru > tbody > tr > td.tel-titlu { order:-1; }
  .telD-ruta { flex-wrap:wrap; }
  .telD-ruta > div:first-child { flex:1 1 100%; min-width:0 !important; }
  .telD-ruta > select { flex:1 1 0; min-width:0; }
}

/* D3. Activitate Zilnica — cele patru cifre de sus (Zile, Scor mediu, Gold, Bronze) stau 2 x 2: pe
       patru coloane a patra iesea din ecran. Grila e scrisa in JS, deci !important. */
@media (max-width: 768px) {
  .telD-az-kpi { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; }
}

/* D4. Profitabilitate — tabelele (in .tel-derulare.telD-pa): capul se rupe pe doua randuri
       („Marja estimata / (RON)") si celulele au margini mai mici, ca tabelele de patru coloane
       (zonele, clasamentul) sa incapa intregi la 390 px, cu marja la vedere; cele mai late se trag
       lateral, cu prima coloana lipita. Stilul e scris in JS, deci !important. */
@media (max-width: 768px) {
  .telD-pa table th { white-space:normal !important; padding:6px 5px !important; }
  .telD-pa table td { padding:6px 5px !important; }
}

/* D5. Vanzari comparative JTI (#vcjCorp.telD-vcj): tabelele data-table au table-layout:fixed in
       style.css si isi impart latimea in coloane egale — pe telefon numele clientului se rupea pe
       patru randuri, iar agentul, insignele si capetele se taiau. Aici coloanele iau latimea
       continutului, capetele („din care factură") se pot rupe pe doua randuri (in JS sunt nowrap,
       deci !important), iar tabelul de clienti se trage lateral in .tel-derulare, cu capul si
       clientul lipite. Randul care deschide legenda (details) are 44 px. */
@media (max-width: 768px) {
  .telD-vcj table.data-table { table-layout:auto; }
  .telD-vcj table.data-table th { white-space:normal !important; }
  .telD-vcj summary { min-height:44px; padding:12px 0; box-sizing:border-box; }
}

/* D6. Obiective SMART — „Progres per Agent" (.smart-table-section.telD-smart): capetele sunt scrise
       in JS cu font 14 px si spatii mari, deci tabelul avea 425 px intr-un loc de ~334 si ultimele
       coloane ieseau din ecran. Pe telefon capetele si celulele se strang (stilul e scris in JS,
       deci !important), fara spatii laterale, iar litera scade putin sub 390 px (min cu vw) ca
       tabelul sa incapa si la 360. Randurile agentilor, care se ating ca sa deschizi detaliile,
       au 44 px. Randul de detaliu (colspan=10) ramane cu padding 0, ca in JS. */
@media (max-width: 768px) {
  .telD-smart #smartAgentTable { font-size:min(11px, 2.85vw); }
  .telD-smart #smartAgentTable th { font-size:min(11px, 2.85vw) !important; padding:6px 0 !important; }
  .telD-smart #smartAgentTable > tbody > tr > td { padding:4px 0 !important; font-size:min(11px, 2.85vw) !important; }
  .telD-smart #smartAgentTable > tbody > tr > td[colspan="10"] { padding:0 !important; }
  .telD-smart #smartAgentTable tr.smart-agent-row > td { height:44px; }
}

/* D7. Obiective — „Sell-Out Focus SKU" (table.telD-sku): fiecare rand se atinge ca sa deschizi
       lista de clienti a produsului; pe telefon randul are 44 px. */
@media (max-width: 768px) {
  .telD-sku > tbody > tr > td { height:44px; }
}

/* D8. Analiza SOM — „SOM per Agent" (table.telD-som): coloanele au latimi fixe in JS (SOM % = 12%)
       si pe telefon „100.0%" iesea „100....". Pe telefon coloanele iau latimea continutului. */
@media (max-width: 768px) {
  table.telD-som { table-layout:auto !important; }
}

/* D9. Vanzari competitie (.telD-vc): style.css rupe prima coloana oriunde (word-break:break-word,
       pentru numele lungi de articole), asa ca in „Pe luni" si „Fata de anul trecut" iesea
       „Med ia luna ra" / „TOTA L". Acolo prima coloana se rupe doar intre cuvinte; ca „Pe luni"
       (8 coloane) sa incapa si asa, celulele lui pierd inca un pixel de fiecare parte. */
@media (max-width: 768px) {
  .telD-vc .vc-luni td:first-child, .telD-vc .vc-anlaan td:first-child { word-break:normal; overflow-wrap:normal; }
  .telD-vc .vc-luni th, .telD-vc .vc-luni td { padding-left:1px; padding-right:1px; }
}

/* D10. Top Clienti — cartonasele (.telD-top-rez) au min-width 120-180 px scris in JS si cadeau pe
       trei randuri: pe telefon stau pe patru coloane (Gold, Silver, Bronze, Total clienti; dedesubt
       cantitatea pe trei coloane si lunile; grid dense le aseaza asa fara sa schimbe ordinea din
       HTML), avertismentul pe tot randul. Tabelul (table.telD-top, 12 coloane) se trage lateral in
       cutia lui: „Client" (a treia coloana) ramane lipit la stanga; randurile (se ating pentru
       detalii) si capetele de sortare au 44 px, pe un rand, deci randul de filtre (lipit sub cap,
       top:28px in JS) coboara la 44 px. Randul de detaliu (tr cu id) nu e atins. */
@media (max-width: 768px) {
  .telD-top-rez { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-flow:row dense; gap:6px !important; }
  .telD-top-rez > div { min-width:0 !important; padding:8px !important; }
  .telD-top-rez > .telD-top-cant { grid-column:span 3; }
  .telD-top-rez > .telD-top-avert { grid-column:1 / -1; }
  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:1; background:var(--card); min-width:130px; }
  table.telD-top > thead > tr:first-child > th:nth-child(3) { z-index:4; background:var(--bg2); }
  table.telD-top > tbody > tr:not([id]) > td { height:44px; }
  table.telD-top > thead > tr:first-child > th { height:44px; white-space:nowrap; }
  table.telD-top > thead > tr:nth-child(2) { top:44px !important; }
}

/* D11. Performanta targete — capetele de sortare din lista (.telD-perf-cap: Agent / RON / BAX /
       Clienti) sunt text de 12 px; pe telefon fiecare are 44 x 44 px, ca sa se nimereasca.
       „Upload Targete" e o eticheta (label) cu 44 px: textul se aseaza la mijloc. Ascunderea lui
       (style.display='none' din JS, pentru ne-admini) bate regula de aici. */
@media (max-width: 768px) {
  .telD-perf-cap { align-items:center; }
  .telD-perf-cap span[onclick] { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 4px; box-sizing:border-box; }
  label#btnUploadTargete { display:inline-flex; align-items:center; }
}

/* D12. Rapoarte (#reportContent.telD-rap): la SIS Quatro „Total RON" (7 cifre, 22 px) se taia in
       cartonasul de o treime de ecran — pe telefon cifra scade cu latimea ecranului (18,7 px la
       390, 17,3 la 360). Tabelele SIS Quatro si General au latimi fixe pe coloane (colgroup,
       table-layout:fixed in style.css) si inghesuiau RON-ul: aici iau latimea continutului.
       Cifra din „Real." (deschide lista clientilor) are 44 px in loc de 36. */
@media (max-width: 768px) {
  .telD-rap .report-kpi-value { font-size:min(22px, 4.8vw); }
  .telD-rap table.report-table { table-layout:auto !important; }
  .telD-rap .client-link { min-height:44px; line-height:44px; min-width:44px; }
}

/* ──────────────── [D] sfarsit ──────────────── */




/* ──────────────── [E] SIS birou + Controlul echipei + Administrare ──────────────── */
/* E0. Targetele de atingere in meniurile grupei E: pe telefon tot ce se apasa are cel putin 44 px.
       Blocul de telefon din style.css (r0902) da 36 px cu !important pe `button`; selectorul de
       panou de aici e mai specific, deci il bate. "?"-ul ramane rotund, 44x44.
       .telE-atingere = acelasi lucru pentru butoanele desenate in afara panourilor listate. */
@media (max-width: 768px) {
  :is(.tab-panel[data-panel="controlDeblocari"], .tab-panel[data-panel="zoneManageri"], .tab-panel[data-panel="comenziTigari"],
      .tab-panel[data-panel="uploadRapoarte"], .tab-panel[data-panel="panouSis"], .tab-panel[data-panel="raportSismgr"],
      .tab-panel[data-panel="negocieriSis"], .tab-panel[data-panel="monitorizareMarfa"], .tab-panel[data-panel="monitorizareVizite"],
      .tab-panel[data-panel="activitateAgenti"], .tab-panel[data-panel="verificareSis"], .tab-panel[data-panel="deblocariEchipa"],
      .tab-panel[data-panel="problemeRaportate"], .tab-panel[data-panel="incidenteVanzare"], .tab-panel[data-panel="sisNou"],
      .tab-panel[data-panel="returSis"], .tab-panel[data-panel="returEfectiv"], .tab-panel[data-panel="sisQuatro"],
      .tab-panel[data-panel="traseuZilnic"], .tab-panel[data-panel="inventareMasini"], .tab-panel[data-panel="masini"],
      .tab-panel[data-panel="gpsTracking"], .tab-panel[data-panel="cereriInactivare"], .tab-panel[data-panel="usersAdmin"],
      .tab-panel[data-panel="jurnalActiuni"], .tab-panel[data-panel="setariTerminal"])
    :is(button, .btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"])) {
    min-height:44px !important;
  }
  :is(.tab-panel[data-panel="controlDeblocari"], .tab-panel[data-panel="zoneManageri"], .tab-panel[data-panel="comenziTigari"],
      .tab-panel[data-panel="uploadRapoarte"], .tab-panel[data-panel="panouSis"], .tab-panel[data-panel="raportSismgr"],
      .tab-panel[data-panel="negocieriSis"], .tab-panel[data-panel="monitorizareMarfa"], .tab-panel[data-panel="monitorizareVizite"],
      .tab-panel[data-panel="activitateAgenti"], .tab-panel[data-panel="verificareSis"], .tab-panel[data-panel="deblocariEchipa"],
      .tab-panel[data-panel="problemeRaportate"], .tab-panel[data-panel="incidenteVanzare"], .tab-panel[data-panel="sisNou"],
      .tab-panel[data-panel="returSis"], .tab-panel[data-panel="returEfectiv"], .tab-panel[data-panel="sisQuatro"],
      .tab-panel[data-panel="traseuZilnic"], .tab-panel[data-panel="inventareMasini"], .tab-panel[data-panel="masini"],
      .tab-panel[data-panel="gpsTracking"], .tab-panel[data-panel="cereriInactivare"], .tab-panel[data-panel="usersAdmin"],
      .tab-panel[data-panel="jurnalActiuni"], .tab-panel[data-panel="setariTerminal"]) .btn-help {
    width:44px; height:44px; min-width:44px;
  }
  .telE-atingere { min-height:44px !important; }
  /* E1. Zone & Manageri: cutia "Actiuni administrator" nu mai e o cutie in jurul butonului care o
         strange (pe telefon ramane doar butonul; stilul cutiei e scris inline in zone-manageri.js) */
  .tab-panel[data-panel="zoneManageri"] .zone-admin-actions {
    margin-top:0 !important; padding:0 !important; background:none !important; border:0 !important;
  }
  .tab-panel[data-panel="zoneManageri"] #zmAdmin { display:flex; flex-wrap:wrap; gap:8px; }
  /* fereastra de detaliu a unui KPI (desenata in afara panoului): butonul formulei nu lipeste de tabel */
  .tel-comuta.tel-comuta-mic[data-comuta="zmFormula"] { margin-bottom:10px; }
  /* E2. Comenzi tigari: cele trei taburi pe un singur rand (inainte doua randuri, plus modul
         e-mailului pe al treilea); capul tabelului propunerii se rupe pe doua randuri, iar denumirea
         produsului (lipita in stanga de tel-derulare) e mai ingusta, ca langa ea sa incapa si cifrele;
         la alegerea livrarii si la bifele "nu vine" toata eticheta e targetul degetului (44 px);
         caseta EN GROS ramane doar butonul ei pana se deschide */
  #ctTaburi { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
  #ctTaburi > .btn { margin:0 !important; padding:6px 4px !important; font-size:12px !important; line-height:1.2; white-space:normal; }
  #ctEmailMod { float:none !important; grid-column:1 / -1; justify-self:start; font-size:12px; padding:3px 10px !important; }
  #ctLivrare label, #ctRecente label { min-height:44px !important; display:inline-flex; align-items:center; gap:6px; }
  #ctTabelWrap th { white-space:normal !important; vertical-align:bottom; }
  #ctTabelWrap td:first-child { min-width:130px !important; max-width:150px !important; }
  #ctEngros { margin:8px 0 !important; padding:0 !important; border:0 !important; background:none !important; }
  #ctEngrosCorp { padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg2); }
  /* E3. Incarcare Rapoarte: tabelul targetelor lunare (10 agenti) sta in pagina; cutia lui de 400 px
         cu derulare proprie (stil inline in index.html) facea pe telefon doua derulari una in alta */
  #monthlyTargetsContainer { max-height:none !important; overflow:visible !important; }
  /* E4. Panou SIS: tabelul de 14 coloane (style.css il fixeaza la latimea ecranului cu table-layout
         fixed, deci pe telefon fiecare celula era taiata cu "..." si ALERT se scria pe verticala) isi ia
         latimea continutului si se deruleaza in cutia lui (tel-derulare). Lipita in stanga sta locatia
         (coloana 3), nu statusul; statusul ramane in coloana lui si se vede ca dunga langa locatie. */
  #panouSisTable table { table-layout:auto !important; width:max-content !important; min-width:100%; }
  #panouSisTable th, #panouSisTable td { white-space:nowrap !important; }
  #panouSisTable td:nth-child(3) { white-space:normal !important; min-width:120px; max-width:150px; }
  #panouSisTable.tel-derulare table td:first-child { position:static; }
  #panouSisTable.tel-derulare table thead th:first-child { left:auto; z-index:2; }
  #panouSisTable.tel-derulare table th:nth-child(3),
  #panouSisTable.tel-derulare table td:nth-child(3) { position:sticky; left:0; z-index:1; background:var(--card); }
  #panouSisTable.tel-derulare table thead th:nth-child(3) { z-index:3; background:var(--bg3); }
  #panouSisTable tr[data-status="ALERT"] td:nth-child(3) { box-shadow:inset 3px 0 0 #f87171; }
  #panouSisTable tr[data-status="WARN"] td:nth-child(3) { box-shadow:inset 3px 0 0 #fbbf24; }
  #panouSisTable tr[data-status="OK"] td:nth-child(3) { box-shadow:inset 3px 0 0 #34d399; }
  /* E5. Raport Activitate Manageri SIS: tabelul (min-width 960 si table-layout fixed) facea coloana
         "Birou (detaliu)" atat de ingusta incat notele de birou intindeau randul pe sute de px. Pe
         telefon tabelul isi ia latimea continutului, detaliul are loc, iar lipit sta managerul. */
  #rsContent table { table-layout:auto !important; width:max-content !important; min-width:100% !important; }
  #rsContent th, #rsContent td { white-space:nowrap; }
  #rsContent td:last-child { white-space:normal; min-width:220px; max-width:320px; }
  #rsContent.tel-derulare table td:first-child { position:static; }
  #rsContent.tel-derulare table thead th:first-child { left:auto; z-index:2; }
  #rsContent.tel-derulare table th:nth-child(2),
  #rsContent.tel-derulare table td:nth-child(2) { position:sticky; left:0; z-index:1; background:var(--card); }
  #rsContent.tel-derulare table thead th:nth-child(2) { z-index:3; background:var(--bg3); }
  /* E6. Negocieri SIS: la bifele din cartonase ("Facturam", plata blocata) toata eticheta e targetul
         degetului (inainte 34 px) */
  .tab-panel[data-panel="negocieriSis"] label:has(> input[type="checkbox"]) { min-height:44px !important; }
  /* E7. Monitorizare marfa: butonul care desface agentul pe produse are 44 px si sta in stanga
         numelui (inainte numele se rupea in jurul lui); coloana agentului e lipita (tel-derulare) */
  .mon-marfa-tabel { table-layout:auto !important; }
  .mon-marfa-tabel .btn-report { min-width:44px !important; float:left; margin:0 8px 4px 0 !important; padding:4px !important; }
  .mon-marfa-tabel td:first-child { min-width:170px; word-break:normal; overflow-wrap:normal; }
  /* randul cu produsele (o singura celula pe toata latimea) nu e coloana agentului: nu se lipeste */
  .mon-marfa-tabel tr[data-produse] > td:first-child { position:static; min-width:0; }
  /* ...iar cele trei liste de produse stau una sub alta, pe latimea ecranului, fara derulare */
  .mon-marfa-tabel tr[data-produse] > td > div {
    flex-direction:column; flex-wrap:nowrap !important; position:sticky; left:0; width:calc(100vw - 72px); box-sizing:border-box;
  }
  .mon-marfa-tabel tr[data-produse] > td > div > div { flex:0 0 auto !important; min-width:0 !important; }
  /* E8. Monitorizare Vizite: cele patru cifre de sus pe doua coloane (in 4 coloane "Incasat" iesea
         din ecran); cartonasele mai joase */
  .mon-kpi-grila { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:8px !important; }
  .mon-kpi-grila > div { padding:8px !important; }
  /* E9. Activitate Agenti: tabelele (style.css le fixeaza la latimea ecranului, numele se rupeau
         litera cu litera) isi iau latimea continutului in cutiile tel-derulare; cele 17 cartonase de
         sus stau cate trei pe rand; bifa "Auto-refresh" are eticheta de 44 px */
  #activitateAgentiContainer .tel-derulare table { table-layout:auto !important; width:max-content !important; min-width:100% !important; }
  #activitateAgentiContainer .tel-derulare th, #activitateAgentiContainer .tel-derulare td { white-space:nowrap !important; }
  #activitateAgentiContainer .tel-derulare td:first-child { white-space:normal !important; min-width:120px; max-width:150px; }
  #activitateAgentiContainer .aa-sumar { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:6px !important; }
  #activitateAgentiContainer .aa-sumar > div { padding:.5rem !important; overflow-wrap:anywhere; }
  #activitateAgentiContainer .aa-sumar > div > div:last-child { font-size:1.1rem !important; }
  .tab-panel[data-panel="activitateAgenti"] label:has(> input[type="checkbox"]) { min-height:44px !important; }
  /* E10. Probleme Raportate (recurentele), GPS Tracking (tabelul de sub harta), Utilizatori, Jurnal
          Actiuni: tabelele isi iau latimea continutului in cutiile tel-derulare (inainte erau
          stoarse la latimea ecranului si coloanele din dreapta ieseau din ecran); prima coloana
          (grupul, agentul, utilizatorul, data) sta lipita, textele lungi se rup pe o latime fixa */
  :is(#prStats .tel-derulare table, #gpsTrackingSummary .tel-derulare table,
      .tab-panel[data-panel="usersAdmin"] .tel-derulare table, .tab-panel[data-panel="jurnalActiuni"] .tel-derulare table) {
    table-layout:auto !important; width:max-content !important; min-width:100% !important;
  }
  :is(#prStats, #gpsTrackingSummary, .tab-panel[data-panel="usersAdmin"]) .tel-derulare :is(th, td) { white-space:nowrap; }
  :is(#prStats, #gpsTrackingSummary) .tel-derulare td:first-child { white-space:normal; min-width:120px; max-width:160px; }
  #prStats .tel-derulare td:nth-child(3) { white-space:normal; min-width:160px; max-width:220px; }
  .tab-panel[data-panel="jurnalActiuni"] .tel-derulare td:last-child { min-width:220px; max-width:300px; overflow-wrap:anywhere; }
  /* E11. Butoanele mici: reincarcarea din Masini GPS / GPS Tracking (36 px), bifele din Masini GPS
          ("Clienti census", 13 px) si Inventare masini (blocarea, eticheta de 38 px), zoom-ul hartii
          GPS (36 px) */
  :is(.tab-panel[data-panel="masini"], .tab-panel[data-panel="gpsTracking"]) button[title="Reîncarcă"] { min-width:44px !important; }
  :is(.tab-panel[data-panel="masini"], .tab-panel[data-panel="inventareMasini"]) label:has(> input[type="checkbox"]) { min-height:44px !important; }
  .tab-panel[data-panel="gpsTracking"] .leaflet-control-zoom a { width:44px !important; height:44px !important; line-height:44px !important; }
  /* E12. Retur Efectuat: "Sumar per agent" si "Detaliu transferuri" isi iau latimea continutului in
          cutiile tel-derulare (inainte numele se rupeau: "SIS MANAG ER"); agentul sta lipit */
  :is(#returEfAgentTable, #returEfDetailTable) table { table-layout:auto !important; width:max-content !important; min-width:100% !important; }
  :is(#returEfAgentTable, #returEfDetailTable) :is(th, td) { white-space:nowrap; }
}


/* ──────────────── [E] sfarsit ──────────────── */