/* A felső sáv, a menü és a bejelentkező lap.
   Betöltés: lib/v2/web/layout.js — a lapok közös fejlécéből. */

/* --- Fejléc ---
   Egyetlen sáv: a logó, a fülek és a jelzések egy sorban. A korábbi
   változatban külön fejléc- és menüsáv volt, ami két sornyi helyet vitt
   el minden lapon anélkül, hogy bármit mondott volna. */
.topbar { background:var(--szin-sav); padding:0 20px; display:flex; align-items:stretch;
  gap:18px; box-shadow:var(--arny-sav); }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none;
  padding:9px 0; flex-shrink:0; }
.brand-logo { height:24px; width:auto; display:block; }
.brand-name { color:var(--szin-lap); font-weight:700; font-size:var(--betu-cim); letter-spacing:-.01em; }

.nav-links { display:flex; align-items:stretch; flex-wrap:wrap; gap:2px; min-width:0; }
.nav-tab { display:inline-flex; align-items:center; gap:6px; color:var(--szin-sav-szoveg);
  text-decoration:none; padding:0 13px; font-size:var(--betu-urlap); font-weight:500;
  border-bottom:2px solid transparent; transition:color .12s, border-color .12s, background .12s; }
.nav-tab:hover { color:var(--szin-lap); background:rgba(255,255,255,.06); }
/* Az aktív fül alatt vonal - a lap tetején így látszik, hol vagyunk. */
.nav-tab.is-on { color:var(--szin-lap); border-bottom-color:var(--szin-sav-aktiv); background:rgba(255,255,255,.08); }
.nav-badge { background:var(--szin-veszely); color:var(--szin-lap); border-radius:var(--ker-alap); padding:1px 6px;
  font-size:var(--betu-jelolo); font-weight:700; line-height:1.5; }

.nav-side { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-icon { background:none; border:0; color:var(--szin-sav-szoveg); cursor:pointer; font-size:var(--betu-cim);
  line-height:1; padding:4px 6px; border-radius:var(--ker-kicsi); box-shadow:none; }
.nav-icon:hover { color:var(--szin-lap); background:rgba(255,255,255,.1); }
/* A kilépés ikonja beépített rajz, nem betűkarakter: a korábbi ⏻ jel a
   Windows és az Android alap betűtípusaiból hiányzik, és üres négyzetként
   jelent meg. A gomb magasságát a szöveges testvérekhez igazítjuk. */
.nav-icon svg { display:block; width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; }
.nav-icon.is-muted { opacity:.45; }
/* A v2 jelölés a sávban marad: minden lapon látszik, hogy ez az előnézet
   külön adatbázisból dolgozik - de nem foglal el egy egész sávot. */
.nav-tag { font-size:var(--betu-jelolo); font-weight:700; letter-spacing:.08em; color:var(--szin-szoveg);
  background:var(--szin-jelzes); border-radius:var(--ker-kicsi); padding:2px 6px; }
.nav-who { display:flex; flex-direction:column; line-height:1.15; color:var(--szin-sav-szoveg);
  font-size:var(--betu-alap); font-weight:600; }
.nav-who i { font-style:normal; font-size:var(--betu-apro); font-weight:500; color:var(--szin-sav-halk);
  text-transform:uppercase; letter-spacing:.05em; }

/* Bejelentkezés: egyetlen kártya a lap közepén, semmi más. */
.login-wrap { max-width:340px; margin:8vh auto; }
.login-card { background:var(--szin-lap); border:1px solid var(--szin-keret); border-radius:var(--ker-nagy);
  padding:22px; box-shadow:var(--arny-belepes); }
.login-card h2 { margin:0 0 4px; font-size:var(--betu-fejezet); }
.login-card .src { display:block; margin-bottom:16px; }
.login-card label { display:block; font-size:var(--betu-jelolo); text-transform:uppercase;
  letter-spacing:.03em; color:var(--szin-szoveg-kozep); font-weight:700; margin-bottom:3px; }
.login-card input { width:100%; padding:7px 10px; font-size:var(--betu-kiemelt); margin-bottom:12px; }
.login-card button { width:100%; padding:8px; font-size:var(--betu-kiemelt); }
.login-logo { display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:14px; }
.login-logo img { height:26px; }
.sync-state { font-size:var(--betu-kicsi); color:var(--szin-sav-halk); white-space:nowrap; }

/* Az EGÉSZ nap egy dobozban, a nap saját színével: a lap így egyetlen
   lapként olvasható, és ránézésre elárulja, melyik napon dolgozol.
   A forduló kártyáihoz nem ér hozzá - azok az AUTÓ színét hordozzák,
   ami a napi munkában fontosabb jelzés. */
.day-tint { padding:14px 16px 18px; border-radius:var(--ker-nagy);
  background:color-mix(in srgb, var(--pastel, var(--szin-lap)) 72%, var(--szin-lap));
  border:1px solid color-mix(in srgb, var(--accent, var(--szin-keret)) 30%, transparent);
  border-top:4px solid var(--accent, var(--szin-keret));
  box-shadow:0 6px 22px color-mix(in srgb, var(--accent, var(--szin-szoveg)) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.7); }
/* A fejléc a dobozon BELÜL nem kap saját keretet: doboz a dobozban zajos
   lenne. Elég egy vonal alatta, a nap színéből. */
.day-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding-bottom:8px;
  border-bottom:2px solid color-mix(in srgb, var(--accent, var(--szin-keret)) 45%, transparent); }
.day-head h2 { margin:0; }
/* Léptetés a szomszédos napra. A gomb a CÉLNAP színét viseli: már a
   kattintás előtt látszik, hova visz. */
.day-steps { display:inline-flex; }
.day-step { display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  font-size:var(--betu-kicsi); font-weight:600; color:var(--szin-szoveg); padding:3px 9px; border-radius:var(--ker-teljes);
  background:var(--pastel, var(--szin-hatter-kiemelt));
  border:1px solid color-mix(in srgb, var(--accent, var(--szin-keret)) 45%, transparent);
  box-shadow:0 1px 4px color-mix(in srgb, var(--accent, var(--szin-szoveg)) 18%, transparent); }
.day-step:hover { box-shadow:0 3px 9px color-mix(in srgb, var(--accent, var(--szin-szoveg)) 30%, transparent);
  border-color:var(--accent, var(--szin-szoveg-halvany)); }
.day-tint h3 { border-left:3px solid var(--accent, var(--szin-keret)); padding-left:8px; }
.day-tint .pax-pool { border-color:color-mix(in srgb, var(--accent, var(--szin-keret)) 45%, transparent);
  background:rgba(255,255,255,.6); }
/* A fordulók fehér lapon állnak a színes dobozon belül, hogy az autó
   színe és az utaslisták állapotszíne ne a nap színével keveredjen. */
.day-tint .run-card { background:var(--szin-lap); }
.event-name { text-transform:uppercase; letter-spacing:.02em; }

/* Ide hoztak: a cél két másodpercig felvillan, hogy ne kelljen szemmel
   megkeresni a sok sor között. */
.jump-target { animation:jump-flash 1.8s ease-out 1; }
@keyframes jump-flash {
  0%   { box-shadow:0 0 0 3px var(--szin-rendben-elenk); background:var(--szin-rendben-halk); }
  70%  { box-shadow:0 0 0 3px var(--szin-rendben-elenk); background:var(--szin-rendben-halk); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); background:transparent; }
}