/*
 * ÖntözŐR — a vezérlőpult megjelenése.
 *
 * A megosztott könyvtárban van, mert KÉT helyről használjuk: a bejelentkezett
 * `/dash/`-ről és a publikus `/demo/`-ról. Egy renderelő, egy stíluslap, két adatforrás —
 * így a demó nem tud „szebb lenni", mint a valódi felület, és nem is tud elavulni.
 */

/* ── Rács ────────────────────────────────────────────────────────────────── */
.d-racs {
  display: grid;
  /* auto-fit + minmax: a csempék maguktól sorba rendeződnek, és mobilon egy oszlopba
     állnak — nincs szükség töréspontonkénti szabályra. */
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--wa-space-m);
}

.d-zonak { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.d-ketto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wa-space-m);
}

@media (min-width: 58rem) {
  .d-ketto { grid-template-columns: 3fr 2fr; }
}

/* ── Csempe ──────────────────────────────────────────────────────────────── */
.d-csempe-cimke { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.d-csempe-ertek {
  font-size: var(--wa-font-size-2xl);
  font-weight: var(--wa-font-weight-heading);
  line-height: 1.15;
}
.d-csempe-alcim { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); }

.d-hangsuly { color: var(--wa-color-brand-fill-loud); }

/* ── Zónakártya ──────────────────────────────────────────────────────────── */
.d-zona-fej {
  display: flex;
  align-items: baseline;
  gap: var(--wa-space-2xs);
}

.d-zona-szam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  border-radius: var(--wa-border-radius-s);
  background-color: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-heading);
}

/* A futó zóna a SZÁMÁVAL is jelez, nem csak színnel: színvakok és rossz fényviszonyok
   mellett (kert, napsütés) a szín önmagában nem információ. */
.d-zona-fut .d-zona-szam {
  background-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.d-zona-fut { border-color: var(--wa-color-brand-border-loud); }

.d-zona-adat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-2xs) var(--wa-space-m);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

/* ── Állapotcímke ────────────────────────────────────────────────────────── */
.d-cimke {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem var(--wa-space-2xs);
  border-radius: var(--wa-border-radius-pill, 999px);
  font-size: var(--wa-font-size-xs);
  white-space: nowrap;
}

.d-cimke-ok   { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.d-cimke-fut  { background: var(--wa-color-brand-fill-quiet);   color: var(--wa-color-brand-on-quiet); }
.d-cimke-halk { background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet); }
.d-cimke-fig  { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }

/* Lüktetés a futó zónán. Csak akkor, ha a felhasználó nem kért mozgáscsökkentést. */
.d-pont {
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: currentColor;
  animation: d-lukte 1.6s ease-in-out infinite;
}

@keyframes d-lukte { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .d-pont { animation: none; }
}

/* ── Kihasználtság-sáv (napi plafon) ─────────────────────────────────────── */
.d-sav {
  height: 0.5rem;
  border-radius: 999px;
  background-color: var(--wa-color-neutral-fill-quiet);
  overflow: hidden;
}

.d-sav-belso {
  height: 100%;
  background-color: var(--wa-color-brand-fill-loud);
  border-radius: 999px;
}

/* A plafon közelében figyelmeztető szín: a számot nem mindenki olvassa el, a színváltás
   viszont periférián is látszik. */
.d-sav-tele .d-sav-belso { background-color: var(--wa-color-warning-fill-loud); }

/* ── Oszlopdiagram ───────────────────────────────────────────────────────── */
/*
 * Nincs grafikonkönyvtár. Tizennégy oszlophoz egy CDN-függőség és egy vászon túlzás
 * lenne; ez néhány sor CSS, nincs build-lépése, és nem tud elavulni.
 */
.d-oszlopok {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: var(--wa-space-2xs);
  height: 7rem;
}

.d-oszlop {
  background-color: var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-s) var(--wa-border-radius-s) 0 0;
  min-height: 2px;
}

/* A nulla is látszik hajszálnyi csíkként: enélkül egy öntözés nélküli nap
   megkülönböztethetetlen lenne a diagram szélétől. */
.d-oszlop-nulla { background-color: var(--wa-color-surface-border); }

.d-tengely {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--wa-space-2xs);
  margin-top: var(--wa-space-2xs);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
  text-align: center;
}

/* ── Lista ───────────────────────────────────────────────────────────────── */
.d-sor {
  display: flex;
  align-items: center;
  gap: var(--wa-space-m);
  padding-block: var(--wa-space-2xs);
}

.d-sor + .d-sor { border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.d-sor-fo   { flex: 1 1 auto; min-width: 0; }
.d-halk     { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.d-kicsi    { font-size: var(--wa-font-size-xs); }

/* ── Ütemterv-kártya ─────────────────────────────────────────────────────── */

.d-prog-fej {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
}

.d-prog-nev { flex: 1 1 auto; min-width: 0; }

/*
 * A hét HÉTFŐVEL kezdődik, és a hét nap EGYFORMA SZÉLES. A grid azért kell, mert a
 * napnevek hossza eltérő („H" és „Sze"): flexben a szélességük a szövegtől függene, és
 * a napok nem egymás alatt sorakoznának két kártya között — a szem pedig épp az
 * oszlopokat keresi, amikor két ütemtervet hasonlít össze.
 */
.d-napok {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--wa-space-3xs, 0.15rem);
}

.d-nap {
  text-align: center;
  padding-block: 0.15rem;
  border-radius: var(--wa-border-radius-s);
  background-color: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
  font-size: var(--wa-font-size-xs);
  border: none;
  font-family: inherit;
}

.d-nap-be { background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.d-nap-szerk { cursor: pointer; }

/* ── Zóna-zsetonok (Z1 … ZN) ─────────────────────────────────────────────── */
.d-zgombok { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); }

/*
 * A zseton NEM egyetlen gomb, hanem egy kapcsoló + egy percmező egy kereten belül.
 * Beviteli mezőt gombba ágyazni érvénytelen és billentyűzettel bejárhatatlan lenne;
 * így viszont mindkettő önállóan fókuszálható, és vizuálisan mégis egy egység.
 */
.d-zseton-zona {
  display: inline-flex;
  align-items: stretch;
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
  overflow: hidden;
  background-color: var(--wa-color-surface-default);
}

.d-zseton-zona.be { border-color: var(--wa-color-brand-border-loud); }

.d-z-kapcs {
  border: none;
  padding: 0.15rem var(--wa-space-2xs);
  font: inherit;
  font-size: var(--wa-font-size-xs);
  background-color: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
  cursor: default;
}

.d-zseton-zona.be .d-z-kapcs {
  background-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.d-szerk .d-z-kapcs { cursor: pointer; }

.d-z-perc {
  width: 2.6rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--wa-font-size-xs);
  text-align: center;
  padding: 0 0.15rem;
}

.d-z-perc:disabled { color: var(--wa-color-text-quiet); }

/* ── Kártya lábléc: bal alul a következő futás, jobb alul a műveletek ────── */
.d-prog-lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s);
}

.d-jobbra { text-align: end; }

/* ── Inaktív szekció ─────────────────────────────────────────────────────── */
.d-inaktiv wa-card { opacity: 0.85; }

/* ── Képesség-zseton ─────────────────────────────────────────────────────── */
.d-zseton {
  display: inline-block;
  padding: 0.1rem var(--wa-space-2xs);
  border-radius: var(--wa-border-radius-s);
  background-color: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
  font-size: var(--wa-font-size-xs);
}

.d-zseton-be { background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }

/* ── Demó-szalag ─────────────────────────────────────────────────────────── */
/*
 * A demó VIZUÁLISAN is elkülönül. Ugyanaz a kód fut benne, mint az éles felületen,
 * és pont ezért kell egyértelműnek lennie, hogy amit itt kapcsolgatsz, az nem egy
 * valódi kert — különben egy képernyőkép később félreérthető bizonyíték lesz.
 */
.d-demo-szalag {
  background-color: var(--wa-color-warning-fill-loud);
  color: var(--wa-color-warning-on-loud);
  text-align: center;
  padding: var(--wa-space-2xs) var(--wa-space-m);
  font-size: var(--wa-font-size-s);
}

.w-full { width: 100%; }