/* ==========================================================================
   DilaWEB – Admin felület (admin.dilaweb.hu)

   A tokenek és az alap-komponensek (.btn, .seg, .icon-btn, .field, .dlg,
   .auth-*) a tervező style.css 01/02/09 fejezetéből valók, VÁLTOZATLAN
   értékekkel: ez a DilaWEB saját arculata, nem az ügyfélé. Nincs itt új
   színrendszer, csak amit a tervező is használ.

   Miért másolat és nem hivatkozás: ez az app külön hosting-site-ra megy
   (admin.dilaweb.hu), tehát nem tud a tervező style.css-ére mutatni. Ha ott
   token változik, ezt a 01. fejezetet kell átemelni – más nem.

   MOBILE-FIRST: az alap a telefon, a szélesebb nézet `min-width`-tel bővül.

   Felépítés:
     01. Tokenek            – style.css-ből, 1:1
     02. Alap / reset       – style.css-ből, a szerkesztő 100dvh-s rácsa nélkül
     03. Gombok, váltók     – style.css-ből, 1:1
     04. Mezők              – style.css-ből, 1:1
     05. Párbeszédablak     – style.css-ből, 1:1 (a kód-belépő)
     06. Admin váz          – csak itt: fejléc, fülek, kártyák, sorok
   ========================================================================== */

/* ==========================================================================
   01. TOKENEK
   ========================================================================== */
:root {
  --bg:          #070B11;
  --bg-2:        #0A0F17;
  --surface:     #0E141C;
  --surface-2:   #121A24;
  --text:        #E8EDF5;
  --muted:       #93A1B4;
  --line:        rgba(232, 237, 245, 0.10);
  --edge:        rgba(232, 237, 245, 0.22);
  --field:       rgba(232, 237, 245, 0.04);
  --error-light: #ec898c;
  --error:       #E5484D;

  --accent:      #DE8524;
  --accent-soft: #F0B166;
  --accent-rgb:  222, 133, 36;
  --accent-ink:  #1A1206;

  --shadow:      0 26px 60px -34px rgba(0, 0, 0, 0.95);
  --radius:      1rem;
  --radius-sm:   0.625rem;
  --bar-h:       3.75rem;
  --ease:        cubic-bezier(0.2, 0.7, 0.3, 1);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:          #E9EDF2;
  --bg-2:        #F4F6F9;
  --surface:     #FFFFFF;
  --surface-2:   #F3F6FA;
  --text:        #0F1720;
  --muted:       #5A6675;
  --line:        rgba(15, 23, 32, 0.12);
  --edge:        rgba(15, 23, 32, 0.10);
  --field:       rgba(15, 23, 32, 0.035);

  --accent:      #B4650F;
  --accent-soft: #DE8524;
  --accent-rgb:  180, 101, 15;
  --accent-ink:  #FFF7EC;

  --shadow:      0 22px 50px -32px rgba(15, 23, 32, 0.55);

  color-scheme: light;
}

/* ==========================================================================
   02. ALAP / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

/* A tervezőtől eltérően ITT a lap görög: nincs osztott képernyő, egy hosszú
   admin-oldal van. Ezért nincs `height:100dvh` és `overflow:hidden`. */
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

svg { display: block; }
ul  { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3 { margin: 0; }

[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 300;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Csak képernyőolvasónak: ahol a csempére nem fér ki a szó (naptár) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { width: 1.05rem; height: 1.05rem; flex: none; }

/* ==========================================================================
   03. GOMBOK, VÁLTÓK
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.83rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn--wide { width: 100%; }

.btn--primary {
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 12px 30px -16px rgba(var(--accent-rgb), 0.95);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -18px rgba(var(--accent-rgb), 1); }
.btn--primary:active { transform: translateY(0) scale(0.985); }

.btn--ghost {
  background: var(--field);
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.09); }
.btn--ghost:active { transform: scale(0.985); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.icon-btn:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.09); }
.icon-btn .icon { width: 1.1rem; height: 1.1rem; }

/* Nap sötétben, hold világosban – a tervezőn ugyanez, ott #mode-toggle a jel */
.icon--moon { display: none; }
:root[data-theme="light"] .js-theme .icon--sun  { display: none; }
:root[data-theme="light"] .js-theme .icon--moon { display: block; }

.seg {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
}
.seg__btn {
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

/* ==========================================================================
   04. MEZŐK
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="time"], input[type="number"], select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
  font-size: 0.88rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
input:hover, select:hover { border-color: var(--edge); }
/* background-color, NEM a `background` rövidítés: az a select nyilát törölné */
input:focus, select:focus { outline: none; border-color: var(--accent); background-color: var(--surface-2); }
::placeholder { color: var(--muted); opacity: 0.7; }

/* ==========================================================================
   05. PÁRBESZÉDABLAK (kód-belépő)
   ========================================================================== */
/* MAGA AZ ABLAK A TELJES KÉPERNYŐ, a látható doboz a .dlg__card benne – így a
   kártya közepe mindig a képernyő közepe, akármekkora. */
.dlg {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: none;
  color: var(--text);
  overflow: hidden;
}
.dlg[open] { display: grid; place-items: center; }

.dlg__card {
  width: min(32rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgba(3, 6, 10, 0.6); backdrop-filter: blur(3px); }
.dlg h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.dlg p { color: var(--muted); font-size: 0.88rem; }
.dlg__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1.3rem; }
/* nyelv/téma váltó a kártyában: a dialog fölött a fejléc nem elérhető */
.dlg__tools { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1rem; }

#gate-dlg .field { margin-top: 1rem; }
#gate-dlg .auth-error { margin: 0.6rem 0 0; font-size: 0.82rem; color: #E5484D; }
:root[data-theme="light"] #gate-dlg .auth-error { color: #C0272B; }

/* Sikeres párosítás: az ablak csak a pipát mutatja, a doboz a tartalomra
   zsugorodik – különben egy majdnem üres 32rem-es ablak közepén ülne. */
#gate-dlg:has(#gate-success:not([hidden])) .dlg__card {
  width: min(20rem, 100%);
  padding: clamp(1.1rem, 5vw, 1.8rem);
}
.auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.7rem, 3vw, 0.9rem);
  padding: clamp(0.5rem, 3vw, 1.25rem) 0 clamp(0.2rem, 1.5vw, 0.5rem);
  text-align: center;
  animation: auth-success-in 0.85s ease-out both;
}
#gate-dlg .auth-success p {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-size: clamp(0.95rem, 4vw, 1.05rem);
  text-wrap: balance;
}
.auth-success__icon {
  width: clamp(3.25rem, 16vw, 4.75rem);
  height: clamp(3.25rem, 16vw, 4.75rem);
  flex: none;
  padding: 0.55rem;
  border-radius: 50%;
  color: #30A46C;
  background: rgba(48, 166, 108, 0.14);
  animation: auth-success-pop 1.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.08s both;
}
:root[data-theme="light"] .auth-success__icon { color: #18794E; }
@keyframes auth-success-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes auth-success-pop { from { opacity: 0; transform: scale(0.6); } }

/* ==========================================================================
   06. ADMIN VÁZ
   ========================================================================== */
/* Fejléc: telefonon EGY sor marad, a gombok nem tördelnek – a sáv görgethető,
   ugyanaz a fogás, mint a tervező app-bar-jánál. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--bar-h);
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: baseline; gap: 0.45rem; font-family: var(--font-display); }
.brand b { font-size: 1.05rem; letter-spacing: -0.02em; }
.brand__accent { color: var(--accent); }
.brand small { color: var(--muted); font-size: 0.75rem; }

/* Melyik projekté ez a felület. Telefonon a márkajel után elfér, ha hosszú a
   név, elvágjuk – a fejléc egy sor marad. */
.project {
  min-width: 0;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project:empty { display: none; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar__actions::-webkit-scrollbar { display: none; }

.shell {
  width: min(60rem, 100%);
  margin-inline: auto;
  padding: 1rem 0.9rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.shell--narrow { width: min(28rem, 100%); padding-top: 2.5rem; }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lead { color: var(--muted); font-size: 0.88rem; }
.note { color: var(--muted); font-size: 0.78rem; }
.note--api code { font-family: var(--font-mono); color: var(--accent-soft); overflow-wrap: anywhere; }
.status { min-height: 1.2rem; font-size: 0.8rem; font-weight: 600; color: #30A46C; }
:root[data-theme="light"] .status { color: #18794E; }

/* „Demó” jelvény: a felület minden pontján látszódjon, hogy ez még nem éles */
.demo-badge {
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#login-form { display: flex; flex-direction: column; gap: 0.8rem; }
#login-msg .auth-error { font-size: 0.82rem; color: #E5484D; }
:root[data-theme="light"] #login-msg .auth-error { color: #C0272B; }

/* --- Fülek --------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0.3rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1;
  min-height: 2.4rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

.panel { display: flex; flex-direction: column; gap: 1rem; }

/* --- Foglalások ---------------------------------------------------------- */
.wk { display: flex; align-items: center; gap: 0.5rem; }
.wk b { flex: 1; text-align: center; font-size: 0.9rem; font-weight: 600; }
.wk .btn { flex: none; }
.field--inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.field--inline .field__label { flex: none; }
/* Szűrő + nézetváltó egy sorban, ha elfér – telefonon egymás alá csúszik */
.bk__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.bk__bar .field--inline { flex: 1; min-width: 12rem; }

.bk { display: flex; flex-direction: column; gap: 0.5rem; }
/* Kártya, nem táblázat: telefonon a sor amúgy is kártyává esne szét */
.bk__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.bk__when {
  grid-row: span 2;
  align-self: center;
  min-width: 4.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-soft);
}
.bk__when b { display: block; font-size: 0.95rem; color: var(--text); }
.bk__who { font-weight: 600; }
.bk__what { color: var(--muted); font-size: 0.82rem; }
.bk__empty { padding: 1.2rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
/* A két döntés-gomb a sor alján, teljes szélességben: telefonon így marad
   44px-es a fogásuk, és nem szorítja össze a nevet. */
.bk__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.bk__act .btn { min-height: 2.4rem; }

/* Állapotjelvény. A szín MELLETT a jel és a felirat is hordozza az állapotot –
   színvakon és fekete-fehér nyomtatásban is olvasható marad. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 0.05em;
}
.tag--pending   { color: var(--accent-soft); background: rgba(var(--accent-rgb), 0.12); }
.tag--confirmed { color: #4CC38A; background: rgba(48, 166, 108, 0.14); }
.tag--rejected  { color: var(--error-light); background: rgba(229, 72, 77, 0.12); }
:root[data-theme="light"] .tag--confirmed { color: #18794E; }
:root[data-theme="light"] .tag--rejected  { color: #C0272B; }

/* --- Heti naptár ----------------------------------------------------------
   Táblázat, mert tényleg az: soronként egy óra, oszloponként egy nap. A hét
   telefonon nem fér ki, ezért SAJÁT vízszintes görgetőt kap (a lap maga sose
   görögjön oldalra), az órasáv pedig ragad, hogy görgetés közben is látszódjon,
   melyik sáv melyik. */
.cal-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.cal {
  width: 100%;
  min-width: 41rem;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.cal__corner { width: 3.2rem; }
.cal__day {
  padding: 0.25rem 0.25rem 0.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.cal__day--today { color: var(--accent-soft); }
.cal__day--off { opacity: 0.5; }
.cal__hour {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0.3rem 0.5rem 0 0;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  text-align: right;
  vertical-align: top;
}
.cal__cell {
  height: 2.4rem;                 /* az üres sáv is legyen látható magasságú */
  padding: 0.15rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  vertical-align: top;
}
.cal__cell--off { background: var(--field); }   /* zárva – nem ugyanaz, mint az üres */

/* Foglalás-csempe. Az állapot bal oldali sávként is megjelenik: színvakon és
   fekete-fehéren is látszik, hogy a három közül melyik. */
.chip {
  display: block;
  padding: 0.2rem 0.35rem;
  border-left: 3px solid var(--chip);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--chip) 15%, transparent);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.chip + .chip { margin-top: 0.2rem; }
.chip b { font-family: var(--font-mono); color: var(--chip); }
.chip__svc { display: block; color: var(--muted); }
.chip--pending   { --chip: var(--accent-soft); }
.chip--confirmed { --chip: #4CC38A; }
.chip--rejected  { --chip: var(--error-light); opacity: 0.7; }
:root[data-theme="light"] .chip--confirmed { --chip: #18794E; }
:root[data-theme="light"] .chip--rejected  { --chip: #C0272B; }

/* --- Fő kapcsoló (elfogadási mód) ----------------------------------------
   A tervező style.css-éből: a checkbox MAGA a kapcsoló, nincs mögötte se
   segédelem, se JS – csak `appearance: none` és egy ::after a gombhoz. */
.switch {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.switch:hover { border-color: var(--edge); }
.switch:focus-within { border-color: var(--accent); }
.switch__text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.switch__text .hint { color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.switch input {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.3rem;
  height: 1.3rem;
  margin: 0.1rem 0 0;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--field);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.switch input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--muted);
  translate: 0 -50%;
  transition: translate 0.2s var(--ease), background-color 0.2s var(--ease);
}
.switch input:checked { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.22); }
.switch input:checked::after { translate: 0.95rem -50%; background: var(--accent); }

/* --- Ismételhető sorok (árak, szolgáltatások, munkatársak, nyitvatartás) --- */
.rows { display: flex; flex-direction: column; gap: 0.5rem; }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
/* Alap = telefon: a mezők egymás alatt, a törlés gomb a jobb szélen. */
.row__fields { display: grid; gap: 0.4rem; }
.row__del {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
}
.row__del:hover { border-color: var(--error); color: var(--error-light); }
.row__day { align-self: center; font-size: 0.82rem; font-weight: 600; }
.row__closed {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.row__closed input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

/* --- Szélesebb kijelző: a sor-mezők egymás mellé állnak -------------------- */
@media (min-width: 40rem) {
  .shell { padding-inline: 1.2rem; }
  h1 { font-size: 1.6rem; }
  .row__fields { grid-template-columns: 2fr 1fr; }
  .row__fields--svc { grid-template-columns: 2fr 1fr 1fr; }
  .row__fields--hours { grid-template-columns: 7rem 1fr 1fr auto; align-items: center; }
}

/* --- Csökkentett mozgás --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}