/* =====================================================================
   MostFoglalok — admin/auth alap stílus (vanilla CSS, függőség nélkül)

   TOKENEK: a közös design-tokenek forrása a docs/DESIGN.md. Ez a projekt
   szándékosan build-lépés nélküli vanilla CSS, ezért a tokenblokk három
   helyen szerepel (booking.css, admin.css, landing inline CSS). Ha itt
   módosítasz, a másik kettőt is frissítsd — a DESIGN.md listázza őket.
   ===================================================================== */

:root {
    /* Márka — „Agyag" (v2). A régi #2563eb a Tailwind/Bootstrap default
       fejlesztői kék volt: hibátlan, de karakter nélküli, és a szépségipari
       célközönségnek hideg. */
    --primary: #B4543C;         /* 4.91:1 fehérrel — AA */
    --primary-dark: #94422E;    /* 6.82:1 fehérrel; EZ jön --primary-soft háttéren */
    --primary-soft: #FAF0EC;

    /* Semlegesek — a felület 90%-a. A tenant NEM írja felül őket, tehát ha egy
       szalon rikító színt választ, ezek fogják össze a felületet. Ezért melegek. */
    --text: #2A2320;
    --muted: #7A6E67;
    --border: #EBE4DC;
    --border-strong: #D9CFC3;
    --bg: #FAF8F4;
    --card: #ffffff;

    /* Státusz-színek: NEM márka, ezért NEM változnak. Az --info-* szándékosan
       marad kék — az „információ" jelentése egyetemesen kék. */
    --success-bg: #ecfdf5; --success-fg: #065f46; --success-bd: #6ee7b7;
    --error-bg: #fef2f2;   --error-fg: #991b1b;   --error-bd: #fca5a5;
    --info-bg: #eff6ff;    --info-fg: #1e40af;    --info-bd: #93c5fd;

    /* Sugár-skála — v2: KISEBB. A nagy lekerekítés játékos; a prémium meleg
       irány kevesebbet bír el. */
    --r-sm: 7px;
    --r-md: 9px;
    --r-lg: 10px;
    --r-xl: 14px;

    /* Árnyék-skála. Az alapszín melegre vált (volt: rgba(16,24,40) = kékesfekete,
       ami meleg palettán hideg felhangot hagy a kártyák alatt). */
    --sh-xs: 0 1px 2px rgba(45, 32, 26, .06);
    --sh-sm: 0 1px 3px rgba(45, 32, 26, .08), 0 1px 2px rgba(45, 32, 26, .05);
    --sh-md: 0 4px 8px -2px rgba(45, 32, 26, .09), 0 2px 4px -2px rgba(45, 32, 26, .05);
    --sh-lg: 0 12px 16px -4px rgba(45, 32, 26, .10), 0 4px 6px -2px rgba(45, 32, 26, .04);
    --sh-xl: 0 20px 28px -6px rgba(45, 32, 26, .13), 0 8px 10px -6px rgba(45, 32, 26, .05);

    /* Mozgás */
    --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --t-base: 180ms cubic-bezier(.4, 0, .2, 1);

    /* Egységes fókusz-gyűrű — ezt használja minden interaktív elem */
    --focus-ring: 0 0 0 3px rgba(180, 84, 60, .28);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* BlinkMacSystemFont és az idézőjelek pótolva — a másik két felülettel egyezik */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* iOS Safari fekvő módban különben magától felnagyítja a szöveget. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* iOS auto-zoom elleni ALAPSZABÁLY: a Safari minden 16px-nél kisebb betűs
   mezőre ráközelít fókuszáláskor, és utána nem zoomol vissza. Alacsony
   specificitású selector, hogy a meglévő .field/.bk-input szabályok
   felülírhassák — de a jelöletlen mezők (pl. .wh-row) is védve legyenek. */
input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

h1, h2, h3 { letter-spacing: -.015em; }

a { color: var(--primary); transition: color var(--t-fast); }
a:hover { color: var(--primary-dark); }

/* Egységes fókusz MINDEN interaktív elemre. Korábban a gombokon és a
   navigációs linkeken egyáltalán nem volt látható fókusz — billentyűzettel
   navigálva követhetetlen volt, hol jár a felhasználó. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

code {
    background: #F2EDE6;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9em;
    /* Hosszú URL/token keskeny kijelzőn különben kitolja az oldalt oldalra. */
    overflow-wrap: anywhere;
}

.muted { color: var(--muted); }

/* --- Auth kártya ----------------------------------------------------- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}
/* v2: tomor hatter - a radialis gradiens megszunt (8. szakasz). */
.auth-body { background: var(--bg); }
.auth-card {
    background: var(--card);
    width: 100%;
    max-width: 380px;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
}
.auth-brand { margin: 0 0 20px; font-size: 1.3rem; text-align: center; font-weight: 600; letter-spacing: -.03em; }
.auth-subtitle { margin: 0 0 8px; font-size: 1.05rem; }

/* --- Űrlapok --------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-wide { max-width: 620px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.field span { font-weight: 600; }
.field input, .field select {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: var(--card);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:hover, .field select:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}
.field input::placeholder { color: var(--muted); opacity: .7; }
.field input[type="checkbox"], .field input[type="radio"] { accent-color: var(--primary); }
fieldset {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
legend { font-weight: 700; padding: 0 6px; }
.form-foot { text-align: center; font-size: 0.9rem; margin: 4px 0 0; }
/* ⭐ 64. fázis (D-05): a mező ALATTI segédszöveg — a `.form` 14px-es térközéből
   6px marad a mezőig. Inline `style="margin:-8px"` helyett EZ a minta: a
   `.form` nélküli űrlapon a negatív margó a mező szegélyére csúsztatta. */
.field-hint { margin: -8px 0 0; font-size: .85rem; color: var(--muted); }

/* --- Gombok ---------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--sh-sm); }
/* ⭐ F-11 (11/F): A `color` ITT NEM ELHAGYHATÓ.

   A gombok fele `<a class="btn …">`, és a 83. sor globális
   `a:hover { color: var(--primary-dark); }` szabálya ERŐSEBB, mint a
   `.btn-primary` alapszíne — tehát hoverre a FEHÉR feliratból sötétkék
   lett a sötétkék háttéren: a gomb szövege gyakorlatilag eltűnt.

   ⚠️ A `<button>` verzió helyes volt (arra nem hat az `a:hover`), ezért a
      hiba csak a link-gombokon látszott — és csak hoverre. Ez a fajta,
      részlegesen jelentkező hiba az, ami hónapokig életben marad.

   Ugyanezért kap explicit `color`-t minden MÁS `.btn-*:hover` is lentebb. */
.btn-primary:hover { background: var(--primary-dark); color: #fff; box-shadow: var(--sh-md); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--sh-xs); }

/* Másodlagos gomb — eddig nem létezett, ezért minden művelet egyformán
   hangsúlyos volt a felületen. */
.btn-secondary {
    background: var(--card);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--sh-xs);
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--bg); color: var(--text); }
.btn-secondary:active { transform: translateY(1px); }

.btn-link { background: none; color: var(--primary); border: none; padding: 0; font-weight: 600; }
.btn-link:hover { color: var(--primary-dark); text-decoration: underline; }
/* ⭐ 64. fázis (D-44): háttér és keret nélküli, szöveg-igazított gomb (az
   Előfizetés lap „Kártya cseréje — most …", „Mégsem" gombjai). A sima `.btn`
   18px-es vízszintes paddingja miatt beljebb kezdődtek, mint a szöveg. */
.btn-plain { padding-inline: 0; color: var(--primary); background: none; }
.btn-plain:hover { color: var(--primary-dark); text-decoration: underline; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: none; transform: none; }

/* --- Flash ----------------------------------------------------------- */
.flash {
    padding: 11px 15px;
    border-radius: var(--r-sm);
    margin-bottom: 12px;
    border: 1px solid;
    border-left-width: 4px;   /* színes él — perifériás látással is észrevehető */
    font-size: 0.92rem;
    box-shadow: var(--sh-xs);
}
.flash-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.flash-error   { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-bd); }
.flash-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-bd); }

/* --- App layout ------------------------------------------------------ */
.app-header {
    display: flex;
    align-items: center;
    gap: 24px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(8px);
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.app-logo { font-weight: 600; text-decoration: none; color: var(--text); letter-spacing: -.03em; }
.app-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
/* A navigáció eddig 9 sima link volt egymás mellett, aktív állapot nélkül —
   nem lehetett látni, melyik oldalon állsz. */
.app-nav a {
    text-decoration: none;
    /* ⭐ 64. fázis (D-23): a menü a szöveg színével (a --muted halvány volt). */
    color: var(--text);
    font-size: .95rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
}
.app-nav a:hover { background: var(--bg); color: var(--text); }
.app-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
/* 46. fazis: felfuggesztett elofizetesnel zart menupont. A dontes a
   controllerben szuletik (navLocked), itt csak a megjelenes. */
.app-nav a.is-locked { opacity: .55; }
.app-nav a.is-locked::after { content: " \1F512"; font-size: .85em; }
.app-user { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: .9rem; }
.inline-form { display: inline; }
.app-main { max-width: 1000px; margin: 24px auto; padding: 0 20px; }
/* ⭐ 64. fázis (D-23, T3): széles lap (naptár, vendéglista, statisztika,
   Előfizetés, superadmin táblák) — a jelző nézet-adat (`layoutWide`). A folyó
   szöveg ott is olvasható szélességű marad; az űrlapok a saját `.form-wide`
   (620px) korlátjukat tartják. Mobilon nincs különbség. */
.app-main-wide { max-width: 1400px; }
.app-main-wide .panel > p,
.app-main-wide .bill-notice,
.app-main-wide .flash { max-width: 90ch; }
/* ⭐ 64. fázis (D-45): horgonyra ugráskor a ragadós fejléc ne takarja a címet. */
.panel[id], details[id], section[id] { scroll-margin-top: 88px; }
/* ⭐ 64. fázis (D-41): a fájl-mező és a fieldset ne lógjon ki a kártyából
   (a fieldset alapértelmezett min-width-je a tartalom szélessége). */
fieldset { min-width: 0; }
.field input[type="file"] { max-width: 100%; min-width: 0; }
/* ⭐ 64. fázis (D-37): a panel végi összenyitható sor ne tapadjon a gombhoz. */
.panel > details:not(.panel) { margin-top: 18px; }

/* --- Hamburger-menü (JS NÉLKÜL, rejtett checkbox) --------------------
   Miért nem natív <details>? Mert asztali méreten a menünek MINDIG nyitva
   kell lennie, telefonon pedig zárva — ugyanabból a markupból. A <details>
   zárt tartalmát a böngészők a shadow-DOM slotban rejtik el, amit szerzői
   CSS-sel nem lehet megbízhatóan visszakapcsolni. A checkbox-toggle-t a
   feladatspec is engedi, és tisztán media query-vel vezérelhető.
   Asztali méreten a kapcsoló és a címke el van rejtve (lásd lent). */
/* Asztali méreten a kapcsoló ki van véve a tabsorrendből is (display: none),
   nehogy a billentyűzetes felhasználó egy láthatatlan, hatástalan
   jelölőnégyzetre lépjen. 820px alatt kap vizuálisan rejtett, de FÓKUSZÁLHATÓ
   formát — lásd a mobil blokkot. */
.app-menu-toggle { display: none; }
.app-menu-btn { display: none; }
/* Fókusz a rejtett inputon → a látható címkén jelenjen meg. */
.app-menu-toggle:focus-visible + .app-menu-btn { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Hamburger-ikon tisztán CSS-ből (nincs új asset, nincs ikonfont). */
.app-menu-ic, .app-menu-ic::before, .app-menu-ic::after {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform var(--t-base), opacity var(--t-base);
}
.app-menu-ic::before, .app-menu-ic::after { content: ""; position: relative; }
.app-menu-ic::before { top: -6px; }
.app-menu-ic::after { top: 4px; }
.app-menu-toggle:checked + .app-menu-btn .app-menu-ic { background: transparent; }
.app-menu-toggle:checked + .app-menu-btn .app-menu-ic::before { transform: translateY(6px) rotate(45deg); }
.app-menu-toggle:checked + .app-menu-btn .app-menu-ic::after { transform: translateY(-4px) rotate(-45deg); }

/* --- Panelek --------------------------------------------------------- */
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px 30px;
    margin-bottom: 20px;
    box-shadow: var(--sh-sm);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-head h2, .panel-head h3 { margin: 0; }
/* ⭐ 64. fázis (D-18): EGY „Vissza"-minta — a fejléc jobb szélén, akkor is, ha a
   cím (pl. „Szolgáltatás szerkesztése") miatt a sor törik (eddig ilyenkor a
   link a cím ALÁ, balra került). */
.panel-head h1 { margin: 0; }
.panel-head > a:not(.btn):last-child { margin-left: auto; white-space: nowrap; }
.meta-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }

/* --- Statisztika ----------------------------------------------------- */
.stat-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 18px;
    font-size: 0.9rem;
    color: var(--muted);
    box-shadow: var(--sh-xs);
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.stat:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }
/* v2 (9. szakasz): a nagy szám az egyik hely, ahol az admin agyagot kap.
   #B4543C fehéren 4.91:1 — AA, és ez amúgy is nagy szöveg. */
.stat-num {
    font-size: 1.6rem; font-weight: 700; display: block; color: var(--primary);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15;
}

/* --- Táblák ---------------------------------------------------------- */

/* Görgető keret MINDEN táblázat köré. Enélkül a tábla telefonon kitolja az
   egész oldalt oldalra — ettől érződik "elromlottnak" a felület. A háttér-
   gradiensek a klasszikus scroll-shadow: a két belső radiális folt csak akkor
   látszik, ha van még tartalom balra/jobbra (background-attachment: local).
   Az árnyék ugyanabból az rgba(45,32,26,…) családból való, mint a --sh-* tokenek. */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background:
        linear-gradient(to right, var(--card) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--card) 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(45, 32, 26, .22), rgba(45, 32, 26, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(45, 32, 26, .22), rgba(45, 32, 26, 0)) right center;
    background-repeat: no-repeat;
    /* ⭐ 64. fázis (C-09, D-31): erősebb, szélesebb árnyék — a görgethetőség
       jele mobilon (a .13-as, 14px-es folt alig látszott). */
    background-size: 44px 100%, 44px 100%, 20px 100%, 20px 100%;
    background-attachment: local, local, scroll, scroll;
}
.table-wrap .table { margin-top: 0; }
.table-wrap + .table-wrap, .panel > .table-wrap { margin-top: 12px; }

.table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--border); }
.table th {
    color: var(--muted); font-weight: 600; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border-strong);
}
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--bg); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td:has(+ td:last-child), .table .num { font-variant-numeric: tabular-nums; }
.table-compact td, .table-compact th { padding: 6px 8px; font-size: 0.86rem; }

/* --- Badge-ek -------------------------------------------------------- */
.badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
}
.badge-trial     { background: #fef9c3; color: #854d0e; }
.badge-active    { background: #dcfce7; color: #166534; }
.badge-free      { background: #e0e7ff; color: #3730a3; }
/* past_due (0004): türelmi idő — a szolgáltatás még megy, de a fizetés késik.
   Nem vezet be új színt: a meglévő --error-* / figyelmeztető készletből. */
.badge-past_due  { background: #ffedd5; color: #9a3412; }
.badge-suspended { background: #fee2e2; color: #991b1b; }
/* A subscriptions.status saját szókészlete (0004): 'trialing' és 'cancelled'
   a tenants ENUM-ban nem szerepel, de a superadmin felületen megjelenik. */
.badge-trialing  { background: #fef9c3; color: #854d0e; }
.badge-cancelled { background: #EBE4DC; color: #3D342F; }
/* 38. fázis (0012): nyílt tesztidőszak — díjmentes Business. Nincs új szín:
   a meglévő --info-* készletből (ugyanaz, mint a .bill-notice-info). */
.badge-test_period { background: var(--info-bg); color: var(--info-fg); }

/* --- Admin extrák (3. fázis) ---------------------------------------- */
.field textarea {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}
/* ⭐ 64. fázis (D-06): a `.field.field-check` a `.field` oszlop-irányát örökölte —
   a pipa a felirata FÖLÖTT, középen állt. Mindig sor: pipa + felirat balra, a
   pipa a felirat első sorához igazítva; a doboz nem zsugorodik. */
.field-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-size: 0.92rem; }
.field-check input { flex: none; width: 16px; height: 16px; margin: .2em 0 0; }
.panel.form > h2 { margin-bottom: 0; }
.panel.form > p { margin: 0; }
/* Az align-items: end a rács KERESZTIRÁNYÁT állítja (itt: függőleges), az
   1fr oszlopszélességet nem érinti. Enélkül a grid-elemek nyújtva, felülre
   igazítva állnak: ha az egyik címke két sorba törik, a másiké egybe, akkor
   az inputok eltérő magasságban ülnek. Így viszont az inputok ALSÓ éle kerül
   egy vonalba — a címkék sorainak számától függetlenül. */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
}
/* ⭐ 65. fázis: a súgószöveg (small) is elcsúsztatta a sort — az `end`
   igazítás a mező ALJÁT (a súgót is) tette egy vonalba, így a súgó nélküli
   mező inputja a súgó magasságába csúszott. Subgriddel a címke, az input és
   a súgó SAJÁT sorban áll, oszlopokon át egy vonalban; a címke a sorának
   aljára igazodik (két sorba törő szomszéd mellett is az input fölött ül).
   Subgrid nélküli böngészőben marad a fenti `end`. */
@supports (grid-template-rows: subgrid) {
    .field-grid > .field {
        grid-row: span 3;
        display: grid;
        grid-template-rows: subgrid;
        row-gap: 4px;
        align-self: stretch;
    }
    .field-grid > .field > span:first-child { align-self: end; }
}
.form-inline { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.form-actions { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.row-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
/* ⭐ 64. fázis (D-19): EGY soronkénti művelet-stílus — a „Szerkeszt" link is
   `.btn-link` (félkövér, aláhúzás nélkül), a veszélyes művelet külön színnel. */
.row-actions > a:not(.btn) { font-weight: 600; text-decoration: none; }
.btn-danger { color: #b91c1c; }
.btn-link.btn-danger:hover { color: #7f1d1d; }
/* ⭐ 64. fázis (D-16): limitnél az inaktív sor „Aktivál" helyett ezt mutatja. */
.row-limit {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--muted); font-size: .75rem; font-weight: 600; cursor: help;
}
/* A munkatárs színe a NÉV cellájában áll (nem külön oszlopban), hogy telefonon
   a kártya címe a név legyen — ezért kell a térköz és a sorközépre igazítás. */
.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); vertical-align: -2px; margin-right: 8px; }
.logo-preview { max-width: 200px; max-height: 120px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff; }

/* „holnap" / „8. 7." jelölés a következő vendég mellett (23. fázis, C5). */
.stat-when { color: var(--primary-dark); font-size: .9rem; }

/* Beosztás nélküli munkatárs figyelmeztetése a listában (23. fázis, A1).
   Nincs új token: a meglévő badge + --muted készletből. */
.staff-nohours { margin: 6px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.staff-nohours .badge { margin-right: 2px; }

/* --- Színválasztó paletta (22. fázis) --------------------------------
   Nincs új design-token: a korong színét a `--sw` egyedi property hordozza,
   amit a sablon ad meg soronként (BrandingService::PALETTE). */
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
}
/* A címke a teljes érintési célterület (WCAG 2.5.5: 44×44 CSS px); a látható
   korong ennél kisebb lehet, a koppintható terület nem. */
.swatch {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    min-height: 44px; padding: 6px 2px;
    border-radius: var(--r-sm);
    cursor: pointer; text-align: center;
}
/* Vizuálisan rejtett, de FÓKUSZÁLHATÓ: a display:none kivenné a
   fókuszsorrendből, és a paletta billentyűvel bejárhatatlan lenne. */
.swatch input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.swatch-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--sw, var(--border));
    border: 1px solid rgba(45, 32, 26, .15);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.swatch-name { font-size: .72rem; line-height: 1.25; color: var(--muted); }
.swatch:hover .swatch-dot { transform: scale(1.08); }
/* A kijelölés NEM csak szín: gyűrű is jelzi (színvakság miatt). */
.swatch input:checked ~ .swatch-dot { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--text); }
.swatch input:checked ~ .swatch-name { color: var(--text); font-weight: 600; }
.swatch input:focus-visible ~ .swatch-dot { outline: 2px solid var(--primary); outline-offset: 4px; }
/* Az „Egyéni szín…" korongja a natív választó aktuális értékét mutatja; a
   szaggatott keret jelzi, hogy ez nem a palettából való. */
.swatch-custom .swatch-dot { border-style: dashed; border-color: var(--border-strong); }

.swatch-field { margin-top: 12px; max-width: 220px; }
/* Kiemelő szín kapcsolója (23. fázis, C1) — a .field-check-en felül csak
   térköz kell, hogy elváljon a fő szín palettájától. */
.accent-toggle { margin-top: 6px; align-items: flex-start; }

/* Beágyazó kód (23. fázis, B1). A sor hosszú és VÁLASZTHATÓ kell legyen —
   a törés jobb, mint a vízszintes görgetés telefonon. */
.embed-code {
    margin: 12px 0 0; padding: 12px 14px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: .82rem; line-height: 1.6;
    white-space: pre-wrap; overflow-wrap: anywhere;
    user-select: all;
}
/* A kontraszt-figyelmeztetés halk és NEM blokkoló: a szolgáltató joga
   eldönteni, a mi dolgunk szólni. */
.swatch-warn {
    margin: 8px 0 0; font-size: .85rem; line-height: 1.5;
    background: #fef9c3; color: #854d0e;
    border: 1px solid #fde68a; border-radius: var(--r-sm);
    padding: 9px 11px;
}
/* font-size: 1rem az alap input/select/textarea szabályból — enélkül az iOS
   Safari ráközelít a mezőre fókuszáláskor, és nem zoomol vissza. */
.wh-row select, .wh-row input { padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; min-height: 44px; }
template { display: none; }

/* --- Veszélyes műveletek panel (18. fázis) --------------------------
   EGYETLEN új osztály, és CSAK itt: a super-admin felület sehol máshol nem
   jelenik meg, ezért a design-tokenek hármas duplikációja (booking.css /
   admin.css / landing inline) NEM vonatkozik rá. Új token nem jött be —
   a meglévő --error-* változókból építkezik. */
.danger-zone { border-color: var(--error-bd); }
.danger-zone h2 { color: var(--error-fg); }
.danger-zone h3 { margin-top: 22px; }

/* --- 38. fázis: tesztidőszak-sáv, visszajelzés-link, levélszámláló ---
   Komponens-színek a meglévő készletből — a 10. szabály token-szinkronja nem
   érintett. A levélszámláló színét a MailUsage::cssClass() dönti el. */
.test-period-banner { margin-bottom: 16px; }
.test-period-banner a { margin-left: 6px; font-weight: 600; }   /* 64. fázis (D-14): hosszabb felirat — törhet */
.app-feedback-link { margin: 28px 0 8px; text-align: center; font-size: .85rem; color: var(--muted); }
.mail-usage { font-variant-numeric: tabular-nums; }
.mail-usage.is-warning { background: #fffbeb; color: #854d0e; border-color: #fcd34d; }
.mail-usage.is-danger  { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-bd); }

/* --- Regisztráció: slug elérhetőség --------------------------------- */
.slug-wrap { display: flex; align-items: stretch; }
.slug-base {
    background: #F2EDE6; border: 1px solid var(--border); border-right: 0;
    border-radius: 8px 0 0 8px; padding: 9px 8px; color: var(--muted); font-size: .85rem; white-space: nowrap;
}
.slug-wrap input { border-radius: 0 8px 8px 0 !important; flex: 1 1 auto; width: auto; min-width: 0; }   /* 65.: az utótag ne lógjon ki a kártyából */
/* 35. fázis: aldomain-alak (`https://` + mező + `.mostfoglalok.hu`). */
.slug-wrap.has-suffix input { border-radius: 0 !important; }
.slug-suffix { border-right: 1px solid var(--border); border-left: 0; border-radius: 0 8px 8px 0; }
/* ⭐ 65. fázis: a kész webcím élő előnézete — CSAK keskeny kijelzőn látszik
   (ott a mező saját sorba kerül, és az előtag/utótag helyett ez mondja meg,
   mi lesz a cím). Széles kijelzőn a mező körüli előtag/utótag ugyanezt adja. */
.slug-preview { display: none; }
.field .slug-preview span { font-weight: 400; }   /* a .field span félkövérjét ne örökölje */
.slug-preview-url { color: var(--text); overflow-wrap: anywhere; }
#slug-preview-value { color: var(--primary-dark); font-weight: 700; }
#slug-preview-value.is-empty { color: var(--muted); font-weight: 400; font-style: italic; }
.slug-status { font-size: .82rem; min-height: 1em; }
.slug-ok { color: #166534; }
.slug-bad { color: #991b1b; }

/* --- Onboarding checklist ------------------------------------------- */
.ob-list { list-style: none; padding: 0; margin: 16px 0; }
.ob-step { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ob-check { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.ob-done .ob-check { background: #dcfce7; color: #166534; }
.ob-body { flex: 1; }
.ob-body p { margin: 2px 0 0; }

/* --- Branding élő előnézet (C fázis) -------------------------------- */
.branding-cols { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.branding-preview-wrap { display: flex; flex-direction: column; gap: 8px; }
.bp {
    /* A foglaloldal kinezetet szimulalja, ezert a booking.css v2 palettajat koveti. */
    --bp-bg: #FAF8F4; --bp-card: #fff; --bp-text: #2A2320; --bp-muted: #7A6E67; --bp-border: #EBE4DC;
    background: var(--bp-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.bp[data-theme="dark"] { --bp-bg: #1A1512; --bp-card: #241E1A; --bp-text: #EDE6DF; --bp-muted: #A79C93; --bp-border: #3A322C; }
.bp[data-font="serif"] { font-family: Georgia, "Times New Roman", serif; }
.bp[data-font="rounded"] { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
.bp-card { background: var(--bp-card); color: var(--bp-text); border: 1px solid var(--bp-border); border-radius: 10px; padding: 14px; }
.bp-title { font-weight: 700; }
.bp-sub { color: var(--bp-muted); font-size: .85rem; margin-bottom: 10px; }
.bp-chips { display: flex; gap: 6px; margin-bottom: 12px; }
.bp-chip { border: 1px solid var(--bp-border); color: var(--bp-text); border-radius: 8px; padding: 6px 10px; font-size: .8rem; }
.bp-chip-on { background: var(--bp-primary); color: #fff; border-color: var(--bp-primary); }
.bp-btn { display: block; width: 100%; border: 0; border-radius: 8px; padding: 9px; margin-top: 6px; font-size: .9rem; cursor: default; }
.bp-btn-primary { background: var(--bp-primary); color: #fff; }
.bp-btn-accent { background: transparent; color: var(--bp-accent); border: 1px solid var(--bp-accent); }

/* --- Üres állapotok (C fázis) --------------------------------------- */
.empty-state { text-align: center; padding: 44px 16px; }
.empty-state .empty-ic {
    font-size: 1.7rem; margin: 0 auto 12px;
    width: 60px; height: 60px; border-radius: 50%;
    /* --primary-soft hattéren --primary-dark: a --primary ott csak 4.38:1 (AA alatt). */
    background: var(--primary-soft); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
}
.empty-state h3 { margin: 0 0 6px; font-size: 1.1rem; }
.empty-state p { margin: 0 auto 16px; max-width: 42ch; color: var(--muted); }

/* --- Onboarding: finomítás ------------------------------------------ */
.ob-step { transition: background var(--t-fast); border-radius: var(--r-sm); }
.ob-step:hover { background: var(--bg); }
.ob-check { transition: background var(--t-base), color var(--t-base); }

/* A korábbi 720px-es töréspont 820px-re költözött — a projekt két
   töréspontot használ (640 / 820), lásd docs/DESIGN.md. */
@media (max-width: 820px) { .branding-cols { grid-template-columns: 1fr; } }

/* --- Onboarding wizard (17. fázis) -----------------------------------
   Egy lépés = egy képernyő. Nincs új token: a meglévő panel/gomb/mező
   készletből épül. Mobil az elsődleges felület — 375px-en sem húzható az
   oldal oldalra, az érintési célméret 44px. */
.ob-wizard { max-width: 620px; margin-left: auto; margin-right: auto; }
.ob-head { margin-bottom: 18px; }
.ob-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.ob-progress-num {
    font-size: .76rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.ob-dots { display: flex; gap: 5px; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.ob-dot.is-on { background: var(--primary); }
.ob-title { margin: 0 0 6px; font-size: 1.35rem; }
.ob-lead { margin: 0; }

/* „✓ megvan" — a már kész lépés újranyitva. */
.ob-ok {
    display: flex; align-items: center; gap: 10px; margin: 0;
    background: var(--success-bg); color: var(--success-fg);
    border: 1px solid var(--success-bd); border-radius: var(--r-sm);
    padding: 12px 14px; font-size: .95rem;
}
.ob-ok-ic { font-weight: 700; }
.ob-note { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }
.ob-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }

/* Nyitvatartás: naponta egy kapcsoló + két natív időmező. */
.ob-days { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 4px; }
.ob-day {
    display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
    align-items: end; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.ob-day-label {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-weight: 600; font-size: .95rem; cursor: pointer;
}
.ob-day-label input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--primary); }
.ob-day-time { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-day-cap {
    font-size: .7rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
}
/* font-size: 1rem az alap input szabályból — enélkül az iOS Safari ráközelít. */
.ob-day-time input {
    width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--card); color: var(--text);
}
.ob-day-time input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
/* Kikapcsolt nap: az időmezők halványak. Csak dísz — a mentés a
   jelölőnégyzetből dolgozik, tehát a :has() hiánya semmit nem ront el. */
.ob-day:has(.ob-day-label input:not(:checked)) .ob-day-time { opacity: .45; }

.ob-hours-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: .95rem; }

/* Kész-lépés: a publikus link az egyetlen fontos dolog a képernyőn. */
.ob-link {
    background: var(--bg); border: 1px solid var(--border-strong);
    border-radius: var(--r-md); padding: 14px 16px; margin: 0;
    font-size: 1.05rem; font-weight: 600; text-align: center;
    /* Hosszú slug keskeny kijelzőn különben kitolja az oldalt oldalra. */
    overflow-wrap: anywhere;
    /* Egy koppintás kijelöli az egészet — ha a vágólap-gomb nem elérhető. */
    user-select: all; -webkit-user-select: all;
}

@media (max-width: 640px) {
    /* A nap neve külön sorba, alatta a két időmező — 375px-en is elfér. */
    .ob-day { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
    .ob-day-label { grid-column: 1 / -1; min-height: 36px; }
    /* Teljes szélességű gombok: a hüvelykujj nem téveszt. */
    .ob-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .ob-actions > * { width: 100%; }
}

/* --- Admin naptár (B fázis) ----------------------------------------- */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-label { font-weight: 600; margin-left: 6px; }
.cal-arrow { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; box-shadow: var(--sh-xs); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.cal-arrow:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.cal-views { display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-left: auto; box-shadow: var(--sh-xs); }
.cal-view { padding: 8px 16px; background: #fff; border: 0; cursor: pointer; font: inherit; font-weight: 500; transition: background var(--t-fast), color var(--t-fast); }
.cal-view:hover:not(.is-active) { background: var(--bg); }
.cal-view.is-active { background: var(--primary); color: #fff; font-weight: 600; }
.cal-view:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* A padding-top az első óracímke fél magasságának ad helyet: a .cal-hour
   translateY(-50%)-e félig a törzs FÖLÉ lógatja, az overflow-x: auto pedig a
   CSS Overflow szerint a másik tengelyen is auto-ra vált (a visible nem
   kombinálható) — enélkül a fél címke levágódna. */
.calendar { overflow-x: auto; padding-top: 8px; }
/* ⭐ 64. fázis (D-31): görgetés-jelzés a naptárrácshoz. A scroll-árnyék itt
   nem működik (az oszlopok fehér háttere eltakarná) — az admin-calendar.js
   ír ki egy rövid sort, ha jobbra még van oszlop. */
.cal-scroll-hint { margin: 6px 0 0; font-size: .82rem; color: var(--primary-dark); font-weight: 600; text-align: right; }
.cal-empty { color: var(--muted); padding: 20px 0; text-align: center; }
.cal-grid { display: flex; }
/* A 480px a HETI nézet minimuma (7 oszlop). Napi nézetben egy-két oszlop van,
   ott ez csak fölösleges vízszintes görgetést okozna 360px-es telefonon. */
.cal-grid.is-week { min-width: 480px; }
/* A tengely fejléc + törzs felépítésű, mint az oszlopok (lásd admin-calendar.js
   buildGrid) — a pozicionálás a TÖRZS-höz kötődik, nem az oszlophoz. */
.cal-axis { width: 50px; flex: 0 0 50px; }
.cal-axis-body { position: relative; }
.cal-hour { position: absolute; right: 6px; font-size: .72rem; color: var(--muted); transform: translateY(-50%); }
.cal-cols { display: grid; flex: 1; gap: 6px; }
.cal-col { min-width: 90px; }
.cal-col-head { text-align: center; font-weight: 600; font-size: .85rem; padding: 6px 4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cal-col-head.is-today { color: var(--primary); }
/* Üres fejléc a tengely fölött: a MAGASSÁGA kell (hogy a törzsek egy vonalban
   induljanak), a vonala nem — az csak az oszlopok fölött indokolt. A border
   marad 1px szélesen, átlátszóan, különben 1px-et csúszna a tengely. */
.cal-axis-head { border-bottom-color: transparent; }
.cal-col-body { position: relative; background: #fff; border: 1px solid var(--border); border-top: 0; cursor: copy; }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid #F0EAE2; }
.cal-block { position: absolute; left: 3px; right: 3px; overflow: hidden; background: var(--primary-soft, #FAF0EC); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 6px; padding: 4px 6px; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--sh-xs); transition: box-shadow var(--t-fast), filter var(--t-fast); }
.cal-block:hover { filter: brightness(.97); box-shadow: var(--sh-md); z-index: 2; }
.cal-block-t { font-variant-numeric: tabular-nums; }
.cal-block.is-manual { background: #FDF4E8; }
/* „Nem jelent meg" — halványabb, szaggatott kerettel és áthúzott névvel.
   Nincs új szín: a meglévő --muted / --border-strong tokenekből. */
.cal-block.is-noshow {
    background: var(--bg);
    border-style: dashed;
    border-left-color: var(--border-strong);
    opacity: .72;
}
.cal-block.is-noshow .cal-block-s,
.cal-block.is-noshow .cal-block-c { text-decoration: line-through; color: var(--muted); }
/* 23. fázis (C6): a sorok SZÁMÁT a JS dönti el a blokk magassága szerint
   (blockLines()), így nem marad félbevágott sor. Itt csak az egy-soros
   levágás és a szoros sormagasság kell. */
.cal-block-t { font-size: .72rem; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-block-s { font-size: .82rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-block-c { font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Egyetlen sor (rövid foglalás): idő + vendégnév együtt, félkövéren — a
   szolgáltatás ilyenkor csak a tooltipben és a modálban él. */
.cal-block-one { font-weight: 600; }
/* 41. fázis: INAKTÍV munkatárs (pl. csomagkorlát miatt) — a foglalása látszik,
   de jelölve; az oszlopára kézi foglalás nem indítható. Nincs új szín-token. */
.cal-col.is-inactive-staff .cal-col-head { color: var(--muted); font-style: italic; }
.cal-block.is-inactive-staff { border-left-style: dashed; opacity: .8; }
/* 62. fázis (#4): az inaktív SZOLGÁLTATÁS foglalása — ugyanaz a vizuális nyelv (43/c). */
.cal-block.is-inactive-service { border-left-style: dashed; opacity: .8; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.cal-leg { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.cal-leg-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* naptár modálok */
.cal-overlay { position: fixed; inset: 0; background: rgba(45, 32, 26, .5); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow: auto; z-index: 50; animation: cal-fade var(--t-base) both; }
.cal-modal { background: #fff; border-radius: var(--r-xl); max-width: 440px; width: 100%; padding: 24px; position: relative; box-shadow: var(--sh-xl); animation: cal-pop var(--t-base) both; }
.cal-modal-x { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--muted); width: 32px; height: 32px; border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast); }
.cal-modal-x:hover { background: var(--bg); color: var(--text); }
@keyframes cal-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cal-pop { from { opacity: 0; transform: translateY(-8px) scale(.98) } to { opacity: 1; transform: none } }
.cal-modal-h { margin: 0 0 16px; font-size: 1.15rem; }
.cal-details { display: flex; flex-direction: column; gap: 8px; }
.cal-drow { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.cal-dk { color: var(--muted); }
.cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.cal-field span { font-weight: 600; }
.cal-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cal-form .bk-input, .cal-form select.bk-input { width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; font-family: inherit; }
.bk-submit { background: var(--primary); color: #fff; border: 0; border-radius: 9px; padding: 12px; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; } /* 64. fázis (D-30): félkövér, mint a többi elsődleges gomb */
.bk-submit:disabled { opacity: .6; }
.bk-msg { font-size: .9rem; }
.bk-msg-error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 8px; padding: 9px 11px; }

/* --- Naptár: lemondás (13. fázis) -----------------------------------
   Nincs új token: a veszélyes műveletek az --error-* készletet használják. */
.cal-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.cal-actions .btn, .cal-actions .bk-submit { flex: 1; }

/* Veszélyes ELSŐDLEGES művelet (lemondás megerősítése). */
.bk-submit-danger { background: var(--error-fg); }
.bk-submit-danger:hover:not(:disabled) { filter: brightness(1.1); }

/* Veszélyes MÁSODLAGOS művelet (a részletek-modál lemondás gombja):
   visszafogott, nem hívogat — de egyértelműen piros. */
.btn-danger-outline { color: var(--error-fg); border-color: var(--error-bd); }
.btn-danger-outline:hover { background: var(--error-bg); border-color: var(--error-fg); color: var(--error-fg); }

.cal-cancel-lead { margin: 0 0 10px; font-size: .95rem; }
.cal-cancel-sum {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 10px 12px; margin-bottom: 14px; font-size: .9rem;
}
.cal-cancel-sum span { color: var(--muted); }
.cal-reason { resize: vertical; min-height: 76px; }
.cal-field small { font-weight: 400; }

/* --- Vendég-jegyzet a naptár-modálban (14. fázis) --------------------
   A textarea betűmérete az alap input/select/textarea szabályból 1rem —
   enélkül az iOS Safari ráközelítene fókuszáláskor. */
.cal-note-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.cal-note { resize: vertical; min-height: 68px; }
.cal-note-gdpr { font-size: .78rem; line-height: 1.5; margin: 6px 0 10px; }
.cal-note-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-note-msg { font-size: .85rem; }

/* Jegyzet-jelzés a vendéglistában — csak ikon, a szöveg nem kerül a listába. */
.cust-note-flag { font-size: .9rem; margin-left: 4px; cursor: help; }

/* Hívható telefonszám a részletek-modálban — 44px érintési célterület. */
.cal-tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Rövid visszajelzés lemondás után. A sáv a képernyő aljához tapad, hogy
   telefonon is látszódjon (a bottom sheet fölött). */
.cal-toast {
    position: fixed; z-index: 60;
    left: 50%; transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    max-width: min(440px, calc(100vw - 32px));
    background: var(--text); color: #fff;
    padding: 12px 18px; border-radius: var(--r-md);
    box-shadow: var(--sh-xl); font-size: .9rem; line-height: 1.45;
    animation: cal-toast-in var(--t-base) both;
}
@keyframes cal-toast-in { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* A vezérlőpult csomag-sora: címke + badge + link egy sorban, telefonon tördelve. */
.dash-plan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --- Előfizetés-oldal (11/A-B) --------------------------------------
   Nincs új token: a meglévő --primary-soft / --border / sugár-skála. */
.bill-trial { text-align: center; }
.bill-trial h2 { margin: 0 0 10px; }
.bill-trial.is-warning {
    background: #fffbeb;                 /* a .badge-trial világos párja */
    border-color: #fde68a;
}
.bill-countdown { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0 0 6px; }
.bill-days {
    font-size: 3rem; font-weight: 600; line-height: 1;
    letter-spacing: -.05em; font-variant-numeric: tabular-nums;
    color: var(--primary);
}
.bill-trial.is-warning .bill-days { color: #854d0e; }
.bill-reassure {
    margin: 14px auto 0; max-width: 46ch;
    color: var(--muted); font-size: .92rem; line-height: 1.6;
}
.bill-features { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bill-features li {
    background: var(--primary-soft); color: var(--primary-dark);
    border-radius: 999px; padding: 5px 12px; font-size: .85rem; font-weight: 600;
}
/* A .bill-features li.is-soon szabály a 30. fázisban KIKERÜLT: az egyetlen
   „hamarosan" jelölésű funkció (Saját domain) tulajdonosi döntéssel kikerült a
   termékből, tehát a jelölés tárgytalan. Ha újra kellene, a 23. fázis
   DEPLOY-23.md-je írja le. */
/* A jelenlegi csomag sora kiemelve az összehasonlító táblában. */
.table tbody tr.is-current-plan { background: var(--primary-soft); }
.table tbody tr.is-current-plan:hover { background: var(--primary-soft); }
.table tbody tr.is-current-plan td:first-child { font-weight: 700; }

/* --- Előfizetési felület (11/D) --------------------------------------
   ÚJ TOKEN NINCS: a meglévő --info/--error készletből dolgozik, a
   „warning" ág pedig ugyanazt a borostyán párost használja, mint a
   .badge-trial és a .bill-trial.is-warning (10. szabály: tokent csak
   mind a HÁROM helyen szabad módosítani, ez viszont komponens-szín). */
.bill-notice {
    padding: 13px 16px;
    border-radius: var(--r-sm);
    border: 1px solid;
    border-left-width: 4px;      /* színes él — mint a .flash-nél */
    font-size: .93rem;
    line-height: 1.6;
    margin-bottom: 14px;
}
.bill-notice-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-bd); }
.bill-notice-danger  { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-bd); }
.bill-notice-warning { background: #fffbeb;           color: #854d0e;           border-color: #fcd34d; }
/* A `none` szint SZÁNDÉKOSAN visszafogott: az „aktív, nincs teendőd"
   állapotot nem kell kiemelni — a nyugalom is információ. */
.bill-notice-none {
    background: transparent; color: var(--muted);
    border-color: var(--border); border-left-color: var(--border-strong);
}

/* Az elsődleges művelet doboza. Egyetlen gomb, hogy ne kelljen választani. */
.bill-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.bill-primary .muted { flex-basis: 100%; margin: 0; }
/* 61. fázis: a 3DS-megerősítés összege (32/b). ⭐ 64. fázis (D-12): a gombbal
   egy flex-sorban, térközzel — mobilon törve is ugyanott kezdődik (rátapadt). */
.bill-primary form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bill-confirm-amount { font-weight: 600; white-space: nowrap; }

/* Csomagkártyák — mobil-első: egy oszlop, 720px fölött három. */
.bill-plans { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.bill-plan {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px; background: var(--card);
    display: flex; flex-direction: column; gap: 8px;
}
.bill-plan.is-current { border-color: var(--primary); background: var(--primary-soft); }
.bill-plan h3 { margin: 0; font-size: 1.05rem; }
.bill-plan .bill-price { font-size: 1.35rem; font-weight: 700; }
.bill-plan ul { list-style: none; padding: 0; margin: 0; font-size: .88rem; color: var(--muted); }
.bill-plan li { padding: 2px 0; }
.bill-plan form { margin-top: auto; }
@media (min-width: 720px) { .bill-plans { grid-template-columns: repeat(3, 1fr); } }

/* Tranzakciólista — telefonon kártyás nézet (a .table-cards mintája). */
.bill-txn-note { font-size: .82rem; color: var(--muted); }
.bill-txn-id { font-size: .75rem; color: var(--muted); letter-spacing: .02em; }
.bill-status { font-weight: 600; }
.bill-status.is-success  { color: var(--success-fg); }
.bill-status.is-pending  { color: #854d0e; }
.bill-status.is-failed   { color: var(--error-fg); }
.bill-status.is-refunded { color: var(--muted); }

/* ⭐ F-13 (11/F): MOBIL TÖRDELÉS 400 px ALATT.

   A tesztben négy dolog tört el egy 400 px-es nézetben, és mind
   ugyanazért: olyan szövegeket engedtünk törni, amik EGY egységet
   jelentenek. Egy „3 490 Ft / hó\" két sorba vágva („3 490 Ft /\" + „hó\")
   nem elírás — az ár olvashatatlan lesz, és ez egy árlistán a legfontosabb
   adat.

   ⚠️ A `nowrap` SZŰKEN, csak ezeken az elemeken. Az egész táblára kiadva
      a hosszú megnevezések lógnának ki a nézetből, és a `table-wrap`
      vízszintes görgetése minden sort érintene. */
.bill-price { white-space: nowrap; }

/* A státusz („Sikeres\" / „Sikertelen\") SOHA nem törhet, az ok-szöveg
   viszont a saját sorában áll — kártyás nézetben egymás alatt. */
.bill-status { white-space: nowrap; }
.bill-txn-note { display: block; margin-top: 2px; }

/* A support-azonosító a saját sorában, teljes szélességben: kártyás
   nézetben egy keskeny oszlopba szorítva karakterenként tördelődött. */
.bill-txn-id { display: block; margin-top: 2px; white-space: nowrap; }

/* A webcím a `.meta-list` <code>-jában áll. Hosszú slug + aldomain esetén
   400 px alatt kilógott a kártyából.

   ⚠️ `anywhere`, nem `break-all`: az `anywhere` a SZÓKÖZÖKNÉL is tud
      törni, és a minimális tartalomszélességbe is beszámít — tehát a
      szülő kártya nem nyúlik meg miatta. A `break-all` csak a törést
      engedi, a szélesség-számítást nem. */
.meta-list code { overflow-wrap: anywhere; }

/* A meta-lista KIEMELT értékei (összeg, dátum, csomagnév) egy egységet
   jelentenek — a „4 990 Ft" ezres szóköznél törve olvashatatlan.
   Itt biztonságos: ebben a listában a <strong> mindig rövid érték, a
   hosszú webcím <code>-ban áll (fölötte). */
.meta-list strong { white-space: nowrap; }

/* Lapozó. */
.bill-pager { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

/* --- Statisztika (15. fázis) ----------------------------------------
   A diagramok CSS-sávok, NEM JS-könyvtár (nincs build-lépés a projektben).
   Új token nincs: a --primary / --muted / --border készletből dolgozik. */
.stat-periods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stat-period {
    /* 44px: a WCAG 2.5.5 / Apple HIG érintési minimuma (lásd docs/DESIGN.md). */
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 16px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--card); color: var(--text); text-decoration: none;
    font-size: .9rem; font-weight: 600;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.stat-period:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.stat-period.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.stat-range { margin: 10px 0 0; font-size: .88rem; }
.stat-sub { font-size: .8rem; margin-top: 2px; }
.stat-h3 { font-size: .95rem; margin: 22px 0 10px; }
.stat-note {
    margin: 14px 0 0; font-size: .85rem; line-height: 1.6;
    background: var(--bg); border-left: 3px solid var(--border-strong);
    border-radius: var(--r-sm); padding: 10px 12px;
}

/* Sávdiagram: címke | sáv | érték */
.stat-bars { display: flex; flex-direction: column; gap: 7px; }
.stat-bar-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; }
.stat-bar-label { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-bar { display: block; height: 12px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width var(--t-base); }
.stat-bar-fill.is-alt { background: var(--border-strong); }
.stat-bar-val { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Csomag-gate (upsell) nézet */
.upsell-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.upsell-list li { padding-left: 24px; position: relative; font-size: .95rem; }
.upsell-list li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }

@media (max-width: 640px) {
    /* Telefonon a sáv-címke kisebb helyet kap, hogy a sáv maradjon olvasható. */
    .stat-bar-row { grid-template-columns: 66px 1fr auto; gap: 8px; }
    .stat-bar-label, .stat-bar-val { font-size: .78rem; }
}

/* --- Jogi oldalak (ÁSZF, adatvédelem, DPA) --------------------------
   Hosszú, olvasandó szöveg: szűk mérték, nagyobb sorköz, számozott pontok.
   Nincs új token. */
.legal-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    text-align: left;
    line-height: 1.75;
}
.legal-main h1 { font-size: 1.9rem; margin: 0 0 8px; letter-spacing: -.03em; }
.legal-main h2 {
    font-size: 1.15rem; margin: 40px 0 10px; padding-top: 18px;
    border-top: 1px solid var(--border); letter-spacing: -.02em;
}
.legal-main h3 { font-size: 1rem; margin: 24px 0 6px; }
.legal-main p { margin: 0 0 14px; max-width: 68ch; }
.legal-main ul { margin: 0 0 14px; padding-left: 22px; max-width: 68ch; }
.legal-main li { margin-bottom: 6px; }
.legal-lead { color: var(--muted); font-size: 1.02rem; }
.legal-back { margin: 0 0 22px; font-size: .92rem; }

/* Számozott pont: a szám kiemelve, hogy hivatkozni lehessen rá. */
.legal-p { margin: 0 0 14px; max-width: 68ch; }
.legal-p > b:first-child { color: var(--text); }

/* Kiemelt magyarázó doboz (a tervezetek „> idézet" blokkjai). */
.legal-note {
    background: var(--bg); border-left: 3px solid var(--border-strong);
    border-radius: var(--r-sm); padding: 12px 16px; margin: 0 0 16px;
    font-size: .93rem; max-width: 68ch;
}
.legal-note.is-strong { border-left-color: var(--primary); background: var(--primary-soft); }

/* Kitöltetlen jogi oldal — szándékosan feltűnő. */
.legal-warning {
    background: var(--error-bg); border: 1px solid var(--error-bd);
    border-left-width: 4px; color: var(--error-fg);
    border-radius: var(--r-sm); padding: 14px 16px; margin: 0 0 26px;
    font-size: .92rem; line-height: 1.6;
}
.legal-warning-sub { display: block; margin-top: 6px; opacity: .85; }

/* Kitöltetlen adat a szövegben — nem lehet átsiklani felette. */
.legal-todo {
    background: #FEF3C7; color: #92400E;
    padding: 1px 6px; border-radius: 4px;
    font-size: .9em; font-weight: 600; white-space: nowrap;
}

/* ⚠️ 32. fázis: A `nowrap` SZŰK KIJELZŐN VÍZSZINTES GÖRGETÉST OKOZ.

   Mérve (375 px, ÁSZF, kitöltetlen .env): a 16.5/(b) pont
   „[KITÖLTENDŐ: békéltető testület]" jelölése 374 px-es dobozt csinált, és a
   `body.scrollWidth` 404 px lett a 375 px-es nézetben. A `nowrap` a RÖVID
   címkékre („[KITÖLTENDŐ: adószám]") jó — azokat nem szabad félbe vágni —, de
   egy hosszabb címke így kilóg.

   Ezért telefonon MEGENGEDJÜK a tördelést. Szándékosan itt, a
   `.table-cards` töréspontjától FÜGGETLENÜL: ez nem táblázat-kérdés, hanem a
   jelölés hossza. Így egy jövőbeli, hosszabb címke sem tudja visszahozni a
   vízszintes görgetést. */
@media (max-width: 640px) {
    .legal-todo { white-space: normal; overflow-wrap: anywhere; }
}

/* --- Ptk. 6:78. § (2) kiemelés a REGISZTRÁCIÓS ŰRLAPON (30. fázis, B2/c) ---

   ⚠️ Ez NEM a jogi oldalakon él, hanem a templates/public/register.php-ban,
   közvetlenül az ÁSZF-pipa FÖLÖTT. A törvény külön tájékoztatást és kifejezett
   elfogadást kíván a szokásostól lényegesen eltérő kikötésekről; a blokk + az
   alatta lévő checkbox EGYÜTT adja ezt a szerkezetet.

   VIZUÁLISAN ELKÜLÖNÜL, DE NEM RIASZT: keretes, halvány háttér, nem piros.
   Egy hibaüzenet-szerű doboz itt megijesztené a regisztrálót — a cél a
   figyelemfelhívás, nem a riasztás. --info-* sem: ez nem tipp, hanem
   szerződéses feltétel. */
.legal-highlight {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin: 2px 0 4px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text);
}
.legal-highlight-title { margin: 0 0 6px; font-weight: 700; font-size: .85rem; }
/* A padding-left a listajel helye — a szűk (375px) képernyőn is belül marad,
   így nincs vízszintes görgetés. */
.legal-highlight ul { margin: 0; padding-left: 18px; }
.legal-highlight li { margin: 0 0 4px; }
.legal-highlight li:last-child { margin-bottom: 0; }

.legal-hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0 18px; }
.legal-meta { color: var(--muted); font-size: .88rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: .9rem; }
/* ⭐ 64. fázis (C-06): 44px érintési célméret minden szélességen (tableten is). */
.legal-nav a, .legal-back a { display: inline-flex; align-items: center; min-height: 44px; }

/* A jogi oldalak táblázatai a .table-wrap görgetőkeretben élnek (12. fázis). */
.legal-main .table { font-size: .92rem; }
.legal-main .table th { white-space: nowrap; }

@media (max-width: 640px) {
    .legal-main { padding: 24px 16px 60px; }
    .legal-main h1 { font-size: 1.55rem; }
}

/* --- Publikus / hibaoldal ------------------------------------------- */
.public-main { max-width: 720px; margin: 60px auto; padding: 0 20px; text-align: center; }
.hero h1 { font-size: 2rem; }
.error-page h1 { font-size: 3rem; margin-bottom: 8px; }

/* =====================================================================
   MOBIL — pontosan két töréspont (lásd docs/DESIGN.md):
     820px = tablet / kis laptop  → érintési célméretek, hamburger-menü
     640px = telefon              → elrendezés-váltás, kártyás táblák
   A meglévő asztali szabályokat max-width query-vel írjuk felül; ez a
   kódbázis eddigi mintája.
   ===================================================================== */

/* --- Admin UI egyszerűsítés (29. fázis) ------------------------------
   ⚠️ Itt CSAK komponens-osztályok vannak, EGYETLEN `--` változó sem — a
   10. szabály (design-tokenek hármas duplikációja) tehát NEM érintett: a
   booking.css és a landing inline <style>-ja változatlan. Ha új tokent
   akarnál felvenni: ne — oldd meg a meglévőkből.
   ------------------------------------------------------------------- */

/* Fülsor (Szolgáltatásaim). A .stat-periods VIZUÁLIS NYELVÉT követi, de KÜLÖN
   osztályokkal — a .stat-period a statisztika időszakválasztójáé, azt nem
   írjuk felül és nem használjuk újra.
   ⚠️ flex-wrap: wrap, NEM overflow-x: auto. Mobilon a három magyar címke két
   sorba tör; a vízszintesen elgörgetett, nem látszó fül nem létezik. */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
/* ⭐ 64. fázis (D-21): telefonon a három fül EGY sorban, egyenlő szélességben (a
   „Munkatársak" egyedül maradt a második sorban). Görgetés NINCS — a 29. fázis
   elve áll: a nem látszó fül nem létezik; inkább kisebb a fül. */
@media (max-width: 640px) {
    .subnav { flex-wrap: nowrap; gap: 6px; }
    .subnav-item { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 4px; font-size: .8rem; }
}
.subnav-item {
    display: inline-flex; align-items: center;
    /* 44px érintési célméret — a célközönség telefonról dolgozik. */
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: var(--sh-xs);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.subnav-item:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.subnav-item.is-active {
    background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}

/* Beállítások-kártyalap. auto-fit + minmax: telefonon egy oszlop, asztalin
   kettő-három — media query nélkül. */
.settings-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.settings-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--sh-xs);
    text-decoration: none;
    color: var(--text);
    transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.settings-card:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); color: var(--text); }
.settings-card:active { transform: translateY(1px); }
.settings-card-title { font-weight: 700; font-size: 1.02rem; color: var(--primary-dark); }
.settings-card-desc { font-size: .88rem; color: var(--muted); line-height: 1.45; }
/* Állapot-jelölés („kikapcsolva", „nincs logó") — nem hiba, csak tény. */
.settings-card-state {
    align-self: flex-start; margin-top: 6px;
    font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
}
/* ⭐ 64. fázis (D-32): a jelvény alatti kiegészítő sor (pl. a következő díj napja). */
.settings-card-note { margin-top: 4px; font-size: .82rem; color: var(--muted); }

/* Webcím-sáv a naptár tetején. Nem panel — halk sor: a foglalási linket a
   szalon naponta ki akarja másolni, de nem akar érte külön dobozt. */
.share-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: .9rem;
}
.share-label { color: var(--primary-dark); font-weight: 600; }
/* Hosszú slug keskeny kijelzőn különben kitolja az oldalt oldalra. */
.share-url { background: var(--card); overflow-wrap: anywhere; min-width: 0; }
.btn-sm { padding: 6px 12px; font-size: .88rem; }

/* ⭐ 70. fázis: QR-kód a webcím-sávban — natív <details>, a <summary> gombként.
   A `.btn` inline-block-ja elveszi a natív list-item markert (itt ez a cél: gomb,
   nem lenyíló cím); a WebKit külön markerét is rejtjük.
   Asztalon a tartalom a gomb alatt LEBEGŐ kártya (nem tolja szét a sávot);
   telefonon (lent, 820px) a folyamban, teljes szélességben. */
.share-qr { position: relative; }
.share-qr > summary { list-style: none; cursor: pointer; }
.share-qr > summary::-webkit-details-marker { display: none; }
.share-qr[open] > summary { background: var(--primary-soft); border-color: var(--primary); }
.share-qr-body {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    width: 300px; max-width: calc(100vw - 32px);
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    text-align: center;
}
/* A QR-kódnak világos csend-zóna kell: a kártya fehér, a kép nem nyúlik. */
.share-qr-body img { display: block; margin: 0 auto 12px; width: 180px; height: 180px; }
.share-qr-actions { display: flex; flex-direction: column; gap: 8px; }
.share-qr-body .muted { margin: 12px 0 0; font-size: .84rem; text-align: left; }

/* Lenyíló panel (Szünetek, Letiltott elérhetőségek, Időpont-kínálat…).
   NATÍV <details> — nulla JS, a landing GYIK-jának mintájára. A <summary>
   címe <h2>, hogy az oldalankénti EGY <h1> szabály ne sérüljön.

   ⚠️ A <summary>-n SZÁNDÉKOSAN NINCS `display: flex`: az elveszi a natív
   `display: list-item`-et, és vele együtt a lenyitást jelző HÁROMSZÖGET is —
   az pedig az egyetlen ingyenes jelzés, hogy ide kattintani lehet. Ezért a
   cím inline, a marker marad. */
details.panel-details > summary {
    /* 44px érintési célméret (a célközönség telefonról dolgozik). */
    min-height: 44px;
    padding: 10px 0;
    cursor: pointer;
}
details.panel-details > summary > h2 { display: inline; font-size: 1.15rem; }
details.panel-details[open] > summary {
    margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
details.panel-details > summary:hover > h2 { color: var(--primary-dark); }

/* Panelen BELÜLI lenyíló (Megjelenés: „Webcím és adatkezelés", Marketing:
   „Miért van erre szükség?"). Nem kártya — csak egy összecsukott bekezdés. */
.details-sub > summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.details-sub > summary > h2,
.details-sub > summary > h3 { display: inline; font-size: 1rem; color: var(--primary-dark); }
.details-sub[open] > summary { margin-bottom: 4px; }
.details-sub > p:last-child { margin-bottom: 0; }

/* A lejárt feketelista-bejegyzés halványabb: adat marad, de nem hat. */
.row-muted { opacity: .55; }
/* Mezők alatti magyarázó sor (feketelista-űrlap). */
.bk-hint { display: block; margin-top: 2px; color: var(--muted); font-size: .82rem; font-weight: 400; }

/* A fejléc e-mail-linkje ne nézzen ki kékesen aláhúzott linknek: ugyanaz a
   halk szöveg, mint eddig, csak kattintható (→ /admin/fiok). */
.app-user a { color: inherit; text-decoration: none; }
.app-user a:hover { color: var(--primary-dark); text-decoration: underline; }

/* --- 820px: érintés-optimalizálás + összecsukott navigáció ----------- */
@media (max-width: 820px) {
    /* ⭐ 70. fázis: telefonon a QR-lenyíló a sáv aljára, a folyamba kerül — egy
       lebegő kártya a keskeny kijelzőn kilógna, vagy a naptár fölé takarna. */
    .share-qr[open] { flex-basis: 100%; }
    .share-qr-body { position: static; width: auto; max-width: none; margin-top: 10px; box-shadow: none; }

    /* A WCAG 2.5.5 és az Apple HIG minimuma 44×44 CSS px. A .btn-nél 48px,
       mert az az elsődleges művelet — hüvelykujjal kell eltalálni. */
    .btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 48px; padding: 12px 20px;
    }
    /* A .btn-link szövegszerű link, nem tömb — csak a kattintható terület nő.
       A min-width a rövid feliratok miatt kell (pl. a naptár "Ma" gombja
       enélkül 31px széles maradna). Negatív margó itt NINCS: a fejléc jobb
       szélén álló Kilépés gombnál kitolná az oldalt oldalra. */
    /* ⭐ 64. fázis (D-44): vízszintes padding NINCS — a szöveg-igazított
       link-gomb a szöveggel egy vonalban kezdődjön (a min-width marad). */
    .btn-link { min-height: 44px; min-width: 44px; padding-inline: 0; }
    .btn-plain { padding-inline: 0; justify-content: flex-start; text-align: left; }

    .field input, .field select, .field textarea,
    .cal-form .bk-input, .cal-form select.bk-input { min-height: 44px; }
    .field textarea { min-height: 88px; }
    /* A 16px-es checkboxot maga a címke-sor teszi elérhetővé. */
    .field-check, .ob-step { min-height: 44px; }

    /* A sor-műveleteknél a PADDING nem elég: a kattintható területet kell
       növelni, negatív margóval visszahúzva, hogy az elrendezés ne csússzon. */
    .row-actions { gap: 2px 14px; flex-wrap: wrap; }
    .row-actions > a,
    .row-actions .btn-link {
        display: inline-flex; align-items: center;
        min-height: 44px; padding: 0 6px; margin: 0 -6px;
    }

    /* A panel-fejlécek szövegszerű linkjei (pl. „← Vendégek") is legyenek
       eltalálhatók. A :not(.btn) kell, különben elvenné a gombok 48px-ét. */
    .panel-head a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }

    .cal-arrow { width: 44px; height: 44px; font-size: 1.25rem; flex: none; }   /* 64. fázis: nem zsugorodik 44px alá (C3) */
    .cal-view { padding: 11px 18px; min-height: 44px; }
    .cal-modal-x { width: 44px; height: 44px; top: 8px; right: 8px; }

    /* --- Navigáció: 9 menüpont → hamburger ---------------------------
       A fejléc sticky, tehát a nyitott menü nem tolja el az oldalt.
       Az aria-current="page" jelölés változatlanul a szerveren dől el. */
    .app-header { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; }
    /* A logó is navigáció (vissza a vezérlőpultra) — 44px magas célterület. */
    .app-logo { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }

    /* Vizuálisan rejtett, de fókuszálható és billentyűvel kapcsolható. */
    .app-menu-toggle {
        display: block; position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .app-menu-btn {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: 0 0 44px;
        border: 1px solid var(--border); border-radius: var(--r-sm);
        background: var(--card); color: var(--text); cursor: pointer;
        box-shadow: var(--sh-xs);
    }

    /* Zárt alapállapot; a menüpontok és a fiók-blokk együtt nyílik. */
    .app-nav, .app-user { display: none; }
    .app-menu-toggle:checked ~ .app-nav,
    .app-menu-toggle:checked ~ .app-user { display: flex; }

    .app-nav {
        flex: 1 0 100%; flex-direction: column; flex-wrap: nowrap; gap: 2px;
        margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--border);
        /* 9 menüpont × 48px kifutna a képernyőből, és a sticky fejlécen BELÜL
           nem lehet görgetni — a lista így magától görgethető marad.
           A dvh sor felülírja a vh-t az azt ismerő böngészőkön (iOS-en a vh
           a dinamikus címsorral nem stimmel). */
        max-height: calc(100vh - 140px);
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    .app-nav a {
        min-height: 48px; display: flex; align-items: center;
        padding: 0 12px; font-size: 1rem; white-space: normal;
    }
    .app-user {
        flex: 1 0 100%; margin-left: 0; gap: 10px;
        padding-top: 8px; border-top: 1px solid var(--border);
        justify-content: space-between;
        /* min-width: 0 — enélkül a flex-elem az automatikus minimumára
           (min-content) hízik a hosszú e-mail cím miatt, és kilóg a fejlécből. */
        min-width: 0;
    }
    /* min-width: 0 NÉLKÜL a flex-elem nem zsugorodik a tartalma alá (a
       min-width alapértéke auto), és a hosszú e-mail cím kitolja az oldalt
       oldalra — a text-overflow: ellipsis magában nem elég. */
    .app-user .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* --- 640px: telefon-elrendezés --------------------------------------- */
@media (max-width: 640px) {

    /* Több hely a tartalomnak; a max() a fekvő módú notch-ot is kezeli
       (külön longhand, hogy a bal/jobb inset ne cserélődjön fel). */
    .app-main {
        margin: 16px auto;
        padding-top: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }
    .public-main { margin: 32px auto; padding: 0 16px; }
    .auth-body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .auth-card { padding: 24px; }
    .panel { padding: 20px; }
    .panel-head { flex-wrap: wrap; gap: 10px; }
    .error-page h1 { font-size: 2.2rem; }

    /* Az űrlapmezők egymás alá; az "align-items: flex-end" telefonon értelmetlen. */
    .form-inline { flex-wrap: wrap; align-items: stretch; gap: 10px; }
    .form-inline .field { flex: 1 0 100%; }
    .form-inline .btn { width: 100%; }
    .form-actions { flex-wrap: wrap; gap: 10px; }

    /* Statisztika-dobozok: 2 oszlop jobban néz ki, mint egymás alatt. */
    .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat { padding: 12px 14px; }
    .stat-num { font-size: 1.4rem; }

    /* ⭐ 64. fázis (D-38): keskeny kijelzőn a mező teljes szélességű, saját
       sorban (mint a többi mező). ⭐ 65. fázis: az előtag/utótag NEM jelenik
       meg szétszedve („https://….mostfoglalok.hu" — nem derült ki belőle, mi
       lesz a cím); helyette a .slug-preview mutatja a KÉSZ címet, élőben. */
    .slug-wrap .slug-base { display: none; }
    .slug-wrap input, .slug-wrap.has-suffix input { flex: 1 1 100%; border-radius: var(--r-sm) !important; }
    .slug-preview { display: block; font-size: .85rem; color: var(--muted); }

    /* ⭐ 65. fázis: két oszlopos mezősor telefonon egy oszlop — a két oszlop
       a súgószövegnél elcsúszott, és a helyőrző nem fért ki. */
    .field-grid { grid-template-columns: 1fr; }

    /* --- Kártyás táblanézet ---------------------------------------
       A táblázat telefonon rossz forma: a sorok kártyákká alakulnak, a
       fejléc-cellák szövege a td[data-label]-ből jön ::before-ral.
       Csak a .table-cards jelölésű táblákon (services, customers) —
       a többi marad görgetős. */
    .table-cards thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td {
        display: block; width: 100%;
    }
    .table-cards tr {
        background: var(--card); border: 1px solid var(--border);
        border-radius: var(--r-md); box-shadow: var(--sh-xs);
        padding: 12px 14px; margin-bottom: 10px;
    }
    .table-cards tbody tr:hover { background: var(--card); }
    /* ⭐ 64. fázis (D-01): a cella `display: table`, NEM flex. A flex minden
       szöveg-darabot és minden <strong>/<a> elemet KÜLÖN oszlopba rakott („a
       Előfiz / z etőről" a jogi lapokon); a táblázat-elrendezés viszont az
       egymást követő nem-cella tartalmat EGY névtelen cellába fogja össze:
       balra a címke (::before), jobbra a teljes, folyó tartalom. */
    .table-cards td {
        display: table; width: 100%;
        border-bottom: 0; padding: 4px 0; overflow-wrap: anywhere;
    }
    /* A címke SZÓT NEM TÖR („FELHASZNÁLÁ / S") — inkább a 36% fölé nő
       (automatikus táblázat-elrendezés: a min-content szélesség nyer). */
    .table-cards td::before {
        content: attr(data-label);
        display: table-cell; width: 36%; padding-right: 12px;
        overflow-wrap: normal; word-break: normal;
        vertical-align: baseline;
        color: var(--muted); font-weight: 600;
        font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    }
    /* Az első cella a kártya címe — ott a címke felesleges. */
    .table-cards td:first-child {
        display: block; font-weight: 700; font-size: 1.02rem;
        padding: 0 0 8px;
    }
    .table-cards td:first-child::before,
    .table-cards td:not([data-label])::before { content: none; }
    /* A műveletsor a kártya lába. */
    /* ⭐ 64. fázis: a műveletsor MARAD flex (a fenti `display: table` különben
       összetapasztaná a gombokat — „Szerkeszt Inaktivál Törlés"). */
    .table-cards td.row-actions {
        display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
        white-space: normal; margin-top: 6px; padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    /* Kártyás módban nincs mit görgetni — a scroll-árnyék félrevezető lenne. */
    .table-wrap:has(.table-cards) { overflow-x: visible; background: none; }

    /* --- Naptár ----------------------------------------------------
       Az alapértelmezett nézet már ma is a NAPI (admin-calendar.js:
       state.view = 'day'), így telefonon nem a 7 oszlopos heti indul.
       Itt csak a vezérlősor tördelése kell: a .cal-views margin-left:auto
       különben kilökné a nézetváltót a képernyőről. */
    .cal-toolbar { gap: 10px; }
    .cal-nav { flex: 1 0 100%; }
    .cal-label { margin-left: auto; font-size: .95rem; }
    .cal-views { margin-left: 0; flex: 1 1 auto; }
    .cal-view { flex: 1; }
    .cal-toolbar > .btn { flex: 1 0 100%; }
    .calendar { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

    /* A modál telefonon alulról felcsúszó lap — ez a natív mobil-minta.
       A prefers-reduced-motion blokk az animációt itt is kikapcsolja.

       A vh a NAGY viewportra vonatkozik (amikor a böngésző eszköztárai el
       vannak rejtve). Az Opera Androidon ALSÓ eszköztár is van, így a lap
       alja a bar mögé esett, és ha a tartalom belefért, belső görgetés sem
       volt — a vendég-jegyzet és a lemondás gomb elérhetetlen maradt.
       A dvh a ténylegesen látható magasságot adja; a dvh sor a vh UTÁN jön,
       hogy az azt nem ismerő böngésző az elsőt használja (ugyanaz a páros,
       mint az .app-nav-nál fent). */
    .cal-overlay { align-items: flex-end; padding: 0; height: 100vh; height: 100dvh; }
    .cal-modal {
        max-width: none;
        max-height: 92vh;
        max-height: 88dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
        animation-name: cal-sheet;
    }
    .cal-row2 { grid-template-columns: 1fr; }

    /* ⭐ 64. fázis (C-05): a rövid foglalás-blokk is megnyitható legyen
       ujjal (24–27px volt). Az időarány ilyenkor torzul, de a blokk a saját
       idejét kiírja. */
    .cal-block { min-height: 40px; }

    /* ⭐ 64. fázis (D-04): nyitvatartás soronként kártya — a nap fölül, a
       nyitás és a zárás egymás mellett, a „00:00 = éjfél" látszik. */
    .wh-table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .wh-table, .wh-table tbody { display: block; }
    .wh-table tr.wh-row {
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
        padding: 12px 0; border-bottom: 1px solid var(--border);
    }
    .wh-table tr.wh-row td { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; min-width: 0; }
    .wh-table tr.wh-row td:first-child { grid-column: 1 / -1; }
    .wh-table td::before {
        content: attr(data-label); color: var(--muted); font-weight: 600;
        font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    }
    .wh-table select, .wh-table input[type="time"] { width: 100%; min-width: 0; }
    .table-wrap:has(.wh-table) { overflow-x: visible; background: none; }
}

@keyframes cal-sheet { from { transform: translateY(100%) } to { transform: none } }