/* waiter.css — mobile PWA layout for the waiter view. */

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    /* waiter-init.js keeps this value aligned with visualViewport on mobile.
       Some Android standalone PWAs report a layout viewport that continues
       behind the three-button navigation bar; visualViewport is the actually
       visible area and keeps the action row above that system UI. */
    height: var(--waiter-viewport-height, 100svh);
    max-height: var(--waiter-viewport-height, 100svh);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Service and KDS are touch workspaces, not documents. Keep text-entry and
   copy-oriented controls selectable while preventing accidental blue selection
   handles during rapid taps and long-press gestures everywhere else. */
input,
textarea,
[contenteditable="true"],
.selectable-text {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Notch/status-bar safe area: keep the plan button and connectivity
       badge clear of the top inset and rounded corners on notched phones. */
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.5rem max(0.75rem, env(safe-area-inset-left));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border,#2a2f3a);
    flex: 0 0 auto;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Allow both groups to shrink on narrow phones instead of pushing the
       connectivity pill past the viewport edge. */
    min-width: 0;
}

.topbar-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.9rem;
}

/* Connectivity badge: dot + label reflecting the real server WS state. */
.conn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-text-dim);
    /* The pill must never clip at the viewport edge: let it shrink below its
       content width and ellipsis the label instead of overflowing. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.conn-label {
    /* Flex items default to min-width:auto; without this the label cannot
       shrink below its content width and the ellipsis never engages. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conn-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--color-text-dim);
}

.conn-badge.online .conn-dot {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.conn-badge.online .conn-label {
    color: var(--color-text);
}

.conn-badge.offline .conn-dot {
    background: var(--color-warn);
}

.conn-badge.offline .conn-label {
    color: var(--color-warn);
}

.conn-badge.syncing .conn-dot {
    background: var(--color-info, #3b82f6);
    animation: conn-pulse 1s ease-in-out infinite;
}

.conn-badge.syncing .conn-label {
    color: var(--color-info, #3b82f6);
}

@keyframes conn-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.6);
    }
}

/* Non-blocking dark-theme toast (offline-saved notices). */
.oo-toast {
    display: none;
    position: fixed;
    left: 50%;
    /* Sit above the bottombar even when the gesture bar pushes it up. */
    bottom: calc(84px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1100;
    max-width: 88vw;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border,#2a2f3a);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    font-size: 0.9rem;
    text-align: center;
}

.oo-toast.visible {
    display: block;
    animation: oo-toast-in 0.16s ease;
}

@keyframes oo-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.floorplan-icon {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border,#2a2f3a));
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-2)), var(--color-surface-2));
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.floorplan-icon[aria-expanded="true"] {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface-2));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.topbar .btn {
    min-height: 44px;
}

.topbar .topbar-icon {
    width: 44px;
    flex: 0 0 44px;
    padding: 0;
}

.topbar-icon svg {
    display: block;
}

.waiter-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 110px 1fr 280px;
    min-height: 0;
    overflow: hidden;
}

/* Kitchen display mode ---------------------------------------------------- */
.kds-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    background:
        radial-gradient(circle at 8% 0%, rgba(243, 156, 18, 0.09), transparent 27rem),
        var(--color-bg);
    scrollbar-gutter: stable;
}

.kds-view[hidden] {
    display: none;
}

body.kds-mode .waiter-main,
body.kds-mode .search-bar,
body.kds-mode .bottombar,
body.kds-mode #floorplan-btn,
body.kds-mode #search-toggle {
    display: none !important;
}

.kds-toolbar {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #2a2f3a) 82%, #f39c12);
    border-radius: 18px;
    background: color-mix(in srgb, var(--color-surface) 94%, #f39c12);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.kds-heading h1 {
    margin: 0.1rem 0;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.05;
}

.kds-heading p {
    margin: 0.35rem 0 0;
    color: var(--color-text-dim);
    font-size: 0.78rem;
}

.kds-eyebrow {
    color: #f6ad55;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.kds-counters {
    display: flex;
    gap: 0.55rem;
}

.kds-counter {
    min-width: 4.8rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.15);
    text-align: center;
}

.kds-counter strong,
.kds-counter span {
    display: block;
}

.kds-counter strong {
    font-size: 1.35rem;
    line-height: 1;
}

.kds-counter span {
    margin-top: 0.25rem;
    color: var(--color-text-dim);
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kds-counter.pending strong {
    color: #f6ad55;
}

.kds-counter.preparing strong {
    color: #60a5fa;
}

.kds-refresh {
    min-height: 48px;
    min-width: 7rem;
}

.kds-refresh[aria-busy="true"] {
    opacity: 0.65;
    cursor: progress;
}

.kds-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    align-items: start;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto;
}

.kds-card {
    overflow: hidden;
    border: 1px solid var(--color-border, #2a2f3a);
    border-top: 4px solid var(--color-primary, #10b981);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.kds-card.warning {
    border-top-color: #f59e0b;
}

.kds-card.critical {
    border-top-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 14px 36px rgba(0, 0, 0, 0.25);
}

.kds-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.kds-card-head h2 {
    margin: 0.15rem 0 0;
    font-size: 1.2rem;
}

.kds-order-id {
    color: var(--color-text-dim);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.kds-age {
    flex: 0 0 auto;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font: 750 0.78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.kds-card.warning .kds-age {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.kds-card.critical .kds-age {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

.kds-lines {
    display: grid;
}

.kds-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 74px;
    padding: 0.8rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--color-border, #2a2f3a);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    transition: background 140ms ease, transform 140ms ease;
}

.kds-line:last-child {
    border-bottom: 0;
}

.kds-line:hover,
.kds-line:focus-visible {
    background: rgba(255, 255, 255, 0.045);
}

.kds-line:active {
    transform: scale(0.985);
}

.kds-line[aria-busy="true"] {
    opacity: 0.58;
}

.kds-line.preparing {
    background: rgba(59, 130, 246, 0.07);
}

.kds-qty {
    min-width: 2.4rem;
    color: #f6ad55;
    font-size: 1.15rem;
    font-weight: 850;
    text-align: right;
}

.kds-line-copy {
    min-width: 0;
}

.kds-line-name,
.kds-line-note {
    display: block;
}

.kds-line-name {
    overflow-wrap: anywhere;
    font-size: 1rem;
    font-weight: 720;
}

.kds-line-note {
    margin-top: 0.3rem;
    color: var(--color-text-dim);
    font-size: 0.78rem;
}

.kds-line-note strong {
    color: #fca5a5;
}

.kds-line-meta {
    display: grid;
    justify-items: end;
    gap: 0.3rem;
}

.kds-zone,
.kds-state {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kds-zone {
    color: var(--color-text-dim);
}

.kds-state {
    padding: 0.3rem 0.45rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

.kds-line.preparing .kds-state {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

.kds-empty {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    width: min(32rem, 100%);
    margin-top: clamp(2rem, 12vh, 8rem);
    padding: 2rem;
    border: 1px dashed var(--color-border, #2a2f3a);
    border-radius: 18px;
    color: var(--color-text-dim);
    text-align: center;
}

.kds-empty h2 {
    margin: 0.7rem 0 0.35rem;
    color: var(--color-text);
}

.kds-empty p {
    margin: 0;
}

.kds-empty-mark {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.14);
    color: var(--color-primary, #10b981);
    font-size: 1.45rem;
}

.kds-error .kds-empty-mark {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

@media (max-width: 720px) {
    .kds-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kds-counters {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .kds-counter {
        flex: 1 1 0;
        min-width: 0;
    }

    .kds-board {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    .kds-view {
        padding: 0.55rem;
    }

    .kds-toolbar {
        gap: 0.7rem;
        margin-bottom: 0.7rem;
        padding: 0.8rem;
        border-radius: 14px;
    }

    .kds-refresh {
        min-width: 0;
        padding-inline: 0.7rem;
    }

    .kds-line {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .kds-line-meta {
        grid-column: 2;
        display: flex;
        justify-content: flex-start;
    }
}

/* Production-board refinement: flat, high-contrast and readable from a wall
   monitor, while every action remains glove-friendly on a tablet. */
body.kds-mode .topbar-left,
body.kds-mode .topbar-right {
    display: none;
}

body.kds-mode .topbar {
    min-height: 48px;
    padding-block: 0.35rem;
    background: #0a0d12;
}

body.kds-mode .topbar-center {
    width: 100%;
    justify-content: center;
}

body.kds-mode .kds-view {
    --kds-amber: #f5a623;
    --kds-blue: #4ca3ff;
    --kds-green: #22c55e;
    --kds-red: #ff4d4f;
    padding: clamp(0.55rem, 1.2vw, 1rem);
    background: #0b0e13;
}

body.kds-new-order-alert .kds-toolbar {
    border-color: color-mix(in srgb, var(--kds-amber, #f5a623) 78%, white);
}

.kds-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    grid-template-columns: minmax(13rem, 1fr) auto minmax(24rem, auto);
    max-width: none;
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #303744;
    border-radius: 7px;
    background: rgba(18, 23, 31, 0.97);
    box-shadow: none;
    backdrop-filter: blur(14px);
}

.kds-heading h1 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    letter-spacing: -0.025em;
}

.kds-live-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
}

.kds-live-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #91a0b5;
    font-weight: 750;
}

.kds-live-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #64748b;
}

.kds-live-state[data-state="live"] {
    color: #78dda0;
}

.kds-live-state[data-state="live"] .kds-live-dot {
    background: var(--kds-green, #22c55e);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.kds-live-state[data-state="stale"] {
    color: #ff8c8e;
}

.kds-live-state[data-state="stale"] .kds-live-dot {
    background: var(--kds-red, #ff4d4f);
}

.kds-counters {
    align-self: stretch;
    align-items: stretch;
}

.kds-counter {
    min-width: 4.4rem;
    padding: 0.45rem 0.6rem;
    border-color: #333b49;
    border-radius: 5px;
    background: #0d1118;
}

.kds-counter.arrivals {
    border-color: rgba(245, 166, 35, 0.72);
    background: rgba(245, 166, 35, 0.12);
}

.kds-counter.arrivals strong {
    color: #ffc563;
}

.kds-controls {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

.kds-station-control {
    display: grid;
    gap: 0.2rem;
    min-width: 9rem;
    color: #91a0b5;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.kds-station {
    min-height: 38px;
    padding: 0.35rem 2rem 0.35rem 0.65rem;
    border: 1px solid #3a4352;
    border-radius: 5px;
    background: #0c1118;
    color: #f5f7fa;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 750;
}

.kds-control-btn,
.kds-refresh,
.kds-more > summary {
    min-width: 0;
    min-height: 48px;
    padding-inline: 0.75rem;
    border-radius: 5px;
    white-space: nowrap;
}

.kds-control-btn[aria-pressed="true"] {
    border-color: rgba(34, 197, 94, 0.65);
    color: #86efac;
}

.kds-more {
    position: relative;
}

.kds-more > summary {
    display: grid;
    place-items: center;
    list-style: none;
    cursor: pointer;
}

.kds-more > summary::-webkit-details-marker {
    display: none;
}

.kds-more-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 0.4rem;
    min-width: 12rem;
    padding: 0.55rem;
    border: 1px solid #3a4352;
    border-radius: 6px;
    background: #151a22;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.42);
}

.kds-more:not([open]) .kds-more-menu {
    display: none;
}

.kds-board {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: 0.7rem;
    max-width: none;
}

.kds-card {
    border: 1px solid #353d4a;
    border-top: 5px solid var(--kds-green, #22c55e);
    border-radius: 7px;
    background: #151a22;
    box-shadow: none;
}

.kds-card.warning {
    border-top-color: var(--kds-amber, #f5a623);
}

.kds-card.critical {
    border-top-color: var(--kds-red, #ff4d4f);
    box-shadow: inset 0 0 0 1px rgba(255, 77, 79, 0.16);
}

.kds-card-head {
    align-items: flex-start;
    padding: 0.72rem 0.8rem;
    background: #10151c;
}

.kds-card-head h2 {
    margin-top: 0.08rem;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}

.kds-card-status {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
}

.kds-progress-copy {
    color: #9ca8b8;
    font-size: 0.7rem;
    font-weight: 800;
}

.kds-age {
    min-width: 4.2rem;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
}

.kds-card.critical .kds-age {
    animation: kds-critical-timer 1.25s ease-in-out infinite alternate;
}

@keyframes kds-critical-timer {
    from { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.08); }
    to { box-shadow: 0 0 0 5px rgba(255, 77, 79, 0.2); }
}

.kds-progress {
    height: 4px;
    overflow: hidden;
    background: #242c37;
}

.kds-progress > span {
    display: block;
    height: 100%;
    background: var(--kds-green, #22c55e);
    transition: width 180ms ease;
}

.kds-order-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid #303844;
    background: #121821;
}

.kds-course + .kds-course {
    border-top: 3px solid #0b0e13;
}

.kds-course-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 42px;
    padding: 0.35rem 0.65rem;
    border-bottom: 1px solid #303844;
    background: #1b222c;
    color: #cbd5e1;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kds-course-actions {
    display: flex;
    gap: 0.35rem;
}

.kds-bulk-action {
    min-height: 36px;
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
}

.kds-bulk-action.ready {
    border-color: rgba(34, 197, 94, 0.48);
    color: #86efac;
}

.kds-line {
    grid-template-columns: minmax(2.8rem, auto) minmax(0, 1fr) minmax(7.5rem, auto);
    min-height: 88px;
    padding: 0.65rem 0.7rem;
    border-left: 4px solid var(--kds-amber, #f5a623);
    background: #151a22;
    transform: none;
}

.kds-line.preparing {
    border-left-color: var(--kds-blue, #4ca3ff);
    background: rgba(76, 163, 255, 0.07);
}

.kds-line.is-busy {
    opacity: 0.58;
    pointer-events: none;
}

.kds-line.is-new {
    animation: kds-new-line 900ms ease-out both;
}

@keyframes kds-new-line {
    0% { background: rgba(245, 166, 35, 0.42); }
    100% { background: #151a22; }
}

.kds-qty {
    min-width: 2.8rem;
    color: #ffc563;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    text-align: left;
}

.kds-line-name {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 800;
    line-height: 1.15;
}

.kds-line-note {
    display: block;
    margin-top: 0.42rem;
    padding: 0.35rem 0.45rem;
    border-left: 3px solid var(--kds-red, #ff4d4f);
    background: rgba(255, 77, 79, 0.11);
    color: #ffb4b5;
    font-size: 0.95rem;
    line-height: 1.25;
}

.kds-line-modifiers {
    display: block;
    margin-top: 0.35rem;
    color: #c2cad6;
    font-size: 0.83rem;
}

.kds-line-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.42rem;
}

.kds-line-badges > span,
.kds-state {
    padding: 0.2rem 0.35rem;
    border: 1px solid #3b4554;
    border-radius: 3px;
    color: #9da9b9;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kds-line-meta {
    align-self: stretch;
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: 0.4rem;
}

.kds-state {
    max-width: none;
    border-color: rgba(245, 166, 35, 0.4);
    background: rgba(245, 166, 35, 0.1);
    color: #ffc563;
    text-align: center;
}

.kds-line.preparing .kds-state {
    border-color: rgba(76, 163, 255, 0.45);
    background: rgba(76, 163, 255, 0.11);
    color: #8ec5ff;
}

.kds-line-action {
    min-width: 7.5rem;
    min-height: 54px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 850;
}

.kds-line-action.pending {
    border-color: rgba(76, 163, 255, 0.5);
    color: #a8d3ff;
}

.kds-line-action.preparing {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.12);
    color: #8eefad;
}

.kds-undo {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(34rem, calc(100vw - 2rem));
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(34, 197, 94, 0.55);
    border-radius: 6px;
    background: #18221d;
    color: #eafff0;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.46);
    transform: translateX(-50%);
}

.kds-undo[hidden] {
    display: none;
}

.kds-undo > span {
    flex: 1;
}

@media (max-width: 1180px) {
    .kds-toolbar {
        grid-template-columns: minmax(12rem, 1fr) auto;
    }

    .kds-controls {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .kds-station-control {
        flex: 1;
    }
}

@media (max-width: 720px) {
    .kds-toolbar {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
    }

    .kds-counters,
    .kds-controls {
        grid-column: 1;
    }

    .kds-controls {
        flex-wrap: wrap;
    }

    .kds-station-control {
        flex: 1 1 100%;
    }

    .kds-control-btn,
    .kds-refresh,
    .kds-more {
        flex: 1 1 auto;
    }

    .kds-board {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .kds-line {
        grid-template-columns: minmax(2.7rem, auto) minmax(0, 1fr);
    }

    .kds-line-meta {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(8rem, 1fr);
    }

    .kds-course-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .kds-course-actions {
        width: 100%;
    }

    .kds-course-actions .btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kds-card.critical .kds-age,
    .kds-line.is-new {
        animation: none;
    }
}

.categories {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border,#2a2f3a);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.cat-btn {
    /* Flex items default to shrinkable: with many categories the rail squeezed
       buttons below their content height, cutting wrapped names mid-glyph.
       Size to content instead and clamp at two lines with an ellipsis. */
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.7rem 0.4rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 0.85rem;
    text-align: center;
    /* Long category names must wrap inside the narrow rail, never spill out
       and get clipped off the viewport edge. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.cat-btn-colored {
    background: var(--category-color);
    color: var(--category-foreground);
}

.cat-label {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

.cat-btn:active {
    background: var(--color-surface-3,#2c313c);
}

.cat-btn-colored:active {
    background: var(--category-color);
    transform: translateY(1px);
}

.cat-btn.active {
    outline: 2px solid var(--color-primary);
}

.cat-btn-colored.active {
    box-shadow: inset 0 0 0 2px var(--category-foreground);
}

/* The selected outline has greater specificity than the shared button focus
   rule. Re-declare the focus treatment here so keyboard focus remains distinct
   from selection and coexists with the coloured button's inset marker. */
.cat-btn:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
}

.items {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    align-content: start;
    min-width: 0;
}

/* Empty state: center a subtle hint instead of leaving a black void. */
.items.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.items-empty {
    color: var(--color-text-dim);
    font-size: 0.95rem;
    text-align: center;
    padding: 1rem;
    max-width: 22ch;
}

.item-card {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0.6rem;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 68px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

.item-card:hover {
    border-color: var(--color-primary);
}

/* Touch devices don't fire :hover, so give an explicit press state. */
.item-card:active {
    border-color: var(--color-primary);
    background: var(--color-surface-2);
    transform: translateY(1px);
}

.item-card .name {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.item-card .price {
    font-size: 0.8rem;
    color: var(--color-text-dim);
}

.ticket {
    background: var(--color-surface);
    border-left: 1px solid var(--color-border,#2a2f3a);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ticket h2 {
    padding: 0.75rem;
    font-size: 1rem;
}

.ticket-list {
    list-style: none;
    margin: 0;
    padding: 0 0.75rem;
    flex: 1 1 auto;
    overflow-y: auto;
}

.ticket-empty {
    padding: 0.75rem 0;
    text-align: center;
    color: var(--color-text-dim);
    font-size: 0.9rem;
}

.ticket-line {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name price"
        "controls controls";
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--color-border,#2a2f3a);
}

.ticket-line-name {
    grid-area: name;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-line-price {
    grid-area: price;
    font-size: 0.95rem;
    font-weight: 600;
}

.ticket-controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.qty-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border,#2a2f3a);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1.35rem;
    line-height: 1;
}

.qty-btn:active {
    background: var(--color-surface-3,#2c313c);
    transform: translateY(1px);
}

.qty-remove {
    margin-left: auto;
    color: var(--color-danger);
    font-size: 1.05rem;
}

.qty-val {
    min-width: 1.9rem;
    text-align: center;
    font-size: 1.05rem;
}

.ticket-total {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    border-top: 1px solid var(--color-border,#2a2f3a);
    font-weight: 600;
}

.payment-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Horizontal safe-area insets so the payment <select> clears rounded corners. */
    padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
    background: var(--color-surface);
    color: var(--color-text-dim);
    border-top: 1px solid var(--color-border,#2a2f3a);
    font-size: 0.95rem;
}

.payment-bar select {
    flex: 1;
    min-height: 44px;
    padding: 0 0.5rem;
    border: 1px solid var(--color-border,#2a2f3a);
    border-radius: 6px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1rem;
}

.receipt-preview {
    display: none;
    position: fixed;
    bottom: calc(96px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    /* Payment completion now returns directly to the floor plan (z-index 1200).
       Keep this short-lived confirmation and its optional reprint action usable
       above that destination instead of burying it behind the overlay. */
    z-index: 1300;
    background: #fff;
    border: 2px solid #2a7;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-family: monospace;
    font-size: 0.85rem;
    max-width: 90vw;
}

.receipt-preview.visible {
    display: block;
}

.bottombar {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    /* Bottom safe-area inset: the Send/Print/Split/Cancel row was clipped by the
       home-indicator / gesture bar on notched phones. Also inset left/right. */
    padding: 0.5rem max(0.5rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border,#2a2f3a);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
}

.bottombar .btn {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 52px;
    padding: 0.65rem 0.35rem;
    font-size: 1rem;
    line-height: 1.1;
    white-space: normal;
}

#fire-btn[hidden] {
    display: none !important;
}

#fire-btn.has-pending {
    color: var(--status-warn, #e0b23c);
    background: var(--status-warn-bg, rgba(224, 178, 60, 0.12));
    border: 1px solid var(--status-warn-border, rgba(224, 178, 60, 0.25));
    box-shadow: inset 0 0 0 1px rgba(224, 178, 60, 0.06);
}

.fire-pending {
    position: absolute;
    top: -0.55rem;
    right: 0.35rem;
    min-width: 1.55rem;
    padding: 0.18rem 0.42rem;
    border: 1px solid rgba(224, 178, 60, 0.42);
    border-radius: 999px;
    background: #4a3814;
    color: #ffe39a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.fire-pending[hidden] {
    display: none;
}

@media (max-width: 720px) {
    /* Reflow to a two-column top area (categories + items) with the running
       ticket as an always-visible bottom panel — a waiter must see the order
       and total while building it. */
    .waiter-main {
        grid-template-columns: 88px 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(132px, 34dvh);
        grid-template-areas:
            "cats items"
            "ticket ticket";
    }

    .categories {
        grid-area: cats;
    }

    .items {
        grid-area: items;
    }

    .ticket {
        grid-area: ticket;
        border-left: none;
        border-top: 1px solid var(--color-border,#2a2f3a);
    }

    .ticket h2 {
        padding: 0.5rem 0.75rem 0.25rem;
        font-size: 0.85rem;
        color: var(--color-text-dim);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .ticket-total {
        font-size: 1.1rem;
    }

}

/* Phone layout: a compact single-row command header, horizontal category chips,
   and a full-width item grid. This removes the cramped vertical category rail
   and keeps every primary action inside the visible viewport. */
@media (max-width: 520px) {
    .topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "primary status tools";
        gap: 0.35rem 0.5rem;
        padding: max(0.4rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) 0.4rem max(0.5rem, env(safe-area-inset-left));
    }

    .topbar-left {
        grid-area: primary;
        width: auto;
        gap: 0.35rem;
    }

    .topbar-right #battery,
    .topbar-center #clock {
        display: none;
    }

    .topbar-center {
        grid-area: status;
    }

    .topbar-right {
        grid-area: tools;
        justify-content: flex-end;
        gap: 0.35rem;
    }

    .topbar .btn {
        min-height: 40px;
        padding-left: 0.7em;
        padding-right: 0.7em;
    }

    .conn-badge {
        font-size: 0.78rem;
    }

    .search-bar {
        padding: 0.4rem 0.5rem;
    }

    .search-bar input {
        min-height: 42px;
    }

    .waiter-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) minmax(148px, 34svh);
        grid-template-areas:
            "cats"
            "items"
            "ticket";
    }

    .categories {
        flex-direction: row;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.4rem 0.5rem;
        border-right: none;
        border-bottom: 1px solid var(--color-border, #2a2f3a);
        scroll-snap-type: x proximity;
    }

    .cat-btn {
        min-width: 92px;
        max-width: 140px;
        min-height: 44px;
        padding: 0.5rem 0.7rem;
        scroll-snap-align: start;
    }

    .items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .item-card {
        min-height: 64px;
        padding: 0.55rem;
    }

    .ticket h2 {
        padding-top: 0.4rem;
    }

    .ticket-list {
        padding-inline: 0.6rem;
    }

    .ticket-total {
        padding: 0.6rem 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Ticket line name is a button (tap to set course/note); reset its chrome and
   allow the optional meta line ("G2 · no onions") to show under the name.
   --------------------------------------------------------------------------- */
.ticket-line-name {
    grid-area: name;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    color: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
}

.ticket-line-name:hover {
    color: var(--color-text);
}

.ticket-line-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--color-warn);
    margin-top: 1px;
}

/* ---------------------------------------------------------------------------
   Floor plan (Tischplan): tap-to-select table map, colour = live occupancy.
   --------------------------------------------------------------------------- */
.floorplan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.floorplan-overlay.open {
    opacity: 1;
}

.floorplan-overlay[hidden] {
    display: none;
}

.floorplan-panel {
    width: 100%;
    max-width: 760px;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border,#2a2f3a);
    border-right: 1px solid var(--color-border,#2a2f3a);
}

.floorplan-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(0.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border,#2a2f3a);
}

.floorplan-head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.floorplan-head-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.self-order-alerts {
    flex: 0 0 auto;
    min-height: 0;
    max-height: min(42dvh, 360px);
    display: flex;
    flex-direction: column;
    margin: 0.85rem 1rem 0;
    border: 1px solid rgba(255, 176, 32, 0.72);
    border-left: 6px solid #ffb020;
    border-radius: 12px;
    background: linear-gradient(115deg, rgba(255, 176, 32, 0.18), rgba(255, 91, 75, 0.08));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.self-order-alerts[hidden] { display: none; }

.self-order-alert-head {
    flex: 0 0 auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem 0.65rem;
    color: #ffd586;
}

.self-order-alert-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 0.1rem;
}

.self-order-alert-head strong {
    color: #fff3d8;
    font-size: 1.02rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.self-order-alert-head span:not(.self-order-alert-pulse) {
    color: var(--color-text-dim);
    font-size: 0.82rem;
}

.self-order-alert-pulse {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ffb020;
    box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.7);
    animation: self-order-pulse 1.8s ease-out infinite;
}

.self-order-alert-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 213, 134, 0.42);
    border-radius: 10px;
    background: rgba(9, 12, 18, 0.28);
    color: #ffd586;
    cursor: pointer;
}

.self-order-alert-toggle:hover,
.self-order-alert-toggle:focus-visible {
    border-color: #ffb020;
    background: rgba(255, 176, 32, 0.16);
    color: #fff3d8;
}

.self-order-alert-toggle svg {
    transition: transform 160ms ease;
}

.self-order-alerts.is-collapsed .self-order-alert-toggle svg {
    transform: rotate(-90deg);
}

@keyframes self-order-pulse {
    70% { box-shadow: 0 0 0 10px rgba(255, 176, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); }
}

.self-order-alert-list {
    flex: 0 1 auto;
    min-height: 0;
    display: grid;
    max-height: min(32vh, 260px);
    overflow-y: auto;
    border-top: 1px solid rgba(255, 176, 32, 0.28);
}

.self-order-alert-list[hidden] { display: none; }

.self-order-alerts.is-collapsed .self-order-alert-head {
    padding-bottom: 0.8rem;
}

.self-order-alert-row {
    width: 100%;
    flex: 0 0 auto;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 12, 18, 0.34);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.self-order-alert-row:last-child { border-bottom: 0; }
.self-order-alert-row:hover,
.self-order-alert-row:focus-visible { background: rgba(255, 176, 32, 0.14); }
.self-order-alert-table { min-width: 0; font-weight: 750; }
.self-order-alert-detail { color: #ffd586; font-size: 0.84rem; }
.self-order-alert-arrow { color: #ffb020; font-size: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    .self-order-alert-pulse { animation: none; }
    .self-order-alert-toggle svg { transition: none; }
}

.floorplan-search-toggle {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.floorplan-search-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--color-info, #3b82f6) 68%, var(--color-border));
    background: color-mix(in srgb, var(--color-info, #3b82f6) 14%, var(--color-surface-2));
    color: color-mix(in srgb, var(--color-info, #3b82f6) 72%, white);
}

.floorplan-search-bar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-info, #3b82f6));
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.floorplan-search-bar[hidden] {
    display: none;
}

.floorplan-search-bar input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-info, #3b82f6) 34%, var(--color-border));
    border-radius: 10px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1rem;
}

.floorplan-search-bar input:focus-visible {
    outline: 2px solid var(--color-info, #3b82f6);
    outline-offset: 1px;
}

.floorplan-search-count {
    min-width: 4.5rem;
    color: var(--color-text-dim);
    font-size: 0.78rem;
    text-align: right;
    white-space: nowrap;
}

.floorplan-search-empty {
    grid-column: 1 / -1;
}

.floorplan-grid {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
}

.floorplan-empty {
    min-height: min(60vh, 420px);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-text-dim);
    text-align: center;
}

.floorplan-empty p {
    max-width: 32ch;
    margin: 0;
}

.floorplan-zone {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
    margin: 0.75rem 0 0.4rem;
}

.floorplan-zone-back {
    min-height: 40px;
    padding-inline: 0.8rem;
}

.floorplan-zone-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.floorplan-zone-choice {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
}

.floorplan-zone-choice strong {
    font-size: 1.05rem;
}

.floorplan-zone-choice span {
    color: var(--color-text-dim);
    font-size: 0.82rem;
}

.floorplan-zone-choice:hover,
.floorplan-zone-choice:focus-visible {
    border-color: var(--color-info, #3b82f6);
}

.floorplan-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.6rem;
}

.table-tile {
    aspect-ratio: 1 / 1;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: var(--radius);
    border: 2px solid var(--color-border,#2a2f3a);
    background: var(--color-surface);
    color: var(--color-text);
}

.table-tile.free {
    border-color: rgba(16, 185, 129, 0.5);
}

.table-tile.occupied {
    border-color: var(--color-warn);
    background: rgba(212, 160, 23, 0.1);
}

.table-tile.selected {
    outline: 3px solid var(--color-info, #3b82f6);
    outline-offset: 1px;
}

.table-tile:active {
    transform: translateY(1px);
}

.table-tile-num {
    font-size: 1.5rem;
    font-weight: 700;
    /* A long table number must never bleed across neighbouring tiles: cap the
       width and ellipsis-clip as a backstop; waiter-floor.js adds .num-long /
       .num-xlong to step the font down for long numbers. */
    max-width: 100%;
    padding: 0 0.2rem;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-tile-num.num-long {
    font-size: 1.05rem;
}

.table-tile-num.num-xlong {
    font-size: 0.8rem;
}

.table-tile-total {
    font-size: 0.8rem;
    color: var(--color-warn);
}

.table-tile-free {
    font-size: 0.75rem;
    color: var(--color-text-dim);
}

/* ---------------------------------------------------------------------------
   Sequential item checkout: select what one person pays, settle it, repeat.
   --------------------------------------------------------------------------- */
.split-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(2 6 12 / 76%);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.split-overlay.open {
    opacity: 1;
}

.split-overlay[hidden] {
    display: none;
}

.split-panel {
    width: 100%;
    max-width: 860px;
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgb(0 0 0 / 55%);
}

.split-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(1rem + env(safe-area-inset-top)) max(1.1rem, env(safe-area-inset-right)) 1rem max(1.1rem, env(safe-area-inset-left));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.split-head h2 {
    font-size: 1.25rem;
    margin: 0;
}

.split-kicker {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.split-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #2a2f3a);
    background: linear-gradient(90deg, rgb(16 185 129 / 8%), transparent 60%);
}

.split-intro strong {
    flex: 0 0 auto;
    color: var(--color-text);
    font-size: 1rem;
}

.split-hint {
    color: var(--color-text-dim);
    font-size: 0.9rem;
}

.split-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.split-progress {
    color: var(--color-text-dim);
    font-size: 0.82rem;
    font-weight: 750;
}

.split-retry-status {
    margin: 0.65rem 1.1rem 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 0.84rem;
    font-weight: 700;
}

.split-retry-status[hidden] {
    display: none;
}

.split-toolbar .btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 0.85rem;
}

.split-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.85rem 1.1rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.65rem;
    align-content: start;
    scrollbar-gutter: stable;
}

.split-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 92px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 12px;
    transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

.split-item.selected {
    background: linear-gradient(135deg, rgb(16 185 129 / 16%), rgb(16 185 129 / 5%));
    border-color: var(--color-primary);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.split-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.85rem;
    text-align: left;
    color: var(--color-text);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.split-item-main:active {
    background: rgb(255 255 255 / 4%);
}

.split-item-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.split-item-copy strong,
.split-item-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.split-item-copy strong {
    font-size: 0.98rem;
}

.split-item-copy span {
    color: var(--color-text-dim);
    font-size: 0.75rem;
}

.split-item-price {
    flex: 0 0 auto;
    font-weight: 750;
}

.split-item-controls {
    display: grid;
    grid-template-columns: 46px;
    align-content: stretch;
    background: rgb(255 255 255 / 2%);
    border-left: 1px solid var(--color-border, #2a2f3a);
}

.split-qty-btn {
    min-width: 46px;
    min-height: 46px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.split-qty-btn:first-child {
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.split-qty-btn:last-child {
    border-top: 1px solid var(--color-border, #2a2f3a);
}

.split-qty-btn:disabled {
    color: var(--color-text-dim);
    opacity: 0.35;
}

.split-qty-count {
    padding: 0.32rem 0.15rem;
    text-align: center;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.split-foot {
    padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border, #2a2f3a);
    background: var(--color-surface);
    box-shadow: 0 -14px 40px rgb(0 0 0 / 24%);
}

.split-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
}

.split-totals > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem 0.7rem;
    background: rgb(255 255 255 / 3%);
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 9px;
}

.split-totals span {
    color: var(--color-text-dim);
    font-size: 0.7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.split-totals strong {
    font-size: 1.12rem;
}

.split-totals > div:first-child strong {
    color: var(--color-primary);
}

.split-actions {
    display: grid;
    grid-template-columns: minmax(96px, 0.35fr) minmax(180px, 1fr);
    gap: 0.65rem;
}

.split-actions .btn {
    min-height: 52px;
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 600px) {
    .split-overlay {
        align-items: stretch;
        padding: 0;
    }

    .split-panel {
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .split-intro,
    .split-toolbar,
    .split-head,
    .split-foot {
        padding-inline: 0.8rem;
    }

    .split-items {
        grid-template-columns: 1fr;
        padding-inline: 0.8rem;
    }

    .allocation-lists {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        padding-inline: 0.8rem;
    }
}

/* ---------------------------------------------------------------------------
   Overscroll containment: a pull-to-refresh on the document (or scroll-chaining
   out of an inner list) reloads the page and wipes the in-progress ticket. Pin
   the root scroller and every inner scroll region so the gesture never bubbles
   up to the browser's native refresh.
   --------------------------------------------------------------------------- */
html,
body {
    overscroll-behavior: none;
}

.items,
.categories,
.ticket-list {
    overscroll-behavior: none;
}

/* ---------------------------------------------------------------------------
   Tender / payment overlay (Kassieren): method choice, numeric keypad, tip
   chips and the Rückgeld (change-due) display. Full-screen overlay mirroring
   the #floorplan / #split pattern. The inner .tender-panel wrapper mirrors
   .floorplan-panel / .split-panel.
   --------------------------------------------------------------------------- */
.tender-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tender-overlay.open {
    opacity: 1;
}

.tender-overlay[hidden] {
    display: none;
}

.tender-panel {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border, #2a2f3a);
    border-right: 1px solid var(--color-border, #2a2f3a);
    overflow-y: auto;
    overscroll-behavior: none;
    padding-bottom: env(safe-area-inset-bottom);
}

.tender-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.tender-head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.tender-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.8rem 1rem 0;
    padding: 0.75rem 0.85rem;
    background: rgb(255 255 255 / 3%);
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 10px;
    font-weight: 750;
}

.tender-total-row .mono {
    color: var(--color-primary);
    font-size: 1.35rem;
}

.tender-tip > span {
    display: block;
    padding: 0.25rem 1rem 0.55rem;
    color: var(--color-text-dim);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tender-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: auto;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border, #2a2f3a);
    box-shadow: 0 -14px 36px rgb(0 0 0 / 25%);
}

.tender-foot .btn {
    min-height: 52px;
    font-weight: 800;
}

.tender-action-status {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-warn);
    font-size: 0.78rem;
    font-weight: 750;
    text-align: center;
}

.tender-action-status[hidden] { display: none; }

.tender-foot .btn[hidden] {
    display: none;
}

#tender-confirm,
.tender-foot.single-secondary > .btn:not([hidden]) {
    grid-column: 1 / -1;
}

/* Method chooser — large tap targets (>=56px), 2-up on phones. */
.tender-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
    padding: 1rem;
}

.tender-method {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
}

.tender-method:active {
    transform: translateY(1px);
    background: var(--color-surface-2);
}

.tender-method.selected {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    background: rgba(16, 185, 129, 0.12);
}

/* Numeric keypad — 3x4 grid of big targets. Styles any button child so it does
   not depend on a specific per-key class name. */
.tender-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.tender-keypad button {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
}

.tender-keypad button:active {
    transform: translateY(1px);
    background: var(--color-surface-3, #2c313c);
}

/* Amount tendered (Gegeben). */
.tender-given {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border, #2a2f3a);
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tender-given > :first-child {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}

/* Change due (Rückgeld) — large, high-contrast, success-tinted. */
.tender-change {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0.5rem 1rem 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid var(--color-primary-strong, #047857);
    color: var(--color-text);
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tender-change > :first-child {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}

.tender-change > :last-child {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Insufficient tender (given < total): flip the frame to danger. */
.tender-change.short,
.tender-change.insufficient {
    background: rgba(192, 57, 43, 0.16);
    border-color: var(--color-danger-strong, #b91c1c);
}

/* Tip chips (Trinkgeld). */
.tip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem;
}

.tip-chip {
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.tip-chip:active {
    transform: translateY(1px);
}

.tip-chip.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Search bar above the item grid — filter the menu by name.
   --------------------------------------------------------------------------- */
.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.search-bar[hidden] {
    display: none;
}

.search-bar input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.75rem;
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

.search-bar input::placeholder {
    color: var(--color-text-dim);
}

.search-bar input:focus-visible {
    outline: 2px solid var(--color-info, #3b82f6);
    outline-offset: 1px;
}

@media (max-width: 720px) {
    /* Search is a focused menu-picking mode on phones/tablets. The running Bon
       stays intact but leaves the visual viewport while the keyboard is open;
       otherwise its fixed mobile row plus the checkout footer consume nearly
       all space and cover the actual search results. */
    body.search-active .waiter-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "items";
    }

    body.search-active .categories,
    body.search-active .ticket,
    body.search-active .bottombar {
        display: none;
    }

    body.search-active .items {
        grid-area: items;
    }
}

@media (max-width: 520px) {
    /* Keep only table context in the header during focused search. The close
       button beside the input restores status/settings/checkout immediately. */
    body.search-active .topbar {
        grid-template-columns: auto;
        grid-template-areas: "primary";
        justify-content: start;
    }

    body.search-active .topbar-center,
    body.search-active .topbar-right {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Floor-tile elapsed-time line (Verweildauer) — small line under the table
   number. Colour ramp signals a table that has been sitting too long:
   <30min default (dim) · 30-60min amber (.warn) · >60min red (.danger).
   Modifier classes .warn / .danger mirror the existing .free / .occupied tile
   convention and the warn/danger status tokens.
   --------------------------------------------------------------------------- */
.table-tile-elapsed {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--color-text-dim);
    font-variant-numeric: tabular-nums;
}

.table-tile-elapsed.warn {
    color: var(--status-warn, var(--color-warn));
    font-weight: 600;
}

.table-tile-elapsed.danger {
    color: var(--status-danger, var(--color-danger));
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Table-detail bottom sheet — tap a floor tile to reveal its open ticket /
   actions. Slides up from the bottom edge, clears the home-indicator inset.
   --------------------------------------------------------------------------- */
.table-detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    max-height: 80dvh;
    overflow-y: auto;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border, #2a2f3a);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
    padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

.table-detail.open {
    transform: translateY(0);
}

.table-detail[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Respect the OS "reduce motion" setting: the connectivity badge's conn-pulse
   is an infinite animation, and overlays/sheets animate opacity/transform.
   Neutralise all of it for users who opt out of motion.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Reconciliation: components emitted by waiter.js/index.html that the class
   contract didn't cover. Detail-overlay backdrop glue: waiter.js toggles
   'open' on the OVERLAY (#table-detail-overlay), so the sheet's slide-up must
   key off the overlay state, not .table-detail.open.
   --------------------------------------------------------------------------- */
.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1240;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.detail-overlay.open { opacity: 1; }
.detail-overlay[hidden] { display: none; }
.detail-overlay.open .table-detail { transform: translateY(0); }

.table-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.table-detail-head h2 { margin: 0; font-size: 1.1rem; }

.table-detail-meta {
    color: var(--color-text-dim);
    font-size: 0.85rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.table-detail-body { display: flex; flex-direction: column; gap: 0.5rem; }
.table-detail-lines { display: flex; flex-direction: column; gap: 0.25rem; }

.table-detail-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.table-detail-line-meta { color: var(--color-text-dim); font-size: 0.8rem; }

.table-detail-line > span:first-child { flex: 1 1 auto; }
.table-detail-line-actions { display: inline-flex; gap: 0.25rem; }
.table-detail-line-action {
    min-width: 32px;
    min-height: 32px;
    padding: 0 0.4rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-dim);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}
.table-detail-line-action.is-remove { color: var(--color-danger, #e06060); }
.table-detail-line-action:disabled { opacity: 0.4; cursor: default; }

.table-detail-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    border-top: 1px solid var(--color-border, #2a2f3a);
    padding-top: 0.5rem;
}

.table-detail-foot { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.table-detail-foot .btn { flex: 1 1 auto; min-height: 48px; }

/* Tender modal sub-components */
.tender-cash { display: flex; flex-direction: column; gap: 0.5rem; }
.tender-cash[hidden] { display: none; }
.tender-key-exact { background: var(--color-primary-strong, #047857); color: #fff; }
.tip-amount { color: var(--color-text-dim); font-size: 0.9rem; }

/* Floor plan + grid extras */
.table-tile-reserved {
    font-size: 0.68rem;
    color: var(--status-info, #60a5fa);
    border: 1px solid var(--status-info-border, rgba(96, 165, 250, 0.4));
    border-radius: 999px;
    padding: 0 0.4rem;
}

.item-unavailable { opacity: 0.45; }
.item-unavailable .name { text-decoration: line-through; }

/* ===========================================================================
   Sync status (#92) + settings / low-bandwidth mode (#94)
   =========================================================================== */

/* conn-badge is now a <button>; strip default button chrome, keep the pill look.
   background/border MUST be cleared too: the UA button style paints a white
   face, and the badge's near-white label is unreadable on it (white-on-white).
   font:inherit would also drop the pill metrics (button.conn-badge outranks
   .conn-badge), so font-size/line-height are restored explicitly after it. */
button.conn-badge { cursor: pointer; font: inherit; font-size: 0.8rem; line-height: 1; background: none; border: none; padding: 0; color: var(--color-text-dim); }
button.conn-badge:focus-visible { outline: 2px solid var(--color-info); outline-offset: 2px; }

.sync-panel { max-width: 520px; }
.sync-state { font-weight: 600; margin: 0 0 0.6rem; }
.sync-state.ok { color: var(--status-success); }
.sync-state.bad { color: var(--status-warn); }
.sync-h { font-size: 0.95rem; margin: 0.9rem 0 0.4rem; }
.sync-h.danger { color: var(--status-danger); }
.sync-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sync-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.sync-badge { font-size: 0.7rem; line-height: 1; }
.sync-badge.queued { color: var(--status-warn); }
.sync-badge.failed { color: var(--status-danger); }

.settings-row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.5rem 0; }
.settings-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--color-primary); }
.settings-row span { display: flex; flex-direction: column; gap: 0.15rem; }
.settings-row small { font-size: 0.8rem; }
@media (max-width: 480px) {
    .settings-row.settings-kitchen-row { flex-direction: column; align-items: stretch; }
    .settings-kitchen-row select { width: 100%; }
}

.settings-language-row {
    justify-content: space-between;
    align-items: center;
}

.settings-language {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(52px, 1fr));
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
}

.settings-language .btn {
    min-height: 42px;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-dim);
}

.settings-language .btn.active {
    background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-2));
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.settings-language .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.settings-account-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #2a2f3a);
}

.settings-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
}

.settings-account-actions small { font-size: 0.8rem; }

@media (max-width: 480px) {
    .settings-language-row,
    .settings-account-actions {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-language-row { flex-direction: column; }
    .settings-language { align-self: stretch; }
}

/* Low-bandwidth mode: drop non-essential effects to cut GPU/paint work. */
body.low-bw * { box-shadow: none !important; text-shadow: none !important; }
body.low-bw *,
body.low-bw *::before,
body.low-bw *::after { animation: none !important; transition: none !important; backdrop-filter: none !important; }
body.low-bw .table-tile-elapsed { animation: none !important; }

/* -------------------------------------------------------------------------
   Operational safety layer — dense, explicit service states.               */

.operational-banner {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0.42rem max(0.85rem, env(safe-area-inset-right)) 0.42rem max(0.85rem, env(safe-area-inset-left));
    border-bottom: 1px solid color-mix(in srgb, var(--color-warn, #f59e0b) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-warn, #f59e0b) 12%, var(--color-surface));
    color: #fde68a;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
}

.operational-banner.danger {
    border-color: color-mix(in srgb, var(--status-danger, #ef4444) 55%, var(--color-border));
    background: color-mix(in srgb, var(--status-danger, #ef4444) 14%, var(--color-surface));
    color: #fecaca;
}

.conn-badge.error .conn-dot {
    background: var(--status-danger, #ef4444);
    box-shadow: 0 0 0 3px rgb(239 68 68 / 22%);
}

.conn-badge.error .conn-label {
    color: #fecaca;
    font-weight: 800;
}

.ticket-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem 0.55rem;
    border-bottom: 1px solid var(--color-border, #2a2f3a);
}

.ticket-heading h2 {
    margin: 0;
    padding: 0;
}

.ticket-context {
    margin-top: 0.22rem;
    color: var(--color-text-dim);
    font-size: 0.78rem;
    font-weight: 650;
}

.ticket-draft-label {
    flex: 0 0 auto;
    padding: 0.27rem 0.48rem;
    border: 1px solid rgb(59 130 246 / 45%);
    border-radius: 999px;
    background: rgb(59 130 246 / 10%);
    color: #bfdbfe;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.item-card {
    position: relative;
    min-height: 88px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.38rem;
    overflow: hidden;
}

/* The first hold stage arms quantity/note; releasing then opens its form. A
   second, slower stage progresses toward the 20s unavailable confirmation.
   Neither stage mutates directly and movement/cancel clears both immediately. */
.item-card.item-hold-pending { border-color: var(--color-primary); }
.item-card.item-hold-pending::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    z-index: 2;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    animation: item-hold-progress var(--item-details-hold-duration, 1000ms) linear forwards;
    pointer-events: none;
}

.item-card.item-hold-details-ready {
    border-color: var(--color-warn);
}

.item-card.item-hold-details-ready::before {
    content: attr(data-order-details-hint);
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0.65rem;
    background: rgb(10 13 18 / 90%);
    color: #fff7ed;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.015em;
    pointer-events: none;
}

.item-card.item-hold-details-ready::after {
    content: '';
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--color-danger, #ef4444);
    transform: scaleX(0);
    transform-origin: left;
    animation: item-hold-progress var(--item-sold-out-hold-duration, 19000ms) linear forwards;
    pointer-events: none;
}

@keyframes item-hold-progress {
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .item-card.item-hold-pending::after,
    .item-card.item-hold-details-ready::after {
        animation: none;
        display: none;
    }
}

.item-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
}

.item-allergens {
    color: var(--color-text-dim);
    font-size: 0.68rem;
    line-height: 1.15;
}

.item-status {
    max-width: 55%;
    color: #fecaca;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: right;
    text-decoration: none;
}

.cat-btn-recent {
    --category-color: #f59e0b;
    --category-foreground: #000000;
}

.oo-toast {
    display: none;
    align-items: center;
    gap: 0.8rem;
}

.oo-toast.visible {
    display: flex;
}

.toast-action {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 8px;
    background: rgb(255 255 255 / 8%);
    color: #fff;
    font: inherit;
    font-weight: 800;
}

#fire-btn.has-failed {
    border-color: var(--status-danger, #ef4444);
    background: color-mix(in srgb, var(--status-danger, #ef4444) 18%, var(--color-surface-2));
    color: #fee2e2;
    box-shadow: inset 0 0 0 1px rgb(239 68 68 / 30%);
}

#fire-btn.has-failed .fire-pending {
    background: var(--status-danger, #ef4444);
    color: white;
}

.table-tile-signal {
    width: 100%;
    padding: 0.14rem 0.3rem;
    border-radius: 5px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.table-tile-signal.draft {
    background: rgb(59 130 246 / 16%);
    color: #bfdbfe;
}

.table-tile-signal.pending {
    background: rgb(245 158 11 / 17%);
    color: #fde68a;
}

.table-tile-signal.failed {
    background: rgb(239 68 68 / 18%);
    color: #fecaca;
}

.table-tile-signal.success {
    background: rgb(16 185 129 / 14%);
    color: #a7f3d0;
}

.table-tile.has-failed {
    border-color: var(--status-danger, #ef4444);
}

.sync-failure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.sync-inline-action {
    flex: 0 0 auto;
    min-height: 42px;
}

.sync-history li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.sync-badge.ok {
    color: var(--color-primary);
}

.tender-context {
    margin: 0.75rem 1rem 0.15rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 8px;
    background: rgb(255 255 255 / 3%);
    color: var(--color-text-dim);
    font-size: 0.82rem;
    font-weight: 750;
}

.receipt-preview.visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.receipt-preview {
    border-color: var(--color-primary);
    background: var(--color-surface-2);
    color: var(--color-text);
    box-shadow: 0 16px 45px rgb(0 0 0 / 45%);
}

.receipt-preview-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.receipt-preview-copy span {
    overflow: hidden;
    color: var(--color-text-dim);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipt-reprint {
    flex: 0 0 auto;
    min-height: 44px;
}

.waiter-main button,
.bottombar button,
.tender-panel button,
.detail-overlay button,
.floorplan-overlay button,
.split-overlay button {
    touch-action: manipulation;
}

.qty-btn,
.qty-val,
.cat-btn,
.topbar .btn,
.search-bar .btn,
.search-bar input {
    min-height: 48px;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
}

button:disabled,
button[aria-disabled="true"] {
    opacity: 0.42;
    filter: saturate(0.35);
    box-shadow: none !important;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .ticket-heading {
        padding: 0.72rem 0.8rem 0.5rem;
    }

    .ticket-draft-label {
        font-size: 0.58rem;
    }

    .operational-banner {
        font-size: 0.72rem;
    }
}

@media (max-width: 520px) {
    .topbar .btn,
    .search-bar input,
    .cat-btn {
        min-height: 48px;
    }

    .categories .cat-btn {
        height: 58px;
        max-height: 58px;
        overflow: hidden;
    }

    .topbar .topbar-icon {
        width: 48px;
        flex-basis: 48px;
    }

    .item-card {
        min-height: 78px !important;
    }

    .receipt-preview.visible {
        left: max(0.55rem, env(safe-area-inset-left));
        right: max(0.55rem, env(safe-area-inset-right));
        max-width: none;
        transform: none;
    }

    body.search-active .operational-banner {
        display: none;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .topbar {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .topbar .btn {
        min-height: 40px;
    }

    .operational-banner {
        min-height: 26px;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .bottombar {
        padding-top: 0.42rem;
        padding-bottom: max(0.42rem, env(safe-area-inset-bottom));
    }
}

/* ===========================================================================
   Unified ordering / allocation workspace
   Ticket is the primary information surface; the menu deck occupies the easy
   thumb side. Phones use the approved 40/60 vertical split.
   =========================================================================== */

.waiter-main {
    grid-template-columns: minmax(320px, 1.15fr) minmax(320px, 1fr);
    grid-template-areas: "ticket deck";
}

.menu-deck {
    grid-area: deck;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    overflow: hidden;
}

.ticket {
    grid-area: ticket;
    border-left: 0;
    border-right: 1px solid var(--color-border, #2a2f3a);
}

.article-row {
    min-width: 0;
}

.ticket-line.article-row {
    grid-template-columns: 48px minmax(0, 1fr) auto 44px 44px;
    grid-template-areas: "qty name price decrease increase";
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
}

.ticket-line .article-row-qty {
    grid-area: qty;
    align-self: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-2));
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.ticket-line .article-row-copy {
    grid-area: name;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    position: relative;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.ticket-line .article-row-price {
    grid-area: price;
    align-self: center;
    white-space: nowrap;
}

.ticket-qty-action {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 10px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    touch-action: manipulation;
}

.ticket-qty-action:active {
    transform: translateY(1px);
    background: var(--color-surface-3, #2c313c);
}

.ticket-qty-decrease {
    grid-area: decrease;
    color: color-mix(in srgb, var(--color-danger) 78%, var(--color-text));
}

.ticket-qty-increase {
    grid-area: increase;
    border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface-2));
    color: color-mix(in srgb, var(--color-primary) 72%, white);
}

.ticket-line-hold-pending::after {
    content: "";
    position: absolute;
    inset: auto 0 -0.3rem 0;
    height: 2px;
    border-radius: 999px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    animation: ticket-line-edit-hold var(--ticket-line-edit-hold-duration, 2000ms) linear forwards;
}

@keyframes ticket-line-edit-hold {
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ticket-line-hold-pending::after { animation: none; transform: scaleX(1); }
}

/* Two allocation buckets: one article per row, with an explicit directional
   control. Price always represents the quantity displayed at the far left. */
.allocation-lists {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0.75rem 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 0.8rem;
    align-content: stretch;
    scrollbar-gutter: stable;
}

.allocation-bucket {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 13px;
    background: var(--color-surface);
}

.active-bucket {
    border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
}

.allocation-heading {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.62rem 0.7rem;
    border-bottom: 1px solid var(--color-border, #2a2f3a);
    background: rgb(255 255 255 / 3%);
}

.allocation-heading h3 {
    margin: 0;
    font-size: 0.88rem;
    letter-spacing: 0.025em;
}

.active-bucket .allocation-heading h3 { color: #a7f3d0; }
.allocation-move-all {
    min-height: 48px;
    padding: 0.35rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 800;
}

.allocation-rows {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.allocation-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 62px;
    padding: 0.48rem 0.5rem 0.48rem 0.7rem;
    border-bottom: 1px dashed var(--color-border, #2a2f3a);
    transition: opacity 160ms ease, background 160ms ease;
}

.allocation-row:last-child { border-bottom: 0; }
.allocation-row.is-active { background: rgb(16 185 129 / 7%); }

.allocation-row .article-row-qty {
    color: var(--color-primary);
    font-size: 1.05rem;
    text-align: left;
}

.article-row-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.article-row-copy > strong {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.16;
}

.article-row-copy > small {
    overflow: hidden;
    color: var(--color-text-dim);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-row-price {
    white-space: nowrap;
    font-size: 0.9rem;
}

.allocation-arrow {
    min-width: 52px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.15rem;
    padding: 0 0.35rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 9px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 900;
}

.allocation-empty {
    margin: 0;
    padding: 1rem;
    color: var(--color-text-dim);
    font-size: 0.78rem;
    text-align: center;
}

.split-transfer-options {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(180px, 1.15fr);
    align-items: end;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border, #2a2f3a);
    background: rgb(255 255 255 / 2%);
}

.split-transfer-options[hidden] { display: none; }

.split-transfer-options label {
    display: grid;
    gap: 0.25rem;
    color: var(--color-text-dim);
    font-size: 0.7rem;
    font-weight: 750;
}

.split-transfer-options select,
.split-transfer-options input {
    min-width: 0;
    min-height: 46px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 8px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font: inherit;
}

.account-kind-badge {
    align-self: end;
    max-width: 14rem;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.62rem;
    border: 1px solid rgb(59 130 246 / 45%);
    border-radius: 8px;
    background: rgb(59 130 246 / 10%);
    color: #bfdbfe;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
}

.account-kind-badge.consumption {
    border-color: rgb(245 158 11 / 48%);
    background: rgb(245 158 11 / 10%);
    color: #fde68a;
}

.split-actions { grid-template-columns: 1fr; }

/* Cash-first payment: compact method dropdown and one above-the-fold status row. */
.tender-panel { overflow-y: auto; }

.tender-method-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.55rem 1rem;
    color: var(--color-text-dim);
    font-size: 0.76rem;
    font-weight: 750;
}

.tender-methods { display: block; padding: 0; }

.tender-method-select {
    min-height: 44px;
    min-width: 8.5rem;
    padding: 0.4rem 2rem 0.4rem 0.72rem;
    border: 1px solid var(--color-primary);
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2));
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
}

.tender-cash-summary {
    display: grid;
    grid-template-columns: auto 1fr 1.25fr;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0 1rem 0.55rem;
}

.tender-exact,
.tender-cash-summary .tender-given,
.tender-cash-summary .tender-change {
    min-height: 56px;
    margin: 0;
    padding: 0.5rem 0.65rem;
}

.tender-exact {
    min-width: 76px;
    border-color: var(--color-primary-strong, #047857);
    background: var(--color-primary-strong, #047857);
    color: #fff;
    font-weight: 850;
}

.tender-cash-summary .tender-given,
.tender-cash-summary .tender-change {
    display: grid;
    align-content: center;
    gap: 0.14rem;
    font-size: 1rem;
}

.tender-cash-summary .tender-change > :last-child {
    font-size: clamp(0.9rem, 4vw, 1.25rem);
}

.tender-change.no-calculation {
    border-color: var(--color-border, #2a2f3a);
    background: var(--color-surface);
}

.tender-keypad {
    gap: 0.38rem;
    padding-bottom: 0.55rem;
}

.tender-keypad[hidden] { display: none; }
.tender-keypad button { min-height: 48px; font-size: 1.1rem; }
.tender-tip > span { padding-bottom: 0.3rem; }
.tip-chips { padding-bottom: 0.55rem; }
.tip-chip { min-height: 40px; padding: 0.38rem 0.72rem; font-size: 0.82rem; }

/* Dedicated Accounts tab/list. */
.accounts-tab {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    color: #bfdbfe;
}

.accounts-tab-label { font-size: 0.78rem; font-weight: 800; }
.accounts-panel { max-width: 760px; }
.accounts-head > div { display: grid; gap: 0.1rem; }
.accounts-head h2 { margin: 0; }

.accounts-offline,
.accounts-empty {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 10px;
    color: var(--color-text-dim);
    text-align: center;
}

.accounts-offline {
    border-color: rgb(245 158 11 / 46%);
    background: rgb(245 158 11 / 9%);
    color: #fde68a;
}

.accounts-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem;
    display: grid;
    gap: 0.55rem;
}

.account-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 68px;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 11px;
    background: var(--color-surface);
}

.account-row.archived { border-style: dashed; }
.account-row-copy { display: grid; gap: 0.2rem; min-width: 0; }
.account-row-copy strong { overflow-wrap: anywhere; }
.account-row-copy span { color: var(--color-text-dim); font-size: 0.72rem; }
.account-row-total { color: var(--color-primary); }
.account-settle { min-height: 46px; }

.settings-select-row {
    justify-content: space-between;
    align-items: center;
}

.settings-select-row select {
    flex: 0 0 min(48%, 220px);
    min-height: 46px;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border, #2a2f3a);
    border-radius: 8px;
    background: var(--color-surface-2);
    color: var(--color-text);
}

body.kds-mode #accounts-btn { display: none !important; }

@media (max-width: 720px) {
    body.search-active .waiter-main {
        grid-template-areas: "deck";
    }

    body.search-active .menu-deck {
        grid-area: deck;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "items";
    }
}

@media (max-width: 720px) and (orientation: portrait) {
    .waiter-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-areas:
            "ticket"
            "deck";
    }

    .ticket {
        border-right: 0;
        border-bottom: 1px solid var(--color-border, #2a2f3a);
    }

    .menu-deck {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas: "cats" "items";
    }

    .menu-deck .categories {
        grid-area: cats;
        flex-direction: row;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.36rem 0.5rem;
        border-right: 0;
        border-bottom: 1px solid var(--color-border, #2a2f3a);
    }

    .menu-deck .cat-btn {
        min-width: 92px;
        max-width: 142px;
        min-height: 48px;
    }

    .menu-deck .items { grid-area: items; }

    .allocation-lists {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        padding-inline: 0.75rem;
    }

    .split-transfer-options {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .split-transfer-options label:last-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .accounts-tab-label { display: none; }
    .accounts-tab { width: 48px; flex: 0 0 48px; padding: 0; }

    .ticket-heading { padding-block: 0.48rem 0.35rem; }
    .ticket-list { padding-inline: 0.55rem; }
    .ticket-line.article-row {
        grid-template-columns: 48px minmax(0, 1fr) 44px 44px;
        grid-template-areas:
            "qty name decrease increase"
            "qty price decrease increase";
        gap: 0.2rem 0.45rem;
        padding-block: 0.38rem;
    }
    .ticket-line .article-row-price { justify-self: start; font-size: 0.82rem; }
    .ticket-line .article-row-qty { min-height: 48px; }
    .ticket-total { padding-block: 0.48rem; }

    .floorplan-search-bar {
        grid-template-columns: minmax(0, 1fr) 44px;
        padding-inline: 0.75rem;
    }
    .floorplan-search-count { display: none; }

    .allocation-row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 0.42rem;
        padding-left: 0.55rem;
    }

    .allocation-heading { position: sticky; top: 0; z-index: 1; }
    .split-transfer-options { grid-template-columns: 1fr; }
    .split-transfer-options label:last-child { grid-column: auto; }
    .account-kind-badge { max-width: none; }

    .tender-context { margin-top: 0.45rem; }
    .tender-total-row { margin-top: 0.45rem; padding-block: 0.55rem; }
    .tender-method-row { padding-block: 0.4rem; }
    .tender-cash-summary { grid-template-columns: auto minmax(72px, 0.8fr) minmax(108px, 1.2fr); }
    .tender-keypad { padding-inline: 1rem; }

    .account-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .account-settle { grid-column: 1 / -1; width: 100%; }
}

@media (max-height: 620px) and (orientation: landscape) {
    .ticket-heading { padding-block: 0.45rem 0.3rem; }
    .ticket-total { padding-block: 0.45rem; }
    .tender-head { padding-block: 0.45rem; }
    .tender-context { margin-top: 0.35rem; padding-block: 0.38rem; }
    .tender-total-row { margin-top: 0.35rem; padding-block: 0.45rem; }
    .tender-keypad button { min-height: 42px; }
}