/* Fit and Delicious — admin shared design system.
   Uses tokens from tokens.css. Do NOT introduce new color/typography values here.

   Phase 1 (quick wins) szabályok:
   - Admin felületen utility tipó: Inter-szerű sans, nincs Playfair display.
   - Egységes fókuszgyűrű: primary-strong outline + halvány green-100 box-shadow.
   - Tap target min 40px mobile-ön.
   - Vertikális ritmus a token spacing-skálából (space-3 / 4 / 5 / 6 / 7).
*/

/* ---------- Admin typography reset ----------
   A site.css globális h1–h4 szabályai Playfair-t adnak — admin oldalakon
   utility (Inter-szerű sans) megjelenést akarunk. */
.fd-admin-shell h1,
.fd-admin-shell h2,
.fd-admin-shell h3,
.fd-admin-shell h4,
.fd-admin-page h1,
.fd-admin-page h2,
.fd-admin-page h3,
.fd-admin-page h4 {
    font-family: var(--fd-font-sans);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: -0.005em;
}

/* ---------- Global admin focus ring ----------
   A publikus oldalon narancs (accent) gyűrű van, admin felületen
   csendesebb, márka-zöld gyűrűt használunk. */
.fd-admin-shell :focus-visible,
.fd-admin-page :focus-visible {
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 2px;
}

/* ---------- Page layout ----------
   slice adm35: the content fills the main scroll area (which is `flex:1 1 auto` and
   widens automatically when the sidebar collapses) so the content reflows with the
   sidebar state. A generous max-width keeps wide screens from looking sparse; the
   gutter comes from `.fd-admin-shell__main`'s horizontal padding. (Earlier this was a
   hard 1180px centered cap → ~234px of dead cream on both sides at 1920, and the
   sidebar collapse freed width the content never used. See ux-designer diagnosis.) */
.fd-admin-page {
    width: 100%;
    max-width: 1760px;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: var(--fd-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-5);
}

/* The content breathes into the freed space when the sidebar collapses. */
@media (prefers-reduced-motion: no-preference) {
    .fd-admin-page {
        transition: max-width var(--fd-transition-base);
    }
}

@media (min-width: 768px) {
    .fd-admin-page {
        padding-block: var(--fd-space-7);
        gap: var(--fd-space-6);
    }
}

.fd-admin-page__header {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--fd-space-3);
    column-gap: var(--fd-space-5);
    align-items: start;
}

@media (min-width: 768px) {
    .fd-admin-page__header {
        grid-template-columns: 1fr auto;
        row-gap: var(--fd-space-4);
    }
}

.fd-admin-page__title-block {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
    min-width: 0;
}

.fd-admin-page__breadcrumb {
    margin: 0 0 var(--fd-space-1);
}

.fd-admin-page__eyebrow {
    margin: 0 0 var(--fd-space-2);
    font-size: var(--fd-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fd-color-text-muted);
    font-weight: var(--fd-weight-medium);
}

.fd-admin-page__title {
    margin: 0;
    font-family: var(--fd-font-display);
    font-size: var(--fd-text-2xl);
    line-height: var(--fd-leading-tight);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--fd-color-text);
}

@media (min-width: 768px) {
    .fd-admin-page__title {
        font-size: var(--fd-text-3xl);
    }
}

.fd-admin-page__meta {
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
    line-height: var(--fd-leading-normal);
}

/* slice adm37: collapse wrapper around the description. At rest it's a passive layout
   pass-through; on desktop the slim-on-scroll animation drives its max-height/opacity to 0
   so the subtitle fades and collapses away while the bar condenses. Keeping the wrapper
   separate from the <p> means the <p>'s content/markup stays stable for tests. */
.fd-admin-page__description-wrap {
    overflow: hidden;
}

.fd-admin-page__description {
    margin: 0;
    font-size: var(--fd-text-base);
    color: var(--fd-color-text-muted);
    max-width: 60ch;
    line-height: var(--fd-leading-normal);
}

.fd-admin-page__aside {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
    align-items: flex-start;
    min-width: 0;
}

@media (min-width: 768px) {
    .fd-admin-page__aside {
        align-items: flex-end;
    }
}

.fd-admin-page__summary {
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
    font-weight: var(--fd-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fd-admin-page__actions {
    display: flex;
    gap: var(--fd-space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Breadcrumb ---------- */
.fd-admin-breadcrumb {
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
    line-height: var(--fd-leading-snug);
}

.fd-admin-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fd-space-1);
}

.fd-admin-breadcrumb__item {
    display: inline-flex;
    align-items: center;
}

.fd-admin-breadcrumb__item + .fd-admin-breadcrumb__item::before {
    content: "/";
    margin-inline: var(--fd-space-2);
    color: var(--fd-color-ink-300);
}

.fd-admin-breadcrumb__link {
    color: var(--fd-color-text-muted);
    text-decoration: none;
    transition: color var(--fd-transition-fast);
}

.fd-admin-breadcrumb__link:hover,
.fd-admin-breadcrumb__link:focus-visible {
    color: var(--fd-color-primary-strong);
    text-decoration: underline;
}

.fd-admin-breadcrumb__current {
    color: var(--fd-color-text);
    font-weight: var(--fd-weight-medium);
}

/* ---------- Panel (card) ---------- */
.fd-admin-panel {
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-sm);
    padding: var(--fd-space-5);
}

@media (min-width: 768px) {
    .fd-admin-panel {
        padding: var(--fd-space-6);
    }
}

.fd-admin-panel + .fd-admin-panel {
    margin-top: 0;
}

/* Flush panel: table bleeds to all edges, clipped to panel border-radius */
.fd-admin-panel--flush {
    padding: 0;
    overflow: clip;
}

/* ---------- Shared table-card header (slice adm41) ----------
   Promoted from the dashboard's recent-recipes card (was .fd-admin-dashboard__card-header,
   page-scoped) so a flush panel can pair a title strip with a light-head table consistently
   across pages (dashboard recipes, bookings results). A flush `.fd-admin-panel--flush` wraps
   a `.fd-admin-table-card__header` strip (title + optional link / tools, hairline divider)
   above a `.fd-admin-table.fd-admin-table--light-head`. The dashboard now consumes these
   shared classes (its rendered look is unchanged); the bookings page adds a `__tools` slot
   that carries the search input + result count. */
.fd-admin-table-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fd-space-3);
    padding: var(--fd-space-4) var(--fd-space-5);
    border-bottom: 1px solid var(--fd-color-border);
}

.fd-admin-table-card__title {
    margin: 0;
}

.fd-admin-table-card__link {
    flex: 0 0 auto;
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-primary-strong);
    text-decoration: none;
    transition: color var(--fd-transition-fast);
}

.fd-admin-table-card__link:hover,
.fd-admin-table-card__link:focus-visible {
    color: var(--fd-color-primary);
    text-decoration: underline;
}

.fd-admin-table-card__empty-hint {
    padding: var(--fd-space-4) var(--fd-space-5);
}

/* Tools slot in the header strip: a search field + result count, aligned to the title.
   On narrow screens it wraps under the title into its own row (header switches to column). */
.fd-admin-table-card__tools {
    display: flex;
    align-items: center;
    gap: var(--fd-space-3);
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

/* Compact search input that lives INSIDE the card header strip — no stacked label
   (placeholder + aria-label carry the accessible name). Capped so it reads as a search
   affordance beside the title, not a full-width form field. Scoped under .fd-admin-page so
   it outranks the generic `:is(.fd-admin-page,…) .fd-input:not(--textarea){max-width:36rem}`
   measure-cap (equal class count would otherwise lose on source order). */
.fd-admin-page .fd-admin-table-card__search.fd-input:not(.fd-input--textarea) {
    flex: 1 1 16rem;
    max-width: 22rem;
    min-height: 40px;
}

/* Active filter: subtle primary border once the search has content. */
.fd-admin-table-card__search.fd-input[type="search"]:not(:placeholder-shown) {
    border-color: var(--fd-color-primary);
}

/* Reuse the existing result-count pill, but neutralise its toolbar-specific self-alignment
   so it sits centred beside the search inside the tools slot. */
.fd-admin-table-card__tools .fd-admin-toolbar__result-count {
    align-self: center;
}

/* ---------- Sortable column header buttons (shared) ----------
   Promoted verbatim from LeadAdminPage.razor.css (was scoped → unreachable from
   other admin pages). Both the Leads and Bookings tables render clickable <th>
   sort triggers via these classes. Reset to a borderless inline trigger that
   inherits the editorial thead label styling. */
.fd-admin-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--fd-space-1);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.fd-admin-sort:hover {
    color: var(--fd-color-text);
}

/* Touch hit-area: on coarse pointers grow the sort trigger's tappable box toward ~44px tall via
   vertical padding (the glyph/label stay the same size). Negative margin keeps the visual thead
   rhythm unchanged, so desktop density is untouched while the tap target is comfortable on phones. */
@media (pointer: coarse) {
    .fd-admin-sort {
        min-height: 44px;
        padding-block: var(--fd-space-2);
        margin-block: calc(var(--fd-space-2) * -1);
    }
}

.fd-admin-sort__indicator {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--fd-color-primary);
}

/* When a filter-empty state sits INSIDE a flush table-card (below the header strip), drop its
   standalone card chrome (border / radius) so it reads as the card's body, not a nested box.
   The dashed treatment is kept as an inset top rule for the "no results" cue. Higher specificity
   than the base `.fd-admin-page .fd-admin-state--filter-empty[role="status"]` rule so it wins. */
.fd-admin-page .fd-admin-panel--flush .fd-admin-state--filter-empty[role="status"] {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    min-height: 8rem;
}

@media (max-width: 639px) {
    .fd-admin-table-card__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--fd-space-3);
    }
    .fd-admin-table-card__tools {
        justify-content: space-between;
    }
    .fd-admin-page .fd-admin-table-card__search.fd-input:not(.fd-input--textarea) {
        max-width: none;
    }
}

/* Toolbar panel variant: lighter visual weight for filter bars */
.fd-admin-panel--toolbar {
    padding: var(--fd-space-3) var(--fd-space-4);
    background: var(--fd-color-cream-50);
    border-radius: var(--fd-radius-md);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}

/* Fuse toolbar visually with the immediately following results panel */
.fd-admin-panel--toolbar + .fd-admin-panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
    margin-top: 0;
}

.fd-admin-panel--toolbar .fd-field {
    margin: 0;
}

@media (min-width: 768px) {
    .fd-admin-panel--toolbar {
        display: flex;
        align-items: flex-end;
        gap: var(--fd-space-4);
        padding: var(--fd-space-3) var(--fd-space-5);
    }
    .fd-admin-panel--toolbar .fd-field {
        flex: 1 1 320px;
        max-width: 480px;
    }
}

.fd-admin-panel__title {
    margin: 0 0 var(--fd-space-3);
    font-family: var(--fd-font-sans);
    font-size: var(--fd-text-lg);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: -0.005em;
    color: var(--fd-color-text);
}

@media (min-width: 768px) {
    .fd-admin-panel__title {
        font-size: var(--fd-text-xl);
        margin-bottom: var(--fd-space-4);
    }
}

/* ---------- Two-panel grid (e.g. recipe edit) ---------- */
.fd-admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-5);
}

@media (min-width: 960px) {
    .fd-admin-grid {
        grid-template-columns: 2fr 1fr;
        gap: var(--fd-space-6);
    }
}

/* ---------- Tables ---------- */
.fd-admin-table-wrap {
    overflow-x: auto;
    width: 100%;
    border-radius: var(--fd-radius-md);
    -webkit-overflow-scrolling: touch;
}

.fd-admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fd-text-sm);
}

.fd-admin-table thead th {
    text-align: left;
    font-size: var(--fd-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fd-color-text-muted);
    font-weight: var(--fd-weight-semibold);
    padding: var(--fd-space-3) var(--fd-space-4);
    border-bottom: 2px solid var(--fd-color-border);
    background-color: var(--fd-color-cream-100);
    white-space: nowrap;
}

.fd-admin-table tbody td {
    padding: var(--fd-space-3) var(--fd-space-4);
    border-bottom: 1px solid var(--fd-color-border);
    vertical-align: middle;
    line-height: var(--fd-leading-snug);
}

@media (min-width: 768px) {
    .fd-admin-table thead th {
        padding: var(--fd-space-4);
    }
    .fd-admin-table tbody td {
        padding: var(--fd-space-4);
    }
}

.fd-admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.fd-admin-table tbody tr {
    transition: background-color var(--fd-transition-fast);
}

.fd-admin-table tbody tr:hover {
    background-color: var(--fd-color-cream-50);
}

/* Light table head — drop the cream thead band so a table reads as the single
   content under a card/panel title (otherwise the cream band competes with the
   title as a second stacked header). Apply on tables that sit directly under an
   in-card .fd-admin-panel__title (dashboard recent-recipes, recipe-detail
   ingredients). Standalone list-table pages keep the default cream thead. */
.fd-admin-table--light-head thead th {
    background-color: transparent;
    border-bottom: 1px solid var(--fd-color-border);
}

/* ---------- States ----------
   Scoped under .fd-admin-page so generic class names do not leak to non-admin pages. */
.fd-admin-page .fd-admin-state {
    text-align: center;
    padding: var(--fd-space-6);
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-md);
}

.fd-admin-page .fd-admin-state--error {
    color: var(--fd-color-accent-strong);
    border-color: var(--fd-color-orange-100);
    border-left-color: var(--fd-color-accent-strong);
    border-left-width: 4px;
    background-color: var(--fd-color-error-bg);
}

/* ---------- Modal (shared) ----------
   Structural modal styles promoted from Categories.razor.css so any admin page can reuse the
   .fd-admin-modal skeleton (backdrop + __panel + __header/__body/__footer). The form/button/input
   rules below already opt the modal into the brand styling via the :is(.fd-admin-page, .fd-admin-modal)
   scope; these rules give the chrome around them. */
.fd-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fd-space-4);
}

.fd-admin-modal__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(31, 42, 36, 0.45);
    animation: fd-modal-backdrop-in var(--fd-transition-base) ease-out both;
}

@keyframes fd-modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fd-admin-modal__panel {
    position: relative;
    z-index: 1;
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-lg);
    width: 100%;
    max-width: 36rem;
    max-height: calc(100dvh - var(--fd-space-8));
    display: flex;
    flex-direction: column;
    animation: fd-modal-panel-in var(--fd-transition-base) ease-out both;
}

@keyframes fd-modal-panel-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.fd-admin-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fd-space-3);
    padding: var(--fd-space-4) var(--fd-space-5);
    border-bottom: 1px solid var(--fd-color-border);
    flex: 0 0 auto;
}

.fd-admin-modal__title {
    font-size: var(--fd-text-base);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-text);
    margin: 0;
}

.fd-admin-modal__close {
    appearance: none;
    background: none;
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-sm);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fd-color-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: var(--fd-text-lg);
    line-height: 1;
    transition: background-color var(--fd-transition-fast),
                color var(--fd-transition-fast);
}

.fd-admin-modal__close:hover {
    background-color: var(--fd-color-cream-100);
    color: var(--fd-color-text);
}

.fd-admin-modal__close:focus-visible {
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 2px;
    box-shadow: var(--fd-input-focus-shadow);
}

.fd-admin-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--fd-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
}

.fd-admin-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fd-space-3);
    padding: var(--fd-space-4) var(--fd-space-5);
    border-top: 1px solid var(--fd-color-border);
    flex: 0 0 auto;
}

.fd-admin-modal--sm .fd-admin-modal__panel {
    max-width: 24rem;
}

@media (prefers-reduced-motion: reduce) {
    .fd-admin-modal__backdrop,
    .fd-admin-modal__panel {
        animation: none;
    }
}

/* ---------- Detail list (shared key/value layout) ----------
   A readable, brand-styled description list for read-only detail panels (e.g. the bookings
   detail modal). Two-column (label | value) on wider widths, stacked on narrow, with hairline
   row separators. Named generically so it can later replace the RecipeDetail metadata block.
   Use as: <dl class="fd-admin-detail-list"><div class="fd-admin-detail-list__row"><dt>…</dt><dd>…</dd></div>…</dl> */
.fd-admin-detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    /* Stack based on the list's OWN width (it lives inside a max-36rem modal panel), not the
       viewport — so the key/value rows collapse to a stack on narrow screens / narrow panels. */
    container-type: inline-size;
}

.fd-admin-detail-list__row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--fd-space-3) var(--fd-space-5);
    padding: var(--fd-space-3) 0;
    border-bottom: 1px solid var(--fd-color-border);
}

.fd-admin-detail-list__row:first-child {
    padding-top: 0;
}

.fd-admin-detail-list__row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.fd-admin-detail-list dt {
    margin: 0;
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fd-color-text-muted);
    line-height: 1.4;
    padding-top: 0.1em;
}

.fd-admin-detail-list dd {
    margin: 0;
    font-size: var(--fd-text-sm);
    color: var(--fd-color-text);
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.fd-admin-detail-list dd a {
    color: var(--fd-color-primary-strong);
}

@container (max-width: 30rem) {
    .fd-admin-detail-list__row {
        grid-template-columns: 1fr;
        gap: var(--fd-space-1) 0;
    }
}

/* ---------- Recipe detail · Metadata grid (page-scoped) ----------
   The admin recipe-detail "Metaadatok" panel reuses the shared `.fd-admin-detail-list`
   dt/dd visual treatment, but lays the rows out as a DENSE 2-up definition grid to fill the
   wide panel (the shared list's plain vertical flex would be very tall for ~10 fields).
   Only the `.fd-admin-recipe-detail__meta` variant is affected — the Bookings/Leads detail
   modals use bare `.fd-admin-detail-list` and stay a single stacked column, unchanged. */
.fd-admin-recipe-detail__meta {
    /* Override the shared list's vertical flex with a responsive 2-up grid. Drop the shared
       container-type so the @container row-stacking query below does NOT fire on these rows;
       the panel-width media query drives the 1-up <-> 2-up switch instead. */
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--fd-space-6);
    row-gap: 0;
    container-type: normal;
}

/* Each field keeps the shared label|value row grid, but we manage hairlines ourselves so the
   two columns read as a clean grid (the shared :first/:last rules assume a single column). */
.fd-admin-recipe-detail__meta .fd-admin-detail-list__row {
    border-bottom: 1px solid var(--fd-color-border);
    padding: var(--fd-space-3) 0;
}

/* Let the value column shrink below its content's intrinsic width so the truncating Image URL
   link can ellipsis instead of forcing the row (and the panel) wider. */
.fd-admin-recipe-detail__meta .fd-admin-detail-list__row dd {
    min-width: 0;
}

/* Image URL + Címkék always span the full panel width. */
.fd-admin-recipe-detail__meta .fd-admin-recipe-detail__meta-row--wide {
    grid-column: 1 / -1;
}

/* The very last row (Címkék) needs no trailing hairline. */
.fd-admin-recipe-detail__meta .fd-admin-detail-list__row:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .fd-admin-recipe-detail__meta {
        grid-template-columns: 1fr 1fr;
    }
}

/* Image URL: render as a link but never let it push the panel wide. Single-line truncation
   with the full URL exposed via title/aria-label. min-width:0 lets it shrink inside the grid. */
.fd-admin-recipe-detail__image-url {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fd-color-primary-strong);
}

/* Tag chips: brand pill treatment (mirrors the toolbar result-count pill). */
.fd-admin-recipe-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-admin-recipe-detail__tag {
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-medium);
    color: var(--fd-color-text-muted);
    padding: var(--fd-space-1) var(--fd-space-3);
    background-color: var(--fd-color-cream-100);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-pill);
    line-height: 1.5;
}

/* ---------- Recipe detail · redesigned layout (mock) ----------
   Generous vertical rhythm between the stacked sections (hero → 2-col body → details),
   a cover-image hero with a key-facts strip, and a classic main/aside recipe split. */
.fd-admin-recipe-detail__body {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-6);
}

@media (min-width: 1024px) {
    .fd-admin-recipe-detail__body {
        gap: var(--fd-space-7);
    }
}

/* Hero: cover image + title/lede/facts. Stacks on narrow, 2-up on wide. */
.fd-admin-recipe-detail__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-5);
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-sm);
    overflow: clip;
}

@media (min-width: 768px) {
    .fd-admin-recipe-detail__hero {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
        gap: 0;
        align-items: stretch;
    }
}

/* EDIT állapot: a hero a teljes szélességet egyetlen oszlopként használja, így az
   inline szerkesztő-űrlap NEM szorul be a read-mode 4fr médiacellájába. A belső
   kétoszlopos elrendezést a __hero-edit-grid adja. */
.fd-admin-recipe-detail__hero--editing {
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 768px) {
    .fd-admin-recipe-detail__hero--editing {
        grid-template-columns: 1fr;
    }
}

.fd-admin-recipe-detail__edit-form--hero {
    padding: var(--fd-space-5);
}

@media (min-width: 768px) {
    .fd-admin-recipe-detail__edit-form--hero {
        padding: var(--fd-space-6);
    }
}

/* A hero szerkesztő belső kétoszlopos rácsa: bal = metaadat-mezők, jobb = kép +
   fókuszpont-választó. Keskenyen egy oszlopba tördel. A fej (__edit-head) és a
   gomb-sor az űrlap közvetlen gyerekei, így mindig teljes szélesek maradnak. */
.fd-admin-recipe-detail__hero-edit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-5);
    align-items: start;
}

@media (min-width: 960px) {
    .fd-admin-recipe-detail__hero-edit-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--fd-space-6);
    }
}

.fd-admin-recipe-detail__hero-edit-fields {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-admin-recipe-detail__hero-edit-media {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
    min-width: 0;
}

/* Üres médiaoszlop, ha még nincs kép — ne hagyjon csúnya lyukat a rácsban. */
.fd-admin-recipe-detail__hero-edit-noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: var(--fd-space-5);
    text-align: center;
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
    background-color: var(--fd-color-cream-100);
    border: 1px dashed var(--fd-color-border);
    border-radius: var(--fd-radius-lg);
}

.fd-admin-recipe-detail__hero-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fd-space-4);
    padding: var(--fd-space-5);
    background-color: var(--fd-color-cream-100);
}

@media (min-width: 768px) {
    .fd-admin-recipe-detail__hero-media {
        justify-content: center;
    }
}

/* Borítókép-előnézet: a publikus megjelenést tükrözi (alap = recept-oldal hero 4/5). */
.fd-admin-recipe-detail__preview {
    margin: 0;
    width: 100%;
    max-width: 22rem;
}

.fd-admin-recipe-detail__preview-wrap {
    overflow: hidden;
    border-radius: var(--fd-radius-lg);
    border: 1px solid var(--fd-color-border);
    background-color: var(--fd-color-surface);
    /* A teljes (vágatlan) nézet ne nyúljon túl magasra széles képeknél sem. */
    max-height: 70vh;
    margin-inline: auto;
}

.fd-admin-recipe-detail__preview-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Részletező = publikus recept-oldal hero: 4/5, cover. (Alap.) */
.fd-admin-recipe-detail__preview--detail .fd-admin-recipe-detail__preview-wrap {
    aspect-ratio: 4 / 5;
}

.fd-admin-recipe-detail__preview--detail .fd-admin-recipe-detail__preview-img {
    object-fit: cover;
}

/* Lista-kártya = publikus RecipeCard média: 4/3, cover. */
.fd-admin-recipe-detail__preview--card .fd-admin-recipe-detail__preview-wrap {
    aspect-ratio: 4 / 3;
}

.fd-admin-recipe-detail__preview--card .fd-admin-recipe-detail__preview-img {
    object-fit: cover;
}

/* Teljes kép = vágatlan forrás: a természetes arány, contain. */
.fd-admin-recipe-detail__preview--full .fd-admin-recipe-detail__preview-wrap {
    aspect-ratio: auto;
    background-color: var(--fd-color-cream-50);
}

.fd-admin-recipe-detail__preview--full .fd-admin-recipe-detail__preview-img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

.fd-admin-recipe-detail__preview-caption {
    margin-top: var(--fd-space-2);
    text-align: center;
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
    line-height: 1.45;
}

/* Méret-választó szegmentált vezérlő — token-alapú, on-brand. */
.fd-admin-recipe-detail__sizepreview {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fd-space-1);
    padding: var(--fd-space-1);
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-pill);
}

.fd-admin-recipe-detail__sizepreview-btn {
    appearance: none;
    cursor: pointer;
    padding: var(--fd-space-2) var(--fd-space-4);
    border: none;
    border-radius: var(--fd-radius-pill);
    background-color: transparent;
    color: var(--fd-color-text-muted);
    font: inherit;
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-semibold);
    line-height: 1;
    transition: background-color 120ms ease, color 120ms ease;
}

.fd-admin-recipe-detail__sizepreview-btn:hover {
    color: var(--fd-color-text);
    background-color: var(--fd-color-cream-100);
}

.fd-admin-recipe-detail__sizepreview-btn:focus-visible {
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 2px;
}

.fd-admin-recipe-detail__sizepreview-btn.is-active {
    color: var(--fd-color-surface);
    background-color: var(--fd-color-primary-strong);
}

.fd-admin-recipe-detail__sizepreview-btn.is-active:hover {
    color: var(--fd-color-surface);
    background-color: var(--fd-color-primary-strong);
}

/* Felső szintű HU/EN szerkesztési-nyelv kapcsoló a recept-szerkesztőben. */
.fd-admin-recipe-detail__lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fd-space-2) var(--fd-space-3);
    margin-bottom: var(--fd-space-4);
    padding: var(--fd-space-3) var(--fd-space-4);
    background-color: var(--fd-color-cream-100);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-md);
}

.fd-admin-recipe-detail__lang-label {
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-text-muted);
}

.fd-admin-recipe-detail__lang-tabs {
    display: inline-flex;
    gap: var(--fd-space-1);
    padding: var(--fd-space-1);
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-pill);
}

.fd-admin-recipe-detail__lang-tab {
    appearance: none;
    cursor: pointer;
    padding: var(--fd-space-2) var(--fd-space-4);
    border: none;
    border-radius: var(--fd-radius-pill);
    background-color: transparent;
    color: var(--fd-color-text-muted);
    font: inherit;
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-semibold);
    line-height: 1;
    transition: background-color 120ms ease, color 120ms ease;
}

.fd-admin-recipe-detail__lang-tab:hover {
    color: var(--fd-color-text);
    background-color: var(--fd-color-cream-100);
}

.fd-admin-recipe-detail__lang-tab:focus-visible {
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 2px;
}

.fd-admin-recipe-detail__lang-tab.is-active {
    color: var(--fd-color-surface);
    background-color: var(--fd-color-primary-strong);
}

.fd-admin-recipe-detail__lang-hint {
    flex: 1 1 16rem;
    font-size: var(--fd-text-sm);
    color: var(--fd-color-text-muted);
}

.fd-admin-recipe-detail__hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 4 / 5;
    border-radius: var(--fd-radius-lg);
    border: 1px dashed var(--fd-color-border);
    background-color: var(--fd-color-surface);
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
}

/* ---------- Fókuszpont-választó (admin hero szerkesztés) ---------- */
.fd-admin-recipe-detail__focal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fd-space-3);
}

.fd-admin-recipe-detail__preview--picker {
    max-width: 22rem;
    margin-inline: 0;
}

/* Részletező: a recept-oldal mobil (4:5) + asztali (5:4) crop-ja egymás mellett.
   Szűk médiaoszlopon (és keskeny kijelzőn) tisztán egymás alá törik. */
.fd-admin-recipe-detail__preview-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-4);
    width: 100%;
}

@media (min-width: 520px) {
    .fd-admin-recipe-detail__preview-pair {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* A páros előnézet-tagjai töltsék ki a rács-cellát (a 22rem cap a páros nézetben túl tág). */
.fd-admin-recipe-detail__preview-pair .fd-admin-recipe-detail__preview--picker {
    max-width: none;
    width: 100%;
}

/* Asztali recept-oldal hero: 5/4, cover (a 4/5 mobil párja). */
.fd-admin-recipe-detail__preview--detail-desktop .fd-admin-recipe-detail__preview-wrap {
    aspect-ratio: 5 / 4;
}

.fd-admin-recipe-detail__preview--detail-desktop .fd-admin-recipe-detail__preview-img {
    object-fit: cover;
}

/* Interaktív crop: a borító-vágott kép + a fókusz-jelölő közös koordinátarendszere. */
.fd-admin-recipe-detail__picker {
    position: relative;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.fd-admin-recipe-detail__focal-marker {
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    border-radius: var(--fd-radius-pill);
    border: 2px solid var(--fd-color-surface);
    background-color: color-mix(in srgb, var(--fd-color-primary-strong) 78%, transparent);
    box-shadow: 0 0 0 2px var(--fd-color-primary-strong), 0 2px 8px rgb(0 0 0 / 0.35);
    cursor: grab;
    transition: box-shadow 120ms ease, background-color 120ms ease;
}

.fd-admin-recipe-detail__focal-marker::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 0.35rem;
    height: 0.35rem;
    transform: translate(-50%, -50%);
    border-radius: var(--fd-radius-pill);
    background-color: var(--fd-color-surface);
}

.fd-admin-recipe-detail__focal-marker:active {
    cursor: grabbing;
}

.fd-admin-recipe-detail__focal-marker:focus-visible {
    outline: 2px solid var(--fd-color-surface);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--fd-color-primary-strong), 0 2px 8px rgb(0 0 0 / 0.45);
}

.fd-admin-recipe-detail__focal-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
    width: 100%;
}

.fd-admin-recipe-detail__focal-input {
    flex: 1 1 8rem;
    min-width: 7rem;
}

.fd-admin-recipe-detail__focal-input .fd-input {
    max-width: 8rem;
}

/* Nagyítás (zoom) csúszka — a fókusz-vezérlő része, a publikus crop transform: scale-jét állítja. */
.fd-admin-recipe-detail__zoom {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-2);
    width: 100%;
    margin-top: var(--fd-space-3);
}

.fd-admin-recipe-detail__zoom-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fd-space-2);
}

.fd-admin-recipe-detail__zoom-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--fd-color-text);
}

.fd-admin-recipe-detail__zoom-slider {
    width: 100%;
    accent-color: var(--fd-color-primary-strong);
    cursor: pointer;
}

.fd-admin-recipe-detail__zoom-slider:focus-visible {
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 3px;
    border-radius: var(--fd-radius-pill);
}

.fd-admin-recipe-detail__zoom-reset {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: none;
    color: var(--fd-color-primary-strong);
    font: inherit;
    font-size: 0.85em;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fd-admin-recipe-detail__zoom-reset:hover {
    color: var(--fd-color-text);
}

.fd-admin-recipe-detail__zoom-reset:focus-visible {
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 2px;
    border-radius: var(--fd-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .fd-admin-recipe-detail__focal-marker {
        transition: none;
    }
}

.fd-admin-recipe-detail__hero-body {
    padding: var(--fd-space-5);
}

@media (min-width: 768px) {
    .fd-admin-recipe-detail__hero-body {
        padding: var(--fd-space-6);
    }
}

.fd-admin-recipe-detail__hero-category {
    margin: 0 0 var(--fd-space-2);
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fd-color-primary-strong);
}

.fd-admin-recipe-detail__hero-title {
    margin: 0 0 var(--fd-space-2);
    font-size: var(--fd-text-xl);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--fd-color-text);
}

.fd-admin-recipe-detail__hero-lede {
    margin: 0 0 var(--fd-space-5);
    color: var(--fd-color-text-muted);
    line-height: 1.6;
    max-width: 52ch;
}

/* Key-facts strip: compact label/value cells in a responsive grid. */
.fd-admin-recipe-detail__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fd-space-3) var(--fd-space-5);
    margin: 0;
    padding-top: var(--fd-space-4);
    border-top: 1px solid var(--fd-color-border);
}

@media (min-width: 480px) {
    .fd-admin-recipe-detail__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fd-admin-recipe-detail__fact {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-1);
    margin: 0;
}

.fd-admin-recipe-detail__fact dt {
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fd-color-text-muted);
}

.fd-admin-recipe-detail__fact dd {
    margin: 0;
    font-size: var(--fd-text-base);
    font-weight: var(--fd-weight-medium);
    color: var(--fd-color-text);
}

.fd-admin-recipe-detail__fact--accent dd {
    color: var(--fd-color-primary-strong);
    font-weight: var(--fd-weight-semibold);
}

/* Two-column body: main (descriptions + steps) | aside (ingredients). */
.fd-admin-recipe-detail__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-6);
}

@media (min-width: 1024px) {
    .fd-admin-recipe-detail__layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--fd-space-6);
        align-items: start;
    }
}

.fd-admin-recipe-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-6);
    min-width: 0;
}

.fd-admin-recipe-detail__aside {
    min-width: 0;
}

@media (min-width: 1024px) {
    .fd-admin-recipe-detail__aside {
        position: sticky;
        top: var(--fd-space-5);
    }
}

/* EDIT állapot (Hozzávalók): a kétoszlopos törzs egyetlen oszlopra vált, így az
   alapanyag-szerkesztő a TELJES tartalmi szélességet kapja — ugyanaz a breakout-elv,
   mint a hero __hero--editing modifikátoránál (a DOM helyben marad, csak a rács vált).
   A read-mode aside szűk; szerkesztéskor a per-sor élő/katalógus vezérlők így nem
   szorulnak be egy magas, keskeny oszlopba. Az aside sticky-jét is feloldjuk, mert
   szerkesztéskor a main alá kerül. */
.fd-admin-recipe-detail__layout--ingredients-editing {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .fd-admin-recipe-detail__layout--ingredients-editing {
        grid-template-columns: 1fr;
    }

    .fd-admin-recipe-detail__layout--ingredients-editing .fd-admin-recipe-detail__aside {
        position: static;
        top: auto;
    }
}

/* A visszanyert teljes szélességen a hozzávaló-sorok kényelmesebb rácsot kapnak:
   Név / Mennyiség / Megjegyzés egy levegős soron, a Tápérték-alapanyag / Mennyiség /
   Egység pedig alatta, igazított oszlopokban — a 768px+ médiaponttól, mert csak ekkor
   van valós szélesség (a breakout 1024px-en lép életbe, de tabletes szélességen is
   javít). Kisebb kijelzőn a meglévő 640px-es alaprács marad. */
@media (min-width: 768px) {
    .fd-admin-recipe-detail__layout--ingredients-editing .fd-admin-recipe-detail__row-fields--ingredient {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr);
        gap: var(--fd-space-4);
        align-items: start;
    }

    .fd-admin-recipe-detail__layout--ingredients-editing .fd-admin-recipe-detail__row-fields--nutrition {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr);
        gap: var(--fd-space-4);
        align-items: start;
    }
}

/* Descriptions: muted subheadings + readable prose rhythm. */
.fd-admin-recipe-detail__subhead {
    margin: var(--fd-space-5) 0 var(--fd-space-2);
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fd-color-text-muted);
}

.fd-admin-recipe-detail__subhead:first-of-type {
    margin-top: 0;
}

.fd-admin-recipe-detail__prose {
    margin: 0;
    color: var(--fd-color-text);
    line-height: 1.7;
    max-width: 68ch;
}

/* Numbered steps: a green index chip beside each step body, comfortable spacing. */
.fd-admin-recipe-detail__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-5);
    counter-reset: none;
}

.fd-admin-recipe-detail__steps > li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--fd-space-4);
    align-items: start;
    padding-bottom: var(--fd-space-5);
    border-bottom: 1px solid var(--fd-color-border);
}

.fd-admin-recipe-detail__steps > li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.fd-admin-recipe-detail__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--fd-radius-pill);
    background-color: var(--fd-color-primary);
    color: #fff;
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-semibold);
    line-height: 1;
}

.fd-admin-recipe-detail__step-body {
    min-width: 0;
}

.fd-admin-recipe-detail__step-body h3 {
    margin: 0 0 var(--fd-space-2);
    font-size: var(--fd-text-base);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-text);
}

.fd-admin-recipe-detail__step-body p {
    margin: 0;
    color: var(--fd-color-text);
    line-height: 1.65;
}

.fd-admin-recipe-detail__step-tip {
    margin-top: var(--fd-space-2) !important;
    padding: var(--fd-space-3) var(--fd-space-4);
    background-color: var(--fd-color-cream-50);
    border-left: 3px solid var(--fd-color-primary);
    border-radius: var(--fd-radius-sm);
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
}

.fd-admin-recipe-detail__step-tip strong {
    color: var(--fd-color-primary-strong);
}

/* ---------- Recipe detail: inline per-box editing (Phase A) ---------- */
/* slice adm-inline-1: each editable box (hero / descriptions / details) carries a header row
   with a flat edit-pencil; clicking it swaps the box body for an inline EditForm. */
.fd-admin-recipe-detail__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fd-space-3);
    margin-bottom: var(--fd-space-3);
}

@media (min-width: 768px) {
    .fd-admin-recipe-detail__panel-head {
        margin-bottom: var(--fd-space-4);
    }
}

/* The panel-head owns the title's bottom margin, so the title itself sits flush. */
.fd-admin-recipe-detail__panel-head .fd-admin-recipe-detail__panel-title {
    margin-bottom: 0;
}

.fd-admin-recipe-detail__hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fd-space-3);
}

/* "Mentve" success cue — subtle, fades in; announced via aria-live. */
.fd-admin-recipe-detail__saved-cue {
    margin: 0 0 var(--fd-space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--fd-space-1);
    padding: 2px var(--fd-space-2);
    border-radius: var(--fd-radius-pill);
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-medium);
    color: var(--fd-color-primary-strong);
    background-color: var(--fd-color-green-100);
    animation: fd-saved-cue-fade 4s ease forwards;
}

@keyframes fd-saved-cue-fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-admin-recipe-detail__saved-cue {
        animation: none;
    }
}

/* Inline edit form inside a box. */
.fd-admin-recipe-detail__edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
}

.fd-admin-recipe-detail__edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fd-space-3);
}

.fd-admin-recipe-detail__edit-title {
    margin: 0;
    font-family: var(--fd-font-sans);
    font-size: var(--fd-text-lg);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-text);
}

.fd-admin-recipe-detail__edit-field {
    margin: 0;
}

.fd-admin-recipe-detail__edit-hint {
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-xs);
}

/* Prep / cook / servings — three across on wide, stack on narrow. */
.fd-admin-recipe-detail__edit-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-4);
}

@media (min-width: 560px) {
    .fd-admin-recipe-detail__edit-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

.fd-admin-recipe-detail__edit-field--checkbox .fd-field__label-row {
    align-items: center;
}

.fd-admin-recipe-detail__edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
}

/* ---------- Recipe detail: collection row editors (Phase B) ---------- */
/* The Hozzávalók / Lépések boxes swap to a list of editable rows. Each row is a card with its
   fields and a flat danger remove-button; steps additionally carry a rank column (index chip +
   up/down move). Rows stack on narrow; the ingredient grid collapses to a single column. */
.fd-admin-recipe-detail__row-editor {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
}

.fd-admin-recipe-detail__ingredient-row,
.fd-admin-recipe-detail__step-row {
    display: flex;
    align-items: flex-start;
    gap: var(--fd-space-3);
    padding: var(--fd-space-4);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-md);
    background-color: var(--fd-color-cream-50);
}

.fd-admin-recipe-detail__row-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
}

/* Ingredient row: Név / Mennyiség / Megjegyzés side-by-side on wide, stacked on narrow. */
@media (min-width: 640px) {
    .fd-admin-recipe-detail__row-fields--ingredient {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1.2fr;
        gap: var(--fd-space-3);
        align-items: start;
    }
}

/* Steps: a rank column (chip + move buttons) precedes the fields. */
.fd-admin-recipe-detail__row-rank {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fd-space-2);
    padding-top: var(--fd-space-1);
}

.fd-admin-recipe-detail__row-move {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-1);
}

/* Keep the remove button from stretching; align it with the first field row. */
.fd-admin-recipe-detail__row-remove {
    flex: 0 0 auto;
    margin-top: var(--fd-space-1);
}

/* B2-b: the optional catalog nutrition link sits BELOW the free-text fields, stacked. The
   ingredient row's field side becomes a column wrapping both groups. */
.fd-admin-recipe-detail__row-fields--nutrition {
    margin-top: var(--fd-space-3);
    padding-top: var(--fd-space-3);
    border-top: 1px dashed var(--fd-color-border);
}

@media (min-width: 640px) {
    .fd-admin-recipe-detail__row-fields--nutrition {
        display: grid;
        grid-template-columns: 1.8fr 1fr 1.2fr;
        gap: var(--fd-space-3);
        align-items: start;
    }
}

.fd-admin-recipe-detail__optional-tag {
    color: var(--fd-color-text-muted);
    font-weight: var(--fd-weight-regular);
    font-size: var(--fd-text-xs);
}

/* Live per-serving total preview above the rows. */
.fd-admin-recipe-detail__live-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fd-space-2) var(--fd-space-3);
    padding: var(--fd-space-3) var(--fd-space-4);
    margin-bottom: var(--fd-space-4);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-md);
    background-color: var(--fd-color-cream-50);
}

.fd-admin-recipe-detail__live-total-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--fd-space-1) var(--fd-space-3);
    border-radius: var(--fd-radius-pill);
    background-color: var(--fd-color-green-100);
    color: var(--fd-color-primary-strong);
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-medium);
    font-variant-numeric: tabular-nums;
}

.fd-admin-recipe-detail__live-total-hint {
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
}

/* Read-mode per-serving nutrition panel (under the ingredients table). */
.fd-admin-recipe-detail__nutrition {
    margin-top: var(--fd-space-4);
    padding-top: var(--fd-space-4);
    border-top: 1px solid var(--fd-color-border);
}

.fd-admin-recipe-detail__nutrition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fd-space-3);
}

.fd-admin-recipe-detail__nutrition-cell {
    display: grid;
    gap: var(--fd-space-1);
    padding: var(--fd-space-3);
    border-radius: var(--fd-radius-md);
    background-color: var(--fd-color-green-100);
}

.fd-admin-recipe-detail__nutrition-label {
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-xs);
}

.fd-admin-recipe-detail__nutrition-value {
    color: var(--fd-color-ink-900);
    font-size: var(--fd-text-base);
    font-variant-numeric: tabular-nums;
}

.fd-admin-recipe-detail__nutrition-hint {
    margin: var(--fd-space-3) 0 0;
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
}

.fd-admin-recipe-detail__add-row {
    display: inline-flex;
    align-items: center;
    gap: var(--fd-space-2);
}

.fd-admin-recipe-detail__add-row .fd-admin-icon {
    width: 1rem;
    height: 1rem;
}

/* ---------- Buttons ---------- */
:is(.fd-admin-page, .fd-admin-modal) .fd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--fd-space-2) var(--fd-space-5);
    border-radius: var(--fd-radius-sm);
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-semibold);
    font-family: inherit;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--fd-transition-fast);
    background-color: var(--fd-color-primary);
    color: #fff;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button:hover {
    background-color: var(--fd-color-primary-strong);
    color: #fff;
    text-decoration: none;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button:focus-visible {
    background-color: var(--fd-color-primary-strong);
    color: #fff;
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--fd-color-green-100);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button:disabled,
:is(.fd-admin-page, .fd-admin-modal) .fd-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* A margin-left elbukik mihelyt wrap történik; használjuk a parent .fd-admin-page__actions gap-jét. */
:is(.fd-admin-page, .fd-admin-modal) .fd-button + .fd-button {
    margin-left: 0;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button--secondary {
    background-color: var(--fd-color-surface);
    color: var(--fd-color-text);
    border-color: var(--fd-color-border);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button--secondary:hover {
    background-color: var(--fd-color-cream-100);
    color: var(--fd-color-text);
    border-color: var(--fd-color-ink-300);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button--secondary:focus-visible {
    background-color: var(--fd-color-cream-100);
    color: var(--fd-color-text);
    border-color: var(--fd-color-ink-300);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button--danger {
    background-color: var(--fd-color-accent-strong);
    color: #fff;
    border-color: transparent;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-button--danger:hover,
:is(.fd-admin-page, .fd-admin-modal) .fd-button--danger:focus-visible {
    background-color: var(--fd-color-accent-dark);
    color: #fff;
}

/* ---------- Page header action icon buttons ----------
   A "Új …" / "Frissítés" fejléc-akciók ikon-gomb változata. Az .fd-button-nel
   ellentétben NEM nyúlik teljes szélességre mobilon (lásd a 639.98px szabályt,
   ami csak `.fd-button`-re hat) — fix, kényelmes ≥44px-es érintőfelület MINDEN
   nézetben. A glyph ~20px, középre zárva a 44px-es dobozban. Két ilyen gomb a
   `.fd-admin-page__actions` flex-sorban egymás mellett ül a meglévő gap-pel. */
.fd-admin-page__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;                 /* ne nyúljon a flex-sorban */
    min-width: 2.75rem;             /* 44px — Apple HIG érintő-minimum */
    min-height: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: var(--fd-radius-sm);
    border: 1px solid transparent;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: var(--fd-transition-fast);
}

.fd-admin-page__action .fd-admin-icon {
    width: 1.25rem;                 /* ~20px glyph */
    height: 1.25rem;
}

.fd-admin-page__action:focus-visible {
    outline: 2px solid var(--fd-color-primary-strong);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--fd-color-green-100);
}

.fd-admin-page__action:disabled,
.fd-admin-page__action[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* PRIMARY — kitöltött márka-zöld, fehér ikon (ugyanazok a tokenek, mint a .fd-button). */
.fd-admin-page__action--primary {
    background-color: var(--fd-color-primary);
    color: #fff;
}

.fd-admin-page__action--primary:hover {
    background-color: var(--fd-color-primary-strong);
    color: #fff;
    text-decoration: none;
}

.fd-admin-page__action--primary:focus-visible {
    background-color: var(--fd-color-primary-strong);
}

/* SECONDARY — felület/outline, tompított ikon (ugyanaz, mint a .fd-button--secondary). */
.fd-admin-page__action--secondary {
    background-color: var(--fd-color-surface);
    color: var(--fd-color-text);
    border-color: var(--fd-color-border);
}

.fd-admin-page__action--secondary:hover {
    background-color: var(--fd-color-cream-100);
    color: var(--fd-color-text);
    border-color: var(--fd-color-ink-300);
}

.fd-admin-page__action--secondary:focus-visible {
    background-color: var(--fd-color-cream-100);
    border-color: var(--fd-color-ink-300);
}

/* DANGER — kitöltött piros, fehér ikon (ugyanazok a tokenek, mint a .fd-button--danger). */
.fd-admin-page__action--danger {
    background-color: var(--fd-color-accent-strong);
    color: #fff;
    border-color: transparent;
}

.fd-admin-page__action--danger:hover,
.fd-admin-page__action--danger:focus-visible {
    background-color: var(--fd-color-accent-dark);
    color: #fff;
}

/* LOADING — a Frissítés gomb pörgő ikonja (aria-busy=true alatt). */
.fd-admin-page__action[aria-busy="true"] .fd-admin-icon {
    transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
    .fd-admin-page__action[aria-busy="true"] .fd-admin-icon {
        animation: fd-admin-action-spin 0.8s linear infinite;
    }
}

@keyframes fd-admin-action-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Alerts ---------- */
.fd-admin-page .fd-alert {
    display: block;
    padding: var(--fd-space-3) var(--fd-space-4);
    border-radius: var(--fd-radius-md);
    font-size: var(--fd-text-sm);
    line-height: var(--fd-leading-normal);
    border-left: 4px solid var(--fd-color-ink-300);
    background-color: var(--fd-color-cream-100);
    color: var(--fd-color-text);
}

.fd-admin-page .fd-alert + .fd-alert {
    margin-top: var(--fd-space-4);
}

.fd-admin-page .fd-alert--info {
    border-left-color: var(--fd-color-ink-500);
    background-color: var(--fd-color-cream-100);
}

.fd-admin-page .fd-alert--success {
    border-left-color: var(--fd-color-green-700);
    background-color: var(--fd-color-green-100);
    color: var(--fd-color-text);
}

.fd-admin-page .fd-alert--warning {
    border-left-color: var(--fd-color-orange-500);
    background-color: var(--fd-color-orange-100);
    color: var(--fd-color-text);
}

.fd-admin-page .fd-alert--error {
    border-left-color: var(--fd-color-accent-strong);
    background-color: var(--fd-color-error-bg);
    color: var(--fd-color-accent-strong);
}

.fd-admin-page .fd-alert p {
    margin: 0;
}

/* ---------- Inputs ---------- */
:is(.fd-admin-page, .fd-admin-modal) .fd-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--fd-space-2) var(--fd-space-3);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-sm);
    background-color: var(--fd-color-surface);
    color: var(--fd-color-text);
    font: inherit;
    line-height: var(--fd-leading-normal);
    transition: border-color var(--fd-transition-fast), box-shadow var(--fd-transition-fast);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input:hover {
    border-color: var(--fd-color-ink-300);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input:focus,
:is(.fd-admin-page, .fd-admin-modal) .fd-input:focus-visible {
    outline: none;
    border-color: var(--fd-color-primary);
    box-shadow: var(--fd-input-focus-shadow);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input:disabled {
    background-color: var(--fd-color-cream-100);
    color: var(--fd-color-text-muted);
    cursor: not-allowed;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input--textarea {
    min-height: 6rem;
    resize: vertical;
}

/* slice adm35: measure-caps — now that the content fills a wide main area, single-column
   text/url/number inputs would otherwise stretch to absurd line lengths. Cap them to a
   readable measure; short numeric inputs are capped much tighter. Textareas stay full
   width (multi-line content benefits from the room). Scoped to admin pages + modals
   (slice adm41: the admin form design system now also reaches modal forms, which render
   outside .fd-admin-page) so public forms are untouched. */
:is(.fd-admin-page, .fd-admin-modal) .fd-input:not(.fd-input--textarea) {
    max-width: 36rem;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input[type="number"] {
    max-width: 12rem;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input.invalid,
:is(.fd-admin-page, .fd-admin-modal) .fd-input[aria-invalid='true'] {
    border-color: var(--fd-color-accent-strong);
    box-shadow: none;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input.invalid:focus,
:is(.fd-admin-page, .fd-admin-modal) .fd-input[aria-invalid='true']:focus {
    box-shadow: var(--fd-input-focus-shadow-error);
}

/* Select-chevron — rendszer-szintű konzisztencia a publikus űrlapok select-jeivel
   (lásd site.css `select.fd-*-form__input`). A natív, él-hez tapadó böngésző-nyilat
   appearance:none tünteti el; helyette ugyanaz a custom FAQ-caret (polyline
   6 9 12 15 18 9, --fd-color-ink-700) ül, a jobb széltől 1rem-mel (--fd-space-4)
   bejjebb húzva. A padding-right (2.75rem) megóvja a kiválasztott értéket a nyíl
   alá futástól; a min-height / max-width mérték-cap / fókusz-gyűrű / hover / invalid
   a fenti .fd-input alap-szabályokból öröklődik. */
:is(.fd-admin-page, .fd-admin-modal) select.fd-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.75rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4a44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--fd-space-4) center;
    background-size: 1rem;
}

/* ---------- Input group: input + trailing control on one row ----------
   Egy soros mező, ahol a szöveges input flex-nő, és egy kompakt vezérlő (pl. az ikon-választó
   trigger gombja) a VÉGÉN, vele egy vonalban ül. A min-width:0 kell, hogy az input le tudjon
   zsugorodni a flex-sorban (különben túlcsordul). A ValidationMessage a csoport ALATT marad. */
:is(.fd-admin-page, .fd-admin-modal) .fd-input-group {
    display: flex;
    align-items: center;
    gap: var(--fd-space-2);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-input-group > .fd-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Checkboxes & radios ---------- */
:is(.fd-admin-page, .fd-admin-modal) input[type='checkbox'],
:is(.fd-admin-page, .fd-admin-modal) input[type='radio'] {
    accent-color: var(--fd-color-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

/* ---------- Field wrapper ---------- */
:is(.fd-admin-page, .fd-admin-modal) .fd-field {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-2);
    margin-bottom: var(--fd-space-4);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-field:last-child {
    margin-bottom: 0;
}

:is(.fd-admin-page, .fd-admin-modal) .fd-field label {
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-medium);
    color: var(--fd-color-ink-700);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-field small {
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
}

:is(.fd-admin-page, .fd-admin-modal) .fd-field .validation-message {
    font-size: var(--fd-text-xs);
    color: var(--fd-color-accent-strong);
}

/* ---------- Field-help info tooltip (AdminFieldHelp) ---------- */
/* Reusable per-field help: a small, muted, focusable info button beside a label that reveals an
   explanatory bubble. CSS-only reveal — shown on :hover of the wrapper AND on focus of the trigger,
   so it works for mouse, keyboard, and touch-tap-to-focus. Tokens only; calm info-blue tint. */

/* The label + help icon sit on one row so the icon hugs the label text. */
.fd-field__label-row {
    display: flex;
    align-items: center;
    gap: var(--fd-space-1);
}

/* Same row treatment for a <fieldset>'s <legend>: the legend text + help icon sit inline,
   so the icon hugs the legend text exactly as it does a <label>. inline-flex keeps it from
   stretching to the fieldset's full width (a <legend>'s child would otherwise behave block-ish). */
.fd-field__legend-row {
    display: inline-flex;
    align-items: center;
    gap: var(--fd-space-1);
}

.fd-field-help {
    position: relative;
    display: inline-flex;
    /* keep the bubble inside the panel's left edge by default; flips at the viewport edge below */
    line-height: 0;
}

.fd-field-help__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--fd-radius-pill);
    background: transparent;
    color: var(--fd-color-ink-400);
    cursor: pointer;
    transition: color var(--fd-transition-fast), background-color var(--fd-transition-fast);
}

.fd-field-help__trigger .fd-admin-icon {
    width: 1rem;
    height: 1rem;
}

.fd-field-help__trigger:hover,
.fd-field-help__trigger:focus-visible {
    color: var(--fd-color-info);
    background-color: var(--fd-color-info-bg);
}

.fd-field-help__trigger:focus-visible {
    outline: 2px solid var(--fd-color-info);
    outline-offset: 2px;
}

/* Bubble: fixed-width, below-and-left-aligned to the icon. Hidden by default. */
.fd-field-help__bubble {
    position: absolute;
    top: calc(100% + var(--fd-space-2));
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-1);
    width: max-content;
    max-width: 20rem;
    padding: var(--fd-space-3);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-md);
    background: var(--fd-color-surface);
    box-shadow: var(--fd-shadow-md);
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-regular);
    line-height: var(--fd-leading-snug);
    text-align: left;
    /* hidden + non-interactive until revealed */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    pointer-events: none;
    transition:
        opacity var(--fd-transition-fast),
        transform var(--fd-transition-fast),
        visibility var(--fd-transition-fast);
}

/* small upward arrow */
.fd-field-help__bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0.55rem;
    border: 6px solid transparent;
    border-bottom-color: var(--fd-color-surface);
    filter: drop-shadow(0 -1px 0 var(--fd-color-border));
}

.fd-field-help__text {
    color: var(--fd-color-ink-700);
}

.fd-field-help__example {
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
}

/* Reveal: hover anywhere on the wrapper, OR keyboard/tap focus on the trigger. */
.fd-field-help:hover .fd-field-help__bubble,
.fd-field-help__trigger:focus-visible + .fd-field-help__bubble,
.fd-field-help__trigger:focus + .fd-field-help__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Modal clipping guard: .fd-admin-modal__body is a scroll container (overflow-y:auto), so the bubble
   can be clipped by the body's edges. A single "always up in modals" direction traded a bottom-clip
   for a top-clip: the TOP field (e.g. Név) sits right under the modal header, so its upward bubble
   opened INTO/behind the header. Fix = anchor PER FIELD instead of one global direction:
     • default (top + middle fields) opens DOWNWARD — same as the page forms, into the empty body
       below the icon, away from the header;
     • only the LAST field in the body (the actual bottom-clip risk, e.g. Leírás) flips UPWARD into
       the empty space above its icon, fully inside the scroll bounds.
   The fields are direct children of __body, so :last-child reliably picks the bottom field. This keeps
   the page forms (recipe create/edit, availability) on the unchanged downward default — no regression. */
.fd-admin-modal__body > .fd-field:last-child .fd-field-help__bubble {
    top: auto;
    bottom: calc(100% + var(--fd-space-2));
    transform: translateY(0.25rem);
}

.fd-admin-modal__body > .fd-field:last-child .fd-field-help__bubble::before {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: var(--fd-color-surface);
    filter: drop-shadow(0 1px 0 var(--fd-color-border));
}

.fd-admin-modal__body > .fd-field:last-child .fd-field-help:hover .fd-field-help__bubble,
.fd-admin-modal__body > .fd-field:last-child .fd-field-help__trigger:focus-visible + .fd-field-help__bubble,
.fd-admin-modal__body > .fd-field:last-child .fd-field-help__trigger:focus + .fd-field-help__bubble {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fd-admin-modal__body > .fd-field:last-child .fd-field-help__bubble {
        transform: none;
    }
}

/* On narrow screens the help icon can sit anywhere across the row (e.g. the macro-grid fields on
   foods/new sit far to the right), so neither a left- nor a right-anchored absolute bubble can stay
   on-screen while still being wide enough to read — anchoring it to the small icon wrapper always
   clips one edge. Fix = on mobile detach the bubble from the icon and pin it to the VIEWPORT as a
   bottom info card (position:fixed, inset gutters), so it is always fully visible regardless of where
   the trigger sits. The arrow (which only makes sense when tethered to the icon) is hidden. This is a
   common, robust mobile tooltip pattern; the reveal triggers (hover/focus) are unchanged. */
@media (max-width: 36rem) {
    .fd-field-help__bubble {
        position: fixed;
        left: var(--fd-space-4);
        right: var(--fd-space-4);
        bottom: var(--fd-space-4);
        top: auto;
        width: auto;
        max-width: none;
        transform: translateY(0.5rem);
    }

    .fd-field-help__bubble::before {
        display: none;
    }

    .fd-field-help:hover .fd-field-help__bubble,
    .fd-field-help__trigger:focus-visible + .fd-field-help__bubble,
    .fd-field-help__trigger:focus + .fd-field-help__bubble {
        transform: translateY(0);
    }

    /* The modal :last-child upward-flip rule is irrelevant once the bubble is viewport-pinned. */
    .fd-admin-modal__body > .fd-field:last-child .fd-field-help__bubble {
        top: auto;
        bottom: var(--fd-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-field-help__trigger,
    .fd-field-help__bubble {
        transition: none;
    }

    .fd-field-help__bubble {
        transform: none;
    }
}

/* ---------- Bookings / leads list ---------- */
.fd-admin-bookings__list {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
}

.fd-admin-bookings__item {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-md);
    box-shadow: var(--fd-shadow-sm);
    padding: var(--fd-space-4);
    color: var(--fd-color-text);
}

@media (min-width: 768px) {
    .fd-admin-bookings__item {
        padding: var(--fd-space-5);
    }
}

.fd-admin-bookings__item-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
    align-items: flex-start;
    justify-content: space-between;
}

.fd-admin-bookings__item-head > div {
    min-width: 0;
}

.fd-admin-bookings__item-head h2 {
    margin: 0 0 var(--fd-space-1);
    font-size: var(--fd-text-base);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-text);
    line-height: var(--fd-leading-snug);
}

.fd-admin-bookings__item-head p {
    margin: 0;
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
    word-break: break-word;
}

.fd-admin-bookings__meta {
    margin: 0;
    margin-top: var(--fd-space-1);
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fd-admin-bookings__message {
    margin: 0;
    color: var(--fd-color-text);
    font-size: var(--fd-text-sm);
    line-height: var(--fd-leading-normal);
}

/* ---------- Row action group ---------- */
.fd-admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
    justify-content: flex-end;
}

@media (max-width: 639.98px) {
    .fd-admin-row-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: var(--fd-space-3);
        width: 100%;
    }
    .fd-admin-row-actions > .fd-button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    :is(.fd-admin-page, .fd-admin-modal) .fd-button {
        padding-block: var(--fd-space-3);
    }
}

/* ---------- Table cell helpers ---------- */
.fd-admin-cell--email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .fd-admin-cell--email {
        max-width: 360px;
    }
}

/* ---------- Recipe list: title cell hierarchy ---------- */
.fd-admin-recipes__title-cell {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-1);
    min-width: 0;
}

.fd-admin-recipes__title-cell a {
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-primary-strong);
    text-decoration: none;
    line-height: var(--fd-leading-snug);
}

.fd-admin-recipes__title-cell a:hover {
    text-decoration: underline;
}

.fd-admin-recipes__slug {
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28ch;
}

/* Narrow-view column disclosure for the recipe list now lives in Recipes.razor.css (named-class
   based, mirroring the Leads pattern) instead of the old positional nth-child hide that fought the
   new sortable/light-head layout. */

/* Actions column: compact, right-aligned */
.fd-admin-recipes__col--actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.fd-admin-recipes__actions-cell {
    white-space: nowrap;
    text-align: right;
}

.fd-admin-recipes__actions {
    display: inline-flex;
    gap: var(--fd-space-1);
    align-items: center;
}

/* Row-end action icon buttons */
.fd-admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--fd-radius-sm);
    color: var(--fd-color-text-muted);
    text-decoration: none;
    /* slice adm42: reset native <button> chrome so an icon-btn renders as the same flat ghost
       icon whether it's an <a> (recipes list) or a <button> (e.g. the bookings row view action).
       Without this a <button> shows the browser's grey fill + border and reads boxed, not flat. */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    /* slice adm34: include box-shadow so :focus-visible ring fades in with the colour/transform transition */
    transition: background-color var(--fd-transition-fast), color var(--fd-transition-fast), transform var(--fd-transition-fast), box-shadow var(--fd-transition-fast);
}

/* slice adm43: per-action icon colours so view / edit / delete read as three distinct hues at
   rest (not only on hover) — easier to tell apart at a glance. view = muted info-blue,
   edit = brand green, delete = red-orange (accent-strong). */
.fd-admin-icon-btn--view {
    color: var(--fd-color-info);
}

.fd-admin-icon-btn--edit {
    color: var(--fd-color-primary-strong);
}

.fd-admin-icon-btn--danger {
    color: var(--fd-color-accent-strong);
}

@media (hover: hover) and (pointer: fine) {
    .fd-admin-icon-btn:hover {
        background-color: var(--fd-color-cream-100);
        color: var(--fd-color-ink-900);
    }

    .fd-admin-icon-btn--view:hover {
        background-color: var(--fd-color-info-bg);
        color: var(--fd-color-info);
    }

    .fd-admin-icon-btn--edit:hover {
        background-color: var(--fd-color-green-100);
        color: var(--fd-color-primary-strong);
    }

    .fd-admin-icon-btn--danger:hover {
        background-color: var(--fd-color-error-bg);
        color: var(--fd-color-accent-strong);
    }
}

/* ---------- Toggleable category chip ----------
   Promoted out of Foods.razor.css scope (FE-2): shared by the Alapanyagok list filter bar AND the
   FoodForm category multi-select on the dedicated create/edit pages. A pill that reads as a button:
   neutral when off, green-filled when active/selected (aria-pressed="true"). */
.fd-admin-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--fd-space-3);
    border-radius: var(--fd-radius-pill);
    border: 1px solid var(--fd-color-border);
    background-color: var(--fd-color-surface, #fff);
    color: var(--fd-color-text);
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-medium);
    line-height: 1.6;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.fd-admin-filter-chip:hover {
    border-color: var(--fd-color-primary);
    color: var(--fd-color-primary-strong);
}

.fd-admin-filter-chip:focus-visible {
    outline: 2px solid var(--fd-color-primary);
    outline-offset: 2px;
}

.fd-admin-filter-chip--active {
    background-color: var(--fd-color-green-100);
    border-color: var(--fd-color-primary);
    color: var(--fd-color-primary-strong);
}

/* ---------- Status badges ---------- */
.fd-admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--fd-space-2);
    border-radius: var(--fd-radius-pill);
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-medium);
    line-height: 1.5;
    white-space: nowrap;
    background-color: var(--fd-color-sage-50);
    color: var(--fd-color-text);
}

.fd-admin-badge--yes {
    background-color: var(--fd-color-green-100);
    color: var(--fd-color-primary-strong);
}

.fd-admin-badge--no {
    background-color: var(--fd-color-cream-100);
    color: var(--fd-color-ink-400);
}

/* ---------- Recipe numeric field group (slice adm35) ----------
   prep / cook / servings are short numeric inputs — group them inline instead of three
   full-width rows. Stacks on narrow screens, 3-up from the small breakpoint. The
   measure-cap on the numeric inputs is relaxed here so they fill their grid column. */
.fd-admin-recipe-create__field-group,
.fd-admin-recipe-edit__field-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-4);
}

@media (min-width: 560px) {
    .fd-admin-recipe-create__field-group,
    .fd-admin-recipe-edit__field-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fd-admin-recipe-create__field-group .fd-field,
.fd-admin-recipe-edit__field-group .fd-field {
    margin-bottom: 0;
}

.fd-admin-recipe-create__field-group .fd-input[type="number"],
.fd-admin-recipe-edit__field-group .fd-input[type="number"] {
    max-width: none;
}

/* ---------- Form actions footer ---------- */
.fd-admin-recipe-create__actions,
.fd-admin-recipe-edit__actions {
    margin-top: var(--fd-space-5);
    padding-top: var(--fd-space-4);
    border-top: 1px solid var(--fd-color-border);
    display: flex;
    gap: var(--fd-space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Header actions: visual separator before destructive action ---------- */
.fd-admin-actions__separator {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    background-color: var(--fd-color-border);
    flex-shrink: 0;
    margin-block: 4px;
}

@media (max-width: 767px) {
    .fd-admin-actions__separator {
        display: none;
    }
}

/* ---------- Unified action cluster utility (slice 6) ----------
   Shared layout primitive for header / footer / confirm action groups.
   Variants:
     --footer  : border-top separator + vertical rhythm (form footers)
     --header  : flush, no separator (page header trailing actions)
     --confirm : delete-confirm clusters (no danger spatial offset) */
.fd-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
    align-items: center;
    justify-content: flex-end;
}

.fd-admin-actions--footer {
    margin-top: var(--fd-space-5);
    padding-top: var(--fd-space-4);
    border-top: 1px solid var(--fd-color-border);
}

.fd-admin-actions--header {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.fd-admin-actions__spacer {
    margin-inline-start: auto;
}

@media (max-width: 639.98px) {
    .fd-admin-actions--footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--fd-space-2);
    }
    .fd-admin-actions--footer > .fd-button {
        width: 100%;
    }
    .fd-admin-actions__spacer {
        display: none;
    }
    /* Danger lands on top of the reversed mobile stack, farthest from primary */
    .fd-admin-actions .fd-button--danger {
        order: -1;
    }
}

/* ---------- State hierarchy (slice 6) ----------
   AdminStateView emits three visual states using the same .fd-admin-state base:
     - Loading: role="status"          — transparent, no border, subdued
     - Error  : .fd-admin-state--error — already styled (bg/border)
     - Empty  : neither role nor error — surface bg + dashed border ("nothing here yet")
*/
.fd-admin-page .fd-admin-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fd-space-3);
}

/* Loading: signal "waiting" — strip the panel chrome, slightly subdued. */
.fd-admin-page .fd-admin-state[role="status"] {
    background-color: transparent;
    border: 0;
    opacity: 0.85;
    min-height: 8rem;
    justify-content: center;
}

/* Error: strengthen the title weight on nested headings/strong text. */
.fd-admin-page .fd-admin-state--error h2,
.fd-admin-page .fd-admin-state--error h3,
.fd-admin-page .fd-admin-state--error strong {
    font-weight: var(--fd-weight-semibold);
}

/* Empty: dashed border conveys "nothing here yet". */
.fd-admin-page .fd-admin-state:not([role="status"]):not(.fd-admin-state--error) {
    border-style: dashed;
    min-height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Slice 8: table + filter interaction clarity ---------- */

/* Active search: highlight border when filter has content */
.fd-admin-panel--toolbar .fd-input[type="search"]:not(:placeholder-shown) {
    border-color: var(--fd-color-primary);
    background-color: var(--fd-color-surface);
}

/* Table header corner rounding — aligned with panel border-radius */
.fd-admin-table-wrap .fd-admin-table thead th:first-child {
    border-radius: var(--fd-radius-md) 0 0 0;
}
.fd-admin-table-wrap .fd-admin-table thead th:last-child {
    border-radius: 0 var(--fd-radius-md) 0 0;
}

/* Bookings table: progressive column disclosure on mobile.
   At <=639px keep only Beérkezett + Név + actions — Szolgáltatás and Kért dátum (the 4th col, which
   was clipping at 390px) also fold away; all of it stays reachable in the row's detail modal. */
@media (max-width: 639px) {
    .fd-admin-bookings__table .fd-admin-bookings__col--timeframe,
    .fd-admin-bookings__table .fd-admin-bookings__col--timeslot,
    .fd-admin-bookings__table .fd-admin-bookings__col--notes,
    .fd-admin-bookings__table .fd-admin-bookings__col--service,
    .fd-admin-bookings__table .fd-admin-bookings__col--date,
    .fd-admin-bookings__table .fd-admin-cell--email {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .fd-admin-bookings__table .fd-admin-bookings__col--notes {
        display: none;
    }
}

/* Categories table: progressive column disclosure on mobile */
@media (max-width: 639px) {
    .fd-admin-categories__table .fd-admin-categories__col--icon,
    .fd-admin-categories__table .fd-admin-categories__col--desc {
        display: none;
    }
}

/* Slug display: monospace for scanability */
.fd-admin-categories__slug {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    font-size: var(--fd-text-xs);
    background-color: var(--fd-color-cream-100);
    border-radius: var(--fd-radius-sm);
    padding: var(--fd-space-1) var(--fd-space-2);
    white-space: nowrap;
    color: var(--fd-color-ink-700);
}

/* Toolbar filter: consistent vertical padding on mobile */
@media (max-width: 767px) {
    .fd-admin-panel--toolbar {
        padding-block: var(--fd-space-3);
    }
}

/* ---------- Slice 10: header/filter hierarchy, scan rhythm, mobile action contrast ---------- */

/* ---------- Slice 9: row scan rhythm + state hierarchy + mobile action bar ---------- */

/* Row scan accent: inset left shadow on hover — no layout shift, uses existing primary token */
.fd-admin-table tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 var(--fd-color-primary);
}

/* ---------- Slice 11: empty/filter-empty readability, result count, mobile CTA rhythm ---------- */

/* Filter-empty state: semantically an empty state triggered by an active filter.
   Uses role="status" for screen-reader announcement; override loading visual treatment. */
.fd-admin-page .fd-admin-state--filter-empty[role="status"] {
    background-color: var(--fd-color-surface);
    border: 1px dashed var(--fd-color-border);
    opacity: 1;
    min-height: 7rem;
    padding: var(--fd-space-5) var(--fd-space-6);
    flex-direction: column;
}

/* Semantic sub-structure within empty / filter-empty states */
.fd-admin-page .fd-admin-state .fd-admin-state__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fd-space-1);
}

.fd-admin-page .fd-admin-state .fd-admin-state__heading {
    margin: 0;
    font-size: var(--fd-text-sm);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-text);
    line-height: var(--fd-leading-snug);
}

.fd-admin-page .fd-admin-state .fd-admin-state__hint {
    margin: 0;
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
    line-height: var(--fd-leading-normal);
    max-width: 40ch;
    text-align: center;
}

/* Result count pill: visible in toolbar when a filter term is active */
.fd-admin-toolbar__result-count {
    flex-shrink: 0;
    align-self: flex-end;
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-medium);
    color: var(--fd-color-text-muted);
    white-space: nowrap;
    padding: var(--fd-space-1) var(--fd-space-3);
    background-color: var(--fd-color-cream-100);
    border-radius: var(--fd-radius-pill);
    border: 1px solid var(--fd-color-border);
    line-height: 1.5;
}

@media (max-width: 767px) {
    .fd-admin-toolbar__result-count {
        align-self: flex-start;
    }
}

/* Mobile CTA hierarchy in page header: stack buttons for clear full-width tap targets */
@media (max-width: 639.98px) {
    .fd-admin-page__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .fd-admin-page__actions > .fd-button {
        width: 100%;
        justify-content: center;
    }
    .fd-admin-page__actions > .fd-button--secondary {
        order: 1;
    }
}

/* ---------- Slice 13: mobile icon-button tap targets ---------- */
@media (max-width: 639px) {
    .fd-admin-icon-btn {
        width: 2.75rem;   /* 44px — Apple HIG minimum, above project's 40px floor */
        height: 2.75rem;
    }

    .fd-admin-recipes__actions {
        gap: var(--fd-space-3);  /* 12px — adequate motor separation before delete */
    }

    .fd-admin-recipes__actions-cell {
        padding-inline-end: var(--fd-space-2);  /* prevent focus ring clip at table edge */
    }

    .fd-admin-icon-btn:active {
        background-color: var(--fd-color-cream-100);
        color: var(--fd-color-ink-900);
        transform: scale(0.96);
    }
    .fd-admin-icon-btn--danger:active {
        background-color: var(--fd-color-error-bg);
        color: var(--fd-color-accent-strong);
        transform: scale(0.96);
    }

    /* Hairline divider between adjacent action icons (motoric separation) */
    .fd-admin-recipes__actions .fd-admin-icon-btn {
        position: relative;
        /* slice 15: lift idle icon contrast on mobile */
        color: var(--fd-color-ink-700);
    }
    .fd-admin-recipes__actions .fd-admin-icon-btn--danger {
        color: var(--fd-color-accent-strong);
    }
    .fd-admin-recipes__actions .fd-admin-icon-btn + .fd-admin-icon-btn::before {
        content: "";
        position: absolute;
        left: calc(var(--fd-space-3) / -2);
        top: 50%;
        width: 1px;
        height: 1rem;
        margin-top: -0.5rem;
        background-color: var(--fd-color-border);
        pointer-events: none;
    }
}

/* ---------- Slice 17: desktop scroll rhythm & sticky page header ---------- */
@media (min-width: 1024px) {
    .fd-admin-page {
        padding-block-end: var(--fd-space-7);
    }

    .fd-admin-page__header {
        position: sticky;
        top: 0;
        z-index: 10;
        /* slice adm36: OPAQUE surface so scrolled content is fully hidden behind the header.
           Previously surface-alt + backdrop-blur made the header semi-transparent — content
           "showed through" (kilátszik) on scroll. Linear/Notion/Stripe pattern: solid header. */
        background-color: var(--fd-color-surface);
        /* slice adm36: the scroll container's top padding is now 0 (so this sticky header pins flush
           to the true top and content can't peek above it). The resting top air lives here instead. */
        padding-block: var(--fd-space-6) var(--fd-space-3);
        /* extend the opaque fill to the scroll-container gutter so nothing peeks at the edges */
        margin-inline: calc(var(--fd-space-6) * -1);
        padding-inline: var(--fd-space-6);
        border-bottom: 1px solid var(--fd-color-border);
        min-height: var(--fd-admin-page-header-h, calc(2 * var(--fd-space-3) + 2.5rem));
        /* slice adm36: static subtle depth cue; the scroll-driven shadow below strengthens it once scrolled */
        box-shadow: 0 4px 6px -6px color-mix(in srgb, var(--fd-color-border) 80%, transparent);
        /* slice adm40: faint full-width cooking watermark — a seamless line-art "toile" of pots,
           wooden spoons, whisks and herb sprigs, repeating edge-to-edge to cover the whole header
           like a watermark. Inline SVG data URI (dependency-free). A livelier mid-green (#4e9a35)
           at 13% stroke-opacity so the motif reads clearly as a soft sage/green watermark over the
           warm cream surface (the deep brand green #3d7a2a desaturated to grey at this faintness).
           Layered OVER the opaque surface fill so the header stays solid on scroll, and the condense
           animation never touches background-image, so the pattern holds. Still light enough that the
           dark title / muted breadcrumb / right-side meta + buttons all stay perfectly legible on top. */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200' fill='none' stroke='%234e9a35' stroke-width='1.6' stroke-opacity='0.13' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 53 L106 53 L98 91 L58 91 Z'/%3E%3Cpath d='M44 53 L112 53'/%3E%3Cpath d='M54 51 Q78 37 102 51'/%3E%3Cpath d='M72 39 Q78 31 84 39'/%3E%3Cpath d='M44 61 q-14 2 -14 14 q0 10 12 12'/%3E%3Cpath d='M112 61 q14 2 14 14 q0 10 -12 12'/%3E%3Cpath d='M62 29 c-8 -10 8 -16 0 -28 c-4 -6 4 -12 0 -18'/%3E%3Cpath d='M94 29 c8 -10 -8 -16 0 -28 c4 -6 -4 -12 0 -18'/%3E%3Cpath d='M78 25 c-6 -10 6 -16 0 -30 c-4 -8 4 -12 0 -20'/%3E%3Cg transform='translate(196 64) rotate(-18)'%3E%3Cpath d='M0 -6 C-13 -10 -14 -30 0 -36 C14 -30 13 -10 0 -6'/%3E%3Cpath d='M-7 -12 C-8 -20 8 -20 7 -12'/%3E%3Cpath d='M-2.5 -6 L-2 36 q2 5 4 0 L2.5 -6'/%3E%3C/g%3E%3Cg transform='translate(252 74) rotate(16)'%3E%3Cpath d='M0 1 C-16 -17.700000000000003 -9.6 -27 0 -33'/%3E%3Cpath d='M0 1 C16 -17.700000000000003 9.6 -27 0 -33'/%3E%3Cpath d='M0 1 C-9 -17.700000000000003 -5.3999999999999995 -27 0 -33'/%3E%3Cpath d='M0 1 C9 -17.700000000000003 5.3999999999999995 -27 0 -33'/%3E%3Cpath d='M-11 -17.700000000000003 q11 6 22 0'/%3E%3Cpath d='M-7 -7.415000000000001 q7 4 14 0'/%3E%3Cpath d='M-2.5 1 L-2 33 q2 5 4 0 L2.5 1'/%3E%3C/g%3E%3Cg transform='translate(54 166) rotate(-6) scale(1)'%3E%3Cpath d='M0 0 C8 -6 14 -16 16 -30'/%3E%3Cpath d='M3 -6 C9 -10 10 -14 9 -19 C4 -16 2 -11 3 -6 Z'/%3E%3Cpath d='M3 -6 C-2 -10 -3 -14 -1 -19 C2 -14 4 -10 3 -6 Z'/%3E%3Cpath d='M8 -16 C14 -19 16 -23 15 -28 C9 -25 7 -21 8 -16 Z'/%3E%3Cpath d='M8 -16 C3 -19 1 -23 3 -28 C6 -24 9 -21 8 -16 Z'/%3E%3C/g%3E%3Cg transform='translate(148 170) rotate(10) scale(1)'%3E%3Cpath d='M0 0 C8 -6 14 -16 16 -30'/%3E%3Cpath d='M3 -6 C9 -10 10 -14 9 -19 C4 -16 2 -11 3 -6 Z'/%3E%3Cpath d='M3 -6 C-2 -10 -3 -14 -1 -19 C2 -14 4 -10 3 -6 Z'/%3E%3Cpath d='M8 -16 C14 -19 16 -23 15 -28 C9 -25 7 -21 8 -16 Z'/%3E%3Cpath d='M8 -16 C3 -19 1 -23 3 -28 C6 -24 9 -21 8 -16 Z'/%3E%3C/g%3E%3Cg transform='translate(252 168) rotate(-8) scale(1)'%3E%3Cpath d='M0 0 C8 -6 14 -16 16 -30'/%3E%3Cpath d='M3 -6 C9 -10 10 -14 9 -19 C4 -16 2 -11 3 -6 Z'/%3E%3Cpath d='M3 -6 C-2 -10 -3 -14 -1 -19 C2 -14 4 -10 3 -6 Z'/%3E%3Cpath d='M8 -16 C14 -19 16 -23 15 -28 C9 -25 7 -21 8 -16 Z'/%3E%3Cpath d='M8 -16 C3 -19 1 -23 3 -28 C6 -24 9 -21 8 -16 Z'/%3E%3C/g%3E%3Cg transform='translate(120 116) rotate(24) scale(0.9)'%3E%3Cpath d='M0 0 C5 -9 18 -11 26 -7 C18 -1 7 4 0 0 Z'/%3E%3Cpath d='M2 -1 L22 -6'/%3E%3C/g%3E%3Cg transform='translate(212 132) rotate(-36) scale(0.9)'%3E%3Cpath d='M0 0 C5 -9 18 -11 26 -7 C18 -1 7 4 0 0 Z'/%3E%3Cpath d='M2 -1 L22 -6'/%3E%3C/g%3E%3Cg transform='translate(40 118) rotate(150) scale(0.85)'%3E%3Cpath d='M0 0 C5 -9 18 -11 26 -7 C18 -1 7 4 0 0 Z'/%3E%3Cpath d='M2 -1 L22 -6'/%3E%3C/g%3E%3Cg transform='translate(286 44) rotate(200) scale(0.85)'%3E%3Cpath d='M0 0 C5 -9 18 -11 26 -7 C18 -1 7 4 0 0 Z'/%3E%3Cpath d='M2 -1 L22 -6'/%3E%3C/g%3E%3Cg transform='translate(296 138) rotate(-70) scale(0.8)'%3E%3Cpath d='M0 0 C5 -9 18 -11 26 -7 C18 -1 7 4 0 0 Z'/%3E%3Cpath d='M2 -1 L22 -6'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: repeat;
        background-position: left top;
        background-size: 320px 200px;
    }

    /* slice adm36: scroll-snap-* dropped along with the container's scroll-snap-type.
       scroll-margin-top is retained so jump-to-section anchors clear the sticky page header. */
    .fd-admin-panel {
        scroll-margin-top: calc(var(--fd-admin-sticky-offset, calc(var(--fd-space-3) * 2 + 2.75rem + var(--fd-space-4))) + var(--fd-space-3));
    }

    .fd-admin-page h2,
    .fd-admin-page h3 {
        scroll-margin-top: calc(var(--fd-admin-sticky-offset, calc(var(--fd-space-3) * 2 + 2.75rem + var(--fd-space-4))) + var(--fd-space-3));
    }

    .fd-admin-panel__title--sticky {
        position: sticky;
        /* Clears only the inner page header (sticky at top:0 of the scroll container);
           the outer shell header sits outside the scroll container and does not need compensation.
           slice adm32: tightened gap (space-3 → space-2) — header and panel title sit closer in the hierarchy.
           slice adm34: restored gap to space-3 and bumped z-index to 20 to fit the coarse 10-step sticky strata
           (page header 10, panel title 20, active nav 10) for clearer layer hand-off.
           slice adm37: pin below the CONDENSED header height — by the time a panel title sticks, the page
           header has condensed to its slim bar, so clearing the resting height would leave a visible gap. */
        top: calc(var(--fd-admin-page-header-h-condensed, calc(2 * var(--fd-space-3) + 1.75rem)) + var(--fd-space-3));
        z-index: 20;
        background-color: var(--fd-color-surface);
        margin-inline: calc(var(--fd-space-6) * -1);
        padding-inline: var(--fd-space-6);
        /* slice 28: breathing room so heading text isn't flush against border in stuck state */
        padding-block: var(--fd-space-2);
        border-bottom: 1px solid var(--fd-color-border);
        /* slice adm36: removed backdrop-blur — the surface fill is already opaque, and the blur
           risked the same see-through artifact as the page header. */
        /* slice adm32: weaker depth cue than page header — visually subordinate sticky layer */
        box-shadow: 0 2px 4px -4px color-mix(in srgb, var(--fd-color-border) 60%, transparent);
    }

    .fd-admin-page__breadcrumb,
    .fd-admin-page .fd-admin-state,
    .fd-admin-bookings__item {
        scroll-margin-top: var(--fd-admin-sticky-offset, calc(var(--fd-space-3) * 2 + 2.75rem + var(--fd-space-4)));
    }

    /* slice 28: give table wraps a scroll-margin so jump-to-section anchors clear the sticky page header. */
    .fd-admin-table-wrap {
        scroll-margin-top: calc(var(--fd-admin-sticky-offset, calc(var(--fd-space-3) * 2 + 2.75rem + var(--fd-space-4))) + var(--fd-space-3));
    }
}

/* ---------- slice adm37: slim-on-scroll sticky page header (>=1024px) ----------
   At rest (scrollTop 0): the generous header above — large Playfair title, breadcrumb,
   description. On scroll it condenses smoothly into a COMPACT pinned bar: smaller title,
   breadcrumb + right-side actions kept, the description fades + collapses away. Driven by a
   pure CSS scroll-driven animation on the same scroll container as the (folded-in) depth
   shadow — consistent with the existing scroll-timeline pattern in this file.

   FALLBACK (Safari/Firefox without animation-timeline, or prefers-reduced-motion): the
   header stays in its full resting state (the static rule above) — graceful, still fine.
   The condense is layered ONLY behind the @supports + no-preference gate. */
@media (min-width: 1024px) {
    @supports (animation-timeline: scroll()) {
        @media (prefers-reduced-motion: no-preference) {
            /* The header condenses over roughly the first ~96px of scroll (space-6 + space-4),
               then holds (`both`) the condensed end state for the rest of the page. One animation
               drives padding-block + min-height + the depth shadow together (folded-in P4 shadow). */
            .fd-admin-page__header {
                animation: fd-admin-page-header-condense linear both;
                animation-timeline: scroll(nearest);
                animation-range: 0 calc(var(--fd-space-6) + var(--fd-space-4));
                will-change: padding, min-height, box-shadow;
            }

            @keyframes fd-admin-page-header-condense {
                from {
                    padding-block: var(--fd-space-6) var(--fd-space-3);
                    min-height: var(--fd-admin-page-header-h);
                    box-shadow: 0 4px 6px -6px color-mix(in srgb, var(--fd-color-border) 80%, transparent);
                }
                to {
                    padding-block: var(--fd-space-3) var(--fd-space-3);
                    min-height: var(--fd-admin-page-header-h-condensed);
                    box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--fd-color-border) 80%, transparent);
                }
            }

            /* Title shrinks 3xl -> lg as it condenses. */
            .fd-admin-page__header .fd-admin-page__title {
                animation: fd-admin-page-title-shrink linear both;
                animation-timeline: scroll(nearest);
                animation-range: 0 calc(var(--fd-space-6) + var(--fd-space-4));
            }

            @keyframes fd-admin-page-title-shrink {
                from { font-size: var(--fd-text-3xl); }
                to   { font-size: var(--fd-text-lg); }
            }

            /* Description collapses + fades a touch earlier (over the first ~space-6 of scroll)
               so it's gone by the time the bar finishes condensing. The negative margin-block-start
               at the end cancels the title-block flex `gap` (space-3) so the collapsed row leaves
               no dead strip above the breadcrumb/title cluster. */
            .fd-admin-page__header .fd-admin-page__description-wrap {
                animation: fd-admin-page-description-collapse linear both;
                animation-timeline: scroll(nearest);
                animation-range: 0 var(--fd-space-6);
                will-change: max-height, opacity;
            }

            @keyframes fd-admin-page-description-collapse {
                from {
                    max-height: 6rem;
                    opacity: 1;
                    margin-block-start: 0;
                }
                to {
                    max-height: 0;
                    opacity: 0;
                    margin-block-start: calc(var(--fd-space-3) * -1);
                }
            }

            /* slice adm41: kill the content-height-boundary OSCILLATION on short pages.
               Root cause (general, not Bookings-specific): the sticky page header condenses by
               ~108px over the first ~96px of scroll. On a page whose content overflows the scroll
               container by LESS than that condense delta, every wheel tick condenses the header,
               which removes more scrollable height than the tick added → max-scroll drops below the
               current scrollTop → the browser CLAMPS scrollTop back toward 0 → the scroll-timeline
               reverses → the header re-expands → the content grows again → infinite loop (the header
               "rángatózik", worst scrolling up near the top). overflow-anchor:none already removed
               the *anchoring* feedback, but this clamp loop is purely a content-height boundary.

               Fix: reserve enough scrollable range that condensing can NEVER pull max-scroll below
               the timeline's end. We force the in-flow page content to be at least the full scroll
               viewport tall PLUS the condense delta plus a buffer, so `scrollHeight - clientHeight`
               always exceeds the 0→96px timeline range and scrollTop is never clamped backward.
               The reserve must exceed the FULL visual collapse, not just the min-height token delta:
               besides the ~32px min-height drop, the description-wrap collapses (max-height up to 6rem)
               and the title shrinks 3xl→lg, so the real header shrinks by ~108px. Reserving the whole
               resting header height (~116px) cleanly bounds that — plus a space-6 buffer for safety.
               This is a no-op on tall pages (dashboard, recipes) — their natural height already far
               exceeds the reserve — so the dashboard is not regressed. Gated inside @supports +
               no-preference so non-animating browsers (no condense → no loop) keep auto height. */
            .fd-admin-shell__main > .fd-admin-page {
                min-block-size: calc(100% + var(--fd-admin-page-header-h) + var(--fd-space-6));
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-admin-page,
    .fd-admin-page * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* === Ergonomic Refinements: scroll-affordance & rhythm === */
@media (min-width: 1024px) {
    /* P5: section dividers between consecutive h2/h3 blocks inside a panel.
       Only applied from the second heading onward so the leading heading retains
       the panel's own padding rhythm. */
    .fd-admin-panel > h2:not(:first-child),
    .fd-admin-panel > h3:not(:first-child) {
        margin-top: var(--fd-space-6);
        padding-top: var(--fd-space-4);
        border-top: 1px solid var(--fd-color-border);
    }
}