/* =================================================================================================
   STRATUL PENTRU ECRANE MICI — un singur fisier, incarcat de toate paginile.

   CE E AICI SI CE NU. Aici sta doar ce tine de ASEZAREA CONTINUTULUI pe un ecran ingust: tabele
   care se deruleaza, griduri care trec pe o coloana, campuri destul de mari cat sa nu sara pagina.
   Meniul — bara, sertarul, firimiturile — NU mai e aici: e acelasi la orice latime si sta in
   `panou.css`. Userul: «in continuare vom mentine o singura versiune, cea de pe android».

   DE CE ARATA ASA. Panoul are 79 de sabloane, 49 cu tabele si 50 cu griduri. A le rescrie pe toate
   ar fi insemnat 79 de ocazii de a pierde un buton — exact ce a cerut userul sa NU se intample.
   Deci nu atingem sabloanele, ci punem peste ele un strat care se aprinde doar sub 1024px.

   REGULA DE AUR: nimic de aici nu ASCUNDE un control. Muta, ingusteaza, pune pe derulare, mareste
   tinta de atingere — dar nu scoate nimic din pagina.

   DE CE `!important`: Tailwind vine de pe CDN si isi injecteaza stilurile dintr-un `<style>` pus in
   head la rulare, deci ordinea fata de fisierul asta nu e garantata. Fara `!important`,
   `grid-cols-3` ar castiga uneori si alteori nu — adica exact felul de bug care apare doar pe
   telefonul altcuiva.
   ================================================================================================= */

/* Fara asta, Safari mareste singur textul cand roteste telefonul. */
html { -webkit-text-size-adjust: 100%; }

/* ---------- Sub 1024px: continut care nu se striveste ---------- */
@media (max-width: 1023px) {

  /* --- Tabele: se deruleaza lateral, nu se strivesc --- */
  /* Ambalajul il pune `mobil.js` la rulare, ca sa nu fie nevoie sa atingem 49 de sabloane. */
  .tabel-derulabil {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    /* Marginea de jos lasa loc barei de derulare pe Android, ca sa nu acopere ultimul rand. */
    padding-bottom: 2px;
  }
  /* NU `min-width: max-content`: ar fi facut tabelul cat cea mai lata celula neinfasurata, si
     nimeni n-ar mai fi putut cere o exceptie pe o coloana. Cu `nowrap` pe celule obtinem aceeasi
     latime naturala, dar se poate anula per coloana cu `.lasa-sa-curga` (vezi mai jos). */
  .tabel-derulabil > table { min-width: 100%; }
  /* Umbra din dreapta spune „mai e ceva acolo". Se aprinde din `mobil.js` doar cand chiar mai e. */
  .tabel-derulabil.mai-e-la-dreapta {
    background-image: linear-gradient(to left, rgba(15, 23, 42, 0.13), rgba(15, 23, 42, 0));
    background-size: 18px 100%; background-position: right; background-repeat: no-repeat;
  }
  .tabel-derulabil td, .tabel-derulabil th { white-space: nowrap; }
  /* Celulele cu text lung (observatii, adrese) n-au ce cauta pe un rand — se marcheaza in sablon. */
  .tabel-derulabil .lasa-sa-curga, .tabel-derulabil .lasa-sa-curga * { white-space: normal; }

  /* --- Barele de butoane: o fasie pe care o tragi cu degetul --- */
  .bara-derulabila {
    flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bara-derulabila::-webkit-scrollbar { display: none; }
  .bara-derulabila > * { flex: 0 0 auto; }

  /* --- Blocuri late care altfel latesc pagina --- */
  pre, code { max-width: 100%; overflow-x: auto; }
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
  /* AICI A FOST `main { overflow-x: hidden }` SI A FOST GRESIT.
     Cand o axa e `hidden` si cealalta `visible`, CSS-ul o transforma pe a doua in `auto`: `main`
     ar fi devenit propriul container de derulare, cu bara lui verticala, iar `position: sticky`
     dinauntru s-ar fi lipit de el, nu de ecran. Panoul chiar are asa ceva — capul de tabel din
     dashboard.ejs, bara din updates.ejs, bara din facturare/contract.ejs — deci regula ar fi rupt
     trei ecrane pe telefon, in tacere.
     Latimea e tinuta in frau de ambalajul tabelelor si de plafonul pe imagini/pre de mai sus. Daca
     mai scapa ceva lat, se ambaleaza acel element, nu se taie toata pagina. */
}

/* ---------- Sub 640px: continutul se aseaza pe o coloana ---------- */
@media (max-width: 639px) {

  /* Griduri de 2+ coloane -> o coloana. Doua coloane pe 375px inseamna 170px de fiecare, adica
     etichete rupte in silabe. Scapare: `pastreaza-coloanele` pe elementul care chiar are nevoie
     (perechi de butoane mici, calendare). */
  [class*="grid-cols-"]:not(.pastreaza-coloanele) { grid-template-columns: 1fr !important; }

  /* Elementele asezate una langa alta se rup pe randuri noi, in loc sa se inghesuie. */
  /* `.bara-rand` e randul barii de sus: daca s-ar rupe, coltul de cont ar cadea pe al treilea
     rand si bara ar ocupa un sfert de ecran. Firimiturile se deruleaza in loc sa se rupa. */
  .flex:not(.pastreaza-randul):not(.bara-derulabila):not(.bara-firimituri):not(.bara-rand) { flex-wrap: wrap; }

  /* 16px e pragul sub care iOS mareste singur pagina la atingerea unui camp — si nu se mai
     intoarce. Merita fontul putin mai mare peste tot, ca sa nu sara ecranul la fiecare atingere. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px !important;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select {
    min-height: 42px;
  }
  /* Casetele de bifat sunt de obicei 13px si imposibil de nimerit cu degetul. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* Butoanele si legaturile-buton primesc o tinta de atingere adevarata. Bara de sus e scutita:
     acolo masurile sunt deja alese, iar 42px ar dubla inaltimea ei. */
  button:not(.bara-actiune):not(.mobil-buton-meniu):not(.sertar-inchide),
  [type="submit"], [type="button"], [type="reset"] { min-height: 42px; }

  /* NUMELE UTILIZATORULUI iese din bara pe telefon. Nu e un control — e o eticheta, si aceeasi
     eticheta e in capul sertarului. In schimb ocupa vreo 90px din 375, adica exact spatiul in care
     incap firimiturile, singurul lucru din bara care iti spune unde esti. */
  .bara-utilizator { display: none; }

  /* Marginile interioare mari mananca latimea utila pe un ecran de 375px. */
  .p-5 { padding: 0.9rem !important; }
  .p-6 { padding: 1rem !important; }
  .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

  /* Titlurile de pagina sunt scrise pentru un monitor. */
  h1, .text-2xl { font-size: 1.3rem !important; line-height: 1.25 !important; }
  .text-3xl { font-size: 1.5rem !important; line-height: 1.2 !important; }
}

/* ---------- Intrebarea „vrei sa-l instalezi?" ---------- */
.mobil-instalare {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  background: #0f172a; color: #e2e8f0;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);
  font-size: 14px; line-height: 1.35;
}
.mobil-instalare.aratat { display: flex; }
.mobil-instalare .mi-text { flex: 1 1 auto; min-width: 0; }
.mobil-instalare .mi-titlu { font-weight: 600; color: #fff; }
.mobil-instalare button {
  flex: 0 0 auto; border: 0; border-radius: 9px; cursor: pointer;
  padding: 9px 13px; font-size: 14px; font-weight: 600; min-height: 40px;
}
.mobil-instalare .mi-da { background: #2563eb; color: #fff; }
.mobil-instalare .mi-nu { background: transparent; color: #94a3b8; padding: 9px 6px; }

/* ---------- Cand chiar e instalat ---------- */
/* In fereastra proprie nu exista bara de adresa, deci lasam mai mult aer sus, sub crestatura. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
  .mobil-instalare { display: none !important; }   /* deja instalat: n-are ce cere */
}