/* Rendella — Apple-native irány: rendszerfontot használ, sok fehér tér, lágy árnyékok */

:root {
    /* Apple-style light */
    --bg: #f2f2f7;
    --bg-card: #ffffff;
    --bg-soft: #f3f3f4;
    --bg-hover: #ebebed;
    --nav-active-bg: #d6d6dc;
    --border: #e5e5e7;
    --text: #1d1d1f;
    --text-muted: #86868b;
    --text-light: #aeaeb2;
    --accent: #007aff;
    --accent-hover: #0066d6;
    --accent-fade: rgba(0,122,255,0.10);

    /* Apple system palette (light) */
    --color-blue:    #007aff;
    --color-green:   #34c759;
    --color-orange:  #ff9500;
    --color-red:     #ff3b30;
    --color-purple:  #af52de;
    --color-pink:    #ff2d55;
    --color-teal:    #5ac8fa;
    --color-yellow:  #ffcc00;
    --color-indigo:  #5856d6;
    --color-mint:    #00c7be;
    --color-brown:   #a2845e;
    --color-gray:    #8e8e93;

    --tint-blue:    rgba(0, 122, 255, 0.12);
    --tint-green:   rgba(52, 199, 89, 0.14);
    --tint-orange:  rgba(255, 149, 0, 0.14);
    --tint-red:     rgba(255, 59, 48, 0.12);
    --tint-purple:  rgba(175, 82, 222, 0.14);
    --tint-pink:    rgba(255, 45, 85, 0.12);
    --tint-teal:    rgba(90, 200, 250, 0.16);
    --tint-yellow:  rgba(255, 204, 0, 0.18);
    --tint-indigo:  rgba(88, 86, 214, 0.14);
    --tint-mint:    rgba(0, 199, 190, 0.16);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --radius-xl:   18px;
    --success: #34c759;
    --warn: #ff9500;
    --warn-bg: #fff6e6;
    --warn-border: #ffd28a;
    --warn-text: #6e4a00;
    --danger: #ff3b30;
    --danger-bg: #fde9e8;
    --danger-border: #f5b8b3;
    --danger-text: #9c2620;
    --success-bg: #e6f8ec;
    --success-border: #b7e7c4;
    --success-text: #1f7a3a;
    --top-bar-bg: rgba(255,255,255,0.85);
    --top-bar-bg-solid: #fafafa;
    --top-h: 56px;
    --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    --radius: 12px;
    --radius-sm: 8px;

    /* Design-system skálák — ui-ux-pro-max terv, lásd design-system/MASTER.md §2 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
    --fs-cap: 12px;  --lh-cap: 1.3;
    --fs-sm: 13px;
    --fs-base: 15px; --lh-base: 1.47;
    --fs-md: 17px;   --fs-lg: 20px;   --fs-xl: 24px;   --fs-2xl: 32px;
    --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-topbar: 40;
    --z-overlay: 100; --z-modal: 200; --z-toast: 1000;
    --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms;
    color-scheme: light;
}

/* Sötét-mód értékek — közös definíció @media (auto) ÉS html.theme-dark esetére */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light):not(.theme-dark) {
        --bg: #000000;
        --bg-card: #1c1c1e;
        --bg-soft: #2c2c2e;
        --bg-hover: #3a3a3c; --nav-active-bg: #4a4a4d;
        --border: #38383a;
        --text: #f5f5f7;
        --text-muted: #98989d;
        --text-light: #636366;
        --accent: #0a84ff;
        --accent-hover: #409cff;
        --accent-fade: rgba(10,132,255,0.18);
        --color-blue:    #0a84ff; --color-green:   #30d158; --color-orange:  #ff9f0a;
        --color-red:     #ff453a; --color-purple:  #bf5af2; --color-pink:    #ff375f;
        --color-teal:    #64d2ff; --color-yellow:  #ffd60a; --color-indigo:  #5e5ce6;
        --color-mint:    #66d4cf; --color-brown:   #ac8e68; --color-gray:    #98989d;
        --tint-blue:    rgba(10, 132, 255, 0.22); --tint-green:   rgba(48, 209, 88, 0.22);
        --tint-orange:  rgba(255, 159, 10, 0.22); --tint-red:     rgba(255, 69, 58, 0.22);
        --tint-purple:  rgba(191, 90, 242, 0.22); --tint-pink:    rgba(255, 55, 95, 0.22);
        --tint-teal:    rgba(100, 210, 255, 0.22); --tint-yellow:  rgba(255, 214, 10, 0.22);
        --tint-indigo:  rgba(94, 92, 230, 0.22); --tint-mint:    rgba(102, 212, 207, 0.22);
        --success: #30d158; --warn: #ff9f0a;
        --warn-bg: #3a2e1a; --warn-border: #5c4a25; --warn-text: #ffd28a;
        --danger: #ff453a; --danger-bg: #3a201e; --danger-border: #5c2f2a; --danger-text: #ffb5af;
        --success-bg: #1a3a26; --success-border: #285c3c; --success-text: #a7e7be;
        --top-bar-bg: rgba(28,28,30,0.85);
        --top-bar-bg-solid: #1c1c1e;
        --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
        --shadow-lg: 0 6px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
        color-scheme: dark;
    }
}
/* Explicit sötét-mód (felhasználói választás) — ugyanazok az értékek, feltétel nélkül */
html.theme-dark {
    --bg: #000000;
    --bg-card: #1c1c1e;
    --bg-soft: #2c2c2e;
    --bg-hover: #3a3a3c; --nav-active-bg: #4a4a4d;
    --border: #38383a;
    --text: #f5f5f7;
    --text-muted: #98989d;
    --text-light: #636366;
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --accent-fade: rgba(10,132,255,0.18);
    --color-blue:    #0a84ff; --color-green:   #30d158; --color-orange:  #ff9f0a;
    --color-red:     #ff453a; --color-purple:  #bf5af2; --color-pink:    #ff375f;
    --color-teal:    #64d2ff; --color-yellow:  #ffd60a; --color-indigo:  #5e5ce6;
    --color-mint:    #66d4cf; --color-brown:   #ac8e68; --color-gray:    #98989d;
    --tint-blue:    rgba(10, 132, 255, 0.22); --tint-green:   rgba(48, 209, 88, 0.22);
    --tint-orange:  rgba(255, 159, 10, 0.22); --tint-red:     rgba(255, 69, 58, 0.22);
    --tint-purple:  rgba(191, 90, 242, 0.22); --tint-pink:    rgba(255, 55, 95, 0.22);
    --tint-teal:    rgba(100, 210, 255, 0.22); --tint-yellow:  rgba(255, 214, 10, 0.22);
    --tint-indigo:  rgba(94, 92, 230, 0.22); --tint-mint:    rgba(102, 212, 207, 0.22);
    --success: #30d158; --warn: #ff9f0a;
    --warn-bg: #3a2e1a; --warn-border: #5c4a25; --warn-text: #ffd28a;
    --danger: #ff453a; --danger-bg: #3a201e; --danger-border: #5c2f2a; --danger-text: #ffb5af;
    --success-bg: #1a3a26; --success-border: #285c3c; --success-text: #a7e7be;
    --top-bar-bg: rgba(28,28,30,0.85);
    --top-bar-bg-solid: #1c1c1e;
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
    color-scheme: dark;
}
/* Explicit világos-mód — felülírja még a prefers-color-scheme: dark-ot is */
html.theme-light {
    color-scheme: light;
}

* { box-sizing: border-box; }

/* Univerzális hidden — felülír minden display: flex / grid / block-ot */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.47;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}
body { overflow-x: hidden; }

/* SVG ikonok */
.icon {
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

/* Tabular figures — pénz / időzítő oszlopokhoz (MASTER.md §2.2) */
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Empty state pattern */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}
.empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--bg-soft);
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.empty-state p { margin: 0; line-height: 1.4; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 14px; }
h3 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 8px; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }

/* Top bar */
.top {
    background: var(--top-bar-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top);
}
.top-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.brand-dot {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-orange), var(--color-pink) 60%, var(--color-purple));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.02em;
    box-shadow: 0 2px 6px rgba(255, 45, 85, 0.30);
}
.brand-dot::after {
    content: "R";
}
.brand-dot-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 28px; box-shadow: 0 6px 16px rgba(255, 45, 85, 0.30); }
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.nav { display: flex; gap: 4px; margin-left: 12px; flex: 1; align-items: center; }
.nav a {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.nav a:hover { color: var(--text); background: var(--bg-soft); }
.nav a.active { color: var(--text); background: var(--nav-active-bg); font-weight: 600; }
.nav a .icon { opacity: 0.85; }
.nav a.muted { color: var(--text-light); cursor: not-allowed; }
.nav-user-mobile { display: none; }

/* Hamburger gomb */
.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    margin-left: auto;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* === REPORT SECTIONS (Napi zárás) === */

.report-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 18px;
    min-width: 0;
}
.report-section-head {
    padding: 12px 18px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.report-section-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.report-section-head > * { position: relative; z-index: 1; }
.report-section-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.22);
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.report-section-head h2 {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero-count {
    background: rgba(255,255,255,0.25);
    border-radius: 100px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.report-section-body {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.report-empty {
    padding: 28px 18px;
    text-align: center;
    margin: 0;
}

/* Táblázat (összeg-oszlopok jobbra-zárva, tabular-nums) */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.report-table th, .report-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
}
.report-table th {
    text-align: left;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--bg-soft);
}
.report-table th.num, .report-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table tfoot td {
    background: var(--bg-soft);
    font-weight: 700;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 2px solid var(--border);
    border-bottom: none;
    color: var(--text);
}

/* Fizetési-mód chip — color-coded */
.method-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    margin-right: 4px;
    white-space: nowrap;
}
.method-chip:last-child { margin-right: 0; }
.method-green  { background: var(--tint-green);  color: var(--color-green); }
.method-blue   { background: var(--tint-blue);   color: var(--color-blue); }
.method-orange { background: var(--tint-orange); color: var(--color-orange); }
.method-purple { background: var(--tint-purple); color: var(--color-purple); }
.method-teal   { background: var(--tint-teal);   color: var(--color-teal); }
.method-gray   { background: var(--bg-soft);     color: var(--text-muted); }

/* ÁFA-kulcs chip */
.vat-rate-chip {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--tint-purple);
    color: var(--color-purple);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Helyben/Elvitel chip */
.dine-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: -5px;
}
.dine-here     { background: var(--tint-green); color: var(--color-green); }
.dine-takeaway { background: var(--tint-orange); color: var(--color-orange); }

.receipt-no {
    background: var(--bg-soft);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.time-cell {
    font-variant-numeric: tabular-nums;
}
.time-day {
    display: inline-block;
    background: var(--tint-orange);
    color: var(--color-orange);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin-right: 4px;
    font-size: 11px;
}
.time-dur {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

/* === Nyitott rendelések lista (clickable cards) === */
.orders-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.orders-list > li { display: block; }
.order-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.orders-list > li:last-child .order-row { border-bottom: none; }
.order-row:hover { background: var(--bg-soft); }
.order-row:active { background: var(--bg-hover); }
.order-row-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-orange);
    color: var(--color-orange);
    border-radius: 12px;
}
.order-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.order-row-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    flex-wrap: wrap;
}
.order-row-title .order-room { color: var(--text-muted); }
.order-row-title strong { font-weight: 700; }
.order-row-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    align-items: center;
}
.order-row-meta .icon { vertical-align: -2px; opacity: 0.8; }
.order-row-total {
    text-align: right;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
.order-row-arrow {
    color: var(--text-light);
    flex-shrink: 0;
    display: inline-flex;
}

.report-empty-state { padding: 32px 18px; margin: 0; }

@media (max-width: 600px) {
    .order-row { padding: 12px 14px; gap: 10px; }
    .order-row-icon { width: 36px; height: 36px; }
    .order-row-title { font-size: 14px; }
    .order-row-total { font-size: 15px; }
    .order-row-arrow { display: none; }
}

/* === Bizonylat-preview modal — overlay (NEM <dialog>) === */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    animation: modal-fade 0.2s ease-out;
}
.modal-overlay[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }
.receipt-modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    width: min(420px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    animation: modal-pop 0.25s var(--ease-spring);
}
.receipt-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.receipt-modal-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.receipt-modal-title strong {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}
.receipt-modal-actions { display: flex; gap: 4px; }
.receipt-modal-card iframe {
    flex: 1;
    width: 100%;
    min-height: 480px;
    height: 70vh;
    border: 0;
    background: var(--bg);
}
@keyframes modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 600px) {
    .receipt-modal-card { width: 100%; max-height: 100%; }
    .receipt-modal-card iframe { min-height: 320px; height: calc(100vh - 100px); }
}

/* === Bizonylat-preview modal (régi <dialog> — DEPRECATED, hagyom kompat-ban) === */
.receipt-modal {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    overflow: hidden;
    width: min(400px, 92vw);
    max-height: 86vh;
}
/* Fallback: showModal nélkül centrálva */
.receipt-modal[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}
body.modal-fallback-open { overflow: hidden; }
body.modal-fallback-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99;
}
.receipt-modal::backdrop {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.receipt-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}
.receipt-modal-head strong {
    color: var(--text);
    font-weight: 600;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.receipt-modal-actions { display: flex; gap: 4px; }
.receipt-modal iframe {
    display: block;
    width: 100%;
    height: 60vh;
    max-height: 600px;
    border: 0;
    background: var(--bg);
}
@media (max-width: 600px) {
    .receipt-modal {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        box-sizing: border-box;
    }
    .receipt-modal iframe { height: calc(100vh - 120px); max-height: none; }
}

/* === PAGE HERO (gradient header minden oldalra) === */

.page-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: var(--radius-xl);
    padding: 18px 22px;
    margin-bottom: 22px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
/* Soft highlight a tetején, mint az iOS app banner-eken */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }

.page-hero-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.22);
    border-radius: 16px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
}
.page-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-hero-back {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    text-decoration: none;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    font-weight: 500;
}
.page-hero-back:hover { color: #fff; }
.page-hero h1 {
    color: #fff;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.page-hero p {
    color: rgba(255,255,255,0.88);
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}
.page-hero-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Action-gombok glassy felülbírálása csak a hero-n belül */
.page-hero .primary-btn {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.30);
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.page-hero .primary-btn:hover { background: rgba(255,255,255,0.30); }
.page-hero .ghost-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
.page-hero .ghost-btn:hover { background: rgba(255,255,255,0.25); }
.page-hero .icon-btn {
    background: transparent;
    color: rgba(255,255,255,0.88);
}
.page-hero .icon-btn:hover { background: rgba(255,255,255,0.20); color: #fff; }

/* Mode-toggle a hero-n (POS-en): üveg-pill */
.page-hero .mode-toggle {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.page-hero .mode-btn {
    color: rgba(255,255,255,0.78);
    background: transparent;
}
.page-hero .mode-btn.active {
    background: rgba(255,255,255,0.95);
    color: #1d1d1f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ===== Asztal-áthelyezés / átültetés ===== */

/* Hero „Áthelyezés" gomb — a mode-toggle glass-stílusát követi */
.hero-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-action-btn:hover { background: rgba(255,255,255,0.30); }

/* Csipogó-szám mező a hero-ban (önkiszolgáló mód) — glass stílus, mint a hero-action */
.pager-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px 6px 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pager-field-icon { display: inline-flex; color: rgba(255,255,255,0.85); }
.pager-input {
    width: 84px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 2px;
    outline: none;
}
.pager-input::placeholder { color: rgba(255,255,255,0.7); font-weight: 500; }
.pager-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    color: #1d1d1f;
    cursor: pointer;
}
.pager-save:hover { background: #fff; }

/* Csipogó-szám a KDS ticket-fejen */
.kds-pager {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--color-green) 20%, transparent);
    color: var(--color-green);
    font-size: 13px;
    font-weight: 800;
    vertical-align: middle;
}
.table-tooltip-pager strong { color: var(--color-green); }

/* Foglalás-badge a térkép-asztalon (jobb felső sarok) + halvány gyűrű */
.table-block.has-res { box-shadow: 0 4px 10px rgba(0,122,255,0.25), 0 0 0 2px var(--color-purple); }
.table-res-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 100px;
    background: var(--color-purple);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.table-tooltip-res strong { color: var(--color-purple); }
.table-tooltip-move {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--accent-fade);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}
.table-tooltip-move:hover { background: var(--accent); color: #fff; }

/* Lista-nézet foglalás-jelzés */
.tli-res {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--color-purple) 16%, transparent);
    color: var(--color-purple);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
.table-list-item.has-order .tli-res { background: rgba(255,255,255,0.22); color: #fff; }
.table-list-item.has-res { box-shadow: inset 3px 0 0 var(--color-purple); }

/* Áthelyezés-modal */
.move-dialog { min-width: 340px; max-width: 560px; width: calc(100vw - 32px); }
.move-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.move-dialog-head h2 { margin: 0; font-size: 19px; }
.move-dialog-hint { margin: 0 0 14px; }
.move-room { margin-bottom: 14px; }
.move-room-name {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.move-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.move-tile-form { margin: 0; display: contents; }
.move-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 60px;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}
.move-tile small { font-size: 11px; font-weight: 600; opacity: 0.8; }
.move-tile.is-free {
    border-color: color-mix(in srgb, var(--color-green) 50%, var(--border));
    background: color-mix(in srgb, var(--color-green) 8%, transparent);
}
.move-tile.is-free:hover { background: var(--color-green); color: #fff; border-color: var(--color-green); }
.move-tile.is-free small { color: var(--color-green); }
.move-tile.is-free:hover small { color: rgba(255,255,255,0.9); }
/* is-occupied (NEM is-busy — az globális töltés-spinner osztály!) */
.move-tile.is-occupied {
    border-color: color-mix(in srgb, var(--color-orange) 50%, var(--border));
    background: color-mix(in srgb, var(--color-orange) 10%, transparent);
}
.move-tile.is-occupied:hover { background: var(--color-orange); color: #fff; border-color: var(--color-orange); }
.move-tile.is-occupied small { color: var(--color-orange); }
.move-tile.is-occupied:hover small { color: rgba(255,255,255,0.9); }
.move-tile.is-current {
    opacity: 0.55;
    cursor: default;
    border-style: dashed;
}
.res-reseat { margin-top: 8px; }

/* Backref-link a hero-ban legyen szembetűnőbb */
.page-hero p a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.4);
    text-underline-offset: 2px;
}
.page-hero p a:hover { text-decoration-color: rgba(255,255,255,1); }

/* Színpár modifierek — oldalanként eltérő gradient */
.hero-orange  { background: linear-gradient(135deg, var(--color-orange), var(--color-red) 55%, var(--color-purple)); }
.hero-red     { background: linear-gradient(135deg, var(--color-red),    var(--color-orange) 60%, var(--color-yellow)); }
.hero-green   { background: linear-gradient(135deg, var(--color-green),  var(--color-teal) 60%, var(--color-blue)); }
.hero-mint    { background: linear-gradient(135deg, var(--color-mint),   var(--color-green) 60%, var(--color-teal)); }
.hero-blue    { background: linear-gradient(135deg, var(--color-blue),   var(--color-indigo) 55%, var(--color-purple)); }
.hero-teal    { background: linear-gradient(135deg, var(--color-teal),   var(--color-blue) 55%, var(--color-indigo)); }
.hero-indigo  { background: linear-gradient(135deg, var(--color-indigo), var(--color-purple) 55%, var(--color-pink)); }
.hero-purple  { background: linear-gradient(135deg, var(--color-purple), var(--color-pink) 55%, var(--color-red)); }
.hero-pink    { background: linear-gradient(135deg, var(--color-pink),   var(--color-purple) 60%, var(--color-indigo)); }
.hero-yellow  { background: linear-gradient(135deg, var(--color-yellow), var(--color-orange) 60%, var(--color-red)); }
.hero-gray    { background: linear-gradient(135deg, var(--color-gray),   var(--color-blue)); }

@media (max-width: 600px) {
    .page-hero {
        padding: 14px 16px;
        gap: 12px;
        border-radius: 14px;
        margin-bottom: 18px;
    }
    .page-hero-icon { width: 44px; height: 44px; border-radius: 12px; }
    .page-hero h1 { font-size: 18px; }
    .page-hero p { font-size: 13px; }
    .page-hero-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }
    .page-hero-actions > .primary-btn { flex: 1; justify-content: center; }
}

/* === PWA install banner === */

.install-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--color-orange), var(--color-pink) 60%, var(--color-purple));
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 16px 18px;
    margin-bottom: 22px;
    box-shadow: 0 6px 18px rgba(255, 45, 85, 0.25), 0 1px 3px rgba(0,0,0,0.06);
}
.install-banner-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.22);
    border-radius: 14px;
    color: #fff;
}
.install-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.install-banner-text strong { font-size: 15px; font-weight: 700; }
.install-banner-text .muted { color: rgba(255,255,255,0.85); }
.install-banner-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.install-banner .primary-btn {
    background: rgba(255,255,255,0.20);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.28);
    font-weight: 600;
}
.install-banner .primary-btn:hover {
    background: rgba(255,255,255,0.28);
}
.install-banner .icon-btn {
    background: transparent;
    color: rgba(255,255,255,0.85);
}
.install-banner .icon-btn:hover {
    background: rgba(255,255,255,0.20);
    color: #fff;
}

@media (max-width: 600px) {
    .install-banner { flex-wrap: wrap; padding: 14px; }
    .install-banner-text { flex: 1 1 calc(100% - 64px); }
    .install-banner-actions { width: 100%; justify-content: flex-end; }
    .install-banner-actions .primary-btn { flex: 1; justify-content: center; }
}

/* Install instrukciók dialog */
.install-dialog { max-width: 440px; }
.install-steps {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    counter-reset: step;
}
.install-steps li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.install-steps li:last-child { border-bottom: none; }
.step-num {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.step-icon {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    background: var(--bg-soft);
    border-radius: 6px;
    text-align: center;
    line-height: 24px;
    padding: 0 4px;
    font-size: 14px;
    margin: 0 2px;
    vertical-align: middle;
}

/* === Étlap prediktív keresés === */
.menu-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 440px;
    display: flex;
    align-items: center;
}
.menu-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}
.menu-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.15s, background 0.15s;
}
.menu-search-input:focus {
    outline: none;
    border-color: var(--accent);
}
.menu-search-input::-webkit-search-cancel-button { display: none; }
.menu-search-clear {
    position: absolute;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-muted);
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 22px;
}
.menu-search-clear:hover { background: var(--bg-hover); color: var(--text); }

.category-strip.search-active,
.group-tabs.search-active,
.menu-groups.search-active,
.menu-cats.search-active { display: none; }
.group-tabs-menu { margin-bottom: 10px; }

/* === Étlap — Csoportok és Kategóriák szűrő-sávja (új design) === */
.menu-groups,
.menu-cats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    min-width: 0;
}
.menu-level-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 88px;
}
.menu-level-label .icon { opacity: 0.7; }

/* Csoportok — primary segmented pill */
.menu-groups-pills {
    display: inline-flex;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 4px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: none;
}
.menu-groups-pills::-webkit-scrollbar { display: none; }
.menu-pill {
    padding: 8px 14px;
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--ease-out), color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.menu-pill:hover { color: var(--text); }
.menu-pill.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.menu-pill-count {
    background: rgba(0,0,0,0.06);
    color: var(--text-muted);
    border-radius: 100px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.menu-pill.active .menu-pill-count {
    background: var(--accent-fade);
    color: var(--accent);
}
@media (prefers-color-scheme: dark) {
    .menu-pill-count { background: rgba(255,255,255,0.10); }
}
html.theme-dark .menu-pill-count { background: rgba(255,255,255,0.10); }

/* Kategóriák — secondary chip-strip apple-fade aktív állapottal */
.menu-cats-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.menu-cats-chips::-webkit-scrollbar { display: none; }
.menu-cat-chip {
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--bg-soft);
    color: var(--text);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.menu-cat-chip:hover {
    background: var(--bg-hover);
    color: var(--text);
}
.menu-cat-chip.active {
    background: var(--accent-fade);
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
.menu-cat-count {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.menu-cat-chip.active .menu-cat-count { color: var(--accent); }

/* Mobil: a level-label rejtve (helyhiány), a sávok teljes szélesség */
@media (max-width: 600px) {
    .menu-level-label { display: none; }
    .menu-groups, .menu-cats { gap: 0; }
    /* A segmented-control több sorba tördelve "léggömbbé" válna a 100px rádiusztól;
       mobilon rendezett lekerekített panel (16px), tágasabb sor-köz, így minden
       csoport látszik és nem torzul. Az aktív pill stadion-formája tisztán beleül. */
    .menu-groups-pills {
        flex-wrap: wrap;
        overflow-x: visible;
        border-radius: 16px;
        gap: 6px;
        padding: 6px;
    }
    .menu-cats-chips { flex-wrap: wrap; overflow-x: visible; }
}

.product-group-head {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 16px 0 10px;
    padding-left: 4px;
}
.product-group:first-of-type .product-group-head { margin-top: 0; }
.product-group-empty { background: transparent; padding: 24px 0; }

/* === POS asztal-választó lista-nézet === */
.tables-list { display: none; }
.tables-list-head {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 16px 0 10px;
}
.tables-list-items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.tables-list-items li { margin-bottom: 8px; }
.tables-list-items li form { display: block; margin: 0; }
.table-list-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-align: left;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.1s var(--ease-spring), box-shadow 0.15s;
    min-height: 60px;
}
.table-list-item:active { transform: scale(0.98); }
.table-list-item.has-order {
    background: linear-gradient(135deg, var(--color-orange), var(--color-pink) 80%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255,149,0,0.28);
}
.tli-label { font-weight: 700; flex-shrink: 0; min-width: 90px; font-size: 16px; }
.tli-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text-muted);
}
.table-list-item.has-order .tli-meta { color: rgba(255,255,255,0.92); }
.tli-count { font-weight: 500; }
.tli-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.tli-arrow { opacity: 0.5; flex-shrink: 0; }
.table-list-item.has-order .tli-arrow { opacity: 0.85; }
.tables-list-empty .table-list-item { background: var(--bg-soft); }


.user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 4px 4px 4px 4px;
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.user-info { display: flex; flex-direction: column; line-height: 1.15; }
.user-name { font-size: 13px; font-weight: 600; }
.user-role { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.logout-form { display: inline-flex; }

/* Generic button reset (nem ad méretet — minden specifikus osztály saját size-zal) */
button {
    font: inherit;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

/* Standard touch-button osztályok */
.primary-btn, .ghost-btn, .danger-btn {
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 9px 16px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), border 0.15s var(--ease-out),
                transform 0.15s var(--ease-spring), opacity 0.15s;
}
.primary-btn:active, .ghost-btn:active, .danger-btn:active {
    transform: scale(0.97);
}
.primary-btn {
    background: var(--accent);
    color: #fff;
}
.primary-btn:hover { background: var(--accent-hover); }

.ghost-btn {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.ghost-btn:hover { background: var(--bg-soft); }

.danger-btn {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
}
.danger-btn:hover { background: var(--danger-bg); }

.icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn .icon { display: block; }

/* Apple-szerű fókusz-gyűrű (billentyűzet-navigáció) — minden gombra egységesen */
.primary-btn:focus-visible, .ghost-btn:focus-visible, .danger-btn:focus-visible,
.icon-btn:focus-visible, .pay-tile:focus-visible, .tip-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Tapintható eszközökön min. 44px touch-target (Apple HIG) */
@media (pointer: coarse) {
    .primary-btn, .ghost-btn, .danger-btn { min-height: 44px; }
    .icon-btn { width: 44px; height: 44px; }
    /* KDS per-tétel "kész" pipa — érintőn 44px-es kényelmes célpont */
    .kds-item-ready { width: 44px; height: 44px; }
}

/* Main */
.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

.page-head { margin-bottom: 22px; }
.page-head h1 + p { margin: 6px 0 0; line-height: 1.4; }
.page-head .muted.small a { font-weight: 500; }

/* Flash */
.flash {
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid;
}
.flash-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.flash-error   { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.flash-warn    { background: var(--warn-bg);    border-color: var(--warn-border);    color: var(--warn-text); }

/* Callout */
.callout {
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid;
}
.callout-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }

/* Callout, kattintható (linkként viselkedik) */
.callout-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .12s var(--ease-out);
}
.callout-link:hover  { filter: brightness(0.97); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.callout-link:active { transform: scale(0.995); }
.callout-arrow {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    flex-shrink: 0;
    opacity: 0.75;
}

/* Card */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 20px;
}

/* Stats grid */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 18px 20px;
    color: var(--text);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat:active { transform: translateY(0); }
.stat-muted { opacity: 0.7; pointer-events: none; }
.stat-num {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tint-blue);
    color: var(--color-blue);
}
.stat-blue    .stat-icon { background: var(--tint-blue);    color: var(--color-blue); }
.stat-green   .stat-icon { background: var(--tint-green);   color: var(--color-green); }
.stat-orange  .stat-icon { background: var(--tint-orange);  color: var(--color-orange); }
.stat-red     .stat-icon { background: var(--tint-red);     color: var(--color-red); }
.stat-purple  .stat-icon { background: var(--tint-purple);  color: var(--color-purple); }
.stat-pink    .stat-icon { background: var(--tint-pink);    color: var(--color-pink); }
.stat-teal    .stat-icon { background: var(--tint-teal);    color: var(--color-teal); }
.stat-indigo  .stat-icon { background: var(--tint-indigo);  color: var(--color-indigo); }

/* Todo + progress */
.todo { list-style: none; padding: 0; margin: 0; }
.todo li {
    padding: 6px 0;
    color: var(--text-muted);
    font-size: 14px;
}
.todo li::before { content: "○  "; }
.todo li.done {
    color: var(--text);
}
.todo li.done::before { content: "●  "; color: var(--success); }

.progress-block { margin: 18px 0; }
.progress-block:first-of-type { margin-top: 6px; }
.progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 12px;
}
.progress-title { font-weight: 600; font-size: 15px; }
.progress-meta  { font-size: 12px; color: var(--text-muted); }
.progress-track {
    height: 6px;
    background: var(--bg-soft);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--accent));
    border-radius: 100px;
    transition: width 0.3s ease;
}

/* Login */
/* === LOGIN — iOS-lockscreen-szerű letisztult layout, kártya-keret nélkül === */
.login-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    box-sizing: border-box;
}
.login-card {
    width: 100%;
    max-width: 320px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
}
.login-brand .brand-dot-lg {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 26px;
    box-shadow: 0 10px 30px rgba(255, 45, 85, 0.22);
}
.login-brand h1 {
    font-size: 24px;
    margin: 14px 0 2px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.login-brand p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}
/* A PIN-KÓD pill redundáns a 4 pont mellett — kikapcsolva */
.login-pin-hint { display: none; }

.login-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.login-form label { text-align: center; font-size: 12px; color: var(--text-muted); }

/* PIN-display: nagyobb, finomabb pontok */
.pin-display {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 4px 0;
}
.pin-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--text-muted);
    transition: background 0.2s var(--ease-spring),
                border-color 0.2s var(--ease-out),
                transform 0.2s var(--ease-spring);
}
.pin-dot.filled {
    background: var(--text);
    border-color: var(--text);
    transform: scale(1.0);
}

/* Numpad — iOS-szerű, tömör, fix gombméret, automatikus középre igazítás */
.numpad {
    display: grid;
    grid-template-columns: repeat(3, 68px);
    gap: 14px;
    justify-content: center;
    margin: 6px auto 0;
}
.num-key {
    width: 68px;
    height: 68px;
    border: none;
    background: var(--bg-soft);
    color: var(--text);
    border-radius: 50%;
    font-size: 26px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, transform 0.08s;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.num-key:hover  { background: var(--bg-hover); }
.num-key:active { background: var(--accent-fade); transform: scale(0.92); }
.num-key.num-aux {
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
}
.num-key.num-aux:hover  { background: var(--bg-soft); color: var(--text); }
.num-key.num-aux:active { background: var(--accent-fade); transform: scale(0.92); }

.login-form .big-btn {
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
    margin-top: 8px;
    transition: background 0.2s var(--ease-out), color 0.2s, opacity 0.2s;
}
.login-form .big-btn:disabled {
    background: var(--bg-soft);
    color: var(--text-light);
    opacity: 1;
    cursor: not-allowed;
}
.default-pin-note {
    margin-top: 22px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: none;
    padding-top: 0;
    line-height: 1.4;
}

/* Kompaktabb mobil portrait / közepes viewport */
@media (max-width: 380px), (max-height: 720px) {
    .numpad { grid-template-columns: repeat(3, 60px); gap: 10px; }
    .num-key { width: 60px; height: 60px; font-size: 22px; }
    .login-brand .brand-dot-lg { width: 48px; height: 48px; font-size: 22px; }
    .login-brand h1 { font-size: 22px; margin-top: 12px; }
    .login-form { margin-top: 18px; gap: 14px; }
}

/* Extrém alacsony viewport (laptop + Windows-taskbar) */
@media (max-height: 560px) {
    .login-wrap { padding: 10px; align-items: flex-start; }
    .login-brand .brand-dot-lg { width: 40px; height: 40px; font-size: 18px; box-shadow: none; }
    .login-brand h1 { font-size: 18px; margin-top: 8px; }
    .login-brand p { font-size: 12px; }
    .login-form { margin-top: 14px; gap: 10px; }
    .pin-display { gap: 14px; }
    .pin-dot { width: 11px; height: 11px; }
    .numpad { grid-template-columns: repeat(3, 52px); gap: 8px; }
    .num-key { width: 52px; height: 52px; font-size: 19px; }
    .num-key.num-aux { font-size: 16px; }
    .login-form .big-btn { padding: 10px 14px; font-size: 14px; margin-top: 4px; }
    .default-pin-note { display: none; }
}

/* Forms */
/* Egységes beviteli-mező ALAP-stílus (Apple-szerű) — :where() = 0 specificitás, így BÁRMELY
   komponens-osztály (pl. .menu-search-input, .set-field) szabadon felülírja a paddingot/stílust.
   Megfogja a type nélküli inputot is + az email/search/tel/url/time típusokat. */
:where(input:not([type]),
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="time"], input[type="datetime-local"],
select, textarea) {
    font: inherit;
    font-size: 15px;
    box-sizing: border-box;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
:where(input:not([type]):focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="email"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus,
select:focus, textarea:focus) {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--accent-fade);
}
:where(input:not([type]),
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"],
textarea)::placeholder { color: var(--text-light); }

.stack-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.stack-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.stack-form label.check { flex-direction: row; align-items: center; gap: 8px; }

/* === ÉTLAP V2 === */

.menu-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.menu-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Étlap-eszközök lenyíló almenü (natív <details>) */
.menu-tools { position: relative; }
.menu-tools > summary { list-style: none; cursor: pointer; user-select: none; }
.menu-tools > summary::-webkit-details-marker { display: none; }
.menu-tools-caret { display: inline-flex; transition: transform .2s var(--ease-out); }
.menu-tools-caret .icon { opacity: .7; }
.menu-tools[open] .menu-tools-caret { transform: rotate(180deg); }
.menu-tools-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
    min-width: 210px; max-width: calc(100vw - 32px);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.menu-tools-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; padding: 9px 12px; border: 0; background: transparent;
    color: var(--text); border-radius: var(--radius-sm);
    font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.menu-tools-item:hover { background: var(--bg-soft); }
.menu-tools-item .icon { color: var(--text-muted); flex: 0 0 auto; }
.menu-tools-sep { height: 1px; background: var(--border); margin: 4px 2px; }

.category-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 4px;
}

/* product-cards GRID */
.product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.product-card.inactive { opacity: 0.55; }

.product-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-soft);
    overflow: hidden;
}
.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.product-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.product-card-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.product-card-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
}
.product-card-price {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.product-card-meta { display: flex; gap: 4px; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge-muted    { background: rgba(0,0,0,0.55); color: #fff; position: absolute; top: 10px; right: 10px; }
.badge-required { background: var(--tint-red); color: var(--color-red); }

/* Termék-szerkesztő */
.product-edit-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.product-form { margin-bottom: 80px; }
.product-edit-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .product-edit-grid { grid-template-columns: 1fr; }
}

.dlg-row {
    display: flex;
    gap: 10px;
}
.dlg-row .dlg-field { margin-bottom: 14px; }

.dlg-field textarea { resize: vertical; min-height: 70px; line-height: 1.45; }   /* a többit a globális egységes input-stílus adja */

.toggle-row {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
}

/* Image uploader */
.image-uploader {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--bg-soft);
    transition: border-color 0.15s, background 0.15s;
}
.image-uploader.drag-over {
    border-color: var(--accent);
    background: var(--accent-fade);
}
.image-uploader img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}
.image-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-light);
    padding: 20px;
}
.image-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Attached modifier groups */
.attached-groups {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.attached-groups:empty {
    border-style: dashed;
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
}
.attached-groups:empty::before {
    content: "Még nincs csatolt csoport. Válassz egyet alább.";
}
.attached-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.attached-group:last-child { border-bottom: none; }
.ag-info {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.group-picker {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.group-picker select { flex: 1; }
.group-picker-extra { margin-top: 4px; }

.product-edit-actions {
    position: sticky;
    bottom: 0;
    background: var(--top-bar-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
    padding: 12px 0;
    display: flex;
    gap: 8px;
    margin: 20px -20px 0;
    padding-left: 20px;
    padding-right: 20px;
    flex-wrap: wrap;
}

/* Modifier group cards */
.group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.group-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 16px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}
.group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.group-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.group-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* Options table (a group szerkesztőben) */
.options-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.options-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
}
.options-table th.num { text-align: right; }
.options-table td { padding: 6px 4px; }
.options-table td.num input { text-align: right; font-variant-numeric: tabular-nums; }

/* Old inline menu — backward compat marad-e? */
/* Menu page */
.menu-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
}
@media (max-width: 720px) {
    .menu-layout { grid-template-columns: 1fr; }
}

.cat-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
}
.cat-list h2 { margin-bottom: 10px; }
.cat-list ul { list-style: none; margin: 0; padding: 0; }
.cat-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    margin-bottom: 2px;
}
.cat-list li a:hover { background: var(--bg-soft); }
.cat-list li.active a { background: var(--accent); color: #fff; }
.cat-list li.active a .muted { color: rgba(255,255,255,0.7); }

.add-form {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.add-form summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 14px;
    padding: 4px 0;
}
.add-form form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.add-form label { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.add-form label.check { flex-direction: row; align-items: center; gap: 8px; }
.inline-form { display: inline; margin-top: 8px; }

.product-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    min-height: 200px;
}

/* Tables (settings, backup, etc.) */
table.products, table.users {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
table.products th, table.users th {
    text-align: left;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
}
table.products td, table.users td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}
table.products th.num, table.products td.num,
table.users th.num,    table.users td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
table.products td.num input,
table.users td.num input { text-align: right; }

.product-row-form { display: contents; }

.check { display: inline-flex; align-items: center; gap: 6px; }

/* === POS termek-kártyák: busy/free stat-tal === */
.rooms-bar-pos {
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
}
.room-tabs-pos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.room-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    min-width: 180px;
    cursor: pointer;
    transition: transform 0.15s var(--ease-spring), box-shadow 0.15s var(--ease-out);
    position: relative;
    overflow: hidden;
}
.room-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.room-card.active {
    background: linear-gradient(135deg, var(--color-orange), var(--color-red) 60%, var(--color-purple));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(255, 149, 0, 0.32);
}
.room-card.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.20), transparent 60%);
    pointer-events: none;
}
.room-card.active > * { position: relative; z-index: 1; }
.room-card-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    padding-left: 2px;
}

/* Két stat-blokk a card-on belül */
.room-card-stats {
    display: flex;
    gap: 6px;
}
.rstat {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    transition: background 0.15s;
}
.rstat strong {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.rstat small {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}
.rstat-busy { background: var(--tint-red); color: var(--color-red); }
.rstat-free { background: var(--tint-green); color: var(--color-green); }
.rstat.is-zero {
    background: var(--bg-soft);
    color: var(--text-light);
    opacity: 0.6;
}
.room-card.active .rstat {
    background: rgba(255,255,255,0.22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
    opacity: 1;
}
.room-card.active .rstat strong { color: #fff; }
.room-card.active .rstat small  { color: rgba(255,255,255,0.85); }
.rooms-edit-link {
    align-self: center;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .room-card { min-width: 0; flex: 1 1 calc(50% - 3px); padding: 12px; }
    .room-card-name { font-size: 14px; }
    .rstat strong { font-size: 20px; }
    .room-tabs-pos { gap: 6px; }
    .rooms-bar-pos { flex-direction: column; }
    .rooms-edit-link { width: 100%; justify-content: center; }
}

/* Tables / asztaltérkép */
.rooms-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.room-tabs { display: flex; gap: 4px; }
.room-tab {
    padding: 6px 14px;
    border-radius: 100px;
    color: var(--text);
    font-size: 14px;
    background: var(--bg-soft);
    border: 1px solid transparent;
}
.room-tab:hover { background: var(--bg-hover); }
.room-tab.active {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow);
}
.room-actions { display: flex; gap: 8px; }

.floor {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-height: 540px;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}
.floor-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.table-block {
    position: absolute;
    background: var(--accent);
    color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 4px 10px rgba(0,122,255,0.25), 0 1px 2px rgba(0,0,0,0.1);
    touch-action: none;
    transition: box-shadow 0.15s, transform 0.05s;
}
.table-block.shape-square { border-radius: 16px; }
.table-block.shape-circle { border-radius: 50%; }
.table-block.shape-rect   { border-radius: 8px; }
.table-block:active { cursor: grabbing; }
.table-block.dragging,
.table-block.resizing {
    box-shadow: 0 10px 24px rgba(0,122,255,0.4), 0 2px 4px rgba(0,0,0,0.15);
    transform: scale(1.04);
    z-index: 5;
}
.resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    cursor: nwse-resize;
    touch-action: none;
    background: transparent;
}
.resize-handle::before {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,0.7);
    border-bottom: 2px solid rgba(255,255,255,0.7);
    border-bottom-right-radius: 3px;
    pointer-events: none;
}
.shape-circle .resize-handle {
    right: 6%;
    bottom: 6%;
}
.table-label {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    pointer-events: none;
}
.table-edit {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: 12px;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s;
}
.table-block:hover .table-edit { opacity: 1; }

/* Forma + méret választó a dialógusban */
.dlg-field { margin-bottom: 16px; display: block; }
.dlg-field .dlg-label,
.dlg-field > span:first-child {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.shape-options { display: flex; gap: 10px; }
.shape-opt {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-soft);
    font-size: 14px;
}
.shape-opt:hover { background: var(--bg-hover); }
.shape-opt input[type="radio"] { width: auto; margin: 0; }
.shape-opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-fade);
    color: var(--accent);
}
.shape-preview {
    width: 24px;
    height: 24px;
    background: var(--accent);
    display: inline-block;
}
.shape-preview.shape-square { border-radius: 6px; }
.shape-preview.shape-circle { border-radius: 50%; }
.shape-preview.shape-rect   { border-radius: 3px; width: 32px; height: 16px; }

.size-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.size-btn {
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);
}
.size-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.size-btn small { color: var(--text-muted); font-size: 11px; }
.size-current { margin-top: 8px; }

.size-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}
.size-inputs label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.size-inputs input { font-size: 14px; }
.size-x {
    font-size: 18px;
    color: var(--text-muted);
    padding-top: 18px;
    user-select: none;
}

/* Termek modal */
.rooms-dialog { min-width: 360px; max-width: 480px; }
.dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.dialog-head h2 { margin: 0; }

.rooms-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.rooms-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.rooms-list-item:last-child { border-bottom: none; }
.rooms-reorder {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rooms-reorder .icon-btn {
    width: 26px;
    height: 22px;
    background: transparent;
    color: var(--text-muted);
}
.rooms-reorder .icon-btn:hover:not(:disabled) {
    background: var(--bg-soft);
    color: var(--text);
}
.rooms-reorder .icon-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.rotate-180 { transform: rotate(180deg); }

.rooms-rename {
    flex: 1;
    display: flex;
    gap: 6px;
    align-items: center;
    position: relative;
}
.rooms-rename input { font-size: 14px; min-width: 80px; flex: 1; }

/* Pici "mentve / hiba" pötty az inline-szerkesztett sor mellett */
.row-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background .2s ease, transform .2s var(--ease-out);
    flex-shrink: 0;
}
.row-status.ok  { background: var(--color-green); transform: scale(1.4); }
.row-status.err { background: var(--color-red);   transform: scale(1.4); }
.cat-group-select {
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    max-width: 120px;
}

.danger-icon-btn {
    color: var(--danger);
}
.danger-icon-btn:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.rooms-add {
    display: flex;
    gap: 8px;
}
.rooms-add input {
    flex: 1;
}

/* Dialog */
.edit-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    min-width: 320px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.edit-dialog::backdrop {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
}
.edit-dialog h2 { margin-top: 0; }
.edit-dialog label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* POS — asztal-kártyák a térképen */
.floor-pos .table-form { position: absolute; padding: 0; margin: 0; }
.floor-pos .table-block {
    position: static;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0,122,255,0.25), 0 1px 2px rgba(0,0,0,0.1);
    font-family: inherit;
}
.floor-pos .table-block:hover { transform: translateY(-1px); }
.floor-pos .table-block.has-order {
    background: linear-gradient(135deg, var(--warn), #ff5e3a);
    box-shadow: 0 4px 14px rgba(255,149,0,0.35);
}
.table-meta {
    font-size: 11px;
    opacity: 0.9;
    font-weight: 500;
}

/* === Asztal-állapotok a POS-térképen — színkód + chip + pulse a sürgőre === */
/* Prioritás csökkenő sorrendben: ready (URGENT) > sent > new > served */
.floor-pos .table-block.state-ready {
    background: linear-gradient(135deg, var(--color-red), var(--color-pink) 80%);
    box-shadow: 0 4px 14px rgba(255,59,48,0.42);
    animation: table-ready-pulse 1.5s ease-in-out infinite;
}
@keyframes table-ready-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(255,59,48,0.42); }
    50%      { box-shadow: 0 6px 24px rgba(255,59,48,0.65), 0 0 0 5px rgba(255,59,48,0.20); }
}
.floor-pos .table-block.state-sent {
    background: linear-gradient(135deg, var(--color-orange), var(--color-yellow) 80%);
    box-shadow: 0 4px 14px rgba(255,149,0,0.35);
}
.floor-pos .table-block.state-new {
    background: linear-gradient(135deg, var(--color-indigo), var(--color-blue) 80%);
    box-shadow: 0 4px 14px rgba(0,122,255,0.32);
}
.floor-pos .table-block.state-served {
    background: linear-gradient(135deg, var(--color-green), var(--color-mint) 80%);
    box-shadow: 0 4px 14px rgba(52,199,89,0.35);
}

/* Status-ikon kis badge a tile jobb-felső sarkában (csak az ikon, szöveg nélkül) */
.table-state-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.30);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30), 0 1px 3px rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    z-index: 1;
}
.shape-circle .table-state-icon { top: 8%; right: 8%; }
.shape-rect   .table-state-icon { top: 5px; right: 5px; width: 22px; height: 22px; }

/* Tooltip — hoverre felugró részletes panel */
.table-form-positioned { position: absolute; }
.table-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
    padding: 12px 14px;
    min-width: 240px;
    width: max-content;
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
    z-index: 20;
}
.table-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-card);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.10));
}
/* Láthatatlan hover-híd a tooltip és az asztal közötti 8px résen át, hogy az egér
   ne „essen ki", amíg a tooltipben lévő linkre (Áthelyezés / összevonás) navigál. */
.table-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}
.table-form-positioned:hover .table-tooltip,
.table-form-positioned.tooltip-active .table-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;   /* megjelenéskor kattinthatóvá válik (pl. „Áthelyezés / összevonás" link) */
    transform: translateX(-50%) translateY(0);
}
.table-tooltip-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.table-tooltip-head strong { font-size: 14px; letter-spacing: -0.005em; }
.table-tooltip-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.table-tooltip-state-ready  { background: var(--tint-red);    color: var(--color-red); }
.table-tooltip-state-sent   { background: var(--tint-orange); color: var(--color-orange); }
.table-tooltip-state-new    { background: var(--tint-blue);   color: var(--color-blue); }
.table-tooltip-state-served { background: var(--tint-green);  color: var(--color-green); }

.table-tooltip-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
}
.table-tooltip-meta li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-variant-numeric: tabular-nums;
}
.table-tooltip-meta li > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
}
.table-tooltip-meta li > span .icon { opacity: 0.7; }
.table-tooltip-meta li strong { color: var(--text); font-weight: 700; }
.table-tooltip-urgent > span,
.table-tooltip-urgent strong { color: var(--color-red); }
.table-tooltip-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.table-tooltip-foot strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

/* Floor a POS-on overflow: visible, hogy a tooltip kifolyhasson a határon túl */
.floor-pos { overflow: visible !important; }

/* === POS szín- és ikon-magyarázat a térkép alatt === */
.pos-legend {
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}
.pos-legend-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.pos-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.pl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--bg-soft);
}
.pl-swatch {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pl-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.pl-icon {
    position: relative;
    z-index: 1;
    color: #fff;
    display: inline-flex;
}
.pl-dot-ready  { background: linear-gradient(135deg, var(--color-red),    var(--color-pink)   80%); animation: pl-pulse 1.5s ease-in-out infinite; }
.pl-dot-sent   { background: linear-gradient(135deg, var(--color-orange), var(--color-yellow) 80%); }
.pl-dot-new    { background: linear-gradient(135deg, var(--color-indigo), var(--color-blue)   80%); }
.pl-dot-served { background: linear-gradient(135deg, var(--color-green),  var(--color-mint)   80%); }
@keyframes pl-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(255,59,48,0.30); }
    50%      { box-shadow: 0 0 0 4px rgba(255,59,48,0.22), 0 4px 12px rgba(255,59,48,0.45); }
}
.pl-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
}
.pl-text strong { font-size: 13px; }
.pos-legend-hint {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    line-height: 1.45;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pos-legend-hint .icon { opacity: 0.7; }
@media (max-width: 600px) {
    .pos-legend { padding: 12px 14px; }
    .pos-legend-list { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Érintő-eszközön hover nincs — a JS .tooltip-active class-szel mutatja meg
   az első érintésre (2-tap pattern: 1=info, 2=rendelés-nyitás). */

/* Mobile lista-nézet ugyanazokkal a színekkel */
.table-list-item.has-order.state-ready {
    background: linear-gradient(135deg, var(--color-red), var(--color-pink) 80%);
    box-shadow: 0 4px 12px rgba(255,59,48,0.32);
    animation: table-ready-pulse 1.5s ease-in-out infinite;
}
.table-list-item.has-order.state-sent {
    background: linear-gradient(135deg, var(--color-orange), var(--color-yellow) 80%);
    box-shadow: 0 4px 12px rgba(255,149,0,0.30);
}
.table-list-item.has-order.state-new {
    background: linear-gradient(135deg, var(--color-indigo), var(--color-blue) 80%);
    box-shadow: 0 4px 12px rgba(0,122,255,0.28);
}
.table-list-item.has-order.state-served {
    background: linear-gradient(135deg, var(--color-green), var(--color-mint) 80%);
    box-shadow: 0 4px 12px rgba(52,199,89,0.30);
}
.tli-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.26);
    color: #fff;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
    white-space: nowrap;
    align-self: flex-start;
}
.tli-state .icon { opacity: 0.95; }

/* Rendelési képernyő */
.order-page { padding: 0; }
.order-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.order-head h1 { margin: 4px 0; }

.mode-toggle {
    display: inline-flex;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 5px;
    border: 1px solid var(--border);
}
.mode-btn {
    border: none;
    background: transparent;
    padding: 12px 24px;
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    min-width: 110px;
    transition: background 0.15s, color 0.15s;
}
.mode-btn.active {
    background: var(--bg-card);
    box-shadow: var(--shadow);
    color: var(--text);
    font-weight: 600;
}

.order-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: flex-start;
}
@media (max-width: 900px) {
    .order-grid { grid-template-columns: 1fr; }
}

.products-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    min-width: 0;
}

/* Két-szintű választó a POS-on: csoport-tabok + kategória-chip-ek */
.group-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px;
    background: var(--bg-soft);
    border-radius: 100px;
    flex-wrap: wrap;
}
.group-tab {
    padding: 8px 16px;
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--ease-out), color 0.15s;
    white-space: nowrap;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.group-tab:hover { color: var(--text); }
.group-tab.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.cat-strip {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    flex-wrap: wrap;
}
.cat-chip {
    padding: 8px 14px;
    border-radius: 100px;
    background: var(--bg-soft);
    color: var(--text);
    white-space: nowrap;
    font-size: 14px;
    border: 1px solid transparent;
}
.cat-chip:hover { background: var(--bg-hover); }
.cat-chip.active {
    background: var(--accent);
    color: #fff;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    min-width: 0;
}
/* POS termék-tile — étlap-stílusú kártya: kép felül 4:3 aspect, szöveg alul */
.product-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s var(--ease-spring), box-shadow 0.15s var(--ease-out), border-color 0.1s;
    display: flex;
    flex-direction: column;
    color: var(--text);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-width: 0;
}
.product-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}
.product-tile:active {
    transform: scale(0.97);
    box-shadow: var(--shadow);
}
.product-tile-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-soft);
    overflow: hidden;
    display: block;
}
.product-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s var(--ease-out);
}
.product-tile:hover .product-tile-img img { transform: scale(1.05); }
.product-tile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}
.product-tile-content {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.product-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--text);
}
.product-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    margin-top: auto;
}
/* Ha nincs kép — a kép-doboz helyett vékonyabb placeholder marad, ami szellős sávként hat */
.product-tile:not(.has-image) .product-tile-img { aspect-ratio: 4 / 1; }

/* Kosár */
.cart-panel {
    position: sticky;
    top: 76px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0;
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
/* Cart-head — mini-hero a Rendelés szekciónak */
.cart-head {
    background: linear-gradient(135deg, var(--color-orange), var(--color-red) 60%, var(--color-purple));
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.cart-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.cart-head > * { position: relative; z-index: 1; }
.cart-head-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.22);
    border-radius: 9px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.cart-head h2 {
    color: #fff;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.cart-head-count {
    margin-left: auto;
    background: rgba(255,255,255,0.22);
    border-radius: 100px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart-panel h2 { /* megőrzött szabály ha a cart-head valahol nincs */
    margin: 0;
    padding: 16px 16px 12px;
    font-size: 15px;
}
.cart-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    flex: 1 1 auto;
}

.cart-items {
    list-style: none;
    padding: 0 16px;
    margin: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cart-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item.status-sent { opacity: 0.72; }

.cart-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 10px;
}
.ci-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.ci-price {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cart-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

/* TOUCH-friendly +/- gombok */
.qty-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s var(--ease-spring), background 0.15s, color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    color: #fff;
}
.qty-btn:active:not(:disabled) { transform: scale(0.92); }
.qty-btn:disabled {
    background: var(--bg-soft) !important;
    color: var(--text-light) !important;
    cursor: not-allowed;
    box-shadow: none;
}

.qty-minus { background: var(--color-red); }
.qty-minus:hover:not(:disabled) { background: #d70015; }
.qty-plus  { background: var(--color-green); }
.qty-plus:hover:not(:disabled)  { background: #28a745; }

.qty {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.vat-chip {
    margin-left: auto;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sent-mark {
    color: var(--color-green);
    display: inline-flex;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tint-green);
    justify-content: center;
}
.remove-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    background: var(--tint-red);
    color: var(--color-red);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.remove-btn:hover { background: var(--color-red); color: #fff; }
.remove-btn:active { transform: scale(0.92); }

.cart-totals {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted);
    padding: 3px 0;
}
.totals-grand {
    color: var(--text);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    flex: 0 0 auto;
}
.big-btn {
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: var(--radius);
}

.pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pay-tile {
    padding: 14px 12px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text);
}
.pay-tile:hover { background: var(--bg-card); border-color: var(--accent); color: var(--accent); }
.pay-tile .icon { opacity: 0.7; }

/* Fizetési modal */
.pay-dialog { min-width: 380px; max-width: 460px; }

.pay-summary {
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}
.pay-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 14px;
}
.pay-summary-total {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 10px;
}
.pay-summary-tip { color: var(--color-pink); }
.pay-summary-disc { color: var(--color-green); }

/* Kompakt kedvezmény / borravaló mező — egy vízszintes sor, szín-kódolt bal sávval
   (zöld = kedvezmény/megtakarítás, pink = borravaló), hogy a két szekció jól elkülönüljön. */
.pay-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 11px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
}
.pay-field-disc {
    border-left-color: var(--color-green);
    background: color-mix(in srgb, var(--color-green) 7%, transparent);
}
.pay-field-tip {
    border-left-color: var(--color-pink);
    background: color-mix(in srgb, var(--color-pink) 7%, transparent);
}
.pay-field-label {
    flex: 0 0 auto;
    min-width: 74px;
    font-size: 13px;
    font-weight: 600;
}
.pay-field-disc .pay-field-label { color: var(--color-green); }
.pay-field-tip  .pay-field-label { color: var(--color-pink); }

/* Preset gombsor a mezőn belül, jobbra zárva — a gombok NEM nyúlnak végig (kompakt) */
.tip-buttons, .disc-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 auto;
    margin: 0;
}
.tip-btn, .disc-btn {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 7px 12px;
    min-height: 34px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.tip-btn:hover, .disc-btn:hover { background: var(--bg-soft); }
.tip-btn.active  { background: var(--color-pink);  color: #fff; border-color: var(--color-pink); }
.disc-btn.active { background: var(--color-green); color: #fff; border-color: var(--color-green); }
.pay-field-custom {
    flex: 0 0 56px;
    width: 56px;
    padding: 7px 8px;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--bg-card);
    color: var(--text);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font: inherit;
    font-size: 13px;
}
.pay-field-custom:focus { outline: none; border-color: var(--accent); }

.cart-error {
    background: var(--danger-bg);
    color: var(--danger-text);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    margin: 8px 0;
}

/* KDS */
.main.main-full { max-width: none; padding: 16px 20px 60px; }

.kds-head { margin-bottom: 16px; }
.kds-head h1 { margin: 0; }

.kds-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
@media (max-width: 800px) {
    .kds-cols { grid-template-columns: 1fr; }
}

.kds-col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    min-height: 200px;
}
.kds-col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.kds-col-title { font-size: 20px; font-weight: 600; }
.kds-col-count {
    background: var(--bg-soft);
    color: var(--text-muted);
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
}
.kds-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 12px;
    font-size: 14px;
}

.kds-card {
    position: relative;
    color: #fff;
    border: none;
    border-radius: var(--radius-xl);
    padding: 16px 18px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    transition: transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.kds-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.20), transparent 60%);
    pointer-events: none;
}
.kds-card > * { position: relative; z-index: 1; }

/* Cooking — narancstól vörösig age-szerint */
.kds-card-cooking.age-fresh { background: linear-gradient(135deg, var(--color-green), var(--color-mint) 80%); }
.kds-card-cooking.age-soon  { background: linear-gradient(135deg, var(--color-yellow), var(--color-orange) 70%); }
.kds-card-cooking.age-warn  { background: linear-gradient(135deg, var(--color-orange), var(--color-red) 60%, var(--color-pink)); }
.kds-card-cooking.age-late  {
    background: linear-gradient(135deg, var(--color-red), var(--color-pink) 55%, var(--color-purple));
    animation: kds-pulse 1.5s ease-in-out infinite;
}

/* Ready — hideg-zöld → kék, age-szerint kis-eltolódással */
.kds-card-ready.age-fresh   { background: linear-gradient(135deg, var(--color-mint), var(--color-teal) 60%, var(--color-blue)); }
.kds-card-ready.age-soon    { background: linear-gradient(135deg, var(--color-teal), var(--color-blue) 60%, var(--color-indigo)); }
.kds-card-ready.age-warn    { background: linear-gradient(135deg, var(--color-blue), var(--color-indigo) 60%, var(--color-purple)); }
.kds-card-ready.age-late    {
    background: linear-gradient(135deg, var(--color-indigo), var(--color-purple) 60%, var(--color-pink));
    animation: kds-pulse 1.5s ease-in-out infinite;
}

@keyframes kds-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.10), 0 0 0 0 rgba(255,59,48,0.0); }
    50%      { box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 0 0 8px rgba(255,255,255,0.18); }
}

/* Head */
.kds-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.kds-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.22);
    border-radius: 12px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
}
.kds-card-text {
    flex: 1;
    min-width: 0;
}
.kds-table {
    font-size: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.kds-room { opacity: 0.78; }
.kds-table strong { font-weight: 700; }
.kds-mode {
    background: rgba(0,0,0,0.30);
    color: #fff;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.kds-age {
    text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.kds-age strong {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.kds-age small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.78;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Items */
.kds-items {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kds-item {
    padding: 8px 12px;
    font-size: 15px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.16);
    border-radius: 10px;
    color: #fff;
}
.kds-qty {
    font-weight: 700;
    min-width: 28px;
    color: rgba(255,255,255,0.95);
}
.kds-item.status-ready {
    opacity: 0.65;
    text-decoration: line-through;
    background: rgba(255,255,255,0.10);
}
.kds-note {
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    font-style: italic;
    flex-basis: 100%;
}
.kds-check {
    margin-left: auto;
    color: #fff;
    display: inline-flex;
    align-items: center;
}

/* Per-item kész gomb a cooking oszlopban */
.kds-item-ready{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,0.55);background:rgba(255,255,255,0.18);color:#fff;cursor:pointer}
.kds-item-ready:active{transform:scale(.94)}
/* „Nem készíthető" (elfogyott) — jelzés a pincérnek */
.kds-item-cant{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,0.5);background:rgba(255,59,48,0.32);color:#fff;cursor:pointer}
.kds-item-cant:active{transform:scale(.94)}
.kds-item-cant + .kds-item-ready{margin-left:6px}

/* Akció-gomb a kártyán — fehér üveg-pill */
.kds-actions {
    display: flex;
    gap: 8px;
}
.kds-actions .big-btn { flex: 1; }
.kds-card .kds-btn {
    background: rgba(255,255,255,0.95);
    color: #1d1d1f;                       /* fix sötét — a bg mindig fehéres a színes kártya felett */
    border: 1px solid rgba(255,255,255,0.95);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.kds-card .kds-btn:hover { background: #fff; color: #1d1d1f; }
.kds-card .kds-btn:active { background: rgba(255,255,255,0.85); color: #1d1d1f; }

/* Reports / napi zárás */
.date-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.date-form { display: inline-flex; margin: 0; min-width: 0; }
.date-form input[type="date"] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    background: var(--bg-soft);
    color: var(--text);
    min-width: 170px;
    width: auto;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.date-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.date-label {
    color: var(--text-muted);
    font-size: 14px;
}
.date-bar .spacer { flex: 1; }
/* date-bar logikai csoportok (desktopon vízszintes sáv, mobilon stack) */
.rd-presets, .rd-context, .rd-exports { display: flex; align-items: center; gap: 8px; }
.rd-presets { gap: 6px; }
.rd-range-form { gap: 8px; align-items: center; }
.rd-nav { padding: 9px 11px; }

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.report-grid > * { margin-bottom: 0; min-width: 0; }
.report-grid .card { margin-bottom: 0; }

.stat-headline {
    background: linear-gradient(135deg, var(--color-blue), var(--color-indigo) 60%, var(--color-purple));
    color: #fff;
    border-color: transparent;
}
.stat-headline .stat-num,
.stat-headline .stat-label { color: #fff; }
.stat-headline .stat-label { color: rgba(255,255,255,0.85); }
.stat-headline .stat-icon { background: rgba(255,255,255,0.22); color: #fff; }

.stat-warn {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}
.stat-warn .stat-num { color: var(--warn); }
.stat-warn .stat-icon { background: rgba(255,149,0,0.22); color: var(--warn); }

.totals-row-tbl td {
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding-top: 8px;
}
.small-btn { padding: 4px 10px; font-size: 12px; }
.receipts-table td code { font-size: 11px; }

/* ============================================================
   Print-only / Screen-only helper osztályok (a print-átkapcsoláshoz)
   ============================================================ */
.print-only { display: none; }

/* === MOBILE === */
@media (max-width: 760px) {
    .top-inner { padding: 8px 12px; gap: 8px; }
    .brand-name { display: none; }
    .nav-toggle { display: flex; }
    .user-pill { display: none; }
    .main { padding: 14px 12px 80px; }

    /* Mobil top-bar legyen teljesen átlátszatlan a pull-to-refresh / rubber-band
       miatti drawer-átszűrődés ellen */
    .top { background: var(--top-bar-bg-solid); }

    /* Mobil menü-drawer — slide-down felülről, fixen pozícionált, ki-be takar */
    .nav {
        position: fixed;
        top: 0;
        left: 0; right: 0;
        background: var(--bg-card);
        flex-direction: column;
        gap: 0;
        padding: calc(env(safe-area-inset-top) + var(--top-h) + 4px) 16px 18px;
        margin: 0;
        z-index: 40;
        transform: translateY(-100%);
        transition: transform 0.25s var(--ease-out);
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        align-items: stretch;
        border-bottom: 1px solid var(--border);
        visibility: hidden;
    }
    .nav.open {
        transform: translateY(0);
        visibility: visible;
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    }
    .nav a {
        padding: 14px 4px;
        font-size: 16px;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }
    .nav a:hover { background: transparent; }
    .nav a.active { color: var(--text); background: var(--nav-active-bg); font-weight: 600; }

    .nav-user-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 14px;
        gap: 12px;
    }
    .nav-user-mobile .user-role {
        margin-left: 6px;
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Drawer-háttér — iOS-szerű blur a tartalom felett */
    body.nav-open { overflow: hidden; }
    body.nav-open::before {
        content: '';
        position: fixed;
        top: calc(env(safe-area-inset-top) + var(--top-h));
        left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(14px) saturate(180%);
        -webkit-backdrop-filter: blur(14px) saturate(180%);
        z-index: 39;
        animation: drawer-backdrop-fade 0.2s var(--ease-out);
    }
    @keyframes drawer-backdrop-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .page-head { margin-bottom: 14px; }
    .page-head p { font-size: 13px; }
    h1 { font-size: 22px; }
    h2 { font-size: 16px; }
    .stat-num { font-size: 24px; }

    /* Card-ok kisebb padding */
    .card { padding: 16px; border-radius: var(--radius); margin-bottom: 14px; }
    .card-head { gap: 8px; }

    /* Dialogs: bottom-sheet jellegű full-width — MINDEN dialog, hogy keskeny (320px) telefonon se lógjon ki */
    .edit-dialog, .pay-dialog, .rooms-dialog, .cat-dialog, .tree-dialog, .install-dialog {
        min-width: 0;
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        margin: 8px auto;
        padding: 16px;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        border-radius: 16px;
        box-sizing: border-box;
    }

    /* dlg-row mobil-on stack-eli az inputokat */
    .dlg-row {
        flex-direction: column;
        gap: 0;
    }
    .dlg-row .dlg-field { margin-bottom: 12px; }

    /* Stat-grid: 2 oszlop garantáltan, headline széles */
    .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stat { padding: 14px; gap: 8px; }
    .stat-headline { grid-column: span 2; }
    .stat-icon { width: 32px; height: 32px; border-radius: 9px; }

    /* Menu toolbar mobile: search + action gombok stack */
    .menu-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .menu-search-wrap { max-width: none; min-width: 0; }
    /* Eszközök-almenü + Új termék egymás mellett, egyenlő szélességben */
    .menu-toolbar-actions { display: flex; gap: 8px; }
    .menu-toolbar-actions > * { flex: 1 1 0; min-width: 0; }
    .menu-tools, .menu-tools > summary { width: 100%; }
    .menu-tools > summary { justify-content: center; white-space: nowrap; }
    .menu-tools-pop { left: 0; right: auto; }

    /* Termék-kártyák kompaktabb mobil-grid */
    .product-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .product-card-name { font-size: 14px; }
    .product-card-desc { font-size: 12px; -webkit-line-clamp: 1; }
    .product-card-price { font-size: 15px; }
    .product-card-body { padding: 10px 12px 12px; gap: 4px; }
    .product-card-foot { padding-top: 4px; }
    .product-group-head { font-size: 12px; margin: 14px 0 8px; }

    /* Kategória chip-ek nagyobb touch */
    .cat-chip { padding: 9px 14px; font-size: 14px; }
    .room-tab { padding: 8px 14px; font-size: 13px; }

    /* Product cards */
    .product-cards { gap: 10px; }

    /* Termék/group szerkesztő sticky-bar */
    .product-edit-actions {
        margin: 14px -12px 0;
        padding: 10px 12px;
        flex-direction: column-reverse;
        gap: 6px;
    }
    .product-edit-actions > * {
        width: 100%;
        justify-content: center;
    }

    /* POS — order screen mobile-on */
    .order-head { gap: 10px; }
    .mode-toggle { width: 100%; }
    .mode-btn { flex: 1; min-width: 0; padding: 11px 12px; font-size: 14px; }
    .order-grid { gap: 12px; grid-template-columns: 1fr; }
    .cart-panel {
        position: static;
        max-height: none;
    }
    /* Termék-tile-ok mobil: 2 oszlop fix, ne lógjon ki */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cat-strip { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
    .products-panel { padding: 12px; }
    .cart-panel { padding: 0; }
    .cart-panel h2 { font-size: 14px; padding: 12px 14px 10px; }
    .cart-items { padding: 0 14px; }
    .cart-totals, .cart-actions { padding: 12px 14px; }

    /* POS cart-actions sticky bottom — Konyha + Fizetés mindig kéznél */
    .order-page { padding-bottom: 84px; }
    .order-page .cart-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 30;
        background: var(--top-bar-bg);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid var(--border);
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        flex-direction: row;
        gap: 8px;
        margin: 0;
    }
    .order-page .cart-actions .big-btn { flex: 1; padding: 12px 14px; font-size: 15px; }

    /* POS asztal-választó: térkép helyett lista mobilon */
    .floor-pos { display: none; }
    .tables-list { display: block; }
    /* Asztaltérkép szerkesztő (admin) marad térkép-szerű — drag-drop ott a feature */
    .rooms-bar .ghost-btn, .rooms-bar .primary-btn { padding: 9px 14px; }

    /* Kompakt kedvezmény/borravaló-mező mobilon: gombok maradnak kompaktak, a label kicsit szűkebb */
    .pay-field { gap: 8px; padding: 8px 10px; }
    .pay-field-label { min-width: 0; }
    .tip-buttons, .disc-buttons { gap: 5px; }
    .tip-btn, .disc-btn { min-width: 46px; padding: 7px 10px; }
    .pay-field-custom { flex-basis: 50px; width: 50px; }
    .pay-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .pay-tile { padding: 12px 8px; font-size: 13px; }

    /* User cards mobile-on egyetlen oszlop */
    .user-cards { grid-template-columns: 1fr; gap: 8px; }
    .user-card { padding: 10px 12px; }
    .user-card-avatar { width: 40px; height: 40px; font-size: 17px; }

    /* Reports daily date-bar — csoportokba rendezett, tiszta függőleges stack */
    .date-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .date-bar .spacer { display: none; }
    .rd-presets { display: flex; gap: 6px; }
    .rd-presets > .ghost-btn { flex: 1; justify-content: center; }
    .rd-range-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .rd-range-form input[type="date"] { flex: 1 1 0; min-width: 0; width: auto; padding: 9px 10px; font-size: 14px; }
    .rd-range-form .muted { flex: 0 0 auto; }
    .rd-range-form > .ghost-btn { flex: 1 1 100%; justify-content: center; }
    .rd-context { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
    .date-label { font-size: 12px; }
    .rd-exports { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .rd-exports > .ghost-btn { justify-content: center; }
    .report-grid { gap: 12px; }

    /* Backup tábla mobile-on tömör */
    table.users { font-size: 13px; }
    table.users th, table.users td { padding: 6px 4px; }

    /* Avatar uploader mobile-on kisebb preview */
    .avatar-preview-wrap { width: 110px; height: 110px; }
    .avatar-uploader { padding: 14px; }
    .image-placeholder { padding: 14px; }

    /* Asztaltérkép mobil */
    .floor { min-height: 420px; }
    .rooms-bar { gap: 8px; }

    /* KDS card mobil */
    .kds-card { padding: 12px 14px; margin-bottom: 10px; }
    .kds-card-head { gap: 8px; }
    .kds-age { font-size: 20px; }
    .kds-item { font-size: 15px; padding: 4px 0; }

    /* Settings form */
    .settings-form .dlg-row { gap: 0; }

    /* Backup actions */
    .backup-actions { flex-direction: column; align-items: stretch; }
    .backup-actions > * { width: 100%; justify-content: center; }

    /* Print receipt — toolbar full-width gombok */
    .toolbar { padding: 0 8px; }
}

/* === Riport-tábla és bizonylat-tábla MINDIG kártya-nézet (no horizontal scroll, ever) === */

/* Belső padding. overflow-x:auto = csak VALÓDI túlcsordulásnál jelenik meg scrollbar (a kártya-nézet
   miatt sosem); így semmi nem vágódik le (clip elvágna), de üresben nincs felesleges scrollbar sem. */
.report-section-body { overflow-x: auto; padding: 12px 14px; }

/* Bizonylat-tábla (receipts) — kártya-nézet */
.receipts-table {
    display: block;
    font-size: 14px;
}
.receipts-table thead { display: none; }
.receipts-table tbody, .receipts-table tr, .receipts-table td { display: block; }
.receipts-table tr {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.receipts-table td {
    padding: 4px 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.receipts-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    flex-shrink: 0;
}
.receipts-table td.num { text-align: left; }
.receipts-table td.num input { text-align: left; }
.receipts-table td code { font-size: 12px; }
.receipts-table .receipt-action-cell {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    justify-content: stretch;
}
.receipts-table .receipt-action-cell::before { display: none; }
.receipts-table .receipt-action-cell a { width: 100%; justify-content: center; }

/* Report-table-ok (ÁFA bontás / fizetési mód / helyben-elvitel / termek) — kártya-nézet */
.report-table:not(.receipts-table)         { display: block; font-size: 14px; }
.report-table:not(.receipts-table) thead   { display: none; }
.report-table:not(.receipts-table) tbody,
.report-table:not(.receipts-table) tfoot   { display: block; }
.report-table:not(.receipts-table) tr      { display: block; }
.report-table:not(.receipts-table) td      { display: block; width: 100%; }
.report-table:not(.receipts-table) tr {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin: 0 0 8px;
}
.report-table:not(.receipts-table) tfoot tr:last-child { margin-bottom: 0; }
.report-table:not(.receipts-table) td {
    padding: 4px 0;
    border: none;
    white-space: normal;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.report-table:not(.receipts-table) td.num { text-align: right; }
.report-table:not(.receipts-table) td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    flex-shrink: 0;
}
.report-table:not(.receipts-table) tfoot .report-foot-row {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-top: 2px solid var(--text-muted);
    margin-top: 10px;
}
.report-table:not(.receipts-table) tfoot .report-foot-row td { font-weight: 700; font-size: 14px; }
.report-table:not(.receipts-table) tfoot .report-foot-row td:first-child {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

/* Nagyon kicsi képernyő (iPhone SE portrait, <480px) */
@media (max-width: 480px) {
    h1 { font-size: 20px; }

    /* Stat-kártya kompakt sor-elrendezésben — ikon balra, szám+címke jobbra */
    .stat-grid { grid-template-columns: 1fr; gap: 8px; }
    .stat-headline { grid-column: span 1; }
    .stat {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        min-height: 0;
    }
    .stat > div { flex: 1; min-width: 0; }
    .stat-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; margin: 0; }
    .stat-num { font-size: 22px; line-height: 1.1; }
    .stat-label { font-size: 12px; }
    .stat-headline { padding: 16px 18px; }
    .stat-headline .stat-num { font-size: 26px; }

    .product-cards { grid-template-columns: 1fr; }
    .pay-grid { grid-template-columns: 1fr; }
    .tip-btn, .disc-btn { font-size: 12px; min-width: 44px; padding: 7px 8px; }

    /* Cat strip / room tab kompaktabb */
    .cat-chip, .room-tab { padding: 7px 12px; font-size: 13px; }
}

/* Drawer-háttér sötét módban kicsit mélyebb */
@media (prefers-color-scheme: dark) {
    body.nav-open::before { background: rgba(0, 0, 0, 0.55) !important; }
}

/* ============================================================
   Asztaltérkép szerkesztő — friss layout (segmented control + FAB + inline editor)
   ============================================================ */
.tables-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.room-segments {
    display: inline-flex;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 4px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.room-segments::-webkit-scrollbar { display: none; }
.room-segment {
    padding: 8px 16px;
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font: inherit;
    font-weight: 600;
}
.room-segment:hover { color: var(--text); }
.room-segment.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.room-segment-add { color: var(--text-light); padding: 8px 10px; }
.room-segment-add:hover { color: var(--accent); }
.tables-toolbar-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Floor wrap a FAB-hoz pozícióhoz */
.floor-wrap { position: relative; transition: padding-right 0.3s var(--ease-out); }

/* Új floor háttér — finom pont-textúra a 20×20 rácsvonal helyett */
.floor-canvas {
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1.5px) !important;
    background-size: 22px 22px !important;
    border-radius: var(--radius-xl) !important;
}

/* Asztal — <button>-tag override + outline state */
.table-block {
    border: none;
    padding: 0;
    font: inherit;
    outline: 0 solid transparent;
    outline-offset: 4px;
    transition: box-shadow 0.18s var(--ease-out), transform 0.06s ease-out, outline 0.15s;
}
.table-block.selected {
    outline: 3px solid var(--accent);
    box-shadow: 0 12px 30px rgba(0,122,255,0.35), 0 1px 4px rgba(0,0,0,0.10);
    z-index: 4;
}
.table-block .table-label { font-weight: 700; }

/* Új resize-handle: csak kijelölt asztalon látszik, nagyobb touch-target, fehér pötty */
.table-block .resize-handle {
    width: 36px !important;
    height: 36px !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.table-block.selected .resize-handle,
.table-block:hover .resize-handle {
    opacity: 1;
    pointer-events: auto;
}
.table-block .resize-handle::before {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: none !important;
}
.table-block .resize-handle::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    pointer-events: none;
}

/* FAB — Új asztal a floor jobb-alsó sarkában */
.floor-fab {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 6;
    margin: 0;
}
.fab-btn {
    padding: 14px 22px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,122,255,0.32), 0 2px 6px rgba(0,0,0,0.10);
    min-height: 0;
}
.fab-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,122,255,0.38), 0 2px 6px rgba(0,0,0,0.12); }
.fab-btn .fab-label { display: inline; }

/* Inline szerkesztő-panel: desktop right-rail (≥1024px), mobil bottom-sheet */
.table-editor-panel {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    z-index: 60;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.table-editor-panel[hidden] { display: none !important; }
.tep-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.tep-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tep-title strong { font-size: 16px; letter-spacing: -0.01em; }
.tep-room { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.tep-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}
.tep-field { display: flex; flex-direction: column; gap: 8px; }
.tep-field > label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
.tep-field input[type="text"],
.tep-field input[type="number"] {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.tep-field input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
}

/* Segmented control (forma) */
.seg-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--bg-soft);
    border-radius: 12px;
}
.seg-control button {
    padding: 10px 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
}
.seg-control button:hover { color: var(--text); }
.seg-control button.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.seg-control button .shape-preview {
    background: var(--text-muted);
    width: 18px;
    height: 18px;
    display: inline-block;
    transition: background 0.15s;
}
.seg-control button.active .shape-preview { background: var(--accent); }
.seg-control button .shape-preview.shape-square { border-radius: 4px; }
.seg-control button .shape-preview.shape-circle { border-radius: 50%; }
.seg-control button .shape-preview.shape-rect   { width: 24px; height: 12px; border-radius: 3px; }

/* Preset méret-chip-ek */
.tep-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.tep-presets button {
    padding: 9px 10px;
    background: var(--bg-soft);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tep-presets button:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.tep-foot {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    flex-shrink: 0;
}
.tep-foot .ghost-btn,
.tep-foot .danger-btn { flex: 1; justify-content: center; }

.tep-saved-flash {
    position: fixed;
    bottom: 22px;
    right: 22px;
    background: var(--success);
    color: #fff;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 18px rgba(52,199,89,0.36);
    z-index: 70;
    animation: tep-saved-pop 0.28s var(--ease-spring);
}
@keyframes tep-saved-pop {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Desktop: right-rail panel — a floor-wrap kap padding-right-et hogy ne lógjon alá */
@media (min-width: 1024px) {
    .table-editor-panel {
        top: 84px;
        right: 18px;
        width: 340px;
        max-height: calc(100vh - 110px);
        max-height: calc(100dvh - 110px);
        border-radius: var(--radius-xl);
    }
    body.tep-open .floor-wrap { padding-right: 360px; }
}

/* Tablet + mobil: bottom-sheet panel */
@media (max-width: 1023px) {
    .table-editor-panel {
        left: 0; right: 0; bottom: 0;
        max-height: 78vh;
        max-height: 78dvh;
        border-bottom: none;
        border-left: none;
        border-right: none;
        border-radius: 18px 18px 0 0;
        animation: tep-slide-up 0.28s var(--ease-out);
    }
    @keyframes tep-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    body.tep-open .floor-fab { display: none; }
}

/* Mobil: tables-toolbar pakolódik szellősebben */
@media (max-width: 600px) {
    .tables-toolbar { gap: 8px; }
    .room-segments { padding: 3px; gap: 2px; }
    .room-segment { padding: 7px 12px; font-size: 13px; }
    .fab-btn { padding: 12px 18px; }
    .fab-btn .fab-label { display: none; }
    .floor-fab { right: 14px; bottom: 14px; }
}

/* Icon-button kisebb variáns a termek-modálhoz */
.icon-btn.icon-btn-sm { width: 26px; height: 26px; }

/* ============================================================
   Étlap — Kategóriák modal: szekciókba csoportosítva (Csoport-szerint)
   ============================================================ */
.cat-dialog { min-width: 360px; max-width: 560px; }
.cat-list-grouped {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 8px;
}
.cat-group-section {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cat-group-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 14px 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.cat-group-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.cat-group-section-count { font-size: 11px; }
.cat-rows { list-style: none; padding: 0; margin: 0; }
.cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}
.cat-row:first-child { border-top: none; }
.cat-row-reorder { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.cat-row-edit {
    flex: 1;
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    position: relative;
}
.cat-row-edit input {
    flex: 1;
    font-size: 14px;
    min-width: 60px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text);
}
.cat-row-edit input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
}
.cat-row-edit .cat-group-select {
    font-size: 12px;
    padding: 4px 6px;
    flex-shrink: 0;
    max-width: 130px;
}
.cat-add-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-top: 1px dashed var(--border);
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.cat-add-inline:hover { background: var(--bg-hover); color: var(--accent); }

/* ============================================================
   Étlap — Fa-nézet modal
   ============================================================ */
.tree-dialog { min-width: 360px; max-width: 720px; width: min(90vw, 720px); }
.tree-tabs {
    display: inline-flex;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 14px;
}
.tree-tab {
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.tree-tab:hover { color: var(--text); }
.tree-tab.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tree-pane {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 6px;
}
.tree-pane[hidden] { display: none !important; }
.tree-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
}

.tree, .tree-children {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tree-children { padding-left: 22px; }
.tree-node.collapsed > .tree-children { display: none; }

.tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    min-width: 0;
}
.tree-row:hover { background: var(--bg-card); }

.tree-disclosure {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: transform 0.18s var(--ease-out), background 0.12s;
}
.tree-disclosure:hover { background: var(--bg-hover); color: var(--text); }
.tree-node.collapsed > .tree-row > .tree-disclosure { transform: rotate(-90deg); }
.tree-disclosure-spacer { width: 22px; flex-shrink: 0; display: inline-block; }

.tree-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-muted);
}
.tree-icon-group   { background: var(--tint-blue);   color: var(--color-blue); }
.tree-icon-cat     { background: var(--tint-green);  color: var(--color-green); }
.tree-icon-product { background: var(--tint-orange); color: var(--color-orange); }
.tree-icon-mgroup  { background: var(--tint-pink);   color: var(--color-pink); }
.tree-icon-option  { background: var(--tint-purple); color: var(--color-purple); }

.tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
}
.tree-label:hover { color: var(--accent); text-decoration: underline; }
.tree-label-static {
    cursor: default;
    color: var(--text-muted);
    font-style: italic;
}
.tree-label-static:hover { color: var(--text-muted); text-decoration: none; }

.tree-node-group > .tree-row > .tree-label  { font-weight: 700; font-size: 15px; }
.tree-node-cat > .tree-row > .tree-label    { font-weight: 600; }
.tree-node-mgroup > .tree-row > .tree-label { font-weight: 700; font-size: 15px; }

.tree-node-inactive > .tree-row { opacity: 0.55; }
.tree-node-inactive .tree-label::after {
    content: ' · inaktív';
    font-size: 11px;
    color: var(--text-light);
    font-weight: 400;
}

.tree-meta {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.tree-meta .badge-required {
    background: var(--tint-orange);
    color: var(--color-orange);
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tree-meta-delta { color: var(--color-purple); font-weight: 600; }

.tree-add-link {
    color: var(--accent);
    font-size: 13px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tree-add-link:hover { background: var(--accent-fade); }
.tree-row-section-head { padding-top: 8px; padding-bottom: 4px; }
.tree-row-mgroup-product { padding: 4px 8px; }

/* Mobil */
@media (max-width: 600px) {
    .tree-pane { padding: 6px 4px; }
    .tree-children { padding-left: 16px; }
    .tree-meta { font-size: 11px; }
    .tree-label, .tree-label:hover { font-size: 13px; }
    .cat-row { flex-wrap: wrap; }
    .cat-row-edit { width: 100%; flex-wrap: wrap; }
    .cat-row-edit input { flex: 1 1 100%; min-width: 0; }
    .cat-row-edit .cat-group-select { max-width: none; flex: 1 1 auto; }
}

/* ============================================================
   QR vendég-rendelés — admin oldal: QR-kártya, print-sheet
   ============================================================ */
.qr-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 8px 16px;
}
.qr-card {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 26px 22px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 360px;
    width: 100%;
    text-align: center;
}
.qr-card-rest strong { color: var(--text); }
.qr-card-rest .muted { color: var(--text-muted); }
.qr-card-table strong { color: var(--text); }
.qr-card-room { color: var(--text-muted); }
.qr-card-url { background: var(--bg-soft); color: var(--text-muted); }
/* Nyomtatáskor tiszta, nyomtatóbarát: fehér kártya, monokróm márka-jel, semmi színes háttér. */
@media print {
    .qr-card { background: #fff !important; color: #1d1d1f !important; border: 1px solid #d8d8dc !important; box-shadow: none !important; }
    .qr-card-rest strong, .qr-card-table strong { color: #1d1d1f !important; }
    .qr-card-rest .muted, .qr-card-room, .qr-card-url { color: #6b6b70 !important; }
    .qr-card-url { background: #fff !important; padding: 2px 0 !important; }
    .qr-card-svg { background: #fff !important; }
    /* Színes gradiens márka-folt helyett vékony keretes, monokróm „R" — kevés festék. */
    .brand-dot, .brand-dot-lg {
        background: #fff !important; background-image: none !important;
        color: #1d1d1f !important; border: 1.5px solid #1d1d1f !important; box-shadow: none !important;
    }
}
.qr-card-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.qr-card-brand .brand-dot,
.qr-card-brand .brand-dot-lg { flex-shrink: 0; }
.qr-card-rest {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
    min-width: 0;
}
.qr-card-rest strong { font-size: 16px; color: #1d1d1f; }
.qr-card-rest .muted { color: #86868b; font-size: 12px; }
.qr-card-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
}
.qr-card-svg img,
.qr-card-svg canvas { display: block; }
.qr-card-foot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.qr-card-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.qr-card-table strong { font-size: 20px; color: #1d1d1f; }
.qr-card-room { font-size: 12px; color: #86868b; text-transform: uppercase; letter-spacing: 0.05em; }
.qr-card-url {
    font-size: 10px;
    color: #86868b;
    background: #f3f3f4;
    padding: 3px 8px;
    border-radius: 6px;
    word-break: break-all;
    max-width: 100%;
}
.qr-regen-form { margin-top: 8px; }

/* Print-sheet: 3-oszlopos grid A4-re */
.qr-sheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 12px;
}
.qr-card-sheet { padding: 14px 12px 12px; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.qr-card-sheet .qr-card-svg { padding: 4px; }
.qr-card-sheet .qr-card-table strong { font-size: 16px; }

/* ============================================================
   Vendég-oldal — étlap, kosár, status-képernyő
   ============================================================ */
body.guest-body {
    background: var(--bg);
    color: var(--text);

    /* Vendég-felület paletta (étterem-meleg piros + arany, WCAG-ellenőrzött).
       Az operátor tokeneket nem érinti. Lásd design-system/MASTER.md §3.2.
       Megj.: jelenleg csak világos értékek — sötét-mód override még nincs. */
    --g-primary: #DC2626;
    --g-on-primary: #ffffff;
    --g-secondary: #F87171;
    --g-accent: #A16207;
    --g-bg: #FEF2F2;
    --g-fg: #450A0A;
    --g-border: #FECACA;
    --g-muted: #F0EDF1;
}
.guest-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 14px 100px;
    padding-top: max(16px, env(safe-area-inset-top));
}
.guest-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 4px 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.guest-head-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.guest-head-text strong { font-size: 17px; }
.guest-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }

.guest-cat-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 12px;
    margin: 0 -10px 12px;
    padding-left: 10px;
    padding-right: 10px;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 5;
}
.guest-cat-strip::-webkit-scrollbar { display: none; }
.guest-cat-chip {
    padding: 8px 14px;
    border-radius: 100px;
    background: var(--bg-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.guest-cat-chip:hover  { background: var(--bg-hover); }
.guest-cat-chip.active { background: var(--accent); color: #fff; }

.guest-menu { display: flex; flex-direction: column; gap: 24px; }
.guest-cat-name {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 4px 4px 10px;
}
.guest-product-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.guest-product {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-height: 96px;
}
.guest-product-img {
    background-color: var(--bg-soft);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.guest-product-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}
.guest-product-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.guest-product-name { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.guest-product-desc { font-size: 12px; color: var(--text-muted); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guest-product-foot {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.guest-product-price { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.guest-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 14px;
    min-height: 38px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.guest-add-btn:hover  { background: var(--accent-hover); }
.guest-add-btn:active { transform: scale(0.95); }
.guest-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.guest-qty-controls .qty-btn { width: 32px; height: 32px; font-size: 18px; box-shadow: none; }
.guest-qty-controls .qty { min-width: 24px; font-size: 16px; font-weight: 700; }

/* Sticky kosár-bar a vendég-oldal alján */
.guest-cart-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--top-bar-bg-solid);
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 30;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}
.guest-cart-bar-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s var(--ease-spring), background 0.15s;
}
.guest-cart-bar-btn:active { transform: scale(0.98); }
.guest-cart-bar-count {
    background: rgba(255,255,255,0.25);
    border-radius: 100px;
    padding: 2px 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: center;
}
.guest-cart-bar-label { flex: 1; text-align: left; }
.guest-cart-bar-total { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Kosár-modal */
.guest-cart-modal { z-index: 200; }
.guest-cart-card {
    background: var(--bg-card);
    border-radius: 18px;
    width: min(440px, 100%);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    animation: modal-pop 0.25s var(--ease-spring);
}
.guest-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--border);
}
.guest-cart-head h2 { margin: 0; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.guest-cart-list { list-style: none; padding: 8px 16px; margin: 0; overflow-y: auto; flex: 1 1 auto; }
.guest-cart-empty { text-align: center; padding: 28px 0; color: var(--text-muted); }
.guest-cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.guest-cart-item:last-child { border-bottom: none; }
.guest-cart-item-info { display: flex; flex-direction: column; min-width: 0; }
.guest-cart-item-info strong { font-size: 14px; }
.guest-cart-item-total { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 70px; }
.guest-cart-fields {
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.guest-cart-fields input,
.guest-cart-fields textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    resize: vertical;
}
.guest-cart-totals { padding: 0 16px 12px; }
.guest-cart-totals .totals-grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.guest-cart-card .big-btn { margin: 0 16px 16px; padding-block: max(10px, env(safe-area-inset-bottom)); padding-block: 14px; }
.guest-submit-error {
    margin: 0 16px 16px;
    padding: 10px 12px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    border-radius: 10px;
    font-size: 14px;
}

/* Vendég várakozó / status képernyő */
.guest-wrap-status { min-height: 100dvh; display: flex; flex-direction: column; }
.guest-status {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}
.guest-status-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 360px;
}
.guest-status h1 { font-size: 22px; margin: 0; letter-spacing: -0.02em; }
.guest-status p { margin: 0; line-height: 1.45; }
.guest-pulse {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--accent-fade);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 8px;
}
.guest-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: guest-pulse-ring 1.6s ease-out infinite;
    opacity: 0.5;
}
@keyframes guest-pulse-ring {
    0%   { transform: scale(1);    opacity: 0.45; }
    100% { transform: scale(1.6);  opacity: 0; }
}
.guest-pulse-success { background: var(--success-bg); color: var(--success); }
.guest-pulse-error   { background: var(--danger-bg);  color: var(--danger);  }
.guest-pulse-success::before,
.guest-pulse-error::before { animation: none; }
/* „Mehetsz az ételért!" — figyelemfelkeltő, folyamatosan lüktető zöld */
.guest-pulse-ready { background: var(--color-green); color: #fff; animation: guest-ready-bounce 1s ease-in-out infinite; }
.guest-pulse-ready::before { background: var(--color-green); animation: guest-pulse-ring 1.2s ease-out infinite; }
@keyframes guest-ready-bounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.guest-reject-reason {
    background: var(--bg-soft);
    padding: 12px 16px;
    border-radius: 10px;
    font-style: italic;
    color: var(--text);
}

/* ============================================================
   Pincér — bejövő vendég-rendelések
   ============================================================ */
.pending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.pending-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pending-card-head { display: flex; align-items: center; gap: 12px; }
.pending-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--tint-orange);
    color: var(--color-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pending-card-table { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pending-card-table strong { font-size: 15px; }
.pending-card-meta {
    background: var(--bg-soft);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
}
.pending-guest { font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.pending-note { margin: 4px 0 0; color: var(--text); font-style: italic; }
.pending-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pending-items li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
}
.pending-items li:last-child { border-bottom: none; }
.pending-item-qty   { font-weight: 700; color: var(--text-muted); min-width: 24px; }
.pending-item-name  { font-weight: 500; }
.pending-item-price { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.pending-card-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.pending-card-total strong { font-size: 18px; font-weight: 700; }
.pending-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.pending-card-actions > * { flex: 1; }
.pending-action { display: contents; }
.pending-action button { width: 100%; }

/* Pending vendég-rendelés esetén: a felső "Áttekintés" link villog zölden,
   figyelemfelkeltően. Más bárszintű effekt nem zavar. */
.nav-overview { position: relative; }
.nav-overview-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-green);
    margin-left: 4px;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
}
body.has-pending .nav-overview-dot {
    display: inline-block;
    animation: overview-dot-blink 0.9s ease-in-out infinite;
}
@keyframes overview-dot-blink {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(52, 199, 89, 0.7); }
    50%      { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(52, 199, 89, 0);   }
}

body.has-pending .nav-overview {
    animation: nav-overview-blink 1.2s ease-in-out infinite;
    color: var(--color-green) !important;
    font-weight: 700;
}
@keyframes nav-overview-blink {
    0%, 100% {
        background: rgba(52, 199, 89, 0.10);
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
    }
    50% {
        background: rgba(52, 199, 89, 0.30);
        box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.40), 0 4px 14px rgba(52, 199, 89, 0.35);
    }
}

/* Új bejövő érkezésekor 2.4s-ig erős extra villogás */
body.has-new-pending .nav-overview {
    animation: nav-overview-splash 0.45s ease-out 5 !important;
}
@keyframes nav-overview-splash {
    0%   { background: rgba(52, 199, 89, 0.55); box-shadow: 0 0 0 8px rgba(52, 199, 89, 0.40); transform: scale(1); }
    100% { background: rgba(52, 199, 89, 0.10); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);     transform: scale(1.04); }
}

/* Mobil drawer-ban is mutatkozik az indikátor (drawer-link is .nav-overview marad) */
@media (max-width: 760px) {
    body.has-pending .nav-overview { background: rgba(52, 199, 89, 0.15); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
}

/* === Foglalás-indikátor — ugyanaz mint a QR (nav-overview), de PIROSAN === */
.nav-reservations { position: relative; }
.nav-reservations-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-red);
    margin-left: 4px;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
}
body.has-reservations .nav-reservations-dot {
    display: inline-block;
    animation: reservations-dot-blink 0.9s ease-in-out infinite;
}
@keyframes reservations-dot-blink {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(255, 59, 48, 0.7); }
    50%      { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);   }
}
body.has-reservations .nav-reservations {
    animation: nav-reservations-blink 1.2s ease-in-out infinite;
    color: var(--color-red) !important;
    font-weight: 700;
}
@keyframes nav-reservations-blink {
    0%, 100% {
        background: rgba(255, 59, 48, 0.10);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
    }
    50% {
        background: rgba(255, 59, 48, 0.30);
        box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.40), 0 4px 14px rgba(255, 59, 48, 0.35);
    }
}
/* Új foglalás érkezésekor 2.4s-ig erős extra villogás */
body.has-new-reservation .nav-reservations {
    animation: nav-reservations-splash 0.45s ease-out 5 !important;
}
@keyframes nav-reservations-splash {
    0%   { background: rgba(255, 59, 48, 0.55); box-shadow: 0 0 0 8px rgba(255, 59, 48, 0.40); transform: scale(1); }
    100% { background: rgba(255, 59, 48, 0.10); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);     transform: scale(1.04); }
}
@media (max-width: 760px) {
    body.has-reservations .nav-reservations { background: rgba(255, 59, 48, 0.15); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
}

/* === Online rendelés-indikátor — a „Bejövő" (vagy direkt Online link) ZÖLDEN pulzál,
   amíg van teljesítetlen online rendelés (received → out_for_delivery). Ütközéskor a
   foglalás-pirosat felülírja (később definiálva → ez nyer). === */
.nav-online { position: relative; }
body.has-online .nav-online,
body.has-online .nav-ops--online > summary {
    animation: nav-online-blink 1.2s ease-in-out infinite;
    color: var(--color-green) !important;
    font-weight: 700;
}
@keyframes nav-online-blink {
    0%, 100% { background: rgba(52, 199, 89, 0.10); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
    50%      { background: rgba(52, 199, 89, 0.30); box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.40), 0 4px 14px rgba(52, 199, 89, 0.35); }
}
/* Új rendelés érkezésekor 2.4s-ig erős extra villogás */
body.has-new-online .nav-online,
body.has-new-online .nav-ops--online > summary {
    animation: nav-online-splash 0.45s ease-out 5 !important;
}
@keyframes nav-online-splash {
    0%   { background: rgba(52, 199, 89, 0.55); box-shadow: 0 0 0 8px rgba(52, 199, 89, 0.40); transform: scale(1); }
    100% { background: rgba(52, 199, 89, 0.10); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);     transform: scale(1.04); }
}
@media (max-width: 760px) {
    body.has-online .nav-online,
    body.has-online .nav-ops--online > summary { background: rgba(52, 199, 89, 0.15); border-radius: 10px; }
}

/* === „Rendelések" lenyíló (Foglalások + Online + Futár, 2+ jogosultságnál) === */
.nav-ops { position: relative; }
.nav-ops > summary {
    list-style: none; cursor: pointer;
    color: var(--text-muted); font-size: 14px; font-weight: 500;
    padding: 8px 12px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.nav-ops > summary::-webkit-details-marker { display: none; }
.nav-ops > summary::marker { content: ""; }
.nav-ops > summary:hover { color: var(--text); background: var(--bg-soft); }
.nav-ops.active > summary { color: var(--text); background: var(--nav-active-bg); font-weight: 600; }
.nav-ops > summary .icon { opacity: 0.85; }
.nav-ops > summary > :last-child { transition: transform 0.15s var(--ease-out); }
.nav-ops[open] > summary > :last-child { transform: rotate(180deg); }
.nav-ops-menu {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; z-index: 50;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.nav-ops-menu a { display: flex; width: 100%; box-sizing: border-box; }
body.has-reservations .nav-ops--res > summary {
    animation: nav-reservations-blink 1.2s ease-in-out infinite; color: var(--color-red) !important; font-weight: 700;
}
body.has-new-reservation .nav-ops--res > summary { animation: nav-reservations-splash 0.45s ease-out 5 !important; }
@media (max-width: 760px) {
    .nav-ops > summary { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--border); border-radius: 0; justify-content: flex-start; }
    .nav-ops[open] > summary { border-bottom: 0; }
    .nav-ops-menu { position: static; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 0 0 0 16px; }
    .nav-ops-menu a { font-size: 15px; }
    body.has-reservations .nav-ops--res > summary { background: rgba(255, 59, 48, 0.15); }
}

/* Dashboard pending blokk fejléc */
.dash-pending {
    background: var(--bg-card);
    border: 1px solid var(--success-border);
    border-left: 4px solid var(--success);
    border-radius: var(--radius-xl);
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 18px rgba(52, 199, 89, 0.12);
}
.dash-pending-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dash-pending-head h2 {
    margin: 0;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dash-pending-head .hero-count {
    background: var(--success);
    color: #fff;
}
.dash-pending-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--success-bg);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Mobil: pending-grid 1 oszlop, guest-product még keskenyebb képpel */
@media (max-width: 600px) {
    .pending-grid { grid-template-columns: 1fr; }
    .guest-product { grid-template-columns: 80px 1fr; min-height: 80px; }
    .guest-product-name { font-size: 14px; }
    .guest-cart-card { width: calc(100% - 16px); margin: 8px; max-width: none; }
    .qr-sheet { grid-template-columns: 1fr 1fr; }

    /* Kosár-tételek mobilon: 2 sor — felül név+egységár (teljes szélesség),
       alul qty-controls + sortotál. Hosszú szavak átlógása kivédve. */
    .guest-cart-item {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 8px;
        align-items: center;
        padding: 12px 0;
    }
    .guest-cart-item-info {
        grid-column: 1 / -1;
        grid-row: 1;
        word-break: break-word;
    }
    .guest-cart-item .cart-controls {
        grid-column: 1;
        grid-row: 2;
        gap: 6px;
    }
    .guest-cart-item .cart-controls .qty-btn { width: 36px; height: 36px; font-size: 18px; }
    .guest-cart-item .cart-controls .qty { font-size: 18px; min-width: 24px; }
    .guest-cart-item-total {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }
}

@media print {
    @page { size: A4 portrait; margin: 10mm 12mm; }

    /* Light-mode reset — papíron mindig világos */
    :root {
        --bg: #fff; --bg-card: #fff; --bg-soft: #f6f6f7;
        --border: #c8c8cc; --text: #1a1a1c; --text-muted: #6b6b70;
        --shadow: none; --shadow-lg: none;
        color-scheme: light;
    }
    body {
        background: #fff;
        color: var(--text);
        font: 9.5pt/1.4 -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ---- Globális elrejtések (UI, gombok, app-chrome) ---- */
    header.top, nav.nav, .footer, .install-banner, .install-dialog,
    .date-bar, .modal-overlay, .receipt-action-cell,
    .receipt-view-btn, .callout, .ghost-btn, .primary-btn, .icon-btn,
    .screen-only, .page-hero, .page-hero-back,
    .receipt-list, .receipt-stat-grid {
        display: none !important;
    }
    .print-only { display: block !important; }
    table.print-only { display: table !important; }

    .main  { padding: 0; max-width: none; margin: 0; }
    .card  { box-shadow: none; border: none; padding: 0; margin: 0; background: transparent; }

    /* ---- Print fejléc — egysoros, hairline alulvonással ---- */
    .print-header {
        display: flex !important;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16pt;
        padding-bottom: 6pt;
        margin-bottom: 10pt;
        border-bottom: 0.5pt solid var(--text);
    }
    .print-header h1 {
        margin: 0;
        font-size: 17pt;
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1;
    }
    .print-header .pr-sub {
        display: block;
        margin-top: 3pt;
        font-size: 9pt;
        color: var(--text-muted);
        font-weight: 400;
        letter-spacing: 0.01em;
    }
    .print-header .pr-meta {
        text-align: right;
        font-size: 8.5pt;
        color: var(--text-muted);
        line-height: 1.45;
    }

    /* ---- Headline stat-strip (5 oszlopos, ikonok kihagyva) ---- */
    .stat-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 5pt !important;
        margin: 0 0 10pt !important;
    }
    .stat {
        background: transparent !important;
        border: 0.5pt solid var(--border) !important;
        border-radius: 3pt !important;
        padding: 5pt 7pt !important;
        color: var(--text) !important;
        gap: 0 !important;
        display: block !important;
    }
    .stat-icon { display: none !important; }
    .stat-num {
        font-size: 12pt !important;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin-bottom: 1pt;
    }
    .stat-label {
        font-size: 7pt !important;
        color: var(--text-muted) !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 500;
    }

    /* ---- Report-grid: PRINTBEN egyoszlopos blokk-folyam (a grid/multicol printben
            megbízhatatlanul tördel — szekciókat vág ketté, összekeveri a sorrendet).
            Egyoszlopos = logikus, fentről-lefelé, semmi nem szakad szét. ---- */
    .report-grid {
        display: block !important;
        margin-bottom: 8pt;
    }
    .report-grid > .report-section { margin-bottom: 7pt !important; }
    .report-section {
        background: transparent !important;
        border: 0.5pt solid var(--border) !important;
        border-radius: 3pt !important;
        box-shadow: none !important;
        overflow: visible !important;
        margin: 0 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .report-section-head {
        background: var(--bg-soft) !important;
        color: var(--text) !important;
        padding: 3pt 7pt !important;
        border-bottom: 0.5pt solid var(--border);
    }
    .report-section-head::before { display: none !important; }
    .report-section-head .report-section-icon { display: none !important; }
    .report-section-head h2 {
        color: var(--text) !important;
        font-size: 9pt !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0;
    }
    .report-section-head .hero-count {
        background: var(--text) !important;
        color: #fff !important;
        font-size: 7.5pt !important;
        padding: 0 5pt !important;
    }
    .report-section-body { padding: 0 !important; overflow: visible !important; }

    /* ---- Force tábla-layoutot printben (felülírja a mobil-stack media-query-ket) ---- */
    .report-table,
    .report-table:not(.receipts-table) { display: table !important; width: 100% !important; }
    .report-table thead,
    .report-table:not(.receipts-table) thead { display: table-header-group !important; }
    .report-table tbody,
    .report-table:not(.receipts-table) tbody { display: table-row-group !important; }
    .report-table tfoot,
    .report-table:not(.receipts-table) tfoot { display: table-footer-group !important; }
    .report-table tr,
    .report-table:not(.receipts-table) tr {
        display: table-row !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .report-table td, .report-table th,
    .report-table:not(.receipts-table) td { display: table-cell !important; }
    .report-table td[data-label]::before,
    .report-table:not(.receipts-table) td[data-label]::before { display: none !important; }

    .report-table {
        font-size: 8.5pt !important;
        font-variant-numeric: tabular-nums;
        border-collapse: collapse;
    }
    .report-table th, .report-table td {
        padding: 3pt 7pt !important;
        border-bottom: 0.4pt solid var(--border) !important;
        white-space: nowrap !important;
        vertical-align: middle;
    }
    .report-table td.num, .report-table th.num { white-space: nowrap !important; text-align: right; }
    .report-table th {
        font-size: 6.5pt !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted) !important;
        font-weight: 600;
        background: transparent !important;
        padding-top: 4pt !important;
        padding-bottom: 3pt !important;
    }
    .report-table tbody tr:last-child td { border-bottom: 0.4pt solid var(--border) !important; }
    .report-table tfoot td,
    .report-table tfoot .report-foot-row td {
        background: transparent !important;
        font-weight: 700 !important;
        font-size: 9pt !important;
        border-top: 0.7pt solid var(--text) !important;
        border-bottom: none !important;
        color: var(--text) !important;
        padding-top: 4pt !important;
        padding-bottom: 4pt !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    .report-table tfoot .report-foot-row td:first-child {
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        font-size: 7.5pt !important;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        margin: 0 !important;
        border-bottom: none !important;
        padding-bottom: 4pt !important;
    }

    /* ---- Bizonylatok lista — printben tömörebb ---- */
    .receipts-table { width: 100% !important; font-size: 8.5pt !important; }
    .receipts-table th, .receipts-table td {
        padding: 3pt 6pt !important;
        border-bottom: 0.3pt solid var(--border) !important;
    }
    .receipts-table tr { break-inside: avoid; }
    .receipts-table .receipt-action-cell { display: none !important; }
    .receipts-table .receipt-no { font-size: 8pt; }

    /* ---- Chip-ek printben: háttér nélkül, csak szöveg / fekete keret ---- */
    .method-chip, .vat-rate-chip {
        background: transparent !important;
        color: var(--text) !important;
        border: 0.5pt solid var(--border) !important;
        padding: 0.5pt 4pt !important;
        font-weight: 500 !important;
        font-size: 7.5pt !important;
        text-transform: none !important;
    }
    .vat-rate-chip { font-weight: 700 !important; }
    .dine-chip {
        background: transparent !important;
        color: var(--text) !important;
        border: 0.5pt solid var(--border) !important;
        padding: 0 2pt !important;
        margin-right: 2pt;
    }
    .time-day {
        background: transparent !important;
        color: var(--text-muted) !important;
        padding: 0 !important;
        font-weight: 600 !important;
        font-size: 7.5pt !important;
        margin-right: 2pt;
    }
    .time-dur { color: var(--text-muted) !important; font-size: 7.5pt !important; }

    /* Egyetlen oldalt megpróbálunk tartani — ha a bizonylatok-tábla túlnő, nyomtatja
       következő lapra; minden tábla-sor egyben marad */
    section.report-section + section.report-section { margin-top: 7pt; }
}

/* === BEÁLLÍTÁSOK V2 === */

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.card-head h2 { margin: 0; }
.card h2 .icon { vertical-align: -0.15em; opacity: 0.75; margin-right: 4px; }

.settings-form .dlg-field { margin-bottom: 14px; }
.settings-form .primary-btn { margin-top: 6px; }

/* User cards grid */
.user-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.user-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out), background 0.15s;
}
.user-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    background: var(--bg-card);
}
.user-card.inactive { opacity: 0.55; }

.user-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
}
.user-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.user-card-initial { color: #fff; }

.user-card.color-purple .user-card-avatar { background: linear-gradient(135deg, var(--color-purple), var(--color-pink)); }
.user-card.color-blue   .user-card-avatar { background: linear-gradient(135deg, var(--color-blue), var(--color-teal)); }
.user-card.color-green  .user-card-avatar { background: linear-gradient(135deg, var(--color-green), var(--color-mint)); }
.user-card.color-orange .user-card-avatar { background: linear-gradient(135deg, var(--color-orange), var(--color-red)); }
.user-card.color-teal   .user-card-avatar { background: linear-gradient(135deg, var(--color-teal), var(--color-indigo)); }
.user-card.color-gray   .user-card-avatar { background: var(--color-gray); }

.user-card-body {
    flex: 1;
    min-width: 0;
}
.user-card-name {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-card-role { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.role-purple { background: var(--tint-purple); color: var(--color-purple); }
.role-blue   { background: var(--tint-blue);   color: var(--color-blue); }
.role-green  { background: var(--tint-green);  color: var(--color-green); }
.role-orange { background: var(--tint-orange); color: var(--color-orange); }
.role-teal   { background: var(--tint-teal);   color: var(--color-teal); }
.role-muted  { background: var(--bg-hover);    color: var(--text-muted); }

/* Avatar uploader (user szerkesztő) */
.avatar-uploader {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 18px;
    background: var(--bg-soft);
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.avatar-uploader.drag-over {
    border-color: var(--accent);
    background: var(--accent-fade);
}
.avatar-preview-wrap {
    width: 140px;
    height: 140px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}
.avatar-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-placeholder {
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Backup */
.backup-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

/* Backup oldal */
.cron-url {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    overflow-x: auto;
    user-select: all;
    margin: 8px 0;
}
table.users code {
    background: var(--bg-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* === Daily zárás alsó grid: Termek átlag-foglaltság (1fr) + Bizonylat-analitika (2fr) === */
.daily-bottom-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}
.daily-bottom-grid.no-rooms { grid-template-columns: 1fr; }
.daily-bottom-grid.no-stats { grid-template-columns: 1fr; }
.daily-bottom-grid > .report-section,
.daily-bottom-grid > .receipt-stat-grid { min-width: 0; }
@media (max-width: 1100px) {
    .daily-bottom-grid { grid-template-columns: 1fr; }
}

/* === Bizonylat-analitika (Daily zárás Bizonylatok fölé) — 6 kompakt stat-kártya === */
.receipt-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 0;
}
/* Ha önállóan áll (Termek nincs), szélesebb: 3 oszlop */
.daily-bottom-grid.no-rooms .receipt-stat-grid { grid-template-columns: repeat(3, 1fr); }
.receipt-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
}
.receipt-stat-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    position: relative;
    overflow: hidden;
}
.receipt-stat-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.22), transparent 60%);
    pointer-events: none;
}
.receipt-stat-icon .icon { position: relative; z-index: 1; }
.receipt-stat-body { flex: 1; min-width: 0; }
.receipt-stat-num {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.receipt-stat-num-sm { font-size: 16px; }
.receipt-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.3;
}
.receipt-stat-label .receipt-no {
    background: var(--bg-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
}

/* === Kompakt bizonylat-lista — egy sor / bizonylat, teljes sor kattintható ===
       subgrid-del minden sor megosztja a közös oszlopokat, így az adatok
       egymás alatt függőlegesen tökéletesen igazítva jelennek meg. */
.report-section-body-list { padding: 0 !important; overflow: hidden; }
.receipt-list {
    display: grid;
    /* num · dine · table · time · waiter · method · total · tip · arrow */
    grid-template-columns: auto auto minmax(120px, 1.4fr) minmax(180px, 1.2fr) minmax(80px, 0.8fr) auto auto auto auto;
    column-gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.receipt-list > li { display: contents; }
.receipt-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: 14px;
    align-items: center;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s var(--ease-out);
    min-width: 0;
}
.receipt-list > li:last-child .receipt-row { border-bottom: none; }
.receipt-row > * { padding-block: 12px; align-self: center; min-width: 0; }
.receipt-row > :first-child { padding-left: 18px; }
.receipt-row > :last-child  { padding-right: 18px; }
.receipt-row:hover  { background: var(--bg-soft); }
.receipt-row:active { background: var(--bg-hover); }
.receipt-row .col-num     { color: var(--text-muted); font-size: 12px; }
.receipt-row .col-dine    { display: inline-flex; align-items: center; }
.receipt-row .col-dine .dine-chip { margin-right: 0; }
.receipt-row .col-table   { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-row .col-time    { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt-row .col-time .time-day {
    display: inline-block;
    background: var(--tint-orange);
    color: var(--color-orange);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin-right: 4px;
    font-size: 11px;
}
.receipt-row .col-waiter  { color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-row .col-method  { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.receipt-row .col-total   { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.receipt-row .col-tip     { color: var(--success); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; min-width: 50px; }
.receipt-row .col-arrow   { color: var(--text-light); display: inline-flex; }

/* Tablet + szűkebb desktop: kevesebb oszlop, oszlop-mintát is csökkentjük a parent grid-en */
@media (max-width: 1100px) {
    .receipt-list {
        /* dine · table · time · total · tip · arrow */
        grid-template-columns: auto minmax(120px, 1.4fr) minmax(150px, 1fr) auto auto auto;
        column-gap: 10px;
    }
    .receipt-row > .col-num,
    .receipt-row > .col-waiter,
    .receipt-row > .col-method { display: none; }
}

/* Mobil: két soros sűrítés — felső sor időpont+asztal, alsó sor összeg + chips */
@media (max-width: 600px) {
    .receipt-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .receipt-stat { padding: 12px 14px; gap: 10px; }
    .receipt-stat-icon { width: 34px; height: 34px; border-radius: 9px; }
    .receipt-stat-num { font-size: 17px; }
    .receipt-stat-num-sm { font-size: 14px; }

    /* Mobilon nincs közös grid — minden sor saját flex-doboz, szabadon törhet */
    .receipt-list { display: block; grid-template-columns: none; column-gap: 0; }
    .receipt-list > li { display: block; }
    .receipt-row {
        display: flex;
        grid-column: auto;
        grid-template-columns: none;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 12px 14px;
        align-items: center;
    }
    .receipt-row > *          { padding-block: 0; }
    .receipt-row > :first-child,
    .receipt-row > :last-child { padding-left: 0; padding-right: 0; }
    .receipt-row > .col-num,
    .receipt-row > .col-waiter,
    .receipt-row > .col-method { display: inline-flex; }
    .receipt-row .col-num     { display: inline; order: 1; }
    .receipt-row .col-dine    { order: 2; }
    .receipt-row .col-table   { order: 3; flex: 1 1 auto; font-size: 14px; }
    .receipt-row .col-total   { order: 4; font-size: 16px; }
    .receipt-row .col-time    { order: 5; flex-basis: 100%; font-size: 12px; }
    .receipt-row .col-waiter  { display: inline; order: 6; font-size: 12px; }
    .receipt-row .col-waiter::before { content: '· '; }
    .receipt-row .col-method  { order: 7; }
    .receipt-row .col-tip     { order: 8; }
    .receipt-row .col-arrow   { display: none; }
}

/* Print: bizonylat-lista helyett egy szellős táblát mutatunk */
.print-receipts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
    margin-top: 6mm;
}
.print-receipts-table th,
.print-receipts-table td {
    border: 1px solid #c8c8cc;
    padding: 4px 8px;
    text-align: left;
}
.print-receipts-table th { background: #f6f6f7; font-weight: 600; }
.print-receipts-table .num,
.print-receipts-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Footer */
.footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 24px 0;
}

/* ============================================================
   SZEREPKÖRÖK & JOGOSULTSÁGOK
   ============================================================ */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.role-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .15s var(--ease-spring), box-shadow .15s var(--ease-out);
}
.role-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    background: var(--bg-card);
}
.role-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.role-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}
.role-card-meta strong { color: var(--text); font-weight: 600; }
.role-card-key {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: auto;
}
.role-card-key code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10.5px;
}

/* Színpaletta swatch-választó */
.role-color-picker {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.color-swatch {
    display: inline-block;
    cursor: pointer;
    position: relative;
}
.color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.color-swatch span {
    display: block;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--color-gray);
    transition: transform .12s var(--ease-out), border-color .12s;
}
.color-swatch.color-purple span { background: var(--color-purple); }
.color-swatch.color-blue   span { background: var(--color-blue); }
.color-swatch.color-green  span { background: var(--color-green); }
.color-swatch.color-orange span { background: var(--color-orange); }
.color-swatch.color-teal   span { background: var(--color-teal); }
.color-swatch.color-pink   span { background: var(--color-pink); }
.color-swatch.color-red    span { background: var(--color-red); }
.color-swatch.color-indigo span { background: var(--color-indigo); }
.color-swatch.color-gray   span { background: var(--color-gray); }
.color-swatch:hover span { transform: scale(1.1); }
.color-swatch.selected span,
.color-swatch input:checked + span {
    border-color: var(--text);
    transform: scale(1.12);
}

/* Permission-checkbox matrix */
.perm-matrix h3 { font-size: 15px; font-weight: 600; }
.perm-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.perm-row:hover { background: var(--bg-soft); }
.perm-row.checked,
.perm-row:has(input:checked) {
    background: var(--bg-soft);
    border-color: var(--text-muted);
}
.perm-row input[type="checkbox"] {
    margin-top: 2px;
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.perm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-text strong { font-size: 14px; font-weight: 600; }
.dlg-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px -22px;
}

/* ============================================================
   FORGALOM-TREND — Áttekintés-card (elmúlt hét / hónap oszlopdiagram)
   ============================================================ */
.rev-card { padding: 18px 22px; }
.rev-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rev-card-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.rev-card-head h2 .icon { color: var(--accent); }
.rev-card-head .small-btn { margin-left: auto; flex: 0 0 auto; }
.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rev-panel { display: flex; flex-direction: column; min-width: 0; }
.rev-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rev-panel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.rev-panel-total { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.rev-bars { display: flex; align-items: flex-end; gap: 5px; height: 88px; }
.rev-bars-dense { gap: 2px; }
.rev-bar { flex: 1 1 0; min-width: 0; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; transition: opacity .15s ease; }
.rev-bar.is-zero { background: var(--border); }
.rev-bar:hover { opacity: .72; }
.rev-axis { display: flex; gap: 5px; margin-top: 7px; }
.rev-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 10px; color: var(--text-light); font-variant-numeric: tabular-nums; }
.rev-axis-sparse { justify-content: space-between; }
.rev-axis-sparse span { flex: 0 0 auto; }
@media (max-width: 700px) {
    .rev-grid { grid-template-columns: 1fr; gap: 20px; }
    .rev-card { padding: 16px; }
}

/* ============================================================
   TERMEK ÁTLAG-FOGLALTSÁG — Áttekintés-card
   ============================================================ */
.occupancy-card { padding: 18px 22px; }
.occupancy-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.occupancy-head h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}
.occupancy-head p { margin: 2px 0 0; }
.occupancy-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--tint-green);
    color: var(--color-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.occupancy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.occupancy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.occupancy-row:last-child { border-bottom: none; padding-bottom: 4px; }
.occupancy-row:first-child { padding-top: 14px; }
.occ-name {
    font-weight: 600;
    font-size: 15px;
    min-width: 0;
    flex: 0 0 auto;
}
.occ-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.occ-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.occ-pill strong {
    color: var(--text);
    font-weight: 700;
}
.occ-pill-count { background: var(--bg-soft); }
.occ-pill-avg   { background: var(--tint-green);  color: var(--color-green); }
.occ-pill-avg strong { color: var(--color-green); }
.occ-pill-max   { background: var(--tint-blue);   color: var(--color-blue); }
.occ-pill-max strong { color: var(--color-blue); }
.occupancy-empty { padding: 8px 0 4px; }

@media (max-width: 560px) {
    .occupancy-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .occ-pills {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================================
   Opció-választó modal (POS + guest közös)
   ============================================================ */
.opt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    animation: modal-fade 0.2s ease-out;
}
.opt-modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    width: min(440px, 100%);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    animation: modal-pop 0.25s var(--ease-spring);
}
.opt-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.opt-modal-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.opt-modal-title strong { font-size: 17px; letter-spacing: -0.01em; }
.opt-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}
.opt-group {}
.opt-group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.opt-group-name {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.opt-required { color: var(--color-red); margin-left: 2px; }
.opt-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.opt-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--bg-soft);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.opt-option:hover { background: var(--bg-hover); }
.opt-option.selected {
    background: var(--accent-fade);
    border-color: var(--accent);
}
.opt-mark {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.opt-option.selected .opt-mark {
    background: var(--accent);
    border-color: var(--accent);
}
.opt-option.selected .opt-mark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.opt-option-name { flex: 1; font-size: 15px; font-weight: 500; }
.opt-option-delta {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.opt-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
}
.opt-modal-total { display: flex; flex-direction: column; line-height: 1.2; }
.opt-modal-total-amt { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.opt-modal-confirm { padding: 11px 22px; }
.opt-modal-confirm.is-disabled,
.opt-modal-confirm:disabled { opacity: 0.45; cursor: not-allowed; }

/* Kosár-tétel alatti modifier-lista (POS + guest) */
.ci-modifiers {
    list-style: none;
    padding: 4px 0 4px 12px;
    margin: 4px 0 0;
    border-left: 2px solid var(--accent-fade);
    font-size: 12px;
    color: var(--text-muted);
}
.ci-modifiers li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 1px 0;
}
.ci-mod-name { flex: 1; }
.ci-mod-delta {
    color: var(--color-purple);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Help-modal a dashboard-on — lebegő, scrollozható */
.help-modal { z-index: 240; padding: 24px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.help-modal-card {
    background: var(--bg-card);
    border-radius: 18px;
    width: min(1180px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.10);
    animation: modal-pop 0.25s var(--ease-spring);
}
.help-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-soft) 100%);
}
.help-modal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.help-modal-title strong { display: block; font-size: 15px; letter-spacing: -0.005em; }
.help-modal-title .muted { display: block; line-height: 1.2; }
.help-modal-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    position: relative;
    overflow: hidden;
}
.help-modal-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.22), transparent 60%);
    pointer-events: none;
}
.help-modal-icon .icon { position: relative; z-index: 1; }
.help-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 26px;
    flex: 1 1 auto;
}
.help-modal-body .help-layout {
    grid-template-columns: 220px 1fr;
    gap: 24px;
}
.help-modal-body .help-toc {
    top: 0;
    align-self: start;
}
.help-modal-body .help-section { padding: 22px 26px; box-shadow: none; border: 1px solid var(--border); }

@media (max-width: 900px) {
    .help-modal { padding: 0; }
    .help-modal-card { border-radius: 0; max-height: 100vh; max-height: 100dvh; width: 100%; }
    .help-modal-body { padding: 16px; }
    .help-modal-body .help-layout { grid-template-columns: 1fr; gap: 16px; }
    .help-modal-body .help-toc { position: static; }
}

/* ============================================================
   Felhasználói útmutató (help) oldal — hosszú dokumentum + TOC
   ============================================================ */
.help-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.help-hero { margin-bottom: 24px; }
.page-hero-help-btn { color: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.45); }
.page-hero-help-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }

.help-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
}
.help-toc { position: sticky; top: 80px; }
.help-toc-inner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}
.help-toc h3 { margin: 0 0 10px; font-size: 11px; }
.help-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.help-toc li { counter-increment: toc; }
.help-toc a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
    line-height: 1.3;
    transition: background 0.12s, color 0.12s;
}
.help-toc a::before {
    content: counter(toc) ". ";
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}
.help-toc a:hover { background: var(--bg-soft); color: var(--text); }

.help-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}
.help-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    box-shadow: var(--shadow);
    scroll-margin-top: 24px;
}
.help-section h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    font-size: 22px;
    letter-spacing: -0.015em;
}
.help-section h3 {
    text-transform: none;
    color: var(--text);
    font-size: 16px;
    letter-spacing: -0.005em;
    margin-top: 18px;
    margin-bottom: 8px;
}
.help-section p { line-height: 1.55; margin: 0 0 12px; }
.help-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--color-purple), var(--color-pink));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    position: relative;
    overflow: hidden;
}
.help-num::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.22), transparent 60%);
    pointer-events: none;
}
.help-num .icon { position: relative; z-index: 1; }
.help-num-purple { background: linear-gradient(135deg, var(--color-purple), var(--color-pink)); }
.help-num-indigo { background: linear-gradient(135deg, var(--color-indigo), var(--color-blue)); }
.help-num-green  { background: linear-gradient(135deg, var(--color-green),  var(--color-mint)); }
.help-num-teal   { background: linear-gradient(135deg, var(--color-teal),   var(--color-blue)); }
.help-num-pink   { background: linear-gradient(135deg, var(--color-pink),   var(--color-purple)); }
.help-num-orange { background: linear-gradient(135deg, var(--color-orange), var(--color-red)); }
.help-num-red    { background: linear-gradient(135deg, var(--color-red),    var(--color-orange)); }
.help-num-blue   { background: linear-gradient(135deg, var(--color-blue),   var(--color-teal)); }
.help-num-gray   { background: linear-gradient(135deg, var(--color-gray),   var(--color-blue)); }

/* Call-outs */
.help-callout {
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 12px 0;
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.5;
}
.help-callout-tip   { background: var(--accent-fade); border-color: var(--accent); }
.help-callout-warn  { background: var(--warn-bg);   border-color: var(--warn);   color: var(--warn-text); }

/* Lépés-lista */
.help-steps { padding-left: 18px; line-height: 1.65; }
.help-steps li { margin-bottom: 6px; }
.help-bullets { padding-left: 18px; line-height: 1.65; }
.help-bullets li { margin-bottom: 6px; }

/* Architektúra-illusztráció (1. szakasz) */
.help-arch { margin: 18px 0; text-align: center; }
.help-arch svg { max-width: 100%; height: auto; }
.help-cap { margin-top: 6px; }

/* Szerepkör-kártyák */
.help-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 14px 0 16px;
}
.help-role {
    background: var(--bg-soft);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.help-role strong { font-size: 14px; }
.help-role span { font-size: 12px; color: var(--text-muted); }

/* Étlap fa-illusztráció */
.help-tree-illust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 18px 12px;
    margin: 14px 0;
}
.ht-node {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    min-width: 220px;
}
.ht-node span {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.ht-group { border-color: var(--color-blue); color: var(--color-blue); }
.ht-cat   { border-color: var(--color-green); color: var(--color-green); }
.ht-prod  { border-color: var(--color-orange); color: var(--color-orange); }
.ht-opt   { border-color: var(--color-purple); color: var(--color-purple); }
.ht-arrow { color: var(--text-light); font-size: 18px; }

/* Mock UI: floor + tile-ok */
.help-mock {
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin: 14px 0 6px;
}
.help-mock-floor {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    min-height: 100px;
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1.5px);
    background-size: 22px 22px;
    background-color: var(--bg-card);
}
.hm-tile {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,122,255,0.22);
}
.hm-sq { width: 64px; height: 64px; border-radius: 14px; }
.hm-circ { width: 64px; height: 64px; border-radius: 50%; }
.hm-rect { width: 130px; height: 50px; border-radius: 10px; font-size: 13px; }

.help-mock-tree ul { list-style: none; padding-left: 20px; margin: 0; line-height: 1.8; }
.help-mock-tree em { color: var(--text-muted); font-style: normal; font-size: 12px; margin-left: 6px; }

/* QR-flow lépés-doboz */
.help-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.hf-step {
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.hf-step strong { display: block; font-size: 14px; }
.hf-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}
.hf-arrow { color: var(--text-light); font-size: 20px; align-self: center; }

/* KDS-demo két oszlop */
.help-kds-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0;
}
.kds-demo {
    color: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.kds-demo-cooking { background: linear-gradient(135deg, var(--color-orange), var(--color-red) 80%); }
.kds-demo-ready   { background: linear-gradient(135deg, var(--color-mint),   var(--color-blue) 80%); }
.kds-demo-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.kds-demo-head strong { font-size: 14px; }
.kds-demo-head span { font-size: 11px; opacity: 0.85; text-align: right; line-height: 1.3; }
.kds-demo ul { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.kds-demo button {
    background: rgba(255,255,255,0.95);
    color: var(--text);
    border: none;
    padding: 6px 14px;
    border-radius: 100px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

/* Asztal-állapot színkód sorok */
.help-states {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
}
.hs-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    color: #fff;
}
.hs-row strong { color: #fff; }
.hs-row .muted { color: rgba(255,255,255,0.78); }
.hs-row p { margin: 4px 0 0; color: rgba(255,255,255,0.95); }
.hs-chip {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.hs-oos    { background: linear-gradient(135deg, #7a1f1a, var(--color-red) 92%); }
.hs-ready  { background: linear-gradient(135deg, var(--color-red),    var(--color-pink)   80%); }
.hs-sent   { background: linear-gradient(135deg, var(--color-orange), var(--color-yellow) 80%); color: #1d1d1f; }
.hs-sent strong { color: #1d1d1f; }
.hs-sent p, .hs-sent .muted { color: rgba(0,0,0,0.65); }
.hs-new    { background: linear-gradient(135deg, var(--color-indigo), var(--color-blue)   80%); }
.hs-served { background: linear-gradient(135deg, var(--color-green),  var(--color-mint)   80%); }

/* Mobil layout: TOC felül, content alul */
@media (max-width: 900px) {
    .help-layout { grid-template-columns: 1fr; }
    .help-toc { position: static; }
    .help-section { padding: 22px 18px; }
    .help-kds-cols { grid-template-columns: 1fr; }
    .help-flow { flex-direction: column; }
    .hf-arrow { transform: rotate(90deg); }
}

/* ============================================================
   Beállítások — Étterem-adatok szekció (v2 design)
   ============================================================ */
.settings-card { padding: 0; overflow: hidden; }
.settings-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-soft) 100%);
}
.settings-card-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    position: relative;
    overflow: hidden;
}
.settings-card-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.22), transparent 60%);
    pointer-events: none;
}
.settings-card-icon .icon { position: relative; z-index: 1; }
.settings-card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-card-titles h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.settings-card-titles p { margin: 0; }

.settings-form-v2 {
    display: flex;
    flex-direction: column;
}
.set-section {
    border: none;
    margin: 0;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.set-section:last-of-type { border-bottom: none; }
.set-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0;
    margin-bottom: 12px;
    display: block;
}
.set-section-desc {
    margin: -6px 0 12px;
    line-height: 1.4;
}
.set-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
}
.set-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.set-field-wide { grid-column: 1 / -1; }
.set-field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.set-field label .icon { opacity: 0.7; }
.set-field input[type="text"],
.set-field input[type="number"],
.set-field input[type="password"],
.set-field textarea,
.set-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.set-field input:focus,
.set-field textarea:focus,
.set-field select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--accent-fade);
}
.set-field input::placeholder,
.set-field textarea::placeholder { color: var(--text-light); }
.set-field textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.set-field select { cursor: pointer; }
.set-range-row { display: flex; align-items: center; gap: 12px; }
.set-range-row input[type="range"] { flex: 1; min-width: 0; }
.set-range-row .ghost-btn { flex: 0 0 auto; }
.set-switch-field { margin-bottom: 16px; }
.set-field-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 2px;
}

/* Input + suffix (pl. "%") egyetlen vizuális dobozban */
.set-input-suffix {
    position: relative;
    display: flex;
    align-items: center;
}
.set-input-suffix input {
    padding-right: 36px !important;
    text-align: left;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.set-suffix {
    position: absolute;
    right: 14px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.settings-card-foot {
    padding: 14px 22px;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.settings-card-foot .big-btn { padding: 11px 22px; font-size: 15px; min-height: 0; }

@media (max-width: 600px) {
    .settings-card-head { padding: 14px 16px; }
    .set-section { padding: 14px 16px; }
    .settings-card-foot { padding: 12px 16px; }
    .set-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Icon-only nav link (pl. Beállítások fogaskerék) — desktopon label rejtve,
   csak az ikon látszik. Mobil drawer-ben szövegesen visszajön. */
.nav a.nav-icon-only {
    padding: 8px 10px;
    justify-content: center;
}
.nav-icon-only-label { display: none; }
@media (max-width: 760px) {
    .nav a.nav-icon-only { padding: 14px 4px; justify-content: flex-start; }
    .nav-icon-only-label { display: inline; }
}

/* ============================================================
   Téma-váltó — gyorsgomb a top-nav-ban + .theme-seg szegmens
   ============================================================ */
.theme-toggle-btn {
    flex-shrink: 0;
    margin: 0 4px 0 0;
    position: relative;
}
.theme-toggle-icon { display: inline-flex; align-items: center; transition: opacity 0.15s, transform 0.25s; }
/* Default (auto / fény): sun látszik, moon rejtve */
.theme-toggle-moon { display: none; }
.theme-toggle-sun  { display: inline-flex; }
/* Sötét módban: moon látszik, sun rejtve */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light):not(.theme-dark) .theme-toggle-sun  { display: none; }
    html:not(.theme-light):not(.theme-dark) .theme-toggle-moon { display: inline-flex; }
}
html.theme-dark .theme-toggle-sun  { display: none; }
html.theme-dark .theme-toggle-moon { display: inline-flex; }
html.theme-light .theme-toggle-sun  { display: inline-flex; }
html.theme-light .theme-toggle-moon { display: none; }

/* Mobil drawerben szöveges, gomb-szerű */
.nav-user-mobile .theme-toggle-btn { padding: 9px 14px; }
.nav-user-mobile .theme-toggle-btn::after {
    content: attr(title);
    display: none;
}

/* Téma-szegmens (Beállítások / Megjelenés) — 3 gomb */
.theme-seg {
    display: inline-flex;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 4px;
    gap: 4px;
}
.theme-seg button {
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.theme-seg button:hover { color: var(--text); }
.theme-seg button.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============================================================
   Beállítások — Megjelenés / háttér-szín picker
   ============================================================ */
.bg-color-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.bg-color-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}
.bg-color-picker input[type="color"] {
    position: absolute;
    width: 56px;
    height: 56px;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}
.bg-color-swatch {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 2px var(--bg-card), 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
    transition: transform 0.12s var(--ease-spring);
}
.bg-color-picker:hover .bg-color-swatch { transform: scale(1.05); }
.bg-color-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.bg-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bg-preset {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s var(--ease-spring), box-shadow 0.12s;
    box-shadow: inset 0 0 0 2px var(--bg-card);
}
.bg-preset:hover { transform: scale(1.1); }
.bg-preset.active {
    box-shadow: inset 0 0 0 2px var(--bg-card), 0 0 0 2px var(--accent);
    transform: scale(1.08);
}

/* ============================================================
   App-ikon szerkesztő — Beállítások / PWA-ikon feltöltő
   ============================================================ */
.app-icon-card {}
.app-icon-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    margin-top: 14px;
    align-items: flex-start;
}
.app-icon-previews {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.app-icon-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.app-icon-preview img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    object-fit: cover;
}
.app-icon-preview-lg img {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.app-icon-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.app-icon-form { display: flex; flex-direction: column; gap: 10px; }
.app-icon-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 14px;
    border: 2px dashed var(--border);
    border-radius: 14px;
    background: var(--bg-soft);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-muted);
    text-align: center;
}
.app-icon-drop:hover { border-color: var(--accent); background: var(--bg-card); }
.app-icon-drop input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.app-icon-drop .icon { color: var(--accent); }
.app-icon-reset-form { display: inline-flex; }

@media (max-width: 600px) {
    .app-icon-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Fejlesztési ütemterv — <details> alapból zárt, kinyitható
   ============================================================ */
.dev-roadmap-card {
    padding: 0;
    overflow: hidden;
}
.dev-roadmap-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.dev-roadmap-summary::-webkit-details-marker { display: none; }
.dev-roadmap-summary::marker { display: none; }
.dev-roadmap-summary:hover { background: var(--bg-soft); }
.dev-roadmap-summary h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.dev-roadmap-meta { flex-shrink: 0; }
.dev-roadmap-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s var(--ease-out);
    display: inline-flex;
}
.dev-roadmap-card[open] .dev-roadmap-chevron { transform: rotate(180deg); }
.dev-roadmap-body {
    padding: 0 22px 18px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
}

/* ============================================================
   IDŐ-ELLENŐRZÉS — Beállítások / Idő-szinkron
   ============================================================ */
.time-card .time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0 6px;
}
.time-cell-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    min-width: 0;
}
.time-cell-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}
.time-cell-value {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.time-cell-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.time-diff-ok   { color: var(--color-green); }
.time-diff-warn { color: var(--color-orange); }
.time-diff-err  { color: var(--color-red); }
.time-form { margin-top: 8px; }

@media (max-width: 720px) {
    .time-card .time-grid { grid-template-columns: 1fr; }
    .time-cell-value      { font-size: 24px; }
}

/* Backup restore gomb — narancs hint a ghost-btn-en */
.restore-btn {
    color: var(--color-orange);
    border-color: rgba(255, 149, 0, 0.35);
}
.restore-btn:hover {
    background: var(--tint-orange);
}

/* Backup tábla mobil-stackelés (data-label-pattern) */
@media (max-width: 720px) {
    .backup-table thead { display: none; }
    .backup-table, .backup-table tbody, .backup-table tr, .backup-table td {
        display: block;
        width: 100%;
    }
    .backup-table tr {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 8px 12px;
    }
    .backup-table td {
        border: none !important;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .backup-table td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        font-weight: 600;
        flex-shrink: 0;
    }
    .backup-table td .ghost-btn,
    .backup-table td .icon-btn,
    .backup-table td .inline-form {
        width: 100%;
    }
    .backup-table td .ghost-btn { justify-content: center; }
}

/* ── Osztás (számla-megosztás) képernyő ─────────────────────────── */
.split-screen { max-width: 720px; margin: 0 auto; padding: var(--sp-4) var(--sp-3) var(--sp-8); }
.split-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.split-header h1 { flex: 1; font-size: var(--fs-xl); font-weight: 600; margin: 0; }
.split-remaining { color: var(--text-muted); font-size: var(--fs-sm); }
.split-remaining strong { color: var(--text); font-size: var(--fs-md); margin-left: 4px; }
.split-sec-title { font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 var(--sp-2); }
.split-items, .split-active, .split-done { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow); margin-bottom: var(--sp-4); }
#split-item-list, #split-active-list, #split-done-list { list-style: none; margin: 0; padding: 0; }
.split-item, .split-active-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.split-item:last-child, .split-active-item:last-child { border-bottom: none; }
.split-item-name { flex: 1; }
.split-item-name small { font-size: var(--fs-cap); }
.split-item-rem { color: var(--text-muted); font-size: var(--fs-sm); min-width: 32px; text-align: right; }
.split-item-price { min-width: 76px; text-align: right; font-weight: 600; }
.split-active-item span:first-child { flex: 1; }
.split-item.is-empty { opacity: .4; }
.split-item .js-add[disabled] { opacity: .35; cursor: default; }
#split-take-rest { margin-top: var(--sp-3); width: 100%; }
.split-active-sub { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-3) 0; font-size: var(--fs-md); }
.split-active-sub strong { font-weight: 600; }
#split-pay { width: 100%; }
#split-active-list:empty::after { content: "Koppints a + gombokra a tételek hozzáadásához."; display: block; color: var(--text-light); font-size: var(--fs-sm); padding: var(--sp-2) 0; }
.split-chip { padding: var(--sp-2) 0; color: var(--success-text); font-weight: 500; border-bottom: 1px solid var(--border); }
.split-chip:last-child { border-bottom: none; }
#split-done-list:empty::after { content: "Még nincs lezárt rész."; color: var(--text-light); font-size: var(--fs-sm); }

/* Napi zárás — óránkénti forgalom chart konténer */
.report-chart-section .report-section-body { padding-top: var(--sp-3); }
.rd-chart-wrap { position: relative; height: 260px; }
@media (max-width: 600px) { .rd-chart-wrap { height: 200px; } }

/* Napi zárás — összecsukható részletező szekciók (alapból zárva) */
.report-collapsible > .report-section-head { cursor: pointer; user-select: none; }
.report-collapsible > .report-section-head::after {
    content: ""; position: relative; z-index: 1; margin-left: auto; flex-shrink: 0;
    width: 8px; height: 8px; margin-right: 2px;
    border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
}
.report-collapsible.is-open > .report-section-head::after { transform: rotate(-135deg); }
.report-collapsible:not(.is-open) > .report-section-body { display: none; }
@media (prefers-reduced-motion: reduce) {
    .report-collapsible > .report-section-head::after { transition: none; }
}
@media print {
    .report-collapsible:not(.is-open) > .report-section-body { display: block !important; }
    .report-collapsible > .report-section-head::after { display: none !important; }
}

/* ── Napi zárás — zónás struktúra (áttekinthető csoportok) ──────── */
.rd-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: var(--sp-5) var(--sp-6);
    box-shadow: var(--shadow); margin-bottom: var(--sp-5);
}
.rd-hero-num { font-size: clamp(28px, 5vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.rd-hero-label { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }
.rd-hero-kpis { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-left: auto; }
.rd-kpi { display: flex; flex-direction: column; min-width: 84px; }
.rd-kpi-num { font-size: var(--fs-lg); font-weight: 600; }
.rd-kpi-label { color: var(--text-muted); font-size: var(--fs-cap); margin-top: 2px; }

.rd-zone { margin: var(--sp-6) 0; }
.rd-zone-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rd-zone-icon { display: inline-flex; color: var(--accent); }
.rd-zone-title { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.rd-zone-aside { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); }

.rd-highlight {
    display: flex; align-items: center; gap: var(--sp-4);
    background: var(--success-bg); border: 1px solid var(--success-border);
    border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.rd-highlight-num { font-size: var(--fs-xl); font-weight: 700; color: var(--success-text); line-height: 1.1; }
.rd-highlight-label { color: var(--success-text); opacity: 0.85; font-size: var(--fs-sm); }
.rd-void-chip {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border);
    border-radius: 999px; padding: 4px 10px; font-size: var(--fs-cap); font-weight: 500; white-space: nowrap;
}

.rd-mini { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.rd-mini-item {
    flex: 1 1 140px; display: flex; flex-direction: column;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
}
.rd-mini-num { font-size: var(--fs-md); font-weight: 600; }
.rd-mini-label { color: var(--text-muted); font-size: var(--fs-cap); margin-top: 2px; }

@media (max-width: 600px) {
    .rd-hero { gap: var(--sp-3); padding: var(--sp-4); }
    /* 4 KPI tiszta 2×2 rácsban (a 3+1 egyenetlen tördelés helyett) */
    .rd-hero-kpis { margin-left: 0; gap: var(--sp-4); width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .rd-kpi { min-width: 0; }
}

/* Popup-stílusú riport-szekciók (Termékek zóna — modalban nyílnak) */
.report-popup > .report-section-head { cursor: pointer; user-select: none; }
.report-popup > .report-section-head::after {
    content: ""; position: relative; z-index: 1; margin-left: auto; flex-shrink: 0;
    width: 8px; height: 8px; margin-right: 3px;
    border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
    transform: rotate(45deg); opacity: .85;
}
.report-popup > .report-section-body { display: none; }
.rd-popup-card { max-width: 560px; width: 92vw; height: auto; }
.rd-popup-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); max-height: 72vh; overflow: auto; }
@media print {
    .report-popup > .report-section-body { display: block !important; }
    .report-popup > .report-section-head::after { display: none !important; }
}

/* === Asztaltervező redesign — okos vászon === */

/* Nagy ujjbarát fogó: a fogó-elem (a tényleges érintési cél) nagyobb a
   kijelölt/hover asztalon; a látható pötty a meglévő ::before-ból marad kicsi. */
.table-block.selected .resize-handle,
.table-block:hover .resize-handle {
    width: 40px !important;
    height: 40px !important;
}

/* Igazító-vonalak húzás közben */
.align-guide { position: absolute; background: #ff2d92; z-index: 30; pointer-events: none; }
.align-guide-v { top: 0; bottom: 0; width: 1px; }
.align-guide-h { left: 0; right: 0; height: 1px; }
.align-guide[hidden] { display: none; }

/* Vissza/Újra sáv */
.undo-bar {
    position: absolute; left: 12px; bottom: 12px; z-index: 25;
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border, #e1e4ea);
    border-radius: 12px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.undo-bar button {
    border: 0; background: none; font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px;
    border-radius: 8px; color: var(--accent, #0a84ff);
}
.undo-bar button:disabled { color: #c2c7d0; cursor: default; }
.undo-sep { width: 1px; height: 18px; background: #e1e4ea; }

/* Halasztott-törlés toast */
.tep-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 60; display: flex; align-items: center; gap: 14px;
    background: #1c1c1e; color: #fff; padding: 10px 16px; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.3); font-size: 14px;
}
.tep-toast[hidden] { display: none; }
.tep-toast button { border: 0; background: none; color: #4ea1ff; font: inherit; font-weight: 600; cursor: pointer; }

/* Aktív preset kártya */
.tep-presets button.active { border-color: var(--accent, #0a84ff); color: var(--accent, #0a84ff); }

/* === Publikus étlap QR-popup === */
.menu-qr-dialog{border:0;border-radius:18px;padding:0;background:transparent;overflow:visible}
.menu-qr-dialog::backdrop{background:rgba(0,0,0,.55)}
.menu-qr-card{background:#fff;color:#1d1d1f;border-radius:18px;padding:26px 28px;width:320px;text-align:center;box-shadow:0 16px 50px rgba(0,0,0,.3);font-family:-apple-system,system-ui,sans-serif}
.menu-qr-card .mq-eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#b08a5a}
.menu-qr-card .mq-name{font-size:22px;font-weight:700;margin-top:3px}
.menu-qr-card .mq-meta{color:#86868b;font-size:12.5px;margin-top:3px;line-height:1.5}
.menu-qr-card .mq-qr{width:220px;height:220px;margin:18px auto 12px;display:flex;align-items:center;justify-content:center}
.menu-qr-card .mq-qr img,.menu-qr-card .mq-qr canvas{width:220px !important;height:220px !important}
.menu-qr-card .mq-caption{font-size:15px;font-weight:600;line-height:1.35}
.menu-qr-actions{display:flex;gap:8px;justify-content:center;margin-top:14px}
/* CSAK a publikus étlap-QR dialógus nyomtatásakor (html.printing-qr): elrejti a hátteret,
   és csak a dialógust mutatja. A class-ot a „Nyomtatás" gomb teszi fel, így MÁS nyomtatásokat
   (asztal-QR ív, blokk, napi zárás) NEM érint — különben üres oldalt nyomtatna. */
@media print{
    html.printing-qr body{visibility:hidden !important}
    html.printing-qr #menu-qr-dialog, html.printing-qr #menu-qr-dialog *{visibility:visible !important}
    html.printing-qr #menu-qr-dialog{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#fff !important;border:0}
    /* a modal sötétítő rétege NE nyomtatódjon ki (szürke háttér = festékpazarlás) */
    html.printing-qr #menu-qr-dialog::backdrop{background:transparent !important}
    #menu-qr-dialog .no-print{display:none !important}
    .menu-qr-card{box-shadow:none !important}
}

/* === iOS-stílusú kapcsoló (switch) === */
.switch-row{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.switch{position:relative;display:inline-flex;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.switch-track{display:inline-block;width:48px;height:28px;border-radius:999px;background:var(--border);transition:background .2s ease}
.switch-knob{display:block;width:24px;height:24px;margin:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track .switch-knob{transform:translateX(20px)}
.switch input:focus-visible + .switch-track{box-shadow:0 0 0 3px var(--accent-fade)}
.switch-text{font-weight:500}

/* === Toast értesítők + is-busy spinner (ui.js) === */
.rd-toasts{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:min(92vw,420px)}
.rd-toast{pointer-events:auto;padding:11px 15px;border-radius:12px;font-size:14px;font-weight:500;box-shadow:var(--shadow);opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease;background:var(--bg-soft,#fff);color:var(--text);border:1px solid var(--border)}
.rd-toast.show{opacity:1;transform:none}
.rd-toast-success{background:#e7f7ec;color:#106b33;border-color:#bce6c9}
.rd-toast-error{background:#fdeaea;color:#a11b1b;border-color:#f4c2c2}
@media (prefers-color-scheme:dark){.rd-toast-success{background:#143a23;color:#7fe0a0;border-color:#1f5733}.rd-toast-error{background:#3a1717;color:#f0a0a0;border-color:#5a2222}}
.is-busy{position:relative;color:transparent !important;pointer-events:none}
.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:rd-spin .6s linear infinite;color:var(--accent,#0a84ff)}
.primary-btn.is-busy::after,.danger-btn.is-busy::after{color:#fff}
@keyframes rd-spin{to{transform:rotate(360deg)}}

/* === Gyakori fotós gyors-polc === */
/* „Gyakori" — kompakt termék-kártyák fotóval (a product-tile nyelvezetén), vízszintesen
   görgethető polc; fejléc-chevronnal össze­csukható (állapot localStorage-ben). */
.pos-fav { margin: 0 0 14px; min-width: 0; }
.pos-fav-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pos-fav-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.pos-fav-label .icon { color: var(--accent); }
.pos-fav-toggle { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.pos-fav-toggle:hover { background: var(--bg-hover); color: var(--text); }
.pos-fav-toggle .icon { transition: transform .25s var(--ease-out); }
.pos-fav.is-collapsed .pos-fav-toggle .icon { transform: rotate(-90deg); }
.pos-fav-shelf { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.pos-fav-shelf::-webkit-scrollbar { display: none; }
.pos-fav.is-collapsed .pos-fav-shelf { display: none; }
.fav-card {
    flex: 0 0 auto; width: 118px; scroll-snap-align: start;
    display: flex; flex-direction: column; text-align: left; padding: 0;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; cursor: pointer; color: var(--text); box-shadow: var(--shadow);
    transition: transform .15s var(--ease-spring), box-shadow .15s var(--ease-out), border-color .1s;
}
.fav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.fav-card:active { transform: scale(.96); box-shadow: var(--shadow); }
.fav-card-img { position: relative; aspect-ratio: 1 / 1; background: var(--bg-soft); overflow: hidden; display: block; }
.fav-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease-out); }
.fav-card:hover .fav-card-img img { transform: scale(1.05); }
.fav-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-light); }
.fav-card-body { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 3px; }
.fav-card-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fav-card-price { font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* === Tétel-jegyzet (UX2) === */
.ci-note{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted);padding:2px 0 2px 2px;line-height:1.4}
.ci-note svg{flex:0 0 auto;opacity:.6}
.note-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;padding:0;transition:background .15s,color .15s}
.note-btn:hover{background:var(--bg-soft);color:var(--text)}
.note-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.note-chip{padding:5px 11px;border-radius:20px;border:1px solid var(--border);background:var(--bg-soft);font-size:13px;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.note-chip:hover{background:var(--accent-fade);border-color:var(--accent);color:var(--accent)}
.note-modal-body{padding:12px 16px 4px}
.note-textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:14px;resize:vertical;background:var(--bg-soft);color:var(--text);font-family:inherit;margin-top:0}
.note-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-fade)}

/* ============================================================
   ÉTLAP-TERVEZŐ — drag&drop kanban (.ped-*)
   ============================================================ */
.ped-board { display: flex; flex-direction: column; gap: 16px; padding-bottom: 80px; }

/* Csoport (sor) */
.ped-group { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 12px 14px; }
.ped-group-fixed { border-style: dashed; }
.ped-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 2px; }
.ped-group-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ped-group-head .ped-count { margin-left: auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Kategória-oszlopok vízszintes sávja */
.ped-cats { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.ped-cats.is-empty { min-height: 64px; }

/* Kategória-oszlop */
.ped-cat { flex: 0 0 220px; width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.ped-cat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.ped-cat-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-cat-head .ped-count { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-hover); border-radius: 100px; padding: 1px 7px; font-variant-numeric: tabular-nums; }

/* Termék-lista */
.ped-products { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 24px; }
.ped-product { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ped-product.is-inactive { opacity: .5; }
.ped-thumb { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; overflow: hidden; background: var(--bg-hover); display: inline-flex; align-items: center; justify-content: center; color: var(--text-light); }
.ped-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ped-prod-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-prod-price { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Fogantyú */
.ped-handle { flex: 0 0 auto; cursor: grab; color: var(--text-light); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ped-handle:hover { color: var(--text-muted); background: var(--bg-hover); }
.ped-handle:active { cursor: grabbing; }

/* Üres-állapot felirat (csak ha tényleg üres) */
.ped-empty { display: none; font-size: 12px; color: var(--text-light); text-align: center; padding: 14px 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.ped-products.is-empty > .ped-empty { display: block; }
.ped-cats.is-empty > .ped-empty-cat { display: flex; align-items: center; justify-content: center; flex: 0 0 200px; min-height: 56px; }

/* Húzás közbeni elemek */
.ped-ghost { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; box-shadow: 0 12px 32px rgba(0,0,0,.28); border-radius: var(--radius); opacity: .96; transform: translate(-9999px,-9999px); will-change: transform; }
.ped-placeholder { background: var(--accent-fade); border: 1.5px dashed var(--accent); border-radius: var(--radius-sm); box-sizing: border-box; }
.ped-ph-category, .ped-ph-group { border-radius: var(--radius); }
body.ped-dragging-active { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* Mentés-jelző (fix, jobb alul) */
.ped-savebar { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ped-savebar.ped-saving { color: var(--text-muted); }
.ped-savebar.ped-ok { color: var(--success); border-color: var(--accent-fade); }
.ped-savebar.ped-err { color: var(--danger); }

@media (max-width: 600px) {
    .ped-cat { flex-basis: 78vw; width: 78vw; max-width: 300px; }
    .ped-savebar { right: 12px; bottom: 12px; }
}

/* ============================================================
   HETI NYITVATARTÁS-RÁCS — foglalás-beállítások (.res-hours)
   ============================================================ */
.res-hours { display: flex; flex-direction: column; gap: 8px; }
.res-hours-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); }
.res-hours-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: 0 0 132px; min-width: 0; }
.res-hours-toggle input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.res-hours-day { font-size: 14px; font-weight: 600; }
.res-hours-times { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.res-hours-times select { min-width: 92px; }
.res-hours-dash { color: var(--text-muted); }
.res-hours-badge { display: none; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.res-hours-row.is-closed { opacity: .7; }
.res-hours-row.is-closed .res-hours-times { display: none; }
.res-hours-row.is-closed .res-hours-badge { display: inline; }
@media (max-width: 520px) {
    .res-hours-row { flex-wrap: wrap; }
    .res-hours-toggle { flex-basis: 100%; }
    .res-hours-times { margin-left: 0; width: 100%; }
    .res-hours-times select { flex: 1 1 0; min-width: 0; }
}

/* ============================================================
   KONYHA „NEM ELÉRHETŐ" (out-of-stock) — pincér-oldali jelzések
   ============================================================ */
/* Floor-map: „konyha jelzett" állapot (legsürgősebb, megkülönböztethető a piros „kivitelre vár"-tól) */
.floor-pos .table-block.state-oos {
    background: linear-gradient(135deg, #7a1f1a, var(--color-red) 92%);
    box-shadow: 0 4px 14px rgba(255,59,48,0.5);
    animation: table-ready-pulse 1.5s ease-in-out infinite;
}
.table-tooltip-state-oos { background: var(--tint-red); color: var(--color-red); }
.table-tooltip-oos > span, .table-tooltip-oos strong { color: var(--color-red); font-weight: 700; }

/* Rendelés-lista: figyelmeztető badge a soron */
.order-oos-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 100px; padding: 1px 8px; }
.order-oos-flag .icon { vertical-align: -1px; }

/* Kosár: figyelmeztető sáv + érintett tételek */
.cart-oos-banner { display: flex; gap: 10px; align-items: flex-start; margin: 12px 14px 4px; padding: 10px 12px; background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-sm); color: var(--danger-text); font-size: 13px; line-height: 1.4; }
.cart-oos-icon { flex: 0 0 auto; display: inline-flex; color: var(--danger); margin-top: 1px; }
.cart-item.status-oos { background: var(--danger-bg); }
.cart-item.status-oos .ci-name { color: var(--danger-text); }
.cart-item.status-oos .ci-price { text-decoration: line-through; opacity: .5; }
.ci-oos { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--danger-text); margin-top: 3px; }
.ci-oos .icon { flex: 0 0 auto; }


/* ============================================================
   ÉTLAP-FORDÍTÁSOK szerkesztő (.tr-*)
   ============================================================ */
.tr-langtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tr-langtab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-muted); text-decoration: none; font-size: 13px; transition: background .15s, color .15s, border-color .15s; }
.tr-langtab:hover { color: var(--text); }
.tr-langtab.is-active { background: var(--accent-fade); border-color: var(--accent); color: var(--accent); }
.tr-langtab strong { font-variant-numeric: tabular-nums; }

.tr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; margin-bottom: 12px; }
.tr-enabled { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.tr-enabled-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.tr-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tr-chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.tr-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.tr-nokey { margin: 0 2px 14px; }
.tr-nokey code { background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; }

.tr-cat { padding: 0; overflow: hidden; margin-bottom: 14px; }
.tr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); align-items: start; }
.tr-row:last-child { border-bottom: 0; }
.tr-row-cat { background: var(--bg-soft); }
.tr-orig { min-width: 0; }
.tr-orig-name { font-weight: 600; }
.tr-orig-desc { color: var(--text-muted); font-size: 13px; margin-top: 3px; line-height: 1.4; }
.tr-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--bg-hover); border-radius: 6px; padding: 1px 7px; margin-right: 6px; vertical-align: 1px; }
.tr-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-fields input, .tr-fields textarea { width: 100%; }
.tr-fields .is-auto { border-color: var(--accent); background: var(--accent-fade); }
.tr-foot { margin: 18px 0 40px; display: flex; justify-content: flex-end; }

@media (max-width: 640px) {
    .tr-row { grid-template-columns: 1fr; gap: 8px; }
    .tr-actions { margin-left: 0; width: 100%; }
}

/* QR-nyomtató kijelölő-dialógus (asztal-QR-ek) */
.qrp-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.qrp-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px; }
.qrp-room-head { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.qrp-tables { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0 6px; }
.qrp-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.qrp-chk input, .qrp-room-toggle { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }

/* ============================================================
   NAPI ZÁRÁS — átlátható, oldaltörés-fegyelmezett nyomtatás
   ============================================================ */
@media print {
    /* Címek ne maradjanak a lap alján a tartalmuk nélkül (elárvult fejlécek ellen) */
    h2, h3, .rd-zone-head, .rd-zone-title, .report-section-head {
        break-after: avoid !important; page-break-after: avoid !important;
    }
    /* Egyben tartandó blokkok — ne törjenek ketté oldalhatáron */
    .rd-hero, .rd-highlight, .rd-mini-item, .report-section {
        break-inside: avoid !important; page-break-inside: avoid !important;
    }
    .rd-zone-head { break-inside: avoid !important; display: block !important; }
    .rd-zone { break-inside: auto; margin: 0 0 6pt !important; }

    /* Egyoszlopos blokk-folyam: a grid/multicol kikapcsolva (megbízhatatlan printben) */
    .report-grid { display: block !important; column-count: auto !important; }
    .report-grid > .report-section { width: 100% !important; break-inside: avoid !important; }

    /* Bizonylat-tábla: fejléc MINDEN oldalon ismétlődik, sorok nem törnek ketté,
       a bizonylatszám egy sorban marad, tömör betű — átlátható, folyamatos lista */
    .print-receipts-table { font-size: 8.3pt !important; margin-top: 5pt !important; break-before: avoid; }
    .print-receipts-table thead { display: table-header-group !important; }
    .print-receipts-table tr { break-inside: avoid !important; page-break-inside: avoid !important; }
    .print-receipts-table th, .print-receipts-table td {
        border: 0.4pt solid var(--border) !important; padding: 2.4pt 5pt !important; vertical-align: top;
    }
    .print-receipts-table th {
        background: var(--bg-soft) !important; font-size: 7pt !important;
        text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted) !important;
    }
    .print-receipts-table td:first-child, .print-receipts-table th:first-child { white-space: nowrap !important; }
    .print-receipts-table .num, .print-receipts-table th.num { text-align: right; white-space: nowrap !important; }
}

/* ============================================================
   ONLINE RENDELÉS — diszpécser nézet (.disp-*)
   ============================================================ */
.disp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.disp-cols:has(.disp-col-out_for_delivery) { grid-template-columns: repeat(4, 1fr); }
.disp-col { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 12px; min-height: 200px; }
.disp-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.disp-col-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.disp-col-title .icon { color: var(--accent); }
.disp-col-count { background: var(--bg-hover); border-radius: 100px; padding: 1px 9px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.disp-empty { color: var(--text-light); text-align: center; padding: 24px 0; }
.disp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 10px; }
.disp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.disp-card-head strong { font-size: 16px; }
.disp-when { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.disp-recipient { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.disp-recipient a { color: var(--accent); text-decoration: none; }
.disp-items { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.disp-items li { padding: 2px 0; }
.disp-q { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.disp-note { margin-top: 6px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.disp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.disp-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.disp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Fázis 3 — típus / cím / fizetés jelzők */
.disp-card-head .disp-when { margin-left: auto; }
.disp-type { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: var(--bg-hover); color: var(--text-muted); }
.disp-card.is-delivery .disp-type { background: var(--accent-fade); color: var(--accent); }
.disp-addr { font-size: 13px; color: var(--text); margin: 5px 0 0; display: flex; align-items: flex-start; gap: 5px; }
.disp-pay { font-size: 12px; margin-top: 7px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.disp-pay.is-paid { color: #15803d; }
.disp-pay.is-cod { color: #b45309; }
.disp-courier { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: var(--text-muted); }
.disp-assign { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px; }
/* A :has() 4-oszlopos szabály specificitása (0,2,0) magasabb, ezért a media query
   szelektorának is tartalmaznia kell a :has()-t, különben mobilon nem omlik össze. */
@media (max-width: 1100px) { .disp-cols, .disp-cols:has(.disp-col-out_for_delivery) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .disp-cols, .disp-cols:has(.disp-col-out_for_delivery) { grid-template-columns: 1fr; } }

/* Futár-app (Fázis 4) */
.courier { max-width: 640px; margin: 0 auto; }
.courier-gps { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 12px; }
.courier-card { padding: 14px 16px; margin-bottom: 12px; }
.courier-card-head { display: flex; align-items: center; gap: 8px; }
.courier-card-head strong { font-size: 17px; }
.courier-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.courier-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 100px; }
.courier-badge.is-ready { background: var(--bg-hover); color: var(--text-muted); }
.courier-badge.is-out { background: var(--accent-fade); color: var(--accent); }
.courier-addr { font-size: 15px; margin: 8px 0 4px; display: flex; gap: 6px; align-items: flex-start; }
.courier-row { font-size: 14px; color: var(--text-muted); }
.courier-row a { color: var(--accent); text-decoration: none; }
.courier-note { margin-top: 6px; font-size: 13px; color: var(--text-muted); display: flex; gap: 5px; }
.courier-items { list-style: none; margin: 8px 0; padding: 0; font-size: 14px; }
.courier-items li { padding: 2px 0; }
.courier-pay { font-size: 13px; font-weight: 600; margin: 8px 0 12px; display: flex; align-items: center; gap: 5px; }
.courier-pay.is-paid { color: #15803d; }
.courier-pay.is-cod { color: #b45309; }
.courier-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.courier-actions .primary-btn, .courier-actions .ghost-btn { flex: 1; justify-content: center; min-width: 120px; }

/* iOS Safari ráközelít a <16px betűs mezőkre fókuszkor → mobilon MINDEN form-mező 16px.
   !important, hogy az osztály-specifikus betűméreteket (pl. .size-inputs, .sms-method,
   .kds-sound-sel, .set-note-presets) is felülírja. A tömör desktop-méret változatlan. */
@media (max-width: 760px) {
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}