/* A HÁROM NÉZET — mi változik kis képernyőn.
 *
 * A többi stíluslap az ASZTALI nézetet írja le: az a teljes elrendezés,
 * felülírás nélkül. Ez a fájl mondja meg, mit adunk fel, ahogy szűkül a hely.
 * Ezért itt és csak itt van @media szabály az egész rendszerben.
 *
 *   mobil     ..… 639px    egy hasáb; ami nem létfontosságú, elrejtve
 *   tablet    640 … 1023px két hasáb helyett egy ott, ahol szorulna
 *   asztali   1024px …     teljes elrendezés (a többi fájl alapállapota)
 *
 * A töréspontok SZÁMKÉNT állnak itt, és csak itt: a @media szabály nem
 * fogad el var()-t, tehát tokenként úgysem lehetne használni őket.
 */

/* ==========================================================================
 * MOBIL ÉS TABLET egyaránt (…1023px)
 * Amit két hasábban nem érdemes mutatni.
 * ======================================================================== */
@media (max-width: 1023px) {

  /* A felső sáv fülei külön sorba törnek: hét fül nem fér a logó mellé. */
  .topbar { flex-wrap:wrap; gap:0 12px; padding:0 12px; }
  .nav-links { order:3; flex-basis:100%; }
  .nav-tab { padding:0 9px; font-size:var(--betu-alap); }

  /* A forduló két utaslistája egymás alá kerül: egymás mellett a hét
     oszlop olvashatatlanná zsugorodna. */
  .run-body { grid-template-columns:1fr; }

  /* A beosztatlanok csoportjain belül egy hasáb. */
  .pool-rows { grid-template-columns:1fr; }

  /* Az autók listája mellől a terhelés alá kerül. Egy hasábban nincs mi
     mellett tapadnia, ezért a ragadást is elengedi. */
  .fleet-split { grid-template-columns:1fr; }
  .fleet-side { position:static; }
}

/* ==========================================================================
 * CSAK MOBIL (…639px)
 * Itt már a másodlagos adatokat is elhagyjuk, hogy a lényeg elférjen.
 * ======================================================================== */
@media (max-width: 639px) {

  /* A logó marad, a márkanév megy: az ikon önmagában is azonosít. */
  .brand-name { display:none; }

  /* Az utassorból kiesik a cég és a helyszín — a név, az idő és a járat
     marad. A teljes adat a vendégek lapján és a szerkesztőben ott van. */
  .pax-grid { grid-template-columns: 40px minmax(0,1.4fr) 40px 58px 62px 58px; }
  .pax-grid .c-comp, .pax-grid .c-loc, .pax-grid .c-arr { display:none; }

  /* A forduló fejlécsora törhet, ha a három rész nem fér el. */
  .run-route { flex-wrap:wrap; }

  /* A beosztatlan utas sora ITT törhet több sorba: telefonon nyolc adat
     egymás mellett olvashatatlanul keskeny oszlopokat adna. Asztali és
     tablet nézetben egy sor marad. */
  .pax-wide { flex-wrap:wrap; }
  .pax-wide .pax-n, .pax-wide .pax-i { flex:1 1 auto; white-space:normal; overflow:visible; }
  .pax-wide .pax-edit { margin-left:0; }

  /* A helyszínek sora telefonon egymás alá: hat oszlop nem fér ki. */
  .plc-row, .plc-assign { grid-template-columns:1fr; }
  .plc-head { display:none; }

  /* A beállítások fülei két sorban, kisebb belső margóval. */
  .tab-bar label { padding:6px 10px; }

  /* A napkártyák egy hasábban, teljes szélességben. */
  /* Keskeny kijelzőn a hét hasáb olvashatatlan: a naptár egy oszlopba
     rendeződik, a napnevek fejléce pedig felesleges - a kártyán ott van. */
  .naptar-fejlec { display:none; }
  .naptar-het { grid-template-columns:1fr; }

  /* A teendők is egy hasábban: a szám és a szöveg így marad olvasható. */
  .todo { grid-template-columns:1fr; }

  /* A beállítási űrlapok egy mezővel soronként. */
  .sf-grid { grid-template-columns:1fr; }

  /* A flotta sora telefonon törik: a sofőrválasztó és a ⚙ a saját sorába
     kerül, különben a név elfogyna mellettük. */
  .fleet-row { flex-wrap:wrap; }
  .fleet-tools { margin-left:0; flex-basis:100%; justify-content:flex-end; }
}