/*
  Layout reteg - oldalvaz es szerkezeti mintak.

  Ami ide tartozik: konteneres szelesseg, header/footer, oldalstruktura.
  Ami NEM: komponens (az components/), es dashboard-specifikus minta
  (az dashboard.css).

  CSAK szemantikus token (DS-BRAND-002).
*/

@layer layout {
    .layout {
        max-width: 72rem;
        margin-inline: auto;
        padding: var(--space-6) var(--space-4);
    }

    .site-header {
        border-bottom: 1px solid var(--border-default);
        padding-block: var(--space-4);
    }

    .auth-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    .auth-header-nav {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .site-name {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-family-display);
        font-weight: 700;
        text-decoration: none;
    }

    /*
      A jel a SZOVEG szinet veszi at (fill="currentColor"), ezert arculatot
      valtani eleg a --brand-primary atallitasaval - a fajlt nem kell
      ujrarajzolni.

      Az em-alapu meret azert kell, hogy a jel a nevvel EGYUTT skalazodjon;
      fix px eseten a ket elem kulon eletet elne.

      A MAGASSAG a rogzitett meret, a szelesseg szabad: igy egy negyzetes
      jel ugyanugy 1.5em, mint eddig, de egy szomarka nem prezelodik bele
      egy negyzetbe. Ez nem elmeleti: a PlusSeat logoja egy 430x96-os
      szomarka, es egy 24x24-es dobozba zsugoritva egy olvashatatlan
      elmosodas volt - a felhasznalo jogosan mondta, hogy "nem latok logot".
    */
    .site-name svg {
        block-size: 1.5em;
        inline-size: auto;
        flex: none;
        color: var(--brand-primary);
    }

    /*
      A szomarka a nev HELYETT all, ezert nagyobb teret kap. UJ BRANDNEL ez
      nem hiusag: a fejlec az egyetlen hely, ahol a nev MINDEN oldalon ott
      van, es 28 pixeresen egy szeles kepernyon egyszeruen elveszett.
      Ennel tovabb viszont nem megyunk - a tulmeretezett logo bizonytalannak
      latszik, nem magabiztosnak.
    */
    .site-name-wordmark svg {
        block-size: 2.5em;
        /*
          Ruben 2026-09-17-i vegleges kompozicioja: a plusz teal (a fajlban all),
          a "Seat" a SZOVEGSZIN - sotet temakon torfeher, a Porcelanon sotet.
          A currentColor ezt a tokent kapja, nem a brand-akcentust.
        */
        color: var(--text-primary);
    }

    /*
      Az elsodleges menu sortori es zsugorodhat: ot menupont + a fiokmenu
      egy 768px szeles kepernyon mar nem fer ki egy sorban. Enelkul a
      fejlec vizszintesen kitolna az oldalt.
    */
    .site-nav {
        flex-wrap: wrap;
        gap: var(--space-1);
        min-width: 0;
    }

    /*
      MOZGAS-MODELL (asztali "topnav"): a menupontok PIRULAK - a modell a
      telefonos ful-sav pontjait asztalon igy teszi a fejlecbe. A pirula
      belso terkoze adja a tavolsagot, ezert a sor gap-je kicsi.
    */
    .site-nav a {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 600;
        /* Menupont: kattintofelulet, tehat WCAG 2.5.8 touch target. */
        display: inline-flex;
        align-items: center;
        min-block-size: var(--touch-target-min);
        padding-inline: var(--space-3);
        border-radius: var(--radius-md);
        transition:
            background-color var(--duration-fast),
            color var(--duration-fast);
    }

    .site-nav a:hover {
        color: var(--text-primary);
        background: var(--surface-subtle);
    }

    /*
      Az aktualis lap: a marka halvany arnyalata es markaszinu felirat
      (mozgas-modell). Korabban alahuzas volt; a pirula egy sor pont kozott
      messzebbrol olvashato. Nem csak szin: a hatter is valt (WCAG 1.4.1),
      es az aria-current kimondja.
    */
    .site-nav a[aria-current="page"] {
        color: var(--brand-primary);
        background: var(--brand-dim);
    }

    /* ------------------------------------------------------------------
       ASZTALI SIDEBAR (Ruben #46, Dani 2026-09-30). 900 px-tol a
       bejelentkezett app fomenuje allando bal oldali sav, ikonokkal; a
       fejlecbol a logo es a vizszintes menu eltunik, a vissza-gomb, a
       harang es a fiok marad. 900 px alatt a sav nincs, a fejlec-menu
       (768-899) es a ful-sav (768 alatt) viszi. A lista ugyanaz (AppMenu).

       A pontok formaja a fejlec-menu pirulaja, fuggolegesen: aktualis =
       marka halvany arnyalata + markaszin (nem csak szin, WCAG 1.4.1);
       az egyseg-CTA a kitoltott gomb (Ruben: tomor, nem szaggatott).
       ------------------------------------------------------------------ */
    .app-sidebar {
        display: none;
    }

    @media (min-width: 900px) {
        .app-sidebar {
            position: fixed;
            inset-block: 0;
            inset-inline-start: 0;
            inline-size: var(--app-sidebar-width);
            display: flex;
            flex-direction: column;
            gap: var(--space-6);
            padding: var(--space-6) var(--space-4);
            background: var(--surface-elevated);
            border-inline-end: 1px solid var(--border-default);
            overflow-y: auto;
        }

        body:has(> .app-sidebar) {
            --app-sidebar-width: 15rem;
            padding-inline-start: var(--app-sidebar-width);
        }

        body:has(> .app-sidebar) .site-header .site-name,
        body:has(> .app-sidebar) .site-header .site-nav,
        body:has(> .app-sidebar) .site-header .nav-toggle {
            display: none;
        }

        /* A fejlec a logo nelkul: a vissza-gomb balra, a tobbi (valto, harang, fiok) jobbra. */
        body:has(> .app-sidebar) .site-header .auth-header {
            justify-content: flex-end;
        }

        body:has(> .app-sidebar) .site-header .header-back {
            margin-inline-end: auto;
        }

        .app-sidebar-brand {
            padding-inline: var(--space-2);
        }

        .app-sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }

        .app-sidebar-link {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            min-block-size: var(--touch-target-min);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            font-weight: 600;
            text-decoration: none;
            transition:
                background-color var(--duration-fast),
                color var(--duration-fast);
        }

        .app-sidebar-link:hover {
            color: var(--text-primary);
            background: var(--surface-subtle);
        }

        .app-sidebar-link[aria-current="page"] {
            color: var(--brand-primary);
            background: var(--brand-dim);
        }

        .app-sidebar-icon {
            display: inline-flex;
            flex: none;
            inline-size: 1.25rem;
            block-size: 1.25rem;
        }

        .app-sidebar-icon svg {
            inline-size: 100%;
            block-size: 100%;
        }

        .app-sidebar-cta,
        .app-sidebar-cta:hover {
            margin-block-start: var(--space-4);
            background: var(--action-cta-background);
            color: var(--action-cta-text);
        }

        .app-sidebar-cta[aria-current="page"] {
            color: var(--action-cta-text);
            background: var(--action-cta-background);
            outline: 2px solid var(--action-cta-background);
            outline-offset: 2px;
        }
    }

    /* ------------------------------------------------------------------
       Mobil menu (F2). A gomb csak akkor letezik lathatoan, ha fut a JS
       (html.js) ES keskeny a kepernyo - kulonben a menu a mai modon
       viselkedik. A .is-open allapotot a nav.js kapcsolja.
       ------------------------------------------------------------------ */
    .nav-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        min-inline-size: var(--touch-target-min);
        min-block-size: var(--touch-target-min);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-primary);
        font-size: 1.25rem;
        cursor: pointer;
    }

    @media (max-width: 767px) {
        .js .nav-toggle {
            display: inline-flex;
            flex: none;
            order: 4;
        }

        /*
          EGY SORBA rendezes GRIDDEL: marka | harang | fiok | menugomb,
          a lenyitott menu alattuk, teljes szelesen. Grid, nem flex-sorrend:
          a wrap-alapu elrendezesnel a sortores a gyerekek pillanatnyi
          szelessegetol fuggott, es a fejlec tobb sorba esett szet.
        */
        .js .auth-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto auto;
            align-items: center;
            gap: var(--space-2);
            /* Az ertesites-panel mobilon a FEJLEC ala, teljes szelesen - a
               harang nem a jobb szelen ul, jobbra igazitva kilogna a kepernyorol. */
            position: relative;
        }

        .js .auth-header > .notification-dropdown {
            position: static;
        }

        .js .notification-dropdown-panel {
            inset-inline: var(--space-3);
            inline-size: auto;
        }

        .js .auth-header > .site-name {
            grid-row: 1;
            grid-column: 1;
        }

        .js .auth-header > .notification-bell,
        .js .auth-header > .notification-dropdown {
            grid-row: 1;
            grid-column: 2;
        }

        .js .auth-header > .account-menu,
        .js .auth-header > nav[aria-label="Fiók"] {
            grid-row: 1;
            grid-column: 3;
            min-inline-size: 0;
        }

        .js .auth-header > .nav-toggle {
            grid-row: 1;
            grid-column: 4;
        }

        /*
          VISSZA-GOMB a jel ELOTT (mozgas-modell). Csak ahol tenyleg van: egy
          mindig jelen levo, de ures elso oszlop a resközevel 8 px-szel eltolna
          a jelet a vissza-gomb nelkuli lapokon - es lapvaltaskor a logo ugralna.
          Ezert a vissza-gombos fejlec KULON racsot kap, egy elotet-oszloppal.
        */
        .js .auth-header:has(> .header-back) {
            grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        }

        .js .auth-header:has(> .header-back) > .header-back {
            grid-row: 1;
            grid-column: 1;
        }

        .js .auth-header:has(> .header-back) > .site-name {
            grid-column: 2;
        }

        .js .auth-header:has(> .header-back) > :is(.notification-bell, .notification-dropdown) {
            grid-column: 3;
        }

        .js .auth-header:has(> .header-back) > :is(.account-menu, nav[aria-label="Fiók"]) {
            grid-column: 4;
        }

        .js .auth-header:has(> .header-back) > .nav-toggle {
            grid-column: 5;
        }

        .js .account-menu-email {
            max-inline-size: 6rem;
        }

        .js .auth-header > .app-switch {
            grid-row: 2;
            grid-column: 1 / -1;
            justify-self: start;
        }

        .js .site-nav {
            display: none;
            grid-row: 3;
            grid-column: 1 / -1;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            border-top: 1px solid var(--border-default);
            padding-block-start: var(--space-2);
        }

        .js .site-nav.is-open {
            display: flex;
        }

        .js .site-nav a {
            padding-block: var(--space-2);
        }
    }

    /* ------------------------------------------------------------------
       Ertesitesi harang.

       A fiokmenu MELLETT all, sajat savkent: igy a fomenu sortoresekor
       sem csuszik be a menupontok koze. A szamlalo abszolut pozicionalt,
       tehat a megjelenese NEM tolja el a harangot - kulonben a fejlec
       minden uj ertesitesnel megugrana.
       ------------------------------------------------------------------ */
    .notification-bell {
        position: relative;
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* WCAG 2.5.8: kattintofelulet. */
        min-inline-size: var(--touch-target-min);
        min-block-size: var(--touch-target-min);
        border-radius: var(--radius-pill);
        text-decoration: none;
    }

    .notification-bell:hover {
        background: var(--surface-subtle);
    }

    /*
      MOZGAS-MODELL: korvonalas ikon, nem emoji. Az emoji platformonkent mas
      rajz (Windows sarga, iOS arany, Android megint mas), es a SZINE sem
      kovette a temat - a Porcelan teman is sarga harang allt a fejlecben.
    */
    .notification-bell-icon {
        display: inline-flex;
        inline-size: 22px;
        block-size: 22px;
        color: var(--text-secondary);
    }

    .notification-bell-icon svg {
        inline-size: 100%;
        block-size: 100%;
    }

    .notification-bell:hover .notification-bell-icon,
    .notification-bell:focus-visible .notification-bell-icon {
        color: var(--text-primary);
    }

    /* A modell vissza-nyila: ikon-gomb a jel elott, erintesi merettel. */
    .header-back {
        display: inline-grid;
        place-items: center;
        flex: none;
        min-inline-size: var(--touch-target-min);
        min-block-size: var(--touch-target-min);
        margin-inline-start: calc(-1 * var(--space-2));
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        text-decoration: none;
    }

    .header-back:hover,
    .header-back:focus-visible {
        background: var(--surface-subtle);
        color: var(--text-primary);
    }

    .notification-bell-badge {
        position: absolute;
        inset-block-start: 0.125rem;
        inset-inline-end: 0.125rem;
        min-inline-size: 1.125rem;
        padding-inline: 0.25rem;
        border-radius: var(--radius-pill);
        background: var(--status-danger);
        color: var(--text-inverse);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.125rem;
        text-align: center;
    }



    /* ------------------------------------------------------------------
       App-kapcsolo (role-split-experience.md, Alternative Flows): csak
       annak latszik, aki szalon-tag ES szakember. Szegmentalt kapcsolo -
       ket gomb, az aktiv teli.
       ------------------------------------------------------------------ */
    .app-switch {
        display: inline-flex;
        flex: none;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
        padding: 2px;
        gap: 2px;
    }

    .app-switch-option {
        border: 0;
        background: none;
        color: var(--text-secondary);
        font: inherit;
        font-size: var(--font-size-body-small);
        padding-block: var(--space-1);
        padding-inline: var(--space-3);
        border-radius: var(--radius-pill);
        cursor: pointer;
    }

    .app-switch-option:hover {
        color: var(--text-primary);
    }

    .app-switch-option.is-active {
        background: var(--action-primary-background);
        color: var(--action-primary-text);
        cursor: default;
    }
    /* ------------------------------------------------------------------
       Ertesites-lenyilo (2026-09-14): a harang <details>, a panel abszolut,
       mint a fiokmenue - a fejlec magassaga nyitaskor nem ugrik.
       ------------------------------------------------------------------ */
    .notification-dropdown {
        position: relative;
        flex: none;
    }

    .notification-dropdown > summary {
        list-style: none;
        cursor: pointer;
    }

    .notification-dropdown > summary::-webkit-details-marker {
        display: none;
    }

    .notification-dropdown-panel {
        position: absolute;
        inset-block-start: calc(100% + var(--space-2));
        inset-inline-end: 0;
        z-index: 20;
        inline-size: min(24rem, calc(100vw - 2 * var(--space-4)));
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-elevated);
        box-shadow: var(--shadow-md);
    }

    .notification-dropdown-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .notification-dropdown-panel [data-dropdown-list] {
        max-block-size: 60vh;
        overflow-y: auto;
        margin: 0;
    }

    .notification-dropdown-panel .notification-text {
        font-size: var(--font-size-body-small);
    }

    .notification-dropdown-empty,
    .notification-dropdown-foot {
        margin: 0;
        font-size: var(--font-size-body-small);
    }

    .link-button {
        padding: 0;
        border: 0;
        background: none;
        color: var(--text-primary);
        text-decoration-color: var(--brand-primary);
        font: inherit;
        font-size: var(--font-size-body-small);
        text-decoration: underline;
        cursor: pointer;
    }
    /* ------------------------------------------------------------------
       Fiokmenu (bejelentkezve).

       A fejlec harom savbol all: markanev - fomenu - fiok. A fiok sav
       EGYETLEN elem szeles, ezert a fomenu akkor is egy sorban marad,
       amikor a felhasznalonak sok sajat menupontja van.
       ------------------------------------------------------------------ */
    .account-menu {
        position: relative;
        flex: none;
    }

    .account-menu > summary {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: var(--touch-target-min);
        padding-inline: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
        cursor: pointer;
        /*
          A bongeszo sajat haromszog-jelolojet lecsereljuk a sajat
          nyilunkra: az alapertelmezett marker a flex-elrendezesben
          kulon elemkent viselkedne, es a fuggoleges igazitast elrontana.
        */
        list-style: none;
    }

    .account-menu > summary::-webkit-details-marker {
        display: none;
    }

    .account-menu > summary:hover {
        color: var(--text-primary);
        border-color: var(--border-strong);
    }

    /*
      A hosszu email cim nem tolhatja szet a fejlecet: egy ponton tul
      harom ponttal zarul. A teljes cim a menuben nyitva is olvashato.
    */
    .account-menu-email {
        max-inline-size: 14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-menu-caret {
        inline-size: 0;
        block-size: 0;
        flex: none;
        border-inline: 0.3em solid transparent;
        border-block-start: 0.35em solid currentColor;
    }

    .account-menu[open] > summary .account-menu-caret {
        transform: rotate(180deg);
    }

    /*
      A panel KILEP a dokumentumfolyasbol (absolute): enelkul kinyitaskor
      a fejlec magassaga megugrana, es alatta az egesz oldal lejjebb
      csuszna - a menu hasznalata "ugralo" oldalnak latszana.
    */
    .account-menu-panel {
        position: absolute;
        inset-block-start: calc(100% + var(--space-2));
        inset-inline-end: 0;
        z-index: 20;
        min-inline-size: 14rem;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-elevated);
        box-shadow: var(--shadow-md);
    }

    .account-menu-nav {
        display: flex;
        flex-direction: column;
    }

    /*
      G3 (interakcio-visszajelzes-terv): harom csoport elvalasztoval -
      elsodleges navigacio, fiokkezeles, es a veszelyes muvelet kulon,
      danger-szinnel. A csoport-hatar vonal, nem ures hely: a lista igy
      "olvashato" marad egy pillantasra.
    */
    .account-menu-group {
        display: flex;
        flex-direction: column;
    }

    .account-menu-group + .account-menu-group {
        margin-block-start: var(--space-2);
        padding-block-start: var(--space-2);
        border-block-start: 1px solid var(--border-default);
    }

    .account-menu-nav .account-menu-group[data-group="danger"] a {
        color: var(--status-danger);
    }

    .account-menu-nav .account-menu-group[data-group="danger"] a:hover {
        color: var(--status-danger);
        text-decoration: underline;
    }

    .account-menu-nav a {
        display: flex;
        align-items: center;
        min-block-size: var(--touch-target-min);
        color: var(--text-secondary);
        text-decoration: none;
    }

    .account-menu-nav a:hover {
        color: var(--text-primary);
    }

    .account-menu-form {
        margin: 0;
    }

    .account-menu-form .button {
        inline-size: 100%;
    }

    .site-footer {
        border-top: 1px solid var(--border-default);
        margin-block-start: var(--space-12);
        padding-block: var(--space-6);
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }

    .site-footer-inner {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-8);
        flex-wrap: wrap;
    }

    /*
      ZARO MARKABLOKK: jel + egy mondat arrol, mi ez, + a copyright.
      Egy uj brandnel a lablec az utolso hely, ahol a latogato talalkozik a
      nevvel - egy "(c) Nev" onmagaban ehhez keves.

      A mondat a TARTALOMBOL jon (a kezdolap leirasa), nem a Razorbol:
      marketing copy nem allhat kodban (DS-BRAND-005).
    */
    .site-footer-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        max-inline-size: 46ch;
    }

    /*
      A lablec jele KISEBB a fejlecenél: a fejlec az elsodleges hely, a
      lablec a zaras. Forditva a lablec vinné el a hangsulyt.
    */
    .site-footer-brand .site-name {
        color: var(--text-primary);
    }

    .site-footer-brand .site-name svg {
        block-size: 2em;
    }

    .site-footer-tagline {
        margin: 0;
        color: var(--text-secondary);
    }

    /*
      A lablec menu tobb pontot kapott, ezert sortorhet - kulonben mobilon
      kilogna a lablecbol.
    */
    .site-footer-nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    /* Touch target a jogi linkeken is - mobilon ezek is ujjal kerulnek elo. */
    .site-footer-nav a {
        display: inline-flex;
        align-items: center;
        min-block-size: var(--touch-target-min);
    }


    /* ------------------------------------------------------------------
       Cim-ritmus (2026-09-14, "osszetorlodott feluletek"): a base.css a
       cimsorok margojat nullazza, es csak a .flow adott 16px-et - igy egy
       h1 utani lista vagy egy h2 elotti bekezdes osszeragadt. Itt a
       lapszintu alapertelmezes: a lapcim alatt levego, a szakaszcim elott
       tobb, mint utana.
       ------------------------------------------------------------------ */
    main h1 {
        margin-block-end: var(--space-6);
    }

    main h2 {
        margin-block-end: var(--space-3);
    }

    .flow > h2,
    .flow > section {
        margin-block-start: var(--space-8);
    }

    .flow > h2:first-child,
    .flow > section:first-child {
        margin-block-start: 0;
    }

    /* A lapfej sajat cimet a .page-head szabalyozza; a kartyan belul a
       szakaszcimet a kartya - ezek ne kapjanak duplan. */
    .page-head h1,
    .edit-head h1,
    .salon-head h1,
    .profile-header h1,
    .form-section > h2,
    .auth-card h1,
    .auth-card h2 {
        margin-block-end: 0;
    }

    .form-section > h2 {
        margin-block-end: var(--space-4);
    }
    /* Fuggoleges ritmus: a szoveges tartalom alap tavolsaga. */
    .flow > * + * {
        margin-block-start: var(--space-4);
    }

    /* F1: urlapon belul a mezok kozti koz kicsit nagyobb - a mezocsoport
       lelegzik, anelkul, hogy az oldal szethullana. */
    form.flow > * + * {
        margin-block-start: var(--space-5);
    }
}

@layer components {
    /*
      MOZGAS-MODELL (Ruben #68): SZINEZETT SAV - a hatter es a keret a sav
      hangjanak arnyalata. Korabban szurke doboz volt egy 4 px-es szines bal
      csikkal; a modell az egesz savot szinezi, ami a tartalom kozott
      egyertelmubben "uzenet".

      A hang egyetlen valtozo (--notice-tone): a valtozatok (forms.css) csak
      ezt allitjak, a keret es a hatter ebbol szarmazik. A szoveg mindig az
      elsodleges szovegszin - a hatter 10%-os arnyalat, a kontraszt tehat
      gyakorlatilag az alap feluletie.
    */
    .notice {
        --notice-tone: var(--status-info);
        border: 1px solid color-mix(in srgb, var(--notice-tone) 40%, transparent);
        background: color-mix(in srgb, var(--notice-tone) 10%, transparent);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
    }

    /* G3: elrejtheto sav - a gomb a jobb felso sarokban, touch-meretu. */
    .notice[data-dismissible],
    .notice-toast {
        position: relative;
        padding-inline-end: calc(var(--space-4) + var(--touch-target-min));
    }

    .notice-dismiss {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-end: var(--space-2);
        min-inline-size: var(--touch-target-min);
        min-block-size: var(--touch-target-min);
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
    }

    .notice-dismiss:hover {
        color: var(--text-primary);
    }

    /*
      "Tedd ki a kezdokepernyore" (PWA 1. fazis). A keret-akcentus a
      markaszin, nem a status-info: ez nem figyelmeztetes, hanem ajanlat.
    */
    /*
      A Profilom "Alkalmazas" szakasza csak akkor latszik, ha a doboza is: asztalon
      (es telepitesre kepes bongeszo nelkul) a doboz rejtve marad - a cim ne alljon
      ott egyedul, ures szakaszkent (Dani, 2026-09-26).
    */
    .pwa-install-section:not(:has([data-pwa-install]:not([hidden]))) {
        display: none;
    }

    .pwa-install {
        --notice-tone: var(--brand-primary);
        display: grid;
        gap: var(--space-2);
    }

    /*
      A bezaro gomb ABSZOLUT pozicionalt (.notice-dismiss), tehat kell ala egy
      pozicionalt szulo es hely a jobb szelen. A meglevo szabaly ezt a
      [data-dismissible] attributumhoz koti, amit ez a doboz NEM hasznal (sajat,
      heti/harom-probas logikaja van) - igy a gomb eloszor kicsuszott a dobozbol.
      Bongeszoben latszott meg, nem teszten.
    */
    .pwa-install:has(.notice-dismiss) {
        position: relative;
        padding-inline-end: calc(var(--space-4) + var(--touch-target-min));
    }

    .pwa-install > p {
        margin: 0;
        color: var(--text-secondary);
    }

    /*
      Biztonsagi halo: a doboz a markupban amugy is rejtve indul, es a
      pwa.js csak akkor hozza elo, ha NINCS telepitve. Ez a szabaly arra az
      esetre marad, ha valaki kesobb lathatora allitana a markupot - akkor
      sem jelenhet meg a mar telepitett ablakban.
    */
    @media (display-mode: standalone) {
        [data-pwa-install] {
            display: none;
        }
    }
}

@layer layout {
    /* A11y (#16, WCAG 2.4.1): a skip-link a kepernyon kivul, fokuszban bal felul. */
    .skip-link {
        position: absolute;
        inset-inline-start: var(--space-4);
        inset-block-start: -100%;
        z-index: 100;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        background: var(--action-primary-background);
        color: var(--action-primary-text);
        font-weight: 600;
        text-decoration: none;
    }

    .skip-link:focus {
        inset-block-start: var(--space-2);
    }

    main:focus {
        outline: none;
    }
}

/* ----------------------------------------------------------------------
   Fiok-gomb ikonnal es a csengo mozgasa (Dani 2026-09-14).
   A fejlecben nem az e-mail cim all, hanem egy kerek ikon: a szakember
   feltoltott profilkepe, kulonben ember-jel; a szalon appban +Seat-jel.
   Egerre a jel "eled": a szek megbillen es a plusz felvillan, az ember
   biccent, a csengo meglendul. Reduced motion: semmi nem mozog.
   ---------------------------------------------------------------------- */
@layer components {
    .account-menu > summary {
        padding-inline: var(--space-1) var(--space-3);
        gap: var(--space-1);
    }

    .account-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2rem;
        block-size: 2rem;
        border-radius: 50%;
        overflow: hidden;
        color: var(--text-primary);
        background: var(--surface-subtle);
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
    }

    .account-avatar-photo img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        display: block;
    }

    .account-avatar-salon {
        color: var(--action-primary-background);
        background: color-mix(in srgb, var(--action-primary-background) 14%, var(--surface-default));
    }

    .account-avatar svg {
        display: block;
        overflow: visible;
    }

    .account-menu > summary:hover .account-avatar,
    .account-menu > summary:focus-visible .account-avatar {
        transform: scale(1.06);
        background: color-mix(in srgb, var(--action-primary-background) 22%, var(--surface-default));
        color: var(--action-primary-background);
    }

    .account-menu > summary:hover .avatar-seat-back {
        animation: avatar-seat-tilt 700ms ease-in-out;
        transform-origin: 12px 12.5px;
    }

    .account-menu > summary:hover .avatar-seat-plus {
        animation: avatar-plus-pop 700ms ease-in-out;
        transform-origin: 12px 8px;
    }

    .account-menu > summary:hover .avatar-head {
        animation: avatar-nod 600ms ease-in-out;
        transform-origin: 12px 12px;
    }

    .account-menu-identity {
        margin: 0;
        padding-block-end: var(--space-2);
        border-block-end: 1px solid var(--border-default);
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .notification-bell-icon {
        display: inline-block;
        transform-origin: 50% 0;
        transition: transform var(--motion-fast) ease;
    }

    .notification-bell:hover .notification-bell-icon,
    .notification-bell:focus-visible .notification-bell-icon {
        animation: bell-swing 900ms ease-in-out;
    }

    /* Olvasatlannal a csengo egyszer meglendul betoltéskor is - a szamlalo mellett ez a jel. */
    .notification-bell:has(.notification-bell-badge) .notification-bell-icon {
        animation: bell-swing 900ms ease-in-out 600ms 1;
    }

    @keyframes bell-swing {
        0%, 100% { transform: rotate(0); }
        15% { transform: rotate(18deg); }
        35% { transform: rotate(-14deg); }
        55% { transform: rotate(9deg); }
        75% { transform: rotate(-5deg); }
    }

    @keyframes avatar-seat-tilt {
        0%, 100% { transform: rotate(0); }
        30% { transform: rotate(-10deg); }
        65% { transform: rotate(6deg); }
    }

    @keyframes avatar-plus-pop {
        0%, 100% { transform: scale(1); opacity: 1; }
        40% { transform: scale(1.45) rotate(90deg); opacity: 0.7; }
    }

    @keyframes avatar-nod {
        0%, 100% { transform: translateY(0); }
        35% { transform: translateY(1.2px) rotate(-6deg); }
        70% { transform: translateY(-0.6px) rotate(4deg); }
    }

    @media (prefers-reduced-motion: reduce) {
        .account-menu > summary:hover .account-avatar,
        .account-menu > summary:hover .avatar-seat-back,
        .account-menu > summary:hover .avatar-seat-plus,
        .account-menu > summary:hover .avatar-head,
        .notification-bell .notification-bell-icon {
            animation: none;
            transform: none;
        }
    }
}

/*
   Mobil 7. kor (Ruben, 2026-09-21): also ful-sav a bejelentkezett appban - CSAK kis
   kepernyon; 768px felett a felso menu marad, a sav rejtve. A lap alja helyet kap,
   hogy a lablec es a ragados CTA (.sticky-cta) ne kerüljön a sav ala. Csak
   szemantikus tokenek (DS-BRAND-002).
*/
@layer layout {
    :root {
        --tab-bar-height: 0px;
    }

    .tab-bar {
        display: none;
    }

    @media (max-width: 767px) {
        :root:has(.tab-bar) {
            --tab-bar-height: calc(3.75rem + env(safe-area-inset-bottom, 0px));
            /*
              Ruben #79 (iPhone): a sav MAGASSAGA nem eleg helyfoglalasnak - a kozepso "+" gomb
              1.5rem-mel a sav fole nyulik, es pont kozepen all, ahol a lablec utolso sora is. A
              clearance ezt es egy kis rahagyast is tartalmaz; a gorgetes (fokusz, horgony) is
              ennyivel a sav fole all meg.
            */
            --tab-bar-clearance: calc(var(--tab-bar-height) + 1.5rem + var(--space-4));
            scroll-padding-block-end: var(--tab-bar-clearance);
        }

        /*
          MOZGAS-MODELL (Ruben #68): a sav a lap SZINEBEN all, attetszoen, egy
          vekony felso vonallal - nem emelt kartya arnyekkal. A modellben a
          fejlec es a sav a tartalom "kerete", nem kulon lebego elemek.
        */
        .tab-bar {
            position: fixed;
            inset-inline: 0;
            inset-block-end: 0;
            z-index: 30;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            block-size: var(--tab-bar-height);
            padding-block-end: env(safe-area-inset-bottom, 0px);
            background: color-mix(in srgb, var(--surface-default) 92%, transparent);
            backdrop-filter: blur(12px);
            border-block-start: 1px solid var(--border-default);
        }

        .tab-bar-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.75rem;
            font-weight: 600;
            min-block-size: var(--touch-target-min);
        }

        .tab-bar-item[aria-current="page"] {
            color: var(--brand-primary);
        }

        /*
          Az aktiv ful jelzese a sav TETEJEN futo vonal (a modellben is). Igy a
          kivalasztas nem csak szin (WCAG 1.4.1) - es a kiemelt kozepso gomb
          nem kap vonalat, mert az a sajat alakjaval jelez.
        */
        .tab-bar-item[aria-current="page"]:not(.tab-bar-item-cta)::after {
            content: "";
            position: absolute;
            inset-block-start: 0;
            inline-size: 28px;
            block-size: 2px;
            border-radius: 2px;
            background: var(--brand-primary);
        }

        .tab-bar-icon {
            display: inline-flex;
            inline-size: 1.5rem;
            block-size: 1.5rem;
        }

        .tab-bar-icon svg {
            inline-size: 100%;
            block-size: 100%;
        }

        /*
          A kiemelt kozepso gomb (szalon: +Seat), a sav fole emelve. A MODELL
          SZERINT a CTA szinet kapja (--action-cta-background: Grafiton kek,
          Rezen feher, Mohan arany), nem a markaszint - ugyanaz a hivoszin,
          mint a fejlec "+Seat" gombjae (Dani 2026-09-14: "kek, feltuno").
          Lekerekitett negyzet, nem kor: a tema sugarat koveti, a Rez tehat
          szogletesebb.
        */
        .tab-bar-item-cta .tab-bar-icon {
            inline-size: 3.25rem;
            block-size: 3.25rem;
            padding: 0.8rem;
            margin-block-start: -1.5rem;
            border-radius: calc(var(--radius-md) + 4px);
            background: var(--action-cta-background);
            color: var(--action-cta-text);
            box-shadow: 0 8px 24px color-mix(in srgb, var(--action-cta-background) 35%, transparent);
        }

        :root:has(.tab-bar) .site-footer {
            padding-block-end: calc(var(--space-6) + var(--tab-bar-clearance));
        }
    }
}

/*
   Mobil 8. kor (Ruben, 2026-09-22, "Ami kozos minden kepernyon" - tomor felso sav):
   a bejelentkezett app-nezetekben a fejlec 92px-rol ~56px-re fogy kis kepernyon - a
   szomarka kisebb, a savok szukebbek.

   2026-09-22-en meg igy szolt: "marad a harang, a fiok-menu es a menugomb is: az
   also ful-sav csak harom utat visz, a tobbi (Szalonjaim, Kedvenceim, Foglalasok,
   Szakmai profilom) a menuben el - elrejtve elerhetetlenne valna."

   2026-09-26 (mozgas-modell, Ruben #68): A FELTETEL TELJESULT, a dontes megfordult.
   A Profilom lap menuje (_ProfileMenu) most viszi ezeket - a Foglalasokat, a
   Szalonjaimat, a Kedvenceimet, a szerepvaltot, az Admint -, a lap aljan pedig a
   kijelentkezes all. Igy telefonon a fejlec a modell szerint tomor: vissza-gomb,
   jel, harang. Lent a szabaly (body:has(.tab-bar)): csak ahol a ful-sav tenyleg
   ott van, mert a Profil fulon at vezet az ut a menuhoz.

   Amit NEM vettunk at a javaslatbol: a lap CIME a savba. A cim ma a tartalomban all
   (h1, mellette a lap sajat gombjaival); a savba emelve 375px-en ketszer latszana.
   Ha a cim a savba kerul, a h1-nek onnan el kell tunnie - az Ruben kore.
*/
@layer layout {
    @media (max-width: 767px) {
        .site-header {
            padding-block: var(--space-2);
        }

        /* A fejlec sorat a .layout fuggoleges paddingja tette 92px-re - a fejlecnek sajat sav-paddingja van. */
        .site-header > .layout {
            padding-block: 0;
        }

        .site-header .site-name-wordmark svg {
            block-size: 1.75em;
        }

        /* A fiok-gomb es a harang szukebb erintofelulettel is a 44px minimum folott marad. */
        .js .auth-header {
            gap: var(--space-1);
        }

        .account-menu > summary {
            padding-inline: var(--space-2);
        }

        /*
          A modell telefonos fejlece: vissza, jel, harang. A menugomb, a fiok-menu
          es a szerepvalto a Profil fulre koltozott (lasd fent) - de CSAK ott tunik
          el, ahol a ful-sav is ott van: kijelentkezve, vagy szerep nelkul (admin)
          a Profil ful nincs, tehat a fejlec-menu az egyetlen ut, es marad.
        */
        body:has(.tab-bar) .site-header :is(.nav-toggle, .site-nav, .account-menu, .app-switch) {
            display: none;
        }
    }
}

/*
  A PROFILOM MENUJE (mozgas-modell, a modell .menu / .mi sora). Egyetlen kartya,
  sorokkal: ikon-csempe a marka arnyalataban, cim + egy sor magyarazat, nyil.
*/
@layer components {
    .menu-list {
        display: flex;
        flex-direction: column;
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    /* Ha az adott szerepben nincs mit mutatni, ne alljon ott egy ures keret. */
    .menu-list:not(:has(.menu-item)) {
        display: none;
    }

    .menu-list > * + * {
        border-block-start: 1px solid var(--border-default);
    }

    .menu-item-form {
        margin: 0;
    }

    .menu-item {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: var(--space-3);
        align-items: center;
        inline-size: 100%;
        min-block-size: var(--touch-target-min);
        padding: var(--space-3) var(--space-4);
        border: 0;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        text-align: start;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--duration-fast);
    }

    .menu-item:hover,
    .menu-item:focus-visible {
        background: var(--surface-subtle);
    }

    .menu-item-icon {
        display: grid;
        place-items: center;
        inline-size: 36px;
        block-size: 36px;
        border-radius: var(--radius-sm);
        background: var(--brand-dim);
        color: var(--brand-primary);
    }

    .menu-item-icon svg {
        inline-size: 18px;
        block-size: 18px;
    }

    .menu-item-label b {
        display: block;
        font-weight: 600;
    }

    .menu-item-label span {
        display: block;
        color: var(--text-muted);
        font-size: var(--font-size-body-small);
    }

    .menu-item-chevron {
        color: var(--text-muted);
        font-size: 1.25rem;
    }

    .profile-signout {
        display: flex;
        justify-content: center;
        margin-block-start: var(--space-6);
    }

    /* Mozgas-modell (7. fazis): a menu-listak cime (a modell ".section"-je) - halk, nagybetus. */
    .menu-heading {
        margin: var(--space-2) 0 calc(-1 * var(--space-2));
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .menu-heading .text-secondary {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
    }

    /* A veszelyes sor (fiok torlese): az ikon es a cim a veszely szinen. */
    .menu-item[data-danger] .menu-item-icon {
        background: color-mix(in srgb, var(--status-danger) 12%, transparent);
        color: var(--status-danger);
    }

    .menu-item[data-danger] .menu-item-label b {
        color: var(--status-danger);
    }

    .menu-item > .status-badge {
        justify-self: end;
    }

    /* A portfolio racsa a Profilomon - negyzetes, nagyithato kepek. */
    .profile-portfolio {
        display: grid;
        gap: var(--space-3);
    }

    .profile-portfolio-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        overflow: hidden;
        border-radius: var(--radius-md);
    }

    .profile-portfolio-grid img {
        display: block;
        inline-size: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    /* Teljesseg-GYURU (a modell "ring"-je): kupos szinatmenet, kozepen a szazalek. */
    .completeness-head {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .completeness-head p {
        display: grid;
        gap: 2px;
    }

    .completeness-head .completeness-missing {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }

    .completeness-ring {
        --p: 0;
        position: relative;
        display: grid;
        place-items: center;
        flex: none;
        inline-size: 60px;
        block-size: 60px;
        border-radius: 50%;
        background: conic-gradient(var(--brand-primary) calc(var(--p) * 1%), var(--border-default) 0);
    }

    .completeness-ring::before {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        background: var(--surface-elevated);
    }

    .completeness-ring b {
        position: relative;
        font-size: 0.875rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
}