/* ============================================================================
   mobil.css — a 640 / 900 / 1280 töréspont-skála, minden lapra (design-teljes, 2026-09-06)
   ============================================================================
   Betöltési sorrend: tokens → base → pages/pg-*.css → components → seged → EZ (utolsó).
   A mai 21 ad hoc töréspont (420…1180) helyett három sáv:
     ≤ 640   telefon   — egy oszlop, oldalsáv összecsukva (rnx_mobil.js), rácsok 1 oszlop
     641–900 tablet    — oldalsáv keskenyebb, 4-oszlopos rácsok 2 oszlop
     ≥ 1280  asztali   — a mai elrendezés (nincs külön szabály)
   A lap-CSS-ek régi töréspontjait a skálára képeztük (lásd docs/design-teljes-jelentes.md 5.):
   ≤ 680 → 640, 700…880 → 900, 1000…1180 → 1280. A táblák kártyanézete a components.css-ben van.
   ⚠️ Ez a réteg csak elrendezést ad; komponens-megjelenést nem ír felül.
   ========================================================================= */

/* ===== ≤ 640: telefon ================================================= */
@media (max-width: 640px) {
  /* a két-oszlopos héjak egy oszlopba */
  .layout-wrapper, .layout, .at-layout, .ma-layout, .ak-shell, .mgf-shell, [class$="-shell"] { display: flex; flex-direction: column; min-height: 0; }
  .ak-shell-main, .mgf-main, [class$="-shell-main"] { width: 100%; min-width: 0; }
  .sidebar, .at-sidebar, .ma-sidebar, .tender-nav-sidebar, .tv-sidebar {
    width: 100%; max-width: none; flex: none; position: static; max-height: none;
    border-right: 0; border-bottom: 1px solid var(--border); overflow: visible;
  }
  .sidebar.is-collapsed, .at-sidebar.is-collapsed, .ma-sidebar.is-collapsed,
  .tender-nav-sidebar.is-collapsed, .tv-sidebar.is-collapsed { display: none; }
  .rnx-mobil-nav { display: inline-flex; width: 100%; justify-content: center; margin: var(--sp-3) 0; }
  .content, .main-content, .at-main, .ma-main, main.content {
    width: 100%; min-width: 0; max-width: none; padding: var(--sp-4);
  }
  /* rácsok egy oszlopra (a lap-CSS-ek és a segédek többoszlopos rácsai) */
  .u-grid-2, .u-grid-3, .u-grid-4, .tv-grid-2, .tv-grid-3, .tv-grid-4,
  .ma-metrics, .ma-grid-2, .ma-grid-3, .ma-two-col, .stats-row, .stats-bar, .sheet-cards,
  .template-cards, .form-row, .form-row.triple, .form-grid, .ref-grid, .atlag-panel,
  .subfolder-list, .kr-urlap, .quota-grid, .mg-racs, .fz-sor, .grid, .stat-grid, .kpi-grid,
  .roles, .field-list {
    grid-template-columns: 1fr !important;
  }
  /* sorok, amelyek asztalon egy vonalban álltak: tördelhetnek */
  .u-row--nowrap { flex-wrap: wrap; }
  .u-search { min-width: 0; width: 100%; }
  /* túlnyúlás-védelem: kép, beágyazás, hosszú szó, rögzített szélesség */
  img, svg, video, iframe { max-width: 100%; }
  body { overflow-wrap: anywhere; }
  [style*="min-width"] { min-width: 0 !important; }
  .tv-bontas-banner { flex-direction: column; align-items: flex-start; }
  .tv-bontas-banner__cta { white-space: normal; }
  .tv-countdown { gap: var(--sp-3); }
  /* modal: a teljes szélességet használja */
  .rnx-modal, .rnx-modal--md, .rnx-modal--lg { max-width: calc(100vw - 2 * var(--sp-3)); width: auto; }
  /* a rögzített dekor-logó (belépő lapok) ne lógjon ki */
  body > svg[style*="position:fixed"] { display: none; }
}

/* ===== 641–900: tablet ================================================ */
@media (min-width: 641px) and (max-width: 900px) {
  .sidebar, .at-sidebar, .ma-sidebar, .tender-nav-sidebar, .tv-sidebar { width: 200px; }
  .content, .main-content, .at-main, .ma-main { padding: var(--sp-4) var(--sp-5); min-width: 0; }
  .u-grid-4, .tv-grid-4, .ma-metrics, .stats-row, .stats-bar { grid-template-columns: 1fr 1fr !important; }
  .u-grid-3, .tv-grid-3, .ma-grid-3 { grid-template-columns: 1fr 1fr !important; }
}

/* ===== > 640: a mobil-gomb rejtett, az összecsukás hatástalan ========== */
@media (min-width: 641px) {
  .rnx-mobil-nav { display: none !important; }
}

/* ===== kiegészítés a 640-es mérés után (mobil_1.json) ================== */
@media (max-width: 640px) {
  /* fix szélességű mezők (ak_megfigyelok .mgf-input 280 px) és a sorok gyermekei */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { max-width: 100%; min-width: 0; }
  .u-row > *, .u-actions > * { min-width: 0; }
  [style*="width:"][style*="px"]:not(img):not(svg) { max-width: 100%; }
}
/* tablet-sáv: a sűrű tábla ott, ahol az oszlopok min-tartalma nem fér el, a SAJÁT keretében görget
   (csak akkor, ha kell) — 640-ig a kártyanézet érvényes, ez a 641–900 sáv kompromisszuma */
@media (min-width: 641px) and (max-width: 900px) {
  .rnx-table-wrap { overflow-x: auto; }
}

/* ===== 2. mérés utáni maradék (mobil_2.json): 3 lap ===================== */
@media (max-width: 640px) {
  .mgf-input, .mrbar select { width: 100% !important; min-width: 0 !important; }   /* a sablon <style>-ja a mobil.css UTÁN jön (base head blokk) — azonos specificitással az nyerne */
}
@media (max-width: 900px) {
  .rnx-table:not(.rnx-table-wrap > .rnx-table) { display: block; overflow-x: auto; max-width: 100%; }  /* wrap nélküli tábla (admin_users) */
  .sheet-cards, [class$="-cards"] { grid-template-columns: 1fr !important; }                              /* ak_meghivas kártyarács */
}
@media (max-width: 640px) {
  .rnx-table:not(.rnx-table-wrap > .rnx-table) { display: block; overflow-x: visible; }   /* 640-ig a kártyanézet érvényes, nem a görgetés */
}

@media (max-width: 900px) {
  .pg-ak-meghivas .layout, body.pg-ak-meghivas .layout { grid-template-columns: 1fr !important; }   /* fix 256px+360px racs a tablet-savban egy oszlop */
}