/* ══════════════════════════════════════════════════════════════════════════
   AZ ADMIN MOBILON (2026-10-17)

   A kérés: az admin felületek mobilon is könnyen használhatók legyenek.

   A FELMÉRÉS (390 px, érintőképernyő, mind a 33 admin lap, .tools/admin_mobil_proba.mjs): 17 lap szélesebb volt a
   képernyőnél — a böngésző ilyenkor 600 px körüli nézetet nyit, és az egész lapot kicsinyítve mutatja, tehát
   minden betű és gomb apró lett —, 26 táblázat lógott ki oldalra, és 284 gomb / mező volt 40 px-nél alacsonyabb.

   EZ A RÉTEG MINDEN ADMIN LAPRA KERÜL (a build fejléc-lépése teszi be: tools/build/patch_admin_header.py), és csak
   keskeny képernyőn szól bele. Asztalon semmi nem változik.

     1. A TÁBLÁZAT KÁRTYÁVÁ VÁLIK mobilon, ha a helye 600 px-nél keskenyebb: soronként egy doboz, cellánként egy sor,
        az oszlop neve a cella előtt (a címkét az admin-mobil.js írja a cellára a fejlécből). A konténer-lekérdezés
        a tábla saját helyét nézi, a képernyő-feltétel pedig azt biztosítja, hogy asztalon semmi ne változzon.
     2. A RÁCSOK EGY OSZLOPBA mennek (a lapok saját osztályai: g2, g3, g4, cols, grid…), a mutató-csempék kettesével.
     3. MINDEN GOMB ÉS MEZŐ LEGALÁBB 44 PX MAGAS (ujjnyi), a mezők betűje 16 px (iOS-en a kisebbtől fókuszkor
        ránagyít az egész lapra). A naptárak cellái kivételek: ott a cella maga a célpont.
     4. AMI LEBEG (a nap részletei), az a képernyő aljára kerül, teljes szélességben — mobilon nincs „ráállás”.
     5. HOSSZÚ E-MAIL ÉS AZONOSÍTÓ TÖRHET, hogy egyetlen szó se tolja szét a lapot.
   ══════════════════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── 1. táblázat → kártya ──
   A burkoló a konténer-lekérdezés alanya. Görgetés csak mobilon és csak a kártyásítás nélkül maradt táblán
   (data-mobil="tabla") — asztalon a burkoló nem görget, mert egy görgető tárolón belül a ragadós táblafejléc a
   tárolóhoz ragadna, nem a képernyőhöz. A kártya csak mobilon áll elő: asztalon semmi nem változik. */
.eq-tabla { max-width: 100%; }
@media (max-width: 720px) {
  /* A KONTÉNER CSAK MOBILON: a konténer-típus külön formázási környezetet nyit, és asztalon a táblák saját
     felső margója (margin-top) nem olvadt össze a fölötte állóéval — a felmérés táblánként 6 px eltérést mért. */
  .eq-tabla { container: eqtabla / inline-size; }
  .eq-tabla:has(> table[data-mobil="tabla"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 720px) {
@container eqtabla (width < 600px) {
  .eq-tabla > table:not([data-mobil="tabla"]) { display: block; width: 100% !important; min-width: 0 !important; border: 0; }
  .eq-tabla > table:not([data-mobil="tabla"]) > thead { display: none; }
  .eq-tabla > table:not([data-mobil="tabla"]) > tbody,
  .eq-tabla > table:not([data-mobil="tabla"]) > tfoot { display: block; }
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr {
    display: block; background: #fff; border: 1px solid var(--rule, #DEDAD4); border-radius: 3px;
    padding: 4px 14px; margin: 0 0 10px;
  }
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr > :is(td, th) {
    display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
    padding: 9px 0 !important; border: 0; border-bottom: 1px solid #F1EEE7; text-align: left !important;
    white-space: normal !important; overflow-wrap: anywhere; min-width: 0; width: auto !important; max-width: none !important;
    position: static !important; box-shadow: none !important; background: transparent;
  }
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr > :is(td, th):last-child { border-bottom: 0; }
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr > :is(td, th)[data-label]::before {
    content: attr(data-label);
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6B6860); font-weight: 500;
  }
  /* címke nélküli cella (műveletek, üres állapot, több oszlopra nyúló sor): teljes szélesség */
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr > :is(td, th):not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr > :is(td, th)[colspan] { text-align: center !important; }
  /* a gombok a cellában egymás mellett, törve, egyforma réssel */
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr > :is(td, th):has(> :is(button, a.btn, .btn)) {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  .eq-tabla > table:not([data-mobil="tabla"]) > :is(tbody, tfoot) > tr > :is(td, th):has(> :is(button, a.btn, .btn))[data-label]::before {
    flex: 0 0 100%;
  }
  .eq-tabla > table:not([data-mobil="tabla"]) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important; max-width: 100%;
  }
  /* az üres sor („Betöltés…”, „Nincs találat”) ne legyen keretes doboz */
  .eq-tabla > table:not([data-mobil="tabla"]) > tbody > tr:has(> td:only-child[colspan]) {
    border: 0; background: transparent; padding: 0;
  }
}
}

@media (max-width: 720px) {
  /* ── 2. rácsok ── */
  :is(.g2, .g3, .g4, .grid, .cols, .oszlopok, .dash2, .grid7, .row, .tipus-sor, .fields) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  :is(.dash, .d4) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :is(.card, .panel, section, main, form, .box, .doboz) { min-width: 0; }
  main { padding-left: 4vw !important; padding-right: 4vw !important; }
  .card { padding: 16px !important; }
  h1 { font-size: clamp(26px, 7vw, 32px); }

  /* ── 3. ujjnyi célpontok ── */
  button, .btn, a.btn, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
  button, .btn, a.btn { padding-top: 10px; padding-bottom: 10px; touch-action: manipulation; }
  :is(button, .btn).sm, :is(button, .btn).mini, button.mini-btn, button.q { min-height: 44px; padding-left: 14px; padding-right: 14px; }
  input[type="checkbox"], input[type="radio"] { width: 22px !important; height: 22px; accent-color: var(--green, #005C4B); }
  label:has(> input[type="checkbox"], > input[type="radio"]) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
  .row-actions { gap: 10px !important; }
  .row-actions > :is(button, .btn) { flex: 1 1 auto; }

  /* a naptárak napcellái a célpontok — a bennük álló kis gombok maradnak a cellához mérve; a naptár fejlécének
     gombjai (előző / következő hónap, Ma) viszont ujjnyiak, mint minden más gomb */
  :is(.cal, .eq-n-racs, .orasav, .half, .telit) :is(button, input) { min-height: 0; font-size: inherit !important; }
  .eq-naptar .eq-n-nap { min-height: 46px; }

  /* a hosszú feliratos gomb törhet, és a mellé állított, zsugoríthatatlan doboz (flex:0 0 auto) zsugorodhat —
     egy „Elmúlt estek kódjainak takarítása” gomb ne tolja ki a lapot */
  button, .btn, a.btn { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
  div[style*="flex:0 0 auto"] { flex: 0 1 auto !important; min-width: 0; max-width: 100%; }

  /* ── a közös naptár fejléce tördel (a havi léptető és a szűrők egy sorban kilógtak) ── */
  .eq-n-fejlec { flex-wrap: wrap; row-gap: 8px; }
  .eq-n-honap { min-width: 0 !important; flex: 1 1 auto; }
  .eq-n-lep { min-height: 44px; min-width: 44px; }
  .eq-naptar, .eq-n-dows, .eq-n-racs { min-width: 0; max-width: 100%; }

  /* ── 4. a lebegő nap-részlet a képernyő aljára ── */
  .daypop {
    position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: 10px !important;
    transform: none !important; min-width: 0 !important; max-width: none !important; max-height: 62dvh !important;
    z-index: 60 !important;
  }
  .day:hover:not(.pinned) .daypop { display: none; }

  /* ── 5. hosszú szó ── */
  :is(td, p, li, dd, .card, .hint, small) { overflow-wrap: anywhere; }
  img, video, canvas, iframe { max-width: 100%; height: auto; }
}