/* A beállítások kartotékfülei és űrlaprácsa.
   Betöltés: lib/v2/web/layout.js — a lapok közös fejlécéből. */

/* --- Beállítások: kartotékfülek ---
   A váltás rejtett rádiógombokkal megy, szkript nélkül. Minden fül egy
   témát fog össze, és mindegyiknek saját mentése van - egy űrlap egy
   témát ment, nem az egész lapot. */
/* A FÜLEKET VÁLASZTÓ RÁDIÓGOMBOK. Rejtve vannak, de fókuszálhatónak kell
   maradniuk: a fülek billentyűzetről is válthatók, és a :focus-visible
   szabályok is rájuk épülnek. Ezért nem display:none.
 *
 * A méretüket KÖTELEZŐ megadni. Az alapréteg minden input-ot width:100%-ra
 * állít; egy position:absolute elem viszont a legközelebbi POZICIONÁLT ősre
 * méreteződik, és ilyen nem volt — így a kezdeti tartalmazó blokkra, vagyis
 * a teljes ablakszélességre. A vízszintes helyük közben a folyamban maradt
 * helyük, ami a main behúzásával kezdődik: minden rádiógomb ennyivel lógott
 * túl a lap jobb szélén. Ez adta a vízszintes csúszást, amitől a ragadó
 * felső sáv - ami csak ablakszélességű - jobbra görgetve rövidnek látszott.
 * Ez a két lap az egyetlen, amelyik füleket használ, ezért csak itt látszott.
 *
 * A position:relative innentől a .tabs-ra köti őket, a méret pedig 1px:
 * így sem méretben, sem helyben nem tudnak kilógni. */
.tabs { position:relative; }
.tabs > input[name="settings-tab"],
.tabs > input[name="settlement-tab"] { position:absolute; width:1px; height:1px;
  margin:0; padding:0; border:0; opacity:0; pointer-events:none; }
.tab-bar { display:flex; gap:2px; border-bottom:2px solid var(--szin-keret-halk); margin-bottom:14px;
  flex-wrap:wrap; }
.tab-bar label { padding:7px 14px; font-size:var(--betu-urlap); font-weight:600; color:var(--szin-szoveg-halk);
  cursor:pointer; border-radius:7px 7px 0 0; border:1px solid transparent;
  border-bottom:0; margin-bottom:-2px; }
.tab-bar label:hover { color:var(--szin-szoveg); background:var(--szin-hatter-kiemelt); }
.tab-panel { display:none; }

#tab-times:checked ~ .tab-bar label[for="tab-times"],
#tab-plan:checked  ~ .tab-bar label[for="tab-plan"],
#tab-sync:checked  ~ .tab-bar label[for="tab-sync"],
#tab-sound:checked ~ .tab-bar label[for="tab-sound"],
#tab-push:checked ~ .tab-bar label[for="tab-push"],
#tab-days:checked ~ .tab-bar label[for="tab-days"],
#tab-users:checked ~ .tab-bar label[for="tab-users"],
#tab-places:checked ~ .tab-bar label[for="tab-places"],
#tab-years:checked ~ .tab-bar label[for="tab-years"] {
  color:var(--szin-szoveg); background:var(--szin-lap); border-color:var(--szin-keret-halk);
  border-bottom:2px solid var(--szin-lap); }
#tab-times:checked ~ .panel-times,
#tab-plan:checked  ~ .panel-plan,
#tab-sync:checked  ~ .panel-sync,
#tab-sound:checked ~ .panel-sound,
#tab-push:checked ~ .panel-push,
#tab-days:checked ~ .panel-days,
#tab-years:checked ~ .panel-years,
#tab-profiles:checked ~ .panel-profiles,
#tab-users:checked ~ .panel-users,
#tab-places:checked ~ .panel-places,
#stab-lista:checked ~ .panel-lista,
#stab-osszesito:checked ~ .panel-osszesito,
#stab-statisztika:checked ~ .panel-statisztika,
#stab-arak:checked ~ .panel-arak,
#stab-partnerek:checked ~ .panel-partnerek { display:block; }

/* Billentyűzetről is látszódjon, melyik fülön áll a fókusz. A rádiógomb
   rejtve van, ezért a hozzá tartozó fület keretezzük ki - fülenként
   külön szabállyal, különben mind a négy kigyulladna. */
#tab-times:focus-visible ~ .tab-bar label[for="tab-times"],
#tab-plan:focus-visible  ~ .tab-bar label[for="tab-plan"],
#tab-sync:focus-visible  ~ .tab-bar label[for="tab-sync"],
#tab-sound:focus-visible ~ .tab-bar label[for="tab-sound"],
#tab-push:focus-visible ~ .tab-bar label[for="tab-push"],
#tab-days:focus-visible ~ .tab-bar label[for="tab-days"],
#tab-users:focus-visible ~ .tab-bar label[for="tab-users"],
#tab-places:focus-visible ~ .tab-bar label[for="tab-places"],
#tab-years:focus-visible ~ .tab-bar label[for="tab-years"] {
  outline:2px solid var(--szin-hivatkozas); outline-offset:-2px; }

/* Tömör űrlaprács: címke a mező fölött, több mező egy sorban. */
/* A mezők három sávban állnak: CÍMKE / MEZŐ / MAGYARÁZAT. A címke két
   sornyi helyet kap akkor is, ha egy sorba fér - enélkül a hosszabb
   feliratú mező lejjebb tolta a saját beviteli mezőjét, és a sor
   lépcsőzetesen állt. Így minden mező egy vonalban kezdődik. */
.sf-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:12px 16px; margin-bottom:12px; align-items:start; }
.sf { display:flex; flex-direction:column; min-width:0; }
.sf > label { font-size:var(--betu-jelolo); text-transform:uppercase; letter-spacing:.03em;
  color:var(--szin-szoveg-kozep); font-weight:700; line-height:1.3;
  min-height:2.6em; display:flex; align-items:flex-end; padding-bottom:3px; }
.sf input, .sf select { width:100%; padding:5px 8px; font-size:var(--betu-urlap); }
/* A magyarázat a mező alatt, egységes felső hézaggal - és nem nyújtja
   meg a szomszédját, mert a rács tetejére igazít. */
.sf-note { font-size:var(--betu-jelolo); color:var(--szin-szoveg-halvany); line-height:1.35; margin:4px 0 0; }
/* A jelölőnégyzetes mezőnek nincs külön címkéje, ezért a mező sávjához
   igazítjuk, nem a címkééhez. */
.sf > .sf-chk { min-height:0; margin-top:2.6em; padding-bottom:0; }
.sf-chk { display:flex; align-items:center; gap:7px; font-size:var(--betu-urlap); color:var(--szin-szoveg);
  text-transform:none; letter-spacing:0; font-weight:500; }
.sf-chk input { width:auto; }
.sf-group { font-size:var(--betu-jelolo); text-transform:uppercase; letter-spacing:.06em;
  color:var(--szin-szoveg-halvany); font-weight:700; margin:14px 0 5px; padding-bottom:3px;
  border-bottom:1px solid var(--szin-valaszto); }
.sf-group:first-of-type { margin-top:0; }
.sf-actions { display:flex; justify-content:flex-end; margin-top:4px; }
.sf-help { margin-top:14px; }
.sf-help > summary { cursor:pointer; font-size:var(--betu-alap); color:var(--szin-szoveg-halk); }
.sf-help > summary:hover { color:var(--szin-szoveg); }
.sf-status { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:9px 12px; border:1px solid var(--szin-keret-halk); border-radius:var(--ker-alap); background:var(--szin-lap);
  font-size:var(--betu-alap); margin:6px 0 8px; }
.sf-status form { margin-left:auto; }

/* Automatikus sofőrértesítések: admin választja a címzetteket, az egyes
 * szervezők pedig a saját készüléküket iratják fel. */
.push-recipients { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); background:var(--szin-lap); overflow:hidden; }
.push-recipient-head, .push-recipient { display:grid; grid-template-columns:88px minmax(0,1fr) 110px 100px; gap:10px; align-items:center; padding:7px 11px; border-bottom:1px solid var(--szin-valaszto); }
.push-recipient { font-size:var(--betu-alap); }
.push-recipient-head { background:var(--szin-hatter-halk); color:var(--szin-szoveg-halvany); font-size:var(--betu-apro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.push-recipient:last-child { border-bottom:0; }
.push-recipient input { justify-self:center; }
.push-device { margin-top:14px; padding:12px; border:1px solid var(--szin-keret-halk); border-radius:var(--ker-alap); background:var(--szin-hatter-halk); }
.push-device h3 { margin:0 0 5px; font-size:var(--betu-kiemelt); }
.push-device p { margin:0 0 9px; }
.push-device button + button { margin-left:7px; }
.push-history { margin-top:14px; }
.push-history h3 { margin:0 0 5px; font-size:var(--betu-kiemelt); }
.push-history p { margin:0 0 8px; }
.push-history-list { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); background:var(--szin-lap); overflow:hidden; }
.push-history-row { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:7px 11px; border-bottom:1px solid var(--szin-valaszto); }
.push-history-row:last-child { border-bottom:0; }
.push-history-row span { display:flex; flex-direction:column; min-width:0; font-size:var(--betu-alap); }
.push-history-row i { color:var(--szin-szoveg-halk); font-size:var(--betu-kicsi); font-style:normal; }
.push-history-row button { white-space:nowrap; }

/* Napirend: egy sor egy nap, minden mező azonos oszlopban. */
.sched { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); background:var(--szin-lap); overflow:hidden;
  margin-bottom:10px; }
.sched-row { display:grid; grid-template-columns:112px 92px 92px minmax(0,1fr) minmax(0,1fr);
  gap:10px; align-items:center; padding:5px 11px; border-bottom:1px solid var(--szin-valaszto); }
.sched-row:last-child { border-bottom:0; }
.sched-head { background:var(--szin-hatter-halk); font-size:var(--betu-apro); text-transform:uppercase;
  letter-spacing:.05em; color:var(--szin-szoveg-halvany); font-weight:700; }
.sched-day { font-weight:600; font-size:var(--betu-alap); }
.sched input { width:100%; padding:3px 6px; font-size:var(--betu-alap); }
.sched-pair { display:flex; align-items:center; gap:5px; }
.sched-pair i { color:var(--szin-szoveg-halvany); font-style:normal; }

/* Felhasználók: egy sor egy fiók, rögzített oszlopokkal - a szöveg nem
   törhet négy sorba attól, hogy a szomszédja hosszabb.
   A szerkesztő NEM tolja szét a sort: buborékként nyílik alá, ahogy az
   utasoknál is - így a fogaskerék a helyén marad. */
.usr { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); background:var(--szin-lap); overflow:visible; }
.usr-row { position:relative; display:grid;
  grid-template-columns:16px minmax(0,1.6fr) minmax(0,1fr) 132px 30px;
  gap:12px; align-items:center; padding:6px 11px; border-bottom:1px solid var(--szin-valaszto);
  font-size:var(--betu-alap); }
.usr-row:last-child { border-bottom:0; }
.usr-head { background:var(--szin-hatter-halk); font-size:var(--betu-apro); text-transform:uppercase;
  letter-spacing:.05em; color:var(--szin-szoveg-halvany); font-weight:700; }
.usr-off { opacity:.5; }
.usr-dot { color:var(--szin-rendben); font-size:var(--betu-kicsi); text-align:center; }
.usr-off .usr-dot { color:var(--szin-szoveg-halvany); }
.usr-name { font-weight:600; }
.usr-name i, .usr-role i { font-style:normal; color:var(--szin-szoveg-halvany); font-weight:400;
  font-size:var(--betu-kicsi); margin-left:7px; }
.usr-role { color:var(--szin-szoveg-kozep); }
.usr-seen { color:var(--szin-szoveg-halk); font-size:var(--betu-kicsi); white-space:nowrap;
  font-variant-numeric:tabular-nums; }

.usr-edit { justify-self:end; }
.usr-edit > summary { cursor:pointer; list-style:none; color:var(--szin-szoveg-halvany); padding:2px 5px; }
.usr-edit > summary::-webkit-details-marker { display:none; }
.usr-edit > summary:hover { color:var(--szin-szoveg); }
.usr-edit[open] > summary { color:var(--szin-szoveg); }
.usr-edit-body { position:absolute; left:8px; right:8px; top:100%; z-index:25;
  background:var(--szin-lap); border:1px solid var(--szin-keret); border-radius:var(--ker-alap); padding:12px;
  box-shadow:var(--arny-panel); margin-top:2px; }
.usr-edit-body.opens-up { top:auto; bottom:100%; margin-top:0; margin-bottom:2px; }
.usr-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:10px 14px; margin-bottom:12px; }
.usr-grid select { width:100%; padding:5px 8px; font-size:var(--betu-urlap); }
.usr-actions { display:flex; align-items:center; gap:12px;
  border-top:1px solid var(--szin-valaszto); padding-top:10px; }
.usr-actions .src { flex:1; }
/* A törlés külön, a mentéstől elhúzva: ne lehessen véletlenül eltalálni. */
.usr-danger { margin-top:10px; padding-top:10px; border-top:1px solid var(--szin-veszely-halk);
  display:flex; justify-content:flex-end; }
.usr-danger button { padding:4px 12px; font-size:var(--betu-alap); }

/* Évek: egy sor egy konferencia, a mögötte álló munkával együtt. */
.yr-row { display:grid; grid-template-columns:52px minmax(0,1fr) 78px 78px 82px auto;
  gap:10px; align-items:center; padding:7px 11px; border-bottom:1px solid var(--szin-valaszto);
  font-size:var(--betu-alap); }
.yr-row:last-child { border-bottom:0; }
.yr-now { background:var(--szin-uj-lap); }
.yr-year { font-weight:700; font-size:var(--betu-kiemelt); font-variant-numeric:tabular-nums; }
.yr-name { display:flex; flex-direction:column; gap:1px; min-width:0; }
.yr-name .src { font-size:var(--betu-kicsi); }
.yr-n { text-align:right; color:var(--szin-szoveg-halk); font-variant-numeric:tabular-nums; }
.yr-act { text-align:right; }
.yr-act button { padding:3px 9px; font-size:var(--betu-kicsi); }

/* HELYSZÍNEK
 *
 * Egy sor = egy helyszín, és a sor maga az űrlapja: név, fajta, cím,
 * menetidő, majd a forrásbeli írásmódok. Az utóbbi a legfontosabb oszlop -
 * abból derül ki, hogy a "Deák" és a "Deák tér" ugyanaz a hely.
 */
.plc { display:flex; flex-direction:column; gap:3px; margin:10px 0; }
.plc-row { display:grid; gap:6px; align-items:center;
  grid-template-columns: minmax(0,1.1fr) 124px minmax(0,1.5fr) 140px 66px minmax(0,1.2fr) 52px 62px;
  padding:3px 5px; border:1px solid var(--szin-keret-halk); border-radius:var(--ker-kicsi);
  background:var(--szin-lap); }
.plc-head { background:none; border-color:transparent; font-size:var(--betu-apro);
  text-transform:uppercase; letter-spacing:.05em; color:var(--szin-szoveg-halvany); }
.plc-row input, .plc-row select { width:100%; padding:3px 6px; font-size:var(--betu-alap); }
.plc-aliases { display:flex; flex-wrap:wrap; gap:3px; min-width:0; }
.plc-alias { font-size:var(--betu-jelolo); background:var(--szin-hatter-halk);
  border:1px solid var(--szin-keret-halk); border-radius:var(--ker-teljes); padding:1px 7px;
  color:var(--szin-szoveg-kozep); }
.plc-act { display:flex; gap:3px; justify-content:flex-end; }
.plc-act button { padding:2px 7px; font-size:var(--betu-alap); }
.plc-new { border-style:dashed; margin-top:8px; }

/* A még hozzá nem rendelt írásmódok: amíg itt vannak, a tervező külön
   helyszínnek veszi őket. */
.plc-unknown { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.plc-assign { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) 110px;
  gap:6px; align-items:center; }
.plc-unknown-name { font-weight:600; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.plc-assign select { width:100%; padding:3px 6px; font-size:var(--betu-alap); }
.plc-use { text-align:right; color:var(--szin-szoveg-halk); font-size:var(--betu-jelolo); }
/* A magyarázó doboz: a három oszlop jelentése egy helyen, mielőtt bárki
   találgatni kezdene, mit mér a "perc". */
.plc-help { background:var(--szin-hatter-halk); border:1px solid var(--szin-keret-halk);
  border-radius:var(--ker-alap); padding:8px 12px; margin:8px 0; }
.plc-help p { margin:0 0 6px; font-size:var(--betu-alap); color:var(--szin-szoveg-kozep); }
.plc-help p:last-child { margin-bottom:0; }

/* A címkereső lenyíló listája. A lapon LEBEG, nem a sorban: a helyszínek
   táblázata görgethető dobozban ül, egy sorba zárt lista kilógna belőle. */
.cimlista { position:absolute; z-index:120; max-width:min(520px, 92vw);
  background:var(--szin-lap); border:1px solid var(--szin-keret);
  border-radius:var(--ker-alap); box-shadow:var(--arny-lebego); overflow:hidden; }
.cimlista-elem { display:block; width:100%; text-align:left; border:0; box-shadow:none;
  background:none; padding:6px 10px; font-size:var(--betu-alap); cursor:pointer;
  color:var(--szin-szoveg); border-radius:0; }
.cimlista-elem:hover { background:var(--alap-fokusz-halo); }

/* AZ ELSZÁMOLÁS LAPJA
 *
 * EGYETLEN táblázat, minden oszlop egy vonalban. Háromféle sor van, és a
 * hangsúlyuk is más: a partner csoportfejléc, a munka viszi az árat, a
 * forduló pedig a tétel - ez utóbbi halkabb, mert részlet.
 */
.ar-row { grid-template-columns: minmax(0,1.2fr) 48px 92px 92px 100px 120px 72px 62px; }
.prt-row { grid-template-columns: minmax(0,1.2fr) 54px minmax(0,1.6fr) 62px; }
.prt-auto { grid-template-columns: 108px minmax(0,1fr) minmax(0,1.2fr) 50px; }
.prt-auto select, .ar-row select { width:100%; padding:3px 6px; font-size:var(--betu-alap); }

.els { font-size:var(--betu-alap); }
.els th, .els td { padding:3px 7px; white-space:nowrap; }
.els td.csonkol { max-width:260px; }
/* A partner csoportfejléce: erős, hogy a szem megtalálja a határt. */
.els .els-partner td { background:var(--szin-hatter-kiemelt); padding-top:7px;
  border-top:2px solid var(--szin-keret); }
/* A munka viszi az árat, ezért ez a sor a hangsúlyos. */
.els .els-munka td { background:var(--szin-lap); }
/* A forduló RÉSZLET, nem összesítés: dőlt betű választja el a fenti
   soroktól, ahol a számok összeadódnak. */
.els .els-fordulo td { color:var(--szin-szoveg-halk); border-bottom-style:dotted;
  font-style:italic; }
/* A RAKODÓ SORA a teherautó munkája alatt. Nem részlet, mint a forduló:
   saját összeget hoz, ezért nem dőlt - de halkabb, mint a munka sora, mert
   nem ő a fő tétel. */
.els .els-rakodo td { background:var(--szin-lap); border-bottom-style:dotted; }
/* Ugyanígy a NEM alkalmazott számítási mód: ott van, hogy ellenőrizhető
   legyen a döntés, de nem ő adja az összeget. */
.els-nem-ez { color:var(--szin-szoveg-halk); font-style:italic; }
.els-be { color:var(--szin-szoveg-halvany); }
/* A két ár közül az érvényes ki van emelve - egy elszámolást ellenőrizni
   kell tudni. */
.els-ervenyes { background:var(--szin-rendben-halk); font-weight:700; }
.els-vegosszeg td { border-top:2px solid var(--szin-keret); font-size:var(--betu-kiemelt); }
/* AZ ÁTÍRHATÓ ÖSSZEG: az autópálya és a parkolás.
 *
 * Nem látszik rajta, hogy mező - ugyanolyan szám, mint a szomszédja. Aki nem
 * akarja átírni, annak semmi nem zavarja a szemét; aki igen, az rákattint, és
 * ott a mező. A szaggatott aláhúzás csak egérrel odaérve jelenik meg. */
.els-koltseg { min-width:76px; }
.els-szerk { display:inline; }
.els-ertek { padding:0; border:0; background:none; color:inherit; font:inherit;
  cursor:pointer; }
.els-ertek:hover { text-decoration:underline dotted; }
/* A kézzel átírt összeg vastagabb: az elszámoláson látni kell, hol nem a
   számítás adta a számot. */
.els-kezi { font-weight:700; }
.els-mezo { display:none; width:78px; padding:1px 3px; font-size:var(--betu-alap); }
.els-szerkeszt .els-ertek { display:none; }
.els-szerkeszt .els-mezo { display:inline-block; }
/* A szűrő a lista fölött: nap és partner, egy sorban. */
.els-szuro { margin-bottom:8px; }
.els-szuro select { padding:3px 6px; font-size:var(--betu-alap); }

/* A statisztika kártyái: egy szám nagyban, alatta az, hogy mit jelent.
   Szám magyarázat nélkül félrevezet - főleg egy elszámoláson. */
.stat-racs { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px; margin-top:8px; }
.stat-kartya { border:1px solid var(--szin-keret); border-radius:var(--ker-alap);
  padding:10px 12px; background:var(--szin-lap); }
.stat-cim { font-size:var(--betu-jelolo); text-transform:uppercase; letter-spacing:.05em;
  color:var(--szin-szoveg-halvany); font-weight:700; }
.stat-ertek { font-size:var(--betu-fejezet); font-weight:700; margin:2px 0 4px; }
.stat-kartya p { margin:0; font-size:var(--betu-jelolo); line-height:1.4; }

#tab-profiles:checked ~ .tab-bar label[for="tab-profiles"] { color:var(--szin-szoveg); background:var(--szin-lap); border-color:var(--szin-keret-halk); border-bottom:2px solid var(--szin-lap); }
#tab-profiles:focus-visible ~ .tab-bar label[for="tab-profiles"] { outline:2px solid var(--szin-hivatkozas); outline-offset:-2px; }
.profile-summary { margin:10px 0 16px; color:var(--szin-szoveg-kozep); }
.profiles { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.profile-row { display:grid; grid-template-columns:52px minmax(150px,1fr) minmax(220px,1fr); gap:10px; align-items:center; padding:6px 8px; border:1px solid var(--szin-keret-halk); border-radius:var(--ker-kicsi); background:var(--szin-lap); }
.profile-row img, .profile-empty { width:44px; height:52px; object-fit:cover; border-radius:var(--ker-apro); border:1px solid var(--szin-keret-halk); }
.profile-empty { display:grid; place-items:center; padding:3px; font-size:var(--betu-apro); color:var(--szin-szoveg-halvany); text-align:center; }
.profile-row > div { display:flex; flex-direction:column; min-width:0; }
.profile-row small { color:var(--szin-szoveg-halk); font-size:var(--betu-jelolo); }
.profile-alias { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:5px; }
.profile-alias input { min-width:0; padding:4px 6px; font-size:var(--betu-alap); }
.profile-alias button { padding:4px 8px; font-size:var(--betu-jelolo); }