/*
 * Komponensek (CLAUDE.md 11. fejezet). Csak tokeneket használ.
 *
 * Kire tervezünk: szakács tableten, nedves kézzel; vezető laptopon vagy
 * 1280×1024-es négyzetes monitoron, ahol függőlegesen alig 850 px marad.
 * Ezért: semmi nem épül a nézet teljes magasságára, a fejléc alacsony és nem
 * rögzített, nincs ragadó lábléc. Egy rendszerbetű, külső betűtípus nélkül.
 */

/* --- Alap ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  color: var(--c-ink);
  background: var(--c-bg);
}

h1, h2, h3 { margin: 0 0 var(--s-4); line-height: 1.25; font-weight: 600; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p  { margin: 0 0 var(--s-4); }

a { color: var(--c-action); }

/* Látható billentyűzet-fókusz minden interaktív elemen */
:focus-visible {
  outline: 3px solid var(--c-focus-ring);
  outline-offset: 2px;
}

/* A számok a hősei az alkalmazásnak: minden szám egy vonalban áll */
.num, .value-big, table td.num, table th.num {
  font-variant-numeric: tabular-nums;
}
.num, td.num, th.num { text-align: right; }
.value-big {
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1.1;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

main.container { padding-block: var(--s-6); }

.muted { color: var(--c-ink-2); }
.small { font-size: var(--fs-sm); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Fejléc és navigáció --------------------------------------------------- */

.app-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.app-header .container {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.brand {
  /* Érintési cél is (TASK-131): a fejléc sorának magasságában. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav {
  display: flex;
  /* A menü sorba törik, ha nem fér (TASK-029 a telefonon; TASK-090: a tablet-sávban sem fér egy sorba, és a lap
     vízszintesen görgetne). A széles sávban a vezetői fejléc egy sor (TASK-112, lent). */
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0; padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  text-decoration: none;
}
.nav a:hover { background: var(--c-surface-2); }
.nav a.is-active { background: var(--c-action-bg); color: var(--c-action); font-weight: 600; }

.header-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
}

/* A legördülők (TASK-112): a menü csoportja és a név menüje. A gomb nyitja (js/header.js), a panel a gomb alatt
   lebeg — a lap fölött, de a megerősítő modal háttere alatt. */
.nav-group, .user-menu { position: relative; }
.nav-toggle, .user-menu-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-ink);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.user-menu-toggle { max-width: 100%; padding-inline: var(--s-2); color: inherit; }
.user-menu-toggle > span { overflow: hidden; text-overflow: ellipsis; }
.nav-toggle::after, .user-menu-toggle::after { content: '▾'; margin-left: var(--s-1); }
.nav-toggle[aria-expanded="true"]::after, .user-menu-toggle[aria-expanded="true"]::after { content: '▴'; }
.nav-toggle:hover, .user-menu-toggle:hover { background: var(--c-surface-2); }
.nav-toggle.is-active { background: var(--c-action-bg); color: var(--c-action); font-weight: 600; }
.nav-menu, .user-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: calc(var(--z-modal) - 1);
  min-width: 100%;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  white-space: nowrap;
}
.user-menu-panel { left: auto; right: 0; }
/* A jobb szélen kilógna: a gomb jobb széléhez igazodik (js/header.js). */
.nav-menu.is-end { left: auto; right: 0; }
.nav-menu[hidden], .user-menu-panel[hidden], .btn[data-push-toggle][hidden] { display: none; }
.nav-menu a { display: flex; }
/* A telefonos menü gombja (TASK-242, ALLAPOT 303.): csak 768 px alatt (lent). */
.nav-menu-toggle { display: none; }
.user-menu-panel .btn { display: flex; width: 100%; }
.user-menu-panel .btn + .btn { margin-top: var(--s-2); }

/* A telephelyváltó (TASK-071): vezetői módban, egynél több telephelynél; a neve dönt a szélességről. */
.header-user .site-switch { width: auto; max-width: 16rem; }

/* --- Gombok ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background: var(--c-action); border-color: var(--c-action); color: var(--c-on-action); }
.btn-primary:hover { background: var(--c-action-2); border-color: var(--c-action-2); }

.btn-secondary { background: var(--c-surface); border-color: var(--c-border); color: var(--c-ink); }
.btn-secondary:hover { background: var(--c-surface-2); }

.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-action); }

.btn-block { width: 100%; }

/* Kétszeres beküldés ellen: küldés alatt a gomb nem kattintható */
.btn:disabled, .btn.is-busy {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* --- Űrlap ----------------------------------------------------------------- */

.field { margin-bottom: var(--s-4); }

.field label, .label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border-input);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
}
.input:focus { border-color: var(--c-action); }
.input.is-invalid { border-color: var(--c-danger); }
.input:disabled { background: var(--c-surface-2); color: var(--c-ink-2); }

/* Az elsődleges hőmérséklet-beviteli mező: nagyobb, súlyosabb, azonnal olvasható */
.input-temp {
  min-height: var(--tap-lg);
  font-size: var(--fs-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.field-error {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--c-danger);
}

.field-help {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.form-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}

/* --- Táblázat -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
}

.table th, .table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: middle;
}

.table th {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.table tbody tr:hover { background: var(--c-surface-2); }

/* --- Kártya, üres állapot -------------------------------------------------- */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

.card + .card { margin-top: var(--s-4); }

/* Az üres állapot felszólítás cselekvésre, nem szomorú felirat */
.empty {
  padding: var(--s-8) var(--s-4);
  text-align: center;
  color: var(--c-ink-2);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
}
.empty .btn { margin-top: var(--s-4); }

/* --- Állapotjelzés: színnel ÉS jellel -------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}
.badge::before { font-weight: 700; }
.badge-ok     { background: var(--c-ok-bg);     color: var(--c-ok); }
.badge-ok::before     { content: "✓"; }
.badge-warn   { background: var(--c-warn-bg);   color: var(--c-warn); }
.badge-warn::before   { content: "!"; }
.badge-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-danger::before { content: "×"; }

/* --- Betöltésjelző --------------------------------------------------------- */

.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-action);
  border-radius: 50%;
  animation: da-spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes da-spin { to { transform: rotate(360deg); } }

/* --- A tétlenségi lejárat sávja (TASK-177, js/session.js) ------------------- */

/* Nem blokkoló: lebeg a lap teteje fölött, középen, a modal és a toast alatt; nem ragadó fejléc, a lejáratig él. */
.sess-warn {
  position: fixed;
  top: var(--s-2);
  left: 50%;
  z-index: calc(var(--z-modal) - 2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: max-content;
  max-width: calc(100% - 2 * var(--s-4));
  padding: var(--s-2) var(--s-4);
  transform: translateX(-50%);
  background: var(--c-surface);
  border: 1px solid var(--c-warn);
  border-left-width: 4px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.sess-warn .btn { min-height: var(--tap); }

/* --- Toast ----------------------------------------------------------------- */

#da-toasts {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 24rem;
  width: calc(100% - 2 * var(--s-4));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-ink-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
}
.toast-ok    { border-left-color: var(--c-ok); }
.toast-warn  { border-left-color: var(--c-warn); }
.toast-error { border-left-color: var(--c-danger); }

.toast-text { flex: 1 1 auto; }

.toast-close {
  flex: 0 0 auto;
  min-width: var(--tap);
  min-height: var(--tap);
  margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-3)) calc(-1 * var(--s-2)) 0;
  border: 0;
  background: transparent;
  color: var(--c-ink-2);
  font: inherit;
  font-size: var(--fs-lg);
  cursor: pointer;
}

/* --- Modal ----------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: var(--c-backdrop);
}

.modal {
  width: 100%;
  max-width: 32rem;
  max-height: 100%;
  overflow: auto;
  padding: var(--s-6);
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}

.modal-title { margin-bottom: var(--s-4); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}

/* --- Bejelentkezés --------------------------------------------------------- */

.auth-card {
  max-width: 24rem;
  margin: var(--s-8) auto;
}

/* --- Töréspontok ----------------------------------------------------------- */

/* ≥ 1260 px: széles — asztali elrendezés, a 1280×1024-es négyzetes monitor is. A
   határ nem 1280: a 1280 széles monitor valós nézete (ablakkeret, oldalpanel,
   nagyítás) gyakran 1280 alatt van, és a rossz sávba esne; a görgetősáv nem ok
   (CLAUDE.md 11., Töréspontok). */
@media (min-width: 1260px) {
  /* A vezetői fejléc egy sorban (TASK-112): a menü a fejléc többi szövegének méretével, tömörebb közökkel, és a sor
     nem törik — a hosszú telephelynév és felhasználónév rövidül (a teljes a title-ben), a menü pontjai nem. A konyhai
     fejlécnek nincs menüje: az változatlan. */
  .app-header.has-nav .container { flex-wrap: nowrap; gap: var(--s-3); }
  .app-header.has-nav .brand,
  .app-header.has-nav nav { flex: 0 0 auto; }
  .app-header.has-nav .nav { flex-wrap: nowrap; font-size: var(--fs-sm); }
  .app-header.has-nav .nav a,
  .app-header.has-nav .nav-toggle { padding-inline: var(--s-2); }
  .app-header.has-nav .header-user { flex: 0 1 auto; min-width: 0; gap: var(--s-2); }
  .app-header.has-nav .header-user > * { flex: 0 0 auto; }
  .app-header.has-nav .header-user > .site-switch,
  .app-header.has-nav .header-user > .user-menu { flex: 0 1 auto; min-width: 6rem; }
  .app-header.has-nav .site-switch { text-overflow: ellipsis; }

  .cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

/* 992–1259 px: keskeny asztali — egyoszlopos, tömör sorok, alacsony fejléc. A
   határ nem 1024: egy 1024-es monitor valós nézete (ablakkeret, oldalpanel)
   ~1009 px, és a tablet-sávba esne (CLAUDE.md 11., Töréspontok). */
@media (min-width: 992px) and (max-width: 1259px) {
  main.container { padding-block: var(--s-4); }
  .card { padding: var(--s-4); }
  .table th, .table td { padding-block: var(--s-1); }
}

/* 768–991 px: tablet — nagy érintőfelületek */
@media (min-width: 768px) and (max-width: 991px) {
  .btn, .input { min-height: var(--tap-lg); }
  .nav a, .nav-toggle, .user-menu-toggle { min-height: var(--tap-lg); }
}

/* < 768 px: telefon — megtekintés és gyorsrögzítés */
@media (max-width: 767px) {
  .app-header .container { padding-block: var(--s-2); }
  .header-user { width: 100%; margin-left: 0; }
  /* A konyhai fejléc négy eleme (TASK-059: a súgó, a módváltó, a név, a kilépés) 390 px-en két sorba törik. */
  .header-user { flex-wrap: wrap; row-gap: var(--s-2); }
  /* A menü panelje a teljes szélességű sorhoz igazodik, balra: a név alá jobbról vagy balról is kilógna. */
  .header-user { position: relative; }
  .user-menu { position: static; }
  .user-menu-panel { right: auto; left: 0; }
  /* A csoport listája ugyanígy: a menü teljes szélességéhez, a sorai alá — a gombhoz igazítva a keskeny képernyőn
     jobbra vagy balra kilógna (TASK-112). */
  .nav { position: relative; }
  .nav-group { position: static; }
  .nav-menu, .nav-menu.is-end { left: 0; right: 0; }
  /* A navigáció a „Menü” gomb mögött (TASK-242, ALLAPOT 303.): zárva a fejléc a márka, a gomb és a név sora — a
     lap címe nem kerül a képernyő közepére; nyitva a navigáció a teljes szélességű sor. */
  .app-header.has-nav .nav-menu-toggle { display: inline-flex; }
  .app-header.has-nav nav { display: none; flex: 1 0 100%; }
  .app-header.has-nav nav.is-open { display: block; }
  #da-toasts { right: var(--s-2); left: var(--s-2); bottom: var(--s-2); width: auto; max-width: none; }
  .form-actions .btn { flex: 1 1 auto; }
}

/* Érintős eszközön a fejléc oldalsúgója is 48 px széles (TASK-189: 390 px-en a „?” 40 px volt). */
@media (pointer: coarse) {
  .hdr-help { min-width: var(--tap); }
}

/* A tevékenységtípus (TASK-208, inc/partials/activity_types.php): a varázslóban és a telephely beállításain. */
.act-types { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); border: 0; padding: 0; margin: var(--s-3) 0; }
.act-types legend { width: 100%; margin-bottom: var(--s-2); }
.act-type { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.act-type input { width: 1.25rem; height: 1.25rem; }
.act-list h3 { margin: var(--s-3) 0 var(--s-1); }
.act-list .badge { margin-left: var(--s-2); }
.act-list .badge[hidden] { display: none; }

/* Aki kikapcsolta az animációt, annak semmi ne mozogjon */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .spinner { border-top-color: var(--c-border); }
}

/* --- Az előfizetés sávja (TASK-212, header.php) ----------------------------- */

/* A csak-olvasható cég: a fejléc alatt, a lap tetején — nem lebeg, nem ragadó; az olvasás és a letöltés marad. */
.billing-band {
  padding: var(--s-2) var(--s-4);
  background: var(--c-warn-bg);
  border-bottom: 1px solid var(--c-warn);
  color: var(--c-ink);
  text-align: center;
}

/* Az őszi óraátállítás választója (TASK-246): a dátum-idő bevitel mellett, csak a kétszer előforduló órában. */
.zone-pick { width: auto; margin-top: var(--s-1); }
.zone-pick[hidden] { display: none; }