/* Autók és sofőrök, valamint a terhelésük.
   Betöltés: lib/v2/web/layout.js — a lapok közös fejlécéből. */

/* Az autók listája mellett, oldalt: a terhelés az autókról szól, tehát
   ott van a helye, ahol a járműveket kezelik. */
/* A BAL HASÁB MINDENT VISZ: az autók, az új autó, a sofőrök és az új sofőr
   is egymás alatt fut, a terhelés pedig végig mellettük marad. Korábban a
   rács csak az autólistára terjedt ki, és a sofőrök szekciója a terhelés
   ALATT kezdődött - a jobb oldal üresen állt, a lap pedig fölöslegesen
   hosszú lett. */
.fleet-split { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px;
  align-items:start; }
.fleet-main { min-width:0; display:flex; flex-direction:column; gap:14px; }
.fleet-main > h3 { margin:6px 0 0; }
.fleet-side { min-width:0; position:sticky; top:8px; }
.fleet-side h3 { margin:0 0 6px; font-size:var(--betu-urlap); }

/* Összecsukható magyarázat és az új autó űrlapja. Eddig egyetlen szabály
   sem vonatkozott rájuk: a böngésző alapértelmezett <details> kinézetét
   kapták, ami kilógott a lap többi dobozából. */
.howto { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); background:var(--szin-hatter-halk);
  padding:8px 12px; margin-bottom:14px; }
.howto > summary { cursor:pointer; font-weight:600; font-size:var(--betu-urlap); color:var(--szin-szoveg-sotet); }
.howto[open] > summary { margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--szin-keret-halk); }

.fl { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); background:var(--szin-lap); overflow:hidden;
  margin-bottom:6px; }
.fl-row { display:grid; grid-template-columns:14px minmax(0,1fr) 62px 46px;
  gap:8px; align-items:center; padding:5px 9px; border-bottom:1px solid var(--szin-valaszto);
  font-size:var(--betu-kicsi); }
.fl-row:last-child { border-bottom:0; }
.fl-swatch { width:14px; height:14px; border-radius:var(--ker-apro); border:1px solid var(--szin-keret); }
.fl-bar { grid-column:1 / -1; height:7px; border-radius:var(--ker-apro);
  background:var(--szin-hatter-kiemelt); overflow:hidden; }
.fl-fill { display:block; height:100%; border-radius:var(--ker-apro); }
.fl-n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fl-pax { color:var(--szin-szoveg-halk); font-size:var(--betu-kicsi); }

/* --- Flotta (autók és sofőrök oldala) --- */
/* NINCS overflow:hidden - az levágná a sor alatt kinyíló szerkesztőt.
   A lekerekítést ezért a szélső sorok viszik, nem a doboz. */
.fleet { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); background:var(--szin-lap); }
.fleet-row { position:relative; display:flex; align-items:flex-start; gap:10px; padding:6px 10px;
  border-bottom:1px solid var(--szin-valaszto); font-size:var(--betu-urlap); }
.fleet-row:last-child { border-bottom:0; }
.fleet-row:first-child { border-radius:var(--ker-alap) var(--ker-alap) 0 0; }
.fleet-row:last-child { border-radius:0 0 var(--ker-alap) var(--ker-alap); }
.fleet-row:only-child { border-radius:var(--ker-alap); }
.fleet-row:nth-child(even) { background:var(--szin-sav-halvany); }
.fleet-row.fleet-off { opacity:.45; }
/* A sor több soros lett (a sofőrök egymás alatt állnak), ezért a bal oldali
   adatok a TETEJÉHEZ igazodnak, nem a közepéhez: négy sofőrnél a középre
   csúszott autónév nehezen olvasható listát adna. A közös sormagasság
   tartja egy vonalban az első sofőrrel. */
.fleet-row > span, .fleet-row > .fleet-tools { line-height:1.7; }
.fleet-mark { width:14px; text-align:center; color:var(--szin-rendben); font-size:var(--betu-alap); flex:none; }
.fleet-name { font-weight:600; min-width:170px; }
.fleet-plate { color:var(--szin-szoveg-halk); font-weight:400; margin-left:6px; }
.fleet-meta { color:var(--szin-szoveg-halk); font-size:var(--betu-alap); min-width:90px; }
/* A KATEGÓRIA: ez adja az elszámoláson az autó árszabását, ezért a soron a
   helye - ne kelljen a ⚙-t kinyitni ahhoz, hogy lássam, be van-e sorolva. */
.fleet-kat { color:var(--szin-szoveg-halk); font-size:var(--betu-alap); min-width:96px; }
/* A SOFŐRÖK EGYMÁS ALATT, TELJES NÉVVEL.
   Egy sorba tördelve a nevek becenévre rövidültek és összefolytak; ki
   melyik autót viszi, azt egymás alatt olvasva lehet átlátni. */
.fleet-drivers { display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  flex:1; min-width:0; }
.dchip { display:inline-flex; align-items:center; gap:4px; font-size:var(--betu-alap);
  line-height:1.4; background:var(--szin-valaszto); border-radius:var(--ker-nagy);
  padding:2px 5px 2px 10px; max-width:100%; }
.dchip-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dchip-default { background:var(--szin-rendben-halk); }
.dchip form { display:inline-flex; }
.dchip button { background:none; border:0; padding:0 2px; cursor:pointer;
  font-size:var(--betu-kicsi); color:var(--szin-szoveg-halk); line-height:1; flex:none; }
.dchip button:hover { color:var(--szin-szoveg); }

/* A SOR JOBB SZÉLE: a sofőrválasztó, a pipa és a ⚙ egy csoportban áll.
   Így a választó mindig ugyanott van - nem attól függ a helye, hány sofőr
   van már az autón -, és a ⚙ sem mozdul el alóla. */
.fleet-tools { margin-left:auto; display:flex; align-items:flex-start; gap:6px; flex:none; }
.fleet-add { display:inline-flex; gap:3px; align-items:center; }
.fleet-add select { width:auto; min-width:118px; padding:2px 5px; font-size:var(--betu-alap); }
.fleet-add button { padding:2px 7px; font-size:var(--betu-alap); }
.fleet-edit { display:inline-block; line-height:1; }
.fleet-edit > summary { cursor:pointer; list-style:none; padding:2px 5px; color:var(--szin-szoveg-halvany); }
.fleet-edit > summary::-webkit-details-marker { display:none; }
.fleet-edit > summary:hover { color:var(--szin-szoveg); }
.fleet-edit[open] > summary { color:var(--szin-szoveg); }

/* A SZERKESZTŐ A SOR ALATT LEBEG, ahogy az utasoké is. Korábban a soron
   BELÜL nyílt ki (flex-basis:100%), ezért megnyitáskor az egész sor
   átrendeződött és a ⚙ elugrott a kurzor alól. Így a sor érintetlen marad. */
.fleet-edit-body { position:absolute; left:0; right:0; top:100%; z-index:20;
  background:var(--szin-lap); border:1px solid var(--szin-keret); border-radius:var(--ker-kicsi);
  padding:8px; box-shadow:var(--arny-szerkeszto); margin-top:2px; }
/* Ha a sor alatt nem férne el (a lap alján), felfelé nyílik - a helyet a
   public/v2/dnd.js méri meg. */
.fleet-edit-body.opens-up { top:auto; bottom:100%; margin-top:0; margin-bottom:2px; }
/* AZ ŰRLAP SOROS ELRENDEZÉSE — ugyanaz a felépítés, mint az utasok
   szerkesztőjén: a mezők egy sorban futnak, a címke a mező fölött áll
   kicsiben, és nevesített csoportok tagolják őket. Ugyanaz a művelet
   ugyanúgy nézzen ki, akárhol végzi az ember.
   A lebegő panelben nem kell külön háttér: a panel maga az. */
.fleet-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  padding:8px; margin-top:4px; background:var(--szin-hatter-halk); border-radius:var(--ker-kicsi); }
.fleet-edit-body .fleet-form { padding:0; margin-top:0; background:none; }
.fleet-edit-body .fleet-form + .fleet-form { margin-top:8px; padding-top:8px;
  border-top:1px solid var(--szin-keret-halk); }
.fleet-form > label { display:flex; flex-direction:column; gap:2px;
  font-size:var(--betu-jelolo); color:var(--szin-szoveg-halk); text-transform:uppercase; letter-spacing:.03em; }
.fleet-form input:not([type=checkbox]) { width:auto; min-width:100px; padding:5px 8px; font-size:var(--betu-urlap); }
.fleet-form input[type=number] { min-width:70px; }
.fleet-form label.chk { flex-direction:row; align-items:center; gap:5px;
  text-transform:none; font-size:var(--betu-alap); color:var(--szin-szoveg); letter-spacing:0; }
.fleet-form label.chk input { width:auto; min-width:0; }
/* A csoportcímke: elválasztja, mi az autó azonosítása, mi a tervezést
   vezérlő beállítás. Az utas-szerkesztő pax-edit-group elemének párja. */
.fleet-form-group { align-self:flex-end; font-size:var(--betu-apro); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--szin-szoveg-halvany);
  border-bottom:1px solid var(--szin-keret-halk); padding-bottom:4px; margin-bottom:2px; }
/* A magyarázó szöveg a panelen belül teljes sort kap, nem szorul mezők közé. */
.fleet-form > p.small { flex-basis:100%; margin:0 0 2px; }
/* Az autó színe a napi nézet fordulóin: itt egy kis minta és a választó,
   hogy a hozzárendelés adat maradjon, ne kódba írt szabály. */
.fleet-swatch { width:14px; height:14px; border-radius:var(--ker-apro); border:1px solid var(--szin-keret);
  display:inline-block; flex:none; margin-top:5px; }
.fleet-form select { width:auto; min-width:110px; padding:5px 8px; font-size:var(--betu-urlap); }
.fleet-form .button-danger { padding:4px 10px; font-size:var(--betu-alap); }
.fleet-form input[type=color] { width:44px; min-width:44px; padding:1px; height:28px; }
/* Az üres szakasz fejléce: rövid jelzés és a küldetés gombja. A teljes
   magyarázat a buborékban van - egy kör, amin senki nem ül, nem érdemel
   három sornyi szöveget. */
.rp-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.prop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:8px; margin-bottom:14px; }
.prop { border:1px solid var(--szin-keret); border-radius:var(--ker-alap); padding:7px 9px; background:var(--szin-lap); font-size:var(--betu-alap); }
.prop-head { display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; margin-bottom:3px; }
.prop-form { display:flex; gap:5px; margin-top:6px; }
.prop-form select { width:auto; flex:1; min-width:0; padding:2px 5px; font-size:var(--betu-alap); }
.prop-form button { padding:2px 8px; font-size:var(--betu-alap); }
/* Keskeny képernyőn a két hasáb egymás alá kerül, és a kevésbé fontos
   oszlopok kimaradnak - a felvétel, a név, a járat és a perc marad. */