/* ============================================================================
   LEXICON — TELEFONOS MEGJELENÉS
   ----------------------------------------------------------------------------
   MIT CSINÁL EZ A FÁJL, ÉS MIT NEM

   Ebben a fájlban MINDEN szabály `@media (max-width: 768px)` kereten belül van.
   Az ilyen szabályt a böngésző 768 képpontnál szélesebb képernyőn el sem
   olvassa. Ezért ez a fájl a gépes (asztali) megjelenésen fizikailag nem tud
   változtatni — akkor sem, ha hibás. Ez a fájl biztonsági szempontból
   egyirányú utca: csak telefonra hat.

   EGYETLEN KIVÉTEL a legvégén, a NYOMTATÁS blokk — az szándékosan van kívül.

   ----------------------------------------------------------------------------
   BETÖLTÉSI SORREND
   A lapok fejlécében ez a fájl az UTOLSÓ stíluslap, az oldal saját CSS-e után.
   Így felül tudja írni az oldal saját szabályait anélkül, hogy mindenhová
   `!important`-ot kellene írni.

   ----------------------------------------------------------------------------
   HÁROM SZABÁLY, AMIT EZ A FÁJL KÖVET

   1. A tokeneket (tokens.css) NEM írjuk felül. Ha telefonon más méret kell,
      azt itt, konkrét elemre mondjuk ki — nem a közös tokent hangoljuk el.
   2. Semmi nem lóghat ki oldalra. Telefonon a vízszintes görgetés hiba,
      kivéve ha egy elem SAJÁT görgetősávot kap (pl. széles táblázat).
   3. Amit ujjal meg kell fogni, az legalább 44×44 képpont. Ez nem ízlés
      kérdése — ennél kisebbet a hüvelykujj nem talál el megbízhatóan.
   ============================================================================ */

@media (max-width: 768px) {

  /* ==========================================================================
     1. AZ ALAP — a lap ne legyen szélesebb a telefonnál
     ==========================================================================
     A fő tartalom rugalmas dobozként (flex) ül a lapon. Az ilyen doboz
     alapértelmezésben NEM zsugorodik a tartalma alá — ezért lógott ki eddig
     419 képpontra egy 390-es telefonon. A `min-width: 0` engedi meg neki,
     hogy a képernyőhöz igazodjon. Ez az egyetlen sor önmagában a kilógások
     nagyjából felét megszünteti. */
  .app-container {
    width: 100%;
    max-width: 100%;
  }

  .main-content {
    min-width: 0;
    max-width: 100%;
    /* A jobb és bal margó szűkebb: telefonon minden képpont számít.
       A `max(...)` az iPhone lekerekített sarkai és a fekvő tájolás miatt
       kell — ott a rendszer megmondja, mennyit kell bentebb húzódni. */
    padding-left:  max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    padding-top: 72px;    /* a lebegő hamburger-gomb alatt kezdődjön a szöveg */
    padding-bottom: calc(var(--spacing-2xl) + env(safe-area-inset-bottom));
  }

  /* Ugyanaz a zsugorodás-engedély a belső dobozokra is.
     A `:where()` szándékosan nulla erősségű: ha egy oldal mást mond,
     az oldal szabálya nyer, ez csak alapértelmezés. */
  .main-content :where(section, article, div, form, header, footer, nav, table) {
    min-width: 0;
  }

  /* Amit semmiképp nem szabad kilógni hagyni. */
  img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
  }

  /* Hosszú, szóköz nélküli szövegek (e-mail cím, iratszám, hivatkozás)
     inkább törjenek, mint hogy szétfeszítsék a lapot. */
  .main-content :where(td, th, p, li, dd, dt, span, a, h1, h2, h3, h4) {
    overflow-wrap: anywhere;
  }

  /* ==========================================================================
     2. RÁCSOK — telefonon egy hasáb
     ==========================================================================
     A programban a többhasábos elrendezések neve rendre tartalmazza a "grid"
     vagy "columns" szót. Telefonon ezek egy hasábra állnak. Ahol két hasáb
     szebb (pl. apró számlálókártyák), azt az adott oldal CSS-e mondja ki —
     az felülírja ezt, mert ez itt csak az alapértelmezés. */
  /* A naptár havi rácsa (.calendar-grid) KIVÉTEL: neki a saját oldal-CSS-e
     ad telefonra 7 keskeny oszlopot (áttekintő nézet). E tág szabály
     egyébként egy oszlopra húzta, miközben a napfejléc (weekday-header, nincs
     benne "grid") 7 oszlopos maradt — így a fejléc és a rács elcsúszott, és
     nagy üres fehér folt maradt. A :not() ezt oldja fel. (BANZÁJ 2026-10-12) */
  .main-content [class*="grid"]:not(.calendar-grid),
  .main-content [class*="-columns"],
  .main-content [class*="two-col"],
  .main-content [class*="three-col"] {
    grid-template-columns: 1fr;
    display: grid;
    gap: var(--spacing-ms);
  }

  /* A bal/jobb hasábos elrendezések egymás alá kerülnek. */
  .main-content .left-column,
  .main-content .right-column,
  .main-content .col-left,
  .main-content .col-right {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }

  /* ==========================================================================
     3. ŰRLAPOK
     ==========================================================================
     Két dolog számít telefonon: a mezők egymás alatt legyenek, és a mező
     betűje legalább 16 képpont legyen.

     A 16 képpont nem esztétika: az iPhone AUTOMATIKUSAN RÁNAGYÍT a lapra,
     ha egy szövegmezőbe kattintanak és a betű ennél kisebb. Ilyenkor a lap
     elcsúszik, és a felhasználónak kézzel kell visszahúznia. Ez a program
     legidegesítőbb telefonos hibája volt, és egyetlen sorral megszűnik. */
  .form-row {
    flex-direction: column;
    gap: var(--spacing-ms);
    margin-bottom: var(--spacing-md);
  }

  .form-group,
  .form-group.col-md-6,
  .form-group.col-md-4,
  .form-group.col-md-3,
  [class*="col-md-"],
  [class*="col-sm-"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-md);
  }

  .form-control,
  .form-select,
  input[type="text"],  input[type="email"],    input[type="password"],
  input[type="number"],input[type="tel"],      input[type="search"],
  input[type="date"],  input[type="datetime-local"], input[type="time"],
  input[type="url"],   select, textarea {
    /* ← ez akadályozza meg az iPhone ránagyítását. Az !important kell:
       a 2026-09-07-i mérés ~55 mezőt talált 12,8–15,2 px-en, mert az oldalak
       azonosítós (#statusFilter, #letet-leiras…) szabályai erősebbek voltak. */
    font-size: 16px !important;
    min-height: var(--control-height-lg);
    width: 100%;
    max-width: 100%;
  }

  textarea {
    min-height: 96px;
  }

  /* A mezőcímke fölé kerül, nem mellé — telefonon nincs hely egymás mellett. */
  .form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
  }

  /* Az űrlap gombsora: egymás alatt, teljes szélességben, elég magasan.
     A fő gomb (mentés) kerül felülre, mert az a hüvelykujj útjába esik. */
  .form-actions,
  .modal-footer,
  .button-group,
  .btn-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
  }

  .form-actions > .btn,
  .form-actions > button,
  .modal-footer > .btn,
  .modal-footer > button {
    width: 100%;
    justify-content: center;
  }

  /* ==========================================================================
     4. GOMBOK ÉS MINDEN, AMIT UJJAL KELL ELTALÁLNI
     ========================================================================== */
  .btn,
  button,
  [role="button"],
  .menu-item,
  /* AZ ALMENÜPONT KIMARADT — 2026-08-21-én pótolva.
     Az oldalsáv összecsukható menüpontjai alatt ülő al-hivatkozások
     (.menu-subitem) 35 képpont magasak voltak, vagyis a 44-es alsó határ alatt.
     Ez NEM egy oldal hibája volt: az oldalsáv mind a 66 képernyőn ugyanaz,
     tehát ez a hiány minden oldalon ott volt. A mérés több oldalon is
     ugyanazt az 5 találatot dobta ki — ebből derült ki, hogy közös okról van
     szó, nem oldalankénti bajról. */
  .menu-subitem,
  .close-btn,
  .tab-btn,
  /* A vissza-nyíl 34×34 volt: ez a program egyik legtöbbet használt gombja,
     és pont az, amit menet közben, egy kézzel nyom meg az ember. */
  .back-btn {
    min-height: 44px;
  }

  /* Az ikon-gomboknak szélességben is kell a hely. */
  .btn-icon,
  .icon-btn,
  .close-btn,
  .back-btn,
  .modal-header .close {
    min-width: 44px;
  }

  /* A táblázatokba és sorokba ágyazott apró műveleti gombok kivételek:
     ott nem magasítunk, hanem a sor kap nagyobb kattintófelületet. */
  .table-actions .btn,
  .row-actions .btn,
  td .btn-sm {
    min-height: 36px;
    min-width: 36px;
  }

  /* Sorok közti térköz, hogy a szomszédos gombra ne nyúljon rá az ujj. */
  .table-actions,
  .row-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  /* ==========================================================================
     5. OLDALFEJLÉC ÉS SZŰRŐSOR
     ==========================================================================
     Gépen a cím balra, a gombok jobbra egy sorban. Telefonon ez összenyomódik,
     ezért egymás alá kerülnek. */
  .page-header,
  .content-header,
  .section-header,
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .page-header h1,
  .page-header h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
  }

  .page-header .header-actions,
  .page-header .page-actions,
  .content-header .header-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /* A szűrők egymás alatt, teljes szélességben. */
  .filters,
  .filter-bar,
  .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .filter-group {
    width: 100%;
    min-width: 0;
  }

  /* ==========================================================================
     6. FÜLEK — vízszintesen görgethető sáv
     ==========================================================================
     Ha sok fül van (az Ügy képernyőn nyolc is), telefonon nem férnek el.
     Nem tördeljük őket több sorba — az elveszi a fél képernyőt. Helyette
     a fülsáv oldalra húzható lesz, ahogy a telefonokon megszokott. */
  .tabs,
  .tab-list,
  .nav-tabs,
  [role="tablist"] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;                 /* a görgetősáv csúnya lenne */
    margin-left:  calc(-1 * var(--spacing-md));   /* széltől szélig fusson */
    margin-right: calc(-1 * var(--spacing-md));
    padding-left:  var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .tabs::-webkit-scrollbar,
  .tab-list::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar,
  [role="tablist"]::-webkit-scrollbar {
    display: none;
  }

  .tabs > *,
  .tab-list > *,
  .nav-tabs > *,
  [role="tablist"] > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* ==========================================================================
     7. PÁRBESZÉDABLAKOK — alulról felcsúszó lap
     ==========================================================================
     Telefonon a képernyő közepén lebegő ablak rossz megoldás: a billentyűzet
     kitakarja, és a bezárás gombja a képernyő tetején van, ahová nem ér fel
     az ujj. Helyette az ablak alulról jön fel, a képernyő aljához tapad, és
     legfeljebb a magasság 92%-át foglalja el. Ez a telefonokon megszokott
     megoldás — a felhasználónak nem kell megtanulnia. */
  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-sm,
  .modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;  /* csak felül kerek */
    animation: mobilFelcsuszik var(--idotartam-lassu) var(--ease-out);
  }

  @keyframes mobilFelcsuszik {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Az ablak feje és lába a helyén marad, csak a közepe görgethető. */
  .modal-header,
  .modal-footer {
    flex: 0 0 auto;
    padding: var(--spacing-md);
  }

  .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-md);
  }

  .modal-footer {
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
  }

  /* Fogantyú az ablak tetején — jelzi, hogy ez egy felhúzható lap. */
  .modal-header::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--vonal-eros);
  }

  .modal-header {
    position: relative;
    padding-top: calc(var(--spacing-md) + 8px);
  }

  /* ==========================================================================
     8. TÁBLÁZATOK
     ==========================================================================
     Ez a legnagyobb falat. Két megoldás van, és a program JS-e (mobil.js)
     dönti el táblázatonként, melyik illik rá:

     A) KÁRTYÁS — a sorból külön kis kártya lesz, minden adat a saját
        feliratával ("Ügyszám: 12/2026"). Ez olvasható, nem kell húzogatni.
        Akkor jó, ha a sor nem túl sok adatot tartalmaz.

     B) GÖRGETHETŐ — a táblázat marad táblázat, de kap saját, oldalra húzható
        keretet. Akkor jó, ha az oszlopok összehasonlítása a lényeg
        (pl. számoszlopok), mert a kártyás nézet ezt elrontaná.

     Gépen egyik sem hat: a JS csak 768 képpont alatt fut le, és felette
     minden hozzáadott jelölést visszavesz. */

  /* --- B) GÖRGETHETŐ VÁLTOZAT --- */
  .m-gorgetheto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Széltől szélig fusson, hogy minél több oszlop látszódjon. */
    margin-left:  calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    padding-left:  var(--spacing-md);
    padding-right: var(--spacing-md);
    /* Halvány árnyék a szélén: jelzi, hogy van még odébb. */
    background:
      linear-gradient(to right, var(--felulet-lap) 30%, transparent),
      linear-gradient(to left,  var(--felulet-lap) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%,   rgba(18,32,46,.12), transparent),
      radial-gradient(farthest-side at 100% 50%,rgba(18,32,46,.12), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .m-gorgetheto > table {
    min-width: 560px;              /* ennél keskenyebben olvashatatlan lenne */
  }

  /* --- A) KÁRTYÁS VÁLTOZAT --- */
  table.m-kartya,
  table.m-kartya tbody,
  table.m-kartya tr,
  table.m-kartya td {
    display: block;
    width: auto;
  }

  table.m-kartya {
    border: 0;
    background: none;
    box-shadow: none;
  }

  /* A fejlécsor eltűnik — a feliratok bekerülnek a cellák elé. */
  table.m-kartya thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  table.m-kartya tr {
    background: var(--felulet-lap);
    border: 1px solid var(--vonal);
    border-radius: var(--radius-md);
    box-shadow: var(--arnyek-nyugalmi);
    margin-bottom: var(--spacing-ms);
    padding: var(--spacing-ms) var(--spacing-md);
  }

  table.m-kartya tr:last-child {
    margin-bottom: 0;
  }

  /* Kijelölt / kiemelt sor a kártyás nézetben is látszódjon. */
  table.m-kartya tr.kijelolt,
  table.m-kartya tr.selected,
  table.m-kartya tr.active {
    border-color: var(--kiemelo);
    background: var(--felulet-kiemelt);
  }

  table.m-kartya td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 0;
    border: 0;
    border-bottom: 1px solid var(--vonal-halvany);
    text-align: right;
    min-height: 0;
  }

  table.m-kartya td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* A felirat, amit a JS másolt ide a fejlécből. */
  table.m-kartya td[data-cimke]::before {
    content: attr(data-cimke);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    color: var(--szoveg-harmadlagos);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
  }

  /* Az érték doboza (mobil.js csomagolja be): jobbra zárt, tördelhető. */
  table.m-kartya td > .m-ertek {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  /* Az ELSŐ cella a kártya címe: nagyobb, felirat nélkül, teljes szélességben. */
  table.m-kartya td.m-cim {
    display: block;
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--szoveg-fo);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
  }

  table.m-kartya td.m-cim::before {
    content: none;
  }

  /* Üres cella ne foglaljon helyet a kártyán. */
  table.m-kartya td.m-ures {
    display: none;
  }

  /* A műveleti gombok cellája a kártya alján, széles gombokkal. */
  table.m-kartya td.m-muveletek {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--vonal-halvany);
    border-bottom: 0;
    margin-top: var(--spacing-xs);
  }

  table.m-kartya td.m-muveletek::before {
    content: none;
  }

  /* ==========================================================================
     9. KÁRTYÁK, PANELEK
     ========================================================================== */
  .content-card,
  .card,
  .panel,
  .dashboard-card {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  .card-body,
  .panel-body {
    padding: 0;
  }

  /* ==========================================================================
     10. A LEBEGŐ GYORSGOMB (+)
     ==========================================================================
     Telefonon a jobb alsó sarokban marad, de feljebb ül, hogy ne takarja
     a lap alját, és tiszteletben tartja az iPhone alsó sávját. */
  .fab,
  .gyors-gomb,
  .floating-add-btn,
  .quick-add-btn {
    right: max(var(--spacing-md), env(safe-area-inset-right));
    bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
  }

  /* ==========================================================================
     11. ÉRTESÍTÉSEK
     ==========================================================================
     Telefonon FELÜLRŐL jönnek, teljes szélességben — alul a hüvelykujj és a
     gyorsgomb van. */
  .notifications-container {
    top: calc(var(--spacing-sm) + env(safe-area-inset-top));
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    max-width: none;
  }

  /* ==========================================================================
     12. AMI TELEFONON CSAK ZAVAR
     ==========================================================================
     Nem törlünk semmit — csak elrejtünk olyat, aminek telefonon nincs
     értelme. Amelyik elemre a program JS-e hivatkozik, az `display: none`
     mellett is ott marad a lapon. */
  .csak-gepen,
  .desktop-only {
    display: none;
  }

  .csak-telefonon,
  .mobile-only {
    display: revert;
  }

  /* --------------------------------------------------------------------------
     DOKUMENTUMTÁR: KÁRTYANÉV TELEFONON
     A rács telefonon két hasábos, így egy kártya ~128 px. Gépen négy sor elég
     a beszédes iratnevekhez, ezen a szélességen viszont a 8-ból 6 név csonka
     maradt (mérve, 2026-08-22) — itt hat sort engedünk. Inkább legyen magasabb
     a kártya, mint hogy a név vége (ami a lényeg) lemaradjon.
     -------------------------------------------------------------------------- */
  .card-name {
    -webkit-line-clamp: 8;
    line-clamp: 8;
  }

  /* --------------------------------------------------------------------------
     ÜGY-AKTA: SZAKASZ-FEJLÉC
     A fejléc egyetlen flex sor, nyolc elemmel: nyíl, sorszám, cím, állapot,
     iratszám, majd három gomb. Gépen elfér; telefonon a cím `min-width: 0`
     miatt nullára préselődik, és a böngésző BETŰNKÉNT tördeli függőlegesen
     (2026-08-22, iPhone 430 px).

     Megoldás: a fejléc törhet sorokra. A cím a nyíl és a sorszám mellett
     kapja a maradékot, a jelvények és a gombok a következő sorba csúsznak.
     -------------------------------------------------------------------------- */
  .szakasz-fej {
    flex-wrap: wrap;
    row-gap: var(--spacing-xs, 6px);
  }

  .szakasz-cim {
    /* A nyíl + sorszám együtt ~76 px; a cím a sor maradékát kapja, így valódi
       szélessége lesz, és szóhatáron tud törni. */
    flex: 1 1 calc(100% - 76px);
    min-width: 0;
  }

  .szakasz-nev {
    /* Ha mégis egyetlen hosszú szó jönne (pl. iktatószám), az törjön, de a
       normál szöveg maradjon szóhatáron. */
    overflow-wrap: anywhere;
  }

  /* A jelvények a második sor elején kezdenek, hogy a gombok is melléjük
     férjenek — behúzással hármas sortörés lenne belőle. */
  .szakasz-allapot {
    margin-left: 0;
  }

  /* A három gomb a sor végére kerül, egymás mellett, ujjal fogható méretben. */
  .szakasz-muveletek {
    margin-left: auto;
  }

  .szakasz-muveletek .btn-icon {
    min-width: 40px;
    min-height: 40px;
  }

  /* ==========================================================================
     TELEFONOS ÁTVIZSGÁLÁS 2026-09-07 — öt mért hiba javítása
     ========================================================================== */

  /* (1) A menügomb (layout.css, z-index 1001) a felugró ablak FÖLÉ került
     34 ablaknál, mert az ablakok a --z-modal (1000) tokent kapják. Telefonon
     a nyitott ablak kerüljön a gomb fölé; a toast (1100) továbbra is felül van. */
  .modal.active,
  .modal-backdrop.active,
  .modal-backdrop.show,
  .modal-overlay.active {
    z-index: 1010;
  }

  /* (3) Akta nyitó/záró lap ablak: az oldal-CSS kéthasábos rácsot ad a
     .form-row-nak, a jobb oldali aláírás-mező 175 px-t kilógott. */
  .modal .form-row,
  .main-content .form-row {
    grid-template-columns: 1fr;
  }

  /* (4) Súgó-ablakok kódpéldája (pre): 498 px széles volt, oldalra kellett
     húzni. Törjön a sor, mint a normál szöveg. */
  .modal pre,
  .main-content pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  /* (5) Megbízói jelentés szerkesztője: a fülsor overflow:hidden-nel 14 px-t
     levágott. Legyen oldalra húzható, mint a többi fülsor. */
  .tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* (6) Selejtezés-súgó ablak: a két összehasonlító doboz a HTML-be írt
     (inline) kéthasábos ráccsal áll, amit csak !important tud felülírni.
     Telefonon egymás alá kerülnek. */
  .modal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* A súgó-ablakok kis táblázatainak fejléce nowrap volt → 11 px kilógás. */
  .modal th {
    white-space: normal;
  }

  /* (7) Megbízói jelentés szerkesztője: a beállítás-hasáb és az élő A4-es
     előnézet egymás mellett állt (flex), az előnézet 350 px-nél nem lehetett
     keskenyebb → mindkettő összenyomódott és kilógott. Telefonon a beállítások
     kerülnek felülre, az előnézet alá, oldalra húzható keretben (A4-marad). */
  .editor-layout {
    flex-direction: column;
  }
  .editor-layout .config-column,
  .editor-layout .preview-column {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    position: static;
    height: auto;
    max-height: none;
  }
  .editor-layout .preview-column {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   NAGYON KESKENY TELEFONOK (iPhone SE, 375 alatt)
   ============================================================================ */
@media (max-width: 380px) {
  .main-content {
    padding-left:  max(var(--spacing-ms), env(safe-area-inset-left));
    padding-right: max(var(--spacing-ms), env(safe-area-inset-right));
  }

  .page-header h1,
  .page-header h2 {
    font-size: var(--font-size-xl);
  }
}

/* ============================================================================
   FEKVŐ TÁJOLÁS, ALACSONY KÉPERNYŐ
   ----------------------------------------------------------------------------
   Ha a telefont eldöntik, a magasság alig 400 képpont. Ilyenkor a felcsúszó
   ablak fogantyúja és a nagy térközök elveszik a helyet a tartalomtól.
   ============================================================================ */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .modal-dialog,
  .modal-content {
    max-height: 96vh;
  }

  .main-content {
    padding-top: 60px;
  }
}