/* A kezdőlap: teendők, számcsík, napkártyák.
   Betöltés: lib/v2/web/layout.js — a lapok közös fejlécéből. */

/* --- Áttekintés --- */

/* Teendők: mindegyik sor egy elvégzendő munka, a szám elöl, mert az mondja
   meg, mekkora. Kattintásra oda visz, ahol dolgozni lehet vele. */
.todo { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:4px; margin-bottom:14px; }
.todo-item { display:flex; align-items:center; gap:7px; padding:4px 8px;
  border:1px solid var(--szin-keret-halk); border-left-width:3px; border-radius:var(--ker-kicsi);
  background:var(--szin-lap); text-decoration:none; color:var(--szin-szoveg); font-size:var(--betu-kicsi); }
.todo-item:hover { background:var(--szin-hatter-halk); }
.todo-work { border-left-color:var(--szin-hivatkozas); }
.todo-warn { border-left-color:var(--szin-veszely); }
.todo-n { font-weight:700; font-size:var(--betu-urlap); min-width:26px; text-align:right;
  font-variant-numeric:tabular-nums; }
.todo-warn .todo-n { color:var(--szin-veszely); }
.todo-work .todo-n { color:var(--szin-hivatkozas); }
.todo-text { line-height:1.25; }

/* A számok háttéradatok: egy halk csík, nem kártyasor. Nem róluk szól a
   lap - a napok és a teendők viszik a munkát. */
.stat-strip { display:flex; flex-wrap:wrap; gap:6px 22px; padding:8px 12px;
  border:1px solid var(--szin-keret-halk); border-radius:var(--ker-alap); background:var(--szin-lap);
  font-size:var(--betu-kicsi); color:var(--szin-szoveg-halk); margin-bottom:16px; }
.stat-strip b { font-size:var(--betu-kiemelt); color:var(--szin-szoveg); font-weight:700;
  font-variant-numeric:tabular-nums; margin-right:3px; }
.stat-strip i { font-style:normal; color:var(--szin-szoveg-halvany); margin-left:5px; }

/* NAPTÁRRÁCS: hétfőtől vasárnapig, hetenként egy sor.
 *
 * Csak a fuvaros hetek jelennek meg - a konferencia két hete nem takarja el
 * az év többi, üres hónapját. A hét minden napja kap kártyát, akkor is, ha
 * nincs rajta utazás: oda is be kell tudni lépni.
 *
 * A fejléc és a hetek EGYFORMA hétoszlopos rácsok, ezért nem csúsznak el
 * egymáshoz képest. */
.naptar { margin-bottom:14px; }
.naptar-fejlec, .naptar-het { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:8px; }
.naptar-fejlec { margin-bottom:4px; font-size:var(--betu-apro); text-transform:uppercase;
  letter-spacing:.05em; color:var(--szin-szoveg-halvany); }
.naptar-het { margin-bottom:8px; align-items:stretch; }

/* Napkártyák: egy nap egy kártya, a sáv a beosztás állását mutatja. */
/* Minden nap saját színt kap: a keret, az árnyék és a háttér is abból
   épül. Így a napok elválnak egymástól, és a szem a színről ismeri fel,
   melyik napot nézi. */
/* A kártyák EGY MAGASAK egy héten belül: a rács nyújtja őket, a tartalom
   pedig oszlopban ül, hogy a forduló-sor mindig az aljára kerüljön. Enélkül
   a kevesebb adatú nap kártyája rövidebb, és a sor csipkés lesz. */
.day-card { display:flex; flex-direction:column; padding:9px 11px; border-radius:var(--ker-alap);
  background:var(--pastel, var(--szin-lap)); text-decoration:none; color:var(--szin-szoveg);
  border:1px solid color-mix(in srgb, var(--accent, var(--szin-keret)) 35%, transparent);
  border-top:3px solid var(--accent, var(--szin-keret));
  box-shadow:0 3px 9px color-mix(in srgb, var(--accent, var(--szin-szoveg)) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:box-shadow .16s, transform .16s; }
.day-card:hover { transform:translateY(-3px);
  box-shadow:0 9px 18px color-mix(in srgb, var(--accent, var(--szin-szoveg)) 36%, transparent),
    inset 0 1px 0 rgba(255,255,255,.7); }
.day-dot { width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--accent, var(--szin-szoveg-halvany)); }
.day-card-top { display:flex; align-items:center; gap:6px; margin-bottom:1px; }
.day-card-name { font-weight:700; font-size:var(--betu-urlap); }
.day-card-hours { font-size:var(--betu-jelolo); color:var(--szin-szoveg-halk); margin-bottom:4px; }
/* A nap három számoszlopa: érkezés balra, beosztva középen, távozás jobbra.
   Egymás mellett összevethető, egymás alatt csak felsorolás volt. */
.day-card-oszlopok { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px;
  font-size:var(--betu-kicsi); color:var(--szin-szoveg-halk); line-height:1.4; }
.day-card-oszlopok > div { display:flex; flex-direction:column; min-width:0; }
.day-card-oszlopok strong { color:var(--szin-szoveg); font-variant-numeric:tabular-nums; }
.day-card-oszlopok > div:nth-child(2) { align-items:center; }
.day-card-oszlopok > div:nth-child(3) { align-items:flex-end; }
/* A sáv alapja fehéres, hogy a nap pasztell hátterén is látszódjon. */
.day-bar { height:5px; border-radius:var(--ker-apro); background:rgba(255,255,255,.75);
  overflow:hidden; margin:6px 0 7px; }
.day-bar-fill { height:100%; border-radius:var(--ker-apro); }
.day-bar-start { background:var(--szin-sav-kezd); }
.day-bar-half  { background:var(--szin-sav-fele); }
.day-bar-done  { background:var(--szin-rendben); }
.day-card-line { display:flex; justify-content:space-between; gap:8px;
  font-size:var(--betu-kicsi); color:var(--szin-szoveg-halk); line-height:1.5; }
.day-card-line strong { color:var(--szin-szoveg); font-variant-numeric:tabular-nums; }
/* A forduló-sor a kártya aljára ül: az auto margó tolja le, így minden
   kártyán ugyanabban a magasságban van. */
.day-card-runs { border-top:1px solid var(--szin-valaszto); margin-top:auto; padding-top:4px; }
/* A fuvar nélküli nap halkan van jelen: látszik, hogy létezik és
   kattintható, de nem versenyez a dolgos napokkal. */
.day-card-ures { background:var(--szin-lap); border-color:var(--szin-valaszto);
  border-top-color:var(--szin-valaszto); box-shadow:none; }
.day-card-ures:hover { box-shadow:0 3px 9px color-mix(in srgb, var(--szin-szoveg) 12%, transparent); }
.day-card-semmi { font-size:var(--betu-kicsi); color:var(--szin-szoveg-halvany); margin-top:3px; }

/* Flotta: az elsődleges autók fuvarszáma egymás mellett - a szabály az,
   hogy közel azonos legyen, tehát az eltérésnek látszania kell. */